跨屏设计规范
以windows10x 为例,其在具体交互上,到底有哪些常见的交互模式和硬件要如何结合
6.1跨平台的双屏交互设计逻辑
这种那个品的设计范式,其实是跨平台的通用规则, 在很大程度上,这套交互逻辑是不受操作系统限制的,在开发文档当中,除了很具体展示出分别在andorid平台和windows10x平台上的界面控件和交互设计范例,而且还加入了相关的代码段示例,具体实现方式。
6.1.1 双屏应用交互模式
6.1.2画布拓展模式
画布拓展模式是最简单的双屏模式,但是这种模式非常强大,它提供更多的屏幕控件,而不将内容限制在单一屏幕上,但该模式仅仅适用于一部分大面积UI画布,接缝最多是遮盖一部分只读内容,如果接缝遮盖了关键的UI交互空间,依然需要你进下调整UI以绕开接缝
价值扩展画布,允许用户在大画布模式下浏览信息和内容
获益的应用范例
- 地图类应用
- 绘图类应用
- 主从屏模式
最常见的一种模式,是一屏幕显示列表,而另外一屏幕显示你所选中列表条目中的详细内容,他适用于与绝大多数有层级的偏列表类信息展示
价值将列表导航和详情页面区分开,让用户可以更加深入了解内容,同时还能够清出了解自己在整个列表中的位置
获益的应用范例
- 具有列表或者图案的应用
- 邮件类应用
- 事务管理型应用
- 照片或者图片类应用
- 带有播放列表的音乐类应用
- 具有复杂多样层级结构的应用
6.1.3 并排翻页模式
使用双屏天然的分割机制,来并列查看多个项目,比如页面和图片。而不用用户一个一个逐个查看
价值:使用类似书本的并排布局设计,来创造更好的阅读体验
获益的应用范例
- 文档类的应用
- 涉及到内容分页的应用
- 专门用来阅读的应用
- 带有画布和画板类控件的应用
6.1.4双屏对比模式
显示同一文档中的不同形态,以无缝的方式给用户带来更多的信息,实现通过两个选项卡打开类似的文档、文件进行对比乃至于更多的操作
-
价值:在同一应用类,使用同一容器来显示多个视图,通过并排显示进行对比和其他操作
-
涉及到并排显示从而进行前后对比(比如程序和文档预览)的编辑类工具
-
支持内容和相应上下文信息展示的应用(比如餐厅的地图和其他文本信息的并列展示)
-
让用户进行相似项目的并列对比
-
使用两个相同空间和画布来显示内容,但是各自保持独立(比如笔记类应用,一屏绘图一屏做笔记)
6.1.5伴行面板模式
模式是将一屏当中被选中元素所涉及到的,原本被隐藏的下级菜单,或者下级信息,在另外一个屏幕中显示出来,达到充分利用屏幕空间的目的,根据不同的使用场景,你需要针对横屏和竖屏模式进行调试,选择合适的展示方式
价值:将预先买入到应用中的次级信息,通过另外一屏展示出来,这样的多层级展示,补充上下文环境,增加了交互的维度。这种模式不急能够将用户所获取的内容和需要交互的工具区分开,而且使得用户对于不同功能、目的的的内容,区分开来,有选择的使用,在双横平模式下,上屏显示内容,下屏幕进行交互,可以带来符合语境和人体工程学的体验
获益的应用范例
有多层级的应用,将辅助性的、上下文信息显示在主屏旁边
- 图像和绘图类的创意工具
- 音乐和视频类的剪辑工具
- 游戏类的应用
6.1.6外设计交互模式
使用windows10x的双屏硬件还有一个独特的功能wonderbar
6.2wonder bar的人体工程学优势
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还支持手写输入,这可以极大地方便用户在使用过程中随时记笔记,这是一种常见且直观的多任务操作模式
6.3.1多功能输入门面板
它支持文本建议、表情符号、GIF等多种不同的输入内容,弥补键盘和手写的不足,其中文本建议相当于是备选文本或者文本的自动联想和填充。除此之外,他还能继承剪贴板,将已经复制的文本、图片甚至视频放在你面,某种意义上,甚至可以放一个媒体库进来
6.3.2应用集成
wonderbar还能为应用程序提供辅助性的控件、信息,为了实现这一功能,我们将windows10x已有的两个组件、概念(系统媒体播放组件和缩略叠加模式)直接和wonder’bar结合在一起
6.3.3系统媒体播放组件
调用windows中的systemmediatransportcontrols这个类就可以让你使用系统的媒体播放组件,然后你可以通过mediapalyer来播放所有多媒体
当wonderbaar出现的时候,媒体播放组件还会出现在wonderbar中,在wonderbar之外的actor center当中,同时可以针对多媒体进行管理
6.3.4缩放叠加模式
缩放叠加模式有一个更通俗的名称,就是画中画。他是窗口缩小化的一种模式。通常切换到这个模式之后,会出现一个长期处于最上层的浮动小窗口,其中包含应用的内容,如图所示。图6-6画中画图片
根据用户会使用画中画模式来看视频,计算器也可以使用缩略视图。方便随时调用和计算,和前面的媒体播放组件类似,当wonderbar出现的时候,缩略视图就会直接拉到wonderbar中显示,如果wonderbar关闭了,那么程序缩略视图会出现在屏幕一角,并且可以随便移动,如果你有多个缩略叠加窗口存在,那么默认情况下,最新创建的窗口会显示在wonderar当中,当然,用户可以选择显示哪个,但是不能再wonderbar中显示多个。
6.3.5可用的应用区域
由于windows10x可能会被应用到不同大小、不同分辨率不同比例的屏幕上,所以wonderbar的可用区域可能会随着硬件的变化而出现变化
另外,候选词触控区域也可能因为实体键盘和虚拟键盘的大小差异,而出现位置高低变化的可能性。当然,涉及到实体键盘还有很多wonderbar与之结合的玩法,这个就需要灵活对待了。
6.3.7z轴上的界面分层
由于wonderbar上涉及到的组件并不完全是平铺开,所以他们在虚拟的z轴上是存在上下级关系的。比如候选词触摸区,只有在输入文本的时候才会出现,有的就是原本就存在的,所以在设计的时候要注意前后关系。再比如缩略叠加窗口,也就是画中画窗口,最新创建的那个窗口会出现在最上面,用户可以通过taskview和taskbar来切换不同的画中画窗口。