5000 字重磅干货!设计师必备跨屏设计规范
![](/Public/images/news/tag1.png)
![](/Public/images/news/tag3.png)
毫无疑问,Windows 10X 很精准地拿捏了市场方向和设计的方向——双屏比柔性屏更容易实现,相应的,接缝是必须解决的基础交互问题。在新系统的交互设计上,微软优先考虑解决接缝的问题。解决了接缝问题,那么接下来,就需要讨论系统和应用程序,在具体交互上,到底有哪些常见的交互模式,和硬件要如何结合。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd2.png)
图片来自Theverge
跨平台的双屏交互设计逻辑
需要在此强调的是,这种双屏的设计范式,其实是跨平台的通用规则——很程度上,这套交互逻辑是不受操作系统限制的,而且微软很鸡贼的一点在于,他们发布的 Surface Due 和 Surface Neo 并非都使用了 Windows 10X 的系统,其中 Surface Due 用的是 Android 系统,并且在微软的这套规范当中,还有一半的开发指南,是 Android 平台的!
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd3.png)
图片来自Theverge
在开发文档当中,除了很具体地展示出了分别在 Android 平台和 Windows 10X 平台上的界面控件和交互设计范例,而且还加入了相关的代码段示例,具体实现的方式,关键参数等信息。
双屏应用交互模式
之前的规范当中,我们讨论了如何去更好地适配接缝的问题,接下来,我们将会探讨一下双屏的应用模式。
通常,应用程序在双屏硬件当中,通常将会采用下面的5种模式,虽然它们并不是唯一的选择,但是这5种推荐的常用模式,应该能够给你带来足够的想象空间。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd4.png)
1、画布拓展模式
这种「画布拓展」模式是最简单的双屏模式,但是这种模式非常强大。如果你需要更大的操作空间来执行诸如绘图这样的工作,或者是需要宽阔、流动的画布,并且如果某些重要的内容被接缝所遮盖(比如说网页),那么用户可以便捷地滑动,绕开接缝,看到内容。这种处理方法最常见,而它的好处是在于可以提供更多的屏幕空间,而不是将内容限制在单一屏幕上。
这种模式仅适用于一部分大面积UI画布,接缝最多是遮盖一部分只读内容,如果接缝遮盖了关键的UI交互控件,依然需要你进行调整 UI 以绕开接缝。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd5.png)
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd6.png)
这种设计模式的价值:扩展画布,允许用户在大画布模式下浏览信息和内容。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd7.png)
可以从这种模式中获益的应用范例:
地图类应用
绘图类应用
2、主从屏模式
所谓的主从屏模式并不难理解,它最常见的一种模式,是一屏幕显示列表,而另外一屏显示你所选中列表条目中的详细内容。当你选中新的列表条目的时候,另外一侧的详情页也跟着切换。这种主从屏模式是传统的侧边栏列表-详情页的交互模式的延伸。最常见的范例是电子邮件和通讯录这样的应用。
这样一来,这种模式就利用了接缝的天然分割作用,它适用与绝大多数有层级的偏列表类信息展示。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd8.png)
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd9.png)
就像之前说的,我们开始注意到用户倾向于使用双横屏展开模式(类似摊开书本之后翻转90度的状态)来浏览信息的倾向,因此,你在设计的时候,可以在用户翻转屏幕的时候,改为上屏显示单条目的主视图,而下屏显示详细视图的模式。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd10.png)
这种设计模式的价值:
将列表导航和详情页面去分开,让用户可以更加深入地了解内容,同时还能够清晰地了解自己在整个列表中的位置。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd11.png)
可以从这种模式中获益的应用范例:
具有列表或者图库的应用
邮件类应用
事务管理型应用
照片或者图片管理类应用
带有播放列表的音乐类应用
具有复杂多样层级结构的应用
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd12.png)
图片来自Theverge
3、并排翻页模式
诸如信息阅读类的应用,其实大家会倾向于使用类似书本一样的并排开本的分页体验,这可以使用双屏天然的分隔机制,来并列查看多个项目,比如页面和图片,而不用用户一个一个逐个查看。
根据你的应用特点,你可以选择一次翻两页,也可以一次翻一页。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd13.png)
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd14.png)
这种设计模式的价值:使用类似书本的并排布局设计,来创造更好的阅读体验。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd15.png)
可以从这种模式中获益的应用范例:
文档类的应用
涉及到内容分页的应用
专门用来阅读的应用
带有画布和画板类控件的应用
4、双屏对比模式
如果你有应用需要并排显示对比同一文档的不同样式、或者同类型的不同文档,那么你可以使用双屏对比模式。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd16.png)
它用来显示同一文档的不同形态,以无缝的方式给用户带来更多的信息,例如一屏显示餐厅的文本地址,另外一屏在地图上显示它的位置。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd17.png)
如果你需要在特定的视图下显示同一文档、文件或者状态,那么的应用本身应该支持多实例的展示,这样才能充分利用系统提供的这一功能支持。这对于在支持选项卡的应用非常有用,这样你可以通过两个选项卡打开类似的文档、文件,进行对比乃至于更多的操作。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd18.png)
这种设计模式的价值:在同一应用内,使用同一容器来显示多个视图,通过并排显示进行对比和其他的操作。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd19.png)
图片来自Theverge
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd20.png)
可以从这种模式中获益的应用范例:
涉及到并排显示从而进行前后对比(比如程序和文档预览)的编辑类工具
支持内容和相应的上下文信息展示的应用(例如餐厅的地图和其他文本信息的并列显示)
让用户进行相似项目的并列对比
使用两个相同控件和画布来显示内容,但是各自保持独立(比如笔记类应用,一屏绘图一屏做笔记)
5、伴行面板模式
伴行面板模式模式是将一屏当中被选中元素所涉及到的、原本被隐藏的下级菜单,或者下级信息,在另外一个屏幕中展示出来。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd21.png)
这种模式可以将一个面部或者画布呈现在一个屏幕上,然后使用另外一个屏幕来显示操作相关内容、相应的工具,子菜单,这样达到充分利用屏幕空间的目的。根据不同的使用场景,你需要针对横屏和竖屏模式进行调试,选择合适的展示方式。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd22.png)
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd23.png)
这种设计模式的价值:将预先埋入到应用中的次级信息,通过另外一屏展示出来。这样的多层级展示,补充上下文环境,增加了交互的维度。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd24.png)
这种模式不仅能够将用户所获取的内容和需要交互的工具区分开,而且使得用户对于不同功能、目的的内容,区分开来,有选择地使用。在双横屏模式下,上屏显示内容,下屏进行交互,可以带来符合语境和人体工程学的体验。
可以从这种模式中获益的应用范例:
有多层级的应用,将辅助性的、上下文信息显示在主屏旁边
图像和绘图类的创意工具
音乐和视频类的剪辑工具
游戏类的应用
外设交互模式
使用 Windows 10X 的双屏硬件还有一个独特的功能, Wonder Bar 。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd25.png)
图片来自Theverge
以 Surface Neo 为例,它就额外附带一个键盘,用来提高用户的输入效率,弥补屏幕键盘输入体验和速度上的不足。当双屏设备,比如 Surface Neo 以笔记本形态展开方式,键盘就可以以磁力吸附的方式,吸在底部边缘,这个时候,露出的一部分屏幕就成了 Wonder Bar了,它和 新款Macbook Pro 上的 Smart Bar 有着异曲同工之妙,但是定制性、灵活性更强。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd26.png)
当然,如果你使用的屏幕虚拟键盘的时候,同样可以使用 Wonder Bar 组件。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd27.png)
Wonder Bar 的人体工程学优势
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd28.png)
Wonder Bar 支持用户以更加传统的笔记本电脑模式在双屏设备上进行操作,同时强大的定制性,让 Wonder Bar 成为了出色的交互中控台,无论是切换音乐,滚动页面,还是搭配输入法选词,它都有着便捷的特性。
Wonder Bar 的设计原则
Wonder Bar 为用户提供了大量补充行的工具,辅助多任务操作,具有着不可替代的价值。但是 Wonder Bar 当中所放置的功能应该是有明确意图、避免用户注意力耗散的组件。所以,Wonder Bar 的功能、体验和用户注意力之间应该做合理的平衡。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd29.png)
图片来自Theverge
下面是 Wonder Bar 的设计原则:
随时可以精确输入:对于涉及到生产力的任务和操作,精确输入是无价的。Wonder Bar 应该确保用户能够精确地操作,细致准确地导航。
Wonder Bar 应该是课预测的:用户应该有能力在自己认为合适的情况下,享受 Wonder Bar 带来的好处,它应该遵循分层模型(后面介绍),并且它应该和整个 Windows 10X 的导航体系保持一致。
体验并非仅仅局限于 Wonder Bar:并非每种屏幕状态下都提供 Wonder Bar,因此用户不在笔记本模式下的时候,用户不应该因为 Wonder Bar 的缺失而影响体验。Wonder Bar 应该是在基础体验的基础上提升效率,而不能应为缺失而影响整体交互。
始终考虑用户的情况:Wonder Bar 的使用场景和用户所处的状态、使用的姿势、屏幕的翻转情况息息相关。在设计 Wonder Bar 的体验的时候,应该兼顾到这些因素。
简单的体验是最好的:通过研究发现,对于多任务操作操作,低复杂度的轻量级操作,是最为成功的。Wonder Bar 的设计理应优先考虑用户的舒适度和安心程度。
基础输入功能
Windows 10X 当中,Wonder Bar 提供虚拟触摸板和多种不同类型的输入功能。
虚拟触控板
在双拼设备上,实体键盘和虚拟键盘能够提供Wonder 和传统的笔记本的键盘输入类似的体验,而传统笔记本上所带有的触控板,则可以用 Wonder Bar 来实现。用户可以在 Wonder Bar 的触控板上使用熟悉的手势交互,包括多指交互,因此,这对于他们的工作流程是狠自然的。触控板属于 Wonder Bar 当中集成的基本组件。
此外, Wonder Bar 还支持手写输入,这可以极大地方便用户在使用过程中随时记笔记。这是一种常见且直观的多任务操作模式。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd30.png)
多功能输入面板
除了我们上面提到的两种常见的输入功能之外,它还可以支持文本建议、表情符号、GIF 等多种不同的输入内容,弥补键盘和手写的不足。
其中文本建议相当于是备选文本,或者文本的自动联想和填充。除此之外,它还能集成剪贴板,将已经复制的文本、图片甚至视频直接放在里面,某种意义上,甚至可以放一个媒体库进来。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd31.png)
应用集成
概述
Wonder Bar 还能为应用程序提供辅助性的控件、信息,为了实现这一功能,我们将 Windows 10X 上已有的两个组件/概念(系统媒体播放组件和缩略叠加模式)直接和 Wonder Bar 结合到一起,作为示范。
当你在 Windows 10X 中调用其中任何一个组件或者概念的时候,他Wonder Bar 会直接呈现这一功能,而无需你执行其他的任何操作。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd32.png)
图片来自Theverge
系统媒体播放组件
调用 Windows 中的 SystemMediaTransportControls 这个类,就可以让你使用系统的媒体播放组件,然后你就可以通过 MediaPlayer 来播放所有的多媒体。
当 Wonder Bar 出现的时候,媒体播放组件会出现在 Wonder Bar 当中,在 Wonder Bar 之外的 Actor Center 当中,同样可以针对多媒体进行管理。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd33.png)
如果没有 Wonder Bar,那么媒体播放组件会出现在 Action Center 当中:
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd34.png)
有关如何使用这些控件,你可以参考这些文档:
https://docs.microsoft.com/en-us/windows/uwp/audio-video-camera/integrate-with-systemmediatransportcontrols
https://github.com/Microsoft/Windows-universal-samples/tree/dev/Samples/SystemMediaTransportControls
缩略叠加模式
缩略叠加模式有一个更通俗的名称,就是画中画。它是窗口缩小化的一种模式,通常切换到这个模式之后,会出现一个长期处于最上层的浮动小窗口,其中会包含应用的内容。很多用户会使用画中画模式来看视频,又不影响执行其他的操作。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd35.png)
除了播放媒体之外,它还有其他的用途。使用缩略视图来呈现某些特定的应用,比如计算器就可以使用缩略视图,方便你随时调用和计算。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd36.png)
和前面的媒体播放组件类似,当 Wonder Bar 出现的时候,速略视图就会直接拉到 Wonder Bar 中显示,如果 Wonder Bar 关闭了,那么程序缩略视图会出现在屏幕一角,并且可以被随便移动。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd37.png)
如果你有多个缩略叠加窗口存在,那么默认情况下,最新创建的窗口,会显示在 Wonder Bar 当中,当然,用户可以选择显示哪个,但是不能在 Wonder Bar 中显示多个。
Wonder Bar 的交互模式
可用的应用区域
无论是系统的媒体播放组件,还是画中画控件,他们都只能占据 Wonder Bar 宽度的一般。无论是在使用实体键盘还是虚拟键盘的时候,它们都只能占据如下图所示的区域,并且还要给键盘预留一个候选词的触控区域。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd38.png)
图片来自Theverge
由于 Windows 10X 可能会被应用到不同大小、不同分辨率、不同比例的屏幕上,所以,Wonder bar 的可用区域可能会随着硬件的变化而出现变化。
另外,候选词触控区域也可能因为实体键盘和虚拟键盘的大小差异,而出现位置高低变化的可能性。当然,涉及到实体键盘,还有更多 Wonder Bar 与之结合的玩法,这个就需要灵活对待了。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd39.png)
Z轴上的界面分层
由于 Wonder Bar 上涉及到的组件并不全是平铺开,所以它们在虚拟的 Z 轴上是存在上下层关系的。比如候选词触摸区,只有在输入文本的时候才会出现,有的是原本就存在的,所以在设计的时候,要注意前后关系。
比如缩略叠加窗口,也就是画中画窗口,最新创建的那个窗口会出现在最上面,用户可以通过 Taskview 和 Taskbar 来切换不同的画中画窗口。这些都是需要考虑的因素。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd40.png)
值得一提的是,戴尔所设计的双屏概念设备 Concept Duet 明显是为了 Windows 10X 所设计的,不过目前在 CES 上展示的版本依然只是运行了 Windows 10,而其中也集成了类似 Wonder Bar 的设计。底部的触控区的设计,明显比起 Surface Neo 的设计,更加贴近传统笔记本电脑的交互模式,而这一设计,可能也会随着双屏硬件的发展,而逐渐成为这种交互模式中的最佳实践。
![](https://image.uisdc.com/wp-content/uploads/2020/03/dd41.png)
图片来自Theverge
结语
终于把这份官方设计规范当中,涉及到交互设计的部分都整理出来了。毫无疑问,双屏硬件的灵活度比单屏不止复杂了一种。这种自然灵活的机制带来的不仅有更多的机会,还有几乎无法完全封堵住的各种小问题。
双屏硬件交互模式,可能会在未来很长一段时间内,都需要设计师来不断完善,也许是很多新的硬件、软件、服务的破局契机。我们一起学习和期待吧。