5000 字重磅干货！设计师必备跨屏设计规范

　　毫无疑问，Windows 10X 很精准地拿捏了市场方向和设计的方向——双屏比柔性屏更容易实现，相应的，接缝是必须解决的基础交互问题。在新系统的交互设计上，微软优先考虑解决接缝的问题。解决了接缝问题，那么接下来，就需要讨论系统和应用程序，在具体交互上，到底有哪些常见的交互模式，和硬件要如何结合。

　　图片来自Theverge

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

　　需要在此强调的是，这种双屏的设计范式，其实是跨平台的通用规则——很程度上，这套交互逻辑是不受操作系统限制的，而且微软很鸡贼的一点在于，他们发布的 Surface Due 和 Surface Neo 并非都使用了 Windows 10X 的系统，其中 Surface Due 用的是 Android 系统，并且在微软的这套规范当中，还有一半的开发指南，是 Android 平台的!

　　图片来自Theverge

　　在开发文档当中，除了很具体地展示出了分别在 Android 平台和 Windows 10X 平台上的界面控件和交互设计范例，而且还加入了相关的代码段示例，具体实现的方式，关键参数等信息。

　　双屏应用交互模式

　　之前的规范当中，我们讨论了如何去更好地适配接缝的问题，接下来，我们将会探讨一下双屏的应用模式。

　　通常，应用程序在双屏硬件当中，通常将会采用下面的5种模式，虽然它们并不是唯一的选择，但是这5种推荐的常用模式，应该能够给你带来足够的想象空间。

　　1、画布拓展模式

　　这种「画布拓展」模式是最简单的双屏模式，但是这种模式非常强大。如果你需要更大的操作空间来执行诸如绘图这样的工作，或者是需要宽阔、流动的画布，并且如果某些重要的内容被接缝所遮盖(比如说网页)，那么用户可以便捷地滑动，绕开接缝，看到内容。这种处理方法最常见，而它的好处是在于可以提供更多的屏幕空间，而不是将内容限制在单一屏幕上。

　　这种模式仅适用于一部分大面积UI画布，接缝最多是遮盖一部分只读内容，如果接缝遮盖了关键的UI交互控件，依然需要你进行调整 UI 以绕开接缝。

　　这种设计模式的价值：扩展画布，允许用户在大画布模式下浏览信息和内容。

　　可以从这种模式中获益的应用范例：

　　地图类应用

　　绘图类应用

　　2、主从屏模式

　　所谓的主从屏模式并不难理解，它最常见的一种模式，是一屏幕显示列表，而另外一屏显示你所选中列表条目中的详细内容。当你选中新的列表条目的时候，另外一侧的详情页也跟着切换。这种主从屏模式是传统的侧边栏列表-详情页的交互模式的延伸。最常见的范例是电子邮件和通讯录这样的应用。

　　这样一来，这种模式就利用了接缝的天然分割作用，它适用与绝大多数有层级的偏列表类信息展示。

　　就像之前说的，我们开始注意到用户倾向于使用双横屏展开模式(类似摊开书本之后翻转90度的状态)来浏览信息的倾向，因此，你在设计的时候，可以在用户翻转屏幕的时候，改为上屏显示单条目的主视图，而下屏显示详细视图的模式。

　　这种设计模式的价值：

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

　　可以从这种模式中获益的应用范例：

　　具有列表或者图库的应用

　　邮件类应用

　　事务管理型应用

　　照片或者图片管理类应用

　　带有播放列表的音乐类应用

　　具有复杂多样层级结构的应用

　　图片来自Theverge

　　3、并排翻页模式

　　诸如信息阅读类的应用，其实大家会倾向于使用类似书本一样的并排开本的分页体验，这可以使用双屏天然的分隔机制，来并列查看多个项目，比如页面和图片，而不用用户一个一个逐个查看。

　　根据你的应用特点，你可以选择一次翻两页，也可以一次翻一页。

　　这种设计模式的价值：使用类似书本的并排布局设计，来创造更好的阅读体验。

　　可以从这种模式中获益的应用范例：

　　文档类的应用

　　涉及到内容分页的应用

　　专门用来阅读的应用

　　带有画布和画板类控件的应用

　　4、双屏对比模式

　　如果你有应用需要并排显示对比同一文档的不同样式、或者同类型的不同文档，那么你可以使用双屏对比模式。

　　它用来显示同一文档的不同形态，以无缝的方式给用户带来更多的信息，例如一屏显示餐厅的文本地址，另外一屏在地图上显示它的位置。

　　如果你需要在特定的视图下显示同一文档、文件或者状态，那么的应用本身应该支持多实例的展示，这样才能充分利用系统提供的这一功能支持。这对于在支持选项卡的应用非常有用，这样你可以通过两个选项卡打开类似的文档、文件，进行对比乃至于更多的操作。

　　这种设计模式的价值：在同一应用内，使用同一容器来显示多个视图，通过并排显示进行对比和其他的操作。

　　图片来自Theverge

　　可以从这种模式中获益的应用范例：

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

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

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

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

　　5、伴行面板模式

　　伴行面板模式模式是将一屏当中被选中元素所涉及到的、原本被隐藏的下级菜单，或者下级信息，在另外一个屏幕中展示出来。

　　这种模式可以将一个面部或者画布呈现在一个屏幕上，然后使用另外一个屏幕来显示操作相关内容、相应的工具，子菜单，这样达到充分利用屏幕空间的目的。根据不同的使用场景，你需要针对横屏和竖屏模式进行调试，选择合适的展示方式。

　　这种设计模式的价值：将预先埋入到应用中的次级信息，通过另外一屏展示出来。这样的多层级展示，补充上下文环境，增加了交互的维度。

　　这种模式不仅能够将用户所获取的内容和需要交互的工具区分开，而且使得用户对于不同功能、目的的内容，区分开来，有选择地使用。在双横屏模式下，上屏显示内容，下屏进行交互，可以带来符合语境和人体工程学的体验。

　　可以从这种模式中获益的应用范例：

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

　　图像和绘图类的创意工具

　　音乐和视频类的剪辑工具

　　游戏类的应用

　　外设交互模式

　　使用 Windows 10X 的双屏硬件还有一个独特的功能， Wonder Bar 。

　　图片来自Theverge

　　以 Surface Neo 为例，它就额外附带一个键盘，用来提高用户的输入效率，弥补屏幕键盘输入体验和速度上的不足。当双屏设备，比如 Surface Neo 以笔记本形态展开方式，键盘就可以以磁力吸附的方式，吸在底部边缘，这个时候，露出的一部分屏幕就成了 Wonder Bar了，它和 新款Macbook Pro 上的 Smart Bar 有着异曲同工之妙，但是定制性、灵活性更强。

　　当然，如果你使用的屏幕虚拟键盘的时候，同样可以使用 Wonder Bar 组件。

　　Wonder Bar 的人体工程学优势

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

　　Wonder Bar 的设计原则

　　Wonder Bar 为用户提供了大量补充行的工具，辅助多任务操作，具有着不可替代的价值。但是 Wonder Bar 当中所放置的功能应该是有明确意图、避免用户注意力耗散的组件。所以，Wonder Bar 的功能、体验和用户注意力之间应该做合理的平衡。

　　图片来自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 还支持手写输入，这可以极大地方便用户在使用过程中随时记笔记。这是一种常见且直观的多任务操作模式。

　　多功能输入面板

　　除了我们上面提到的两种常见的输入功能之外，它还可以支持文本建议、表情符号、GIF 等多种不同的输入内容，弥补键盘和手写的不足。

　　其中文本建议相当于是备选文本，或者文本的自动联想和填充。除此之外，它还能集成剪贴板，将已经复制的文本、图片甚至视频直接放在里面，某种意义上，甚至可以放一个媒体库进来。

　　应用集成

　　概述

　　Wonder Bar 还能为应用程序提供辅助性的控件、信息，为了实现这一功能，我们将 Windows 10X 上已有的两个组件/概念(系统媒体播放组件和缩略叠加模式)直接和 Wonder Bar 结合到一起，作为示范。

　　当你在 Windows 10X 中调用其中任何一个组件或者概念的时候，他Wonder Bar 会直接呈现这一功能，而无需你执行其他的任何操作。

　　图片来自Theverge

　　系统媒体播放组件

　　调用 Windows 中的 SystemMediaTransportControls 这个类，就可以让你使用系统的媒体播放组件，然后你就可以通过 MediaPlayer 来播放所有的多媒体。

　　当 Wonder Bar 出现的时候，媒体播放组件会出现在 Wonder Bar 当中，在 Wonder Bar 之外的 Actor Center 当中，同样可以针对多媒体进行管理。

　　如果没有 Wonder Bar，那么媒体播放组件会出现在 Action Center 当中：

　　有关如何使用这些控件，你可以参考这些文档：

　　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

　　缩略叠加模式

　　缩略叠加模式有一个更通俗的名称，就是画中画。它是窗口缩小化的一种模式，通常切换到这个模式之后，会出现一个长期处于最上层的浮动小窗口，其中会包含应用的内容。很多用户会使用画中画模式来看视频，又不影响执行其他的操作。

　　除了播放媒体之外，它还有其他的用途。使用缩略视图来呈现某些特定的应用，比如计算器就可以使用缩略视图，方便你随时调用和计算。

　　和前面的媒体播放组件类似，当 Wonder Bar 出现的时候，速略视图就会直接拉到 Wonder Bar 中显示，如果 Wonder Bar 关闭了，那么程序缩略视图会出现在屏幕一角，并且可以被随便移动。

　　如果你有多个缩略叠加窗口存在，那么默认情况下，最新创建的窗口，会显示在 Wonder Bar 当中，当然，用户可以选择显示哪个，但是不能在 Wonder Bar 中显示多个。

　　Wonder Bar 的交互模式

　　可用的应用区域

　　无论是系统的媒体播放组件，还是画中画控件，他们都只能占据 Wonder Bar 宽度的一般。无论是在使用实体键盘还是虚拟键盘的时候，它们都只能占据如下图所示的区域，并且还要给键盘预留一个候选词的触控区域。

　　图片来自Theverge

　　由于 Windows 10X 可能会被应用到不同大小、不同分辨率、不同比例的屏幕上，所以，Wonder bar 的可用区域可能会随着硬件的变化而出现变化。

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

　　Z轴上的界面分层

　　由于 Wonder Bar 上涉及到的组件并不全是平铺开，所以它们在虚拟的 Z 轴上是存在上下层关系的。比如候选词触摸区，只有在输入文本的时候才会出现，有的是原本就存在的，所以在设计的时候，要注意前后关系。

　　比如缩略叠加窗口，也就是画中画窗口，最新创建的那个窗口会出现在最上面，用户可以通过 Taskview 和 Taskbar 来切换不同的画中画窗口。这些都是需要考虑的因素。

　　值得一提的是，戴尔所设计的双屏概念设备 Concept Duet 明显是为了 Windows 10X 所设计的，不过目前在 CES 上展示的版本依然只是运行了 Windows 10，而其中也集成了类似 Wonder Bar 的设计。底部的触控区的设计，明显比起 Surface Neo 的设计，更加贴近传统笔记本电脑的交互模式，而这一设计，可能也会随着双屏硬件的发展，而逐渐成为这种交互模式中的最佳实践。

　　图片来自Theverge

　　结语

　　终于把这份官方设计规范当中，涉及到交互设计的部分都整理出来了。毫无疑问，双屏硬件的灵活度比单屏不止复杂了一种。这种自然灵活的机制带来的不仅有更多的机会，还有几乎无法完全封堵住的各种小问题。

　　双屏硬件交互模式，可能会在未来很长一段时间内，都需要设计师来不断完善，也许是很多新的硬件、软件、服务的破局契机。我们一起学习和期待吧。