跨屏设计规范

news2024/11/17 17:36:41

跨屏设计规范

以windows10x 为例,其在具体交互上,到底有哪些常见的交互模式和硬件要如何结合

6.1跨平台的双屏交互设计逻辑

这种那个品的设计范式,其实是跨平台的通用规则, 在很大程度上,这套交互逻辑是不受操作系统限制的,在开发文档当中,除了很具体展示出分别在andorid平台和windows10x平台上的界面控件和交互设计范例,而且还加入了相关的代码段示例,具体实现方式。

6.1.1 双屏应用交互模式

img

6.1.2画布拓展模式

画布拓展模式是最简单的双屏模式,但是这种模式非常强大,它提供更多的屏幕控件,而不将内容限制在单一屏幕上,但该模式仅仅适用于一部分大面积UI画布,接缝最多是遮盖一部分只读内容,如果接缝遮盖了关键的UI交互空间,依然需要你进下调整UI以绕开接缝

价值扩展画布,允许用户在大画布模式下浏览信息和内容

获益的应用范例

  • 地图类应用
  • 绘图类应用
  • 主从屏模式

最常见的一种模式,是一屏幕显示列表,而另外一屏幕显示你所选中列表条目中的详细内容,他适用于与绝大多数有层级的偏列表类信息展示

价值将列表导航和详情页面区分开,让用户可以更加深入了解内容,同时还能够清出了解自己在整个列表中的位置

获益的应用范例

  • 具有列表或者图案的应用
  • 邮件类应用
  • 事务管理型应用
  • 照片或者图片类应用
  • 带有播放列表的音乐类应用
  • 具有复杂多样层级结构的应用

img

6.1.3 并排翻页模式

使用双屏天然的分割机制,来并列查看多个项目,比如页面和图片。而不用用户一个一个逐个查看

价值:使用类似书本的并排布局设计,来创造更好的阅读体验

img

获益的应用范例

  • 文档类的应用
  • 涉及到内容分页的应用
  • 专门用来阅读的应用
  • 带有画布和画板类控件的应用

6.1.4双屏对比模式

显示同一文档中的不同形态,以无缝的方式给用户带来更多的信息,实现通过两个选项卡打开类似的文档、文件进行对比乃至于更多的操作

img

  • 价值:在同一应用类,使用同一容器来显示多个视图,通过并排显示进行对比和其他操作

  • 涉及到并排显示从而进行前后对比(比如程序和文档预览)的编辑类工具

  • 支持内容和相应上下文信息展示的应用(比如餐厅的地图和其他文本信息的并列展示)

  • 让用户进行相似项目的并列对比

  • 使用两个相同空间和画布来显示内容,但是各自保持独立(比如笔记类应用,一屏绘图一屏做笔记)

6.1.5伴行面板模式

模式是将一屏当中被选中元素所涉及到的,原本被隐藏的下级菜单,或者下级信息,在另外一个屏幕中显示出来,达到充分利用屏幕空间的目的,根据不同的使用场景,你需要针对横屏和竖屏模式进行调试,选择合适的展示方式

img

价值:将预先买入到应用中的次级信息,通过另外一屏展示出来,这样的多层级展示,补充上下文环境,增加了交互的维度。这种模式不急能够将用户所获取的内容和需要交互的工具区分开,而且使得用户对于不同功能、目的的的内容,区分开来,有选择的使用,在双横平模式下,上屏显示内容,下屏幕进行交互,可以带来符合语境和人体工程学的体验

获益的应用范例

有多层级的应用,将辅助性的、上下文信息显示在主屏旁边

  • 图像和绘图类的创意工具
  • 音乐和视频类的剪辑工具
  • 游戏类的应用

6.1.6外设计交互模式

使用windows10x的双屏硬件还有一个独特的功能wonderbar

6.2wonder bar的人体工程学优势

img

wonderbar支持用户以更加传统的笔记本电脑模式在双屏设备上进行操作,同时强大的定制性,让wonderbar成为了出色的交互中控台,无论是切换音乐,滚动页面,还是搭配输入法选词,他都有着便捷的特性

6.2.1 wonderbar的设计原则

随时可以精确输入,对于涉及到生产力的任务和操作,精确输入是无价的。wonderbar应该确保用户能够精确地操作,细致的准确的导航

wonderbar应该是可预测的,用户应该有能力在自己认为合适的情况下,享受wonderbar带来的好处,他应该遵循分层模型(后面介绍),并且他应该和整个windows10x的导航体系保持一致

体验并非仅仅局限于wonderbar:并非每种屏幕状态都提供wonderbar,因此用户不在笔记本模式下的时候,用户不应该因为wonderbar的缺失而影响体验,wonderbar应该是在基础体验上的基础上提升效率,而不能因为缺失而影响整体交互。

始终考虑用户的情况,wonderbar的使用场景是用户所所处的状态、使用的姿势、屏幕的翻转情况息息相关,在设计wonderbar体验的时候,应该兼顾到这些因素

简单的体验是最好的:通过研究发现,对于多任务操作,低复杂度的轻量级操作是最为成功的wonderbar的设计理应优先考虑用户的舒适度和安心程度

6.2.2基础输入功能

windows10x中,wonderbar提供虚拟触摸板和多种不同类型的输入功能

6.3虚拟触控板

用户可以在wonderbar的触控板上使用熟悉的手势交互,包括多指交互,因此这对他们的工作流程是很自然的。触控板属于wonderbar当中集成的基本组件,此外,wonderbar还支持手写输入,这可以极大地方便用户在使用过程中随时记笔记,这是一种常见且直观的多任务操作模式img

6.3.1多功能输入门面板

它支持文本建议、表情符号、GIF等多种不同的输入内容,弥补键盘和手写的不足,其中文本建议相当于是备选文本或者文本的自动联想和填充。除此之外,他还能继承剪贴板,将已经复制的文本、图片甚至视频放在你面,某种意义上,甚至可以放一个媒体库进来

6.3.2应用集成

wonderbar还能为应用程序提供辅助性的控件、信息,为了实现这一功能,我们将windows10x已有的两个组件、概念(系统媒体播放组件和缩略叠加模式)直接和wonder’bar结合在一起

6.3.3系统媒体播放组件

调用windows中的systemmediatransportcontrols这个类就可以让你使用系统的媒体播放组件,然后你可以通过mediapalyer来播放所有多媒体

当wonderbaar出现的时候,媒体播放组件还会出现在wonderbar中,在wonderbar之外的actor center当中,同时可以针对多媒体进行管理

img

6.3.4缩放叠加模式

缩放叠加模式有一个更通俗的名称,就是画中画。他是窗口缩小化的一种模式。通常切换到这个模式之后,会出现一个长期处于最上层的浮动小窗口,其中包含应用的内容,如图所示。图6-6画中画图片

5000 字重磅干货!设计师必备跨屏设计规范(交互篇)

根据用户会使用画中画模式来看视频,计算器也可以使用缩略视图。方便随时调用和计算,和前面的媒体播放组件类似,当wonderbar出现的时候,缩略视图就会直接拉到wonderbar中显示,如果wonderbar关闭了,那么程序缩略视图会出现在屏幕一角,并且可以随便移动,如果你有多个缩略叠加窗口存在,那么默认情况下,最新创建的窗口会显示在wonderar当中,当然,用户可以选择显示哪个,但是不能再wonderbar中显示多个。

6.3.5可用的应用区域

由于windows10x可能会被应用到不同大小、不同分辨率不同比例的屏幕上,所以wonderbar的可用区域可能会随着硬件的变化而出现变化

另外,候选词触控区域也可能因为实体键盘和虚拟键盘的大小差异,而出现位置高低变化的可能性。当然,涉及到实体键盘还有很多wonderbar与之结合的玩法,这个就需要灵活对待了。

5000 字重磅干货!设计师必备跨屏设计规范(交互篇)

6.3.7z轴上的界面分层

由于wonderbar上涉及到的组件并不完全是平铺开,所以他们在虚拟的z轴上是存在上下级关系的。比如候选词触摸区,只有在输入文本的时候才会出现,有的就是原本就存在的,所以在设计的时候要注意前后关系。再比如缩略叠加窗口,也就是画中画窗口,最新创建的那个窗口会出现在最上面,用户可以通过taskview和taskbar来切换不同的画中画窗口。

5000 字重磅干货!设计师必备跨屏设计规范(交互篇)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/390415.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【CSS】CSS 复合选择器 ③ ( 并集选择器 | 并集选择器与后代选择器示例 )

文章目录一、并集选择器1、语法说明2、代码示例二、并集选择器与后代选择器示例1、添加注释2、HTML 结构3、后代选择器 14、后代选择器 25、并集选择器6、完整代码示例7、显示效果一、并集选择器 1、语法说明 并集选择器 可以选择 若干 基础选择器 选择出的 并集元素集合 ; 并集…

【亲测】Centos7系统非管理(root)权限编译NCNN

前言 由于使用的是集群,自己不具有管理员权限,所以以下所有的情况均在非管理员权限下进行安装,即该安装策略仅适用于普通用户构建自己的环境。 什么是NCNN ncnn是一款非常高效易用的深度学习推理框架,支持各种神经网络模型&#x…

文件异步多备常用方案

业务需求上经常存在需要对同一个文件进行双上传,上传到不同云存储桶,以防出现某一个云厂商因各种意外导致自身服务出现不可用的情况,当然,还有其他措施可以避免,现在只针对通过程序业务代码而双写存储的这个场景。 业务…

Java分布式解决方案(三)

文章目录🔥MySQL事务-MySQL中锁的分类🔥MySQL事务-MySQL中的死锁问题🔥MySQL事务-MySQL中锁的分类 MySQL中锁的分类 从本质上讲,锁是一种协调多个进程或多个线程对某一资源的访问的机制,MySQL使用锁和MVCC机制实现了…

了解基本的html和javascript

用记事本编辑一个文本文件&#xff0c;代码如下&#xff0c; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>my name is bo</title> <script>alert(hello); </script> </head> <body>&…

实验2 设计模式实验1

实验内容: 1. 使用简单工厂模式设计一个可以创建不同几何形状(Shape)&#xff0c;例如圆形 (Circle)、矩形(Rectangle)和三角形(Triangle)等的绘图工具类&#xff0c;每个几何图形均具 有绘制方法draw()和擦除方法erase()&#xff0c;要求在绘制不支持的几何图形时&#xff…

Android 基础知识4-3.6 ToggleButton(开关按钮)Switch(开关)详解

一、ToggleButton(开关按钮) 1.1、简介 ToggleButton 类似开关有开和关两种状态&#xff0c;不同的状态下可以有不同的文本。 public class ToggleButton extends CompoundButton Displays checked/unchecked states as a button with a "light" indicator …

CNN基础

Tip&#xff1a;仅供自己学习记录&#xff0c;酌情参考 1. 前馈与反馈神经网络 神经网络有前馈神经网络和反馈神经网络&#xff0c;前向神经网络也就是前馈神经网络。 前馈型神经网络各神经元接收前一层的输入&#xff0c;并输出给下一层&#xff0c;没有反馈。节点分为两类…

nacos-sdk-rust binding to NodeJs

广告时间 nacos-sdk-rust-binding-node : nacos-sdk-rust binding to NodeJs with napi. Tip: nacos-sdk-nodejs 仓库暂未提供 2.x gRPC 交互模式&#xff0c;为了能升级它&#xff0c;故而通过 node addon 方式调用 nacos-sdk-rust npm 包 -> https://www.npmjs.com/packa…

Spring系列-8 AOP使用与原理

背景 按照软件重构的思想&#xff0c;当多个类中存在相同的代码时&#xff0c;需要提取公共部分来消除代码坏味道。Java的继承机制允许用户在纵向上通过提取公共方法或者公共部分(模版方法方式)至父类中以消除代码重复问题&#xff1b;日志、访问控制、性能监测等重复的非业务…

GO的IO接口和工具

GO的IO接口和工具 文章目录GO的IO接口和工具一、io包中接口的好处和优势1.1拷贝数据的函数二、 在io包中&#xff0c;io.Reader 的扩展接口和实现类型都有哪些2.1 io.Reader的扩展接口2.2 io.Reader接口的实现类型2.3 示例三、io包的接口&#xff0c;以及它们之间的关系3.1 读操…

Raki的读paper小记:Forget-free Continual Learning with Winning Subnetworks

Abstract&Introduction&Related Work 研究任务 用子网络做CL已有方法和相关工作 彩票假说&#xff08;LTH&#xff09;证明了稀疏子网络&#xff08;称为中奖彩票&#xff09;的存在&#xff0c;这些子网络保持了密集网络的性能&#xff0c;然而使用迭代修剪方法在持续…

Splunk 的一个Bug (Events from tracker.log have not been seen)

1:背景:Splunk version: 8.2.4 splunk 的一个alert: Events from tracker.log have not been seen for the last 47 seconds, which is more than the yellow threshold (45 seconds). This typically occurs when indexing or forwarding are falling behind or are blocked…

【15】linux命令每日分享——head命令查看文件

大家好&#xff0c;这里是sdust-vrlab&#xff0c;Linux是一种免费使用和自由传播的类UNIX操作系统&#xff0c;Linux的基本思想有两点&#xff1a;一切都是文件&#xff1b;每个文件都有确定的用途&#xff1b;linux涉及到IT行业的方方面面&#xff0c;在我们日常的学习中&…

德鲁特金属导电理论(Drude)

德鲁特模型的重要等式 首先我们建立德鲁特模型的重要等式 我们把原子对于电子的阻碍作用&#xff0c;用一个冲量近似表示出来 在式子 首先定义一个等效加速度 由于 我们可以得到电导率的微观表达式 在交流电环境中 电场的表达式 借鉴上一问的公式 我们可以列出这样的表达式…

1.5 全概率公式和贝叶斯公式

1.5.1 全概率公式在处理复杂事件的概率时&#xff0c;我们经常将这个复杂事件分解为若千个互不相容的较简单的事件之和&#xff0c;先求这些简单事件的概率&#xff0c;再利用有限可加性得到所求事件的概率,这种方法就是全概率公式的思想方法全概率公式是概率论中的一个非常重要…

【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )

文章目录一、子元素选择器1、语法说明2、代码分析3、代码示例二、交集选择器1、语法说明2、代码示例一、子元素选择器 1、语法说明 子元素选择器 可以选择 某个基础选择器 选择出的 元素组 的 直接子元素 ( 亲儿子元素 ) 中 使用基础选择器 选择 元素 ; 子元素选择器语法 : 父选…

【JAVA程序设计】(C00112)基于Springboot+Thymeleaf的在线购物商城——有文档

基于SpringbootThymeleaf的在线购物商城——有文档项目简介项目获取开发环境项目技术运行截图运行视频项目简介 基于Springbootthymeleaf框架的在线购物商城系统&#xff0c;本系统共分为二个角色&#xff1a;管理员和用户 管理员角色包含以下功能&#xff1a; 商品管理、商品…

DELL-Vostro-5468电脑 Hackintosh 黑苹果efi引导文件

原文来源于黑果魏叔官网&#xff0c;转载需注明出处。硬件型号驱动情况主板DELL-Vostro-5468处理器Intel Core i3-7100U 2.40 GHz, 3M Cache已驱动内存Samsung 8GB DDR4-2133MHz已驱动硬盘TOPMORE CAPRICORNUS NVMe 1TB已驱动显卡Intel HD Graphics 620已驱动声卡Realtek ALC2…

Linux指令——文件与权限

一&#xff0c;文件目录管理命令 ls 命令描述&#xff1a; ls命令用于显示指定工作目录下的内容。 命令格式&#xff1a;ls [参数] [目录名]。 参数说明&#xff1a; 参数 说明 -a 显示所有文件及目录&#xff08;包括隐藏文件&#xff09; -l 将文件的权限、拥有者、…