交互设计师必学的跨屏设计规范

我们总在期待 Next Big Thing，企盼下一次数字革命。喊了这么多年的物联网现在还没有明显起来的迹象，而 VR 也因为头戴设备的大型化和沉浸式场景的泛用性较差的原因，反倒是 AR 和 MR 依托智能手机、浴霸式镜头组和 APP 有一定起色，但是也没有到革命性改变的程度，只能算是一个小趋势。当然，人工智能/深度学习所带来的影响更加深远，但是短时间以内，它所带来的变化趋近于隐形。

而最近2年，各种双屏和柔性屏的发布，则可能是距离我们最近的硬件变革，可能和柔性屏/双屏设备有关。

也许现在说硬件交互设计到了类似 2007 年 iPhone 发布一样拐点有点夸张，但是对于现在几乎纯粹拼配置死水微澜一样的手机电脑市场而言，这种明显区别于以往的硬件设计，将会直接带来交互、设计和体验上的改变。

一、柔性屏和双屏设备

三星 Galaxy Fold 和 Moto Razr 的发布，确实给广大硬件厂商好好打了一个样。

尽管Galaxy Fold 折戟沉沙了，但是高昂的沉没成本和大势所趋让三星肯定不能就这么算了， 回炉再造一番之后今年又带着船薪版本的 Galaxy Fold 2 杀将回来，顺带还兼顾女性市场整了一个对标 Moto Razr 的化妆盒手机 Galaxy Z flip。

当然，华为的 Mate Xs 也是相当优秀的产品，这款明显对标三星 Galaxy Fold 2 的产品，并没有将柔性屏制作成为向内折叠，而是完全翻过来，将它作为外屏来进行设计，反向折叠，展开的时候，屏幕自然延展。

不过思路最为清奇的并非是华为，而是 TCL。就在这几天，TCL 带来了两款全新的原型机，一款手机带有两个折叠轴，相当于是将传统手机屏幕延展到以往的3倍，彻底折叠开相当于是一个 10英寸的平板电脑（回过头来想，就像是将一个平板电脑反向折叠到手机的大小，但是重量不变……）。

另外一款原型机则选择了抽拉式的设计，机身可以如同抽屉一样拉开，柔软的屏幕会被拉出，延展开来差不多和 iPad Mini 一个大小了。

除了这几款之外，在今年年初的 CES 消费电子展上，联想、戴尔、华硕，这些目前世界上最大的消费电子制造商，纷纷带来了各自的折叠屏和双屏设备。

联想带来的 ThinkPad X1 Fold，是一个价格昂贵的柔性折叠屏平板电脑，它额外附带了一个蓝牙键盘。

考虑到联想在此之前已经发布过带有LEC+墨水屏的双屏设备 Yoga Book 2，可以说联想是已经具备了制造两种不同类型屏幕设备的能力。

作为对手的戴尔，带来了分别对标联想这两个系列的对应产品：Concept Ori 和 Concept Duet。

Concept Ori 采用的是两块传统硬屏，你既可以让一款屏幕作为屏幕，另一块作为虚拟输入键盘或者手绘板，也可以使用配备的蓝牙键盘，吸附在底下的屏幕上来进行输入，而且当键盘移动到靠近转轴的地方，还能让底下露出的半块屏幕作为触控板来使用：

Concept Duet 在概念上则和 联想的 ThinkPad X1 Fold 类似，一块柔性可折叠的屏幕，便于收纳，一体连接。

看了这么多硬件，是不是觉得信息量有点大？不过简单来说，所有的这些产品，都在说一件事情：屏幕要延展开，这是一个正在发生的趋势。

同时，我们还注意到一个很明显的特征，就是所有的这些柔性屏设备都非常的……骚，且贵。动辄两三千美元的起步价，如果可靠坚挺也就算了，不仅转轴易损，且屏幕也存在易损的问题。根据 ifanr 最新的上手评测，即使是在优化了转轴和屏幕折叠角度之后，三星所发布的 Galaxy Z Flip 的屏幕中段依然有着不可忽视的折痕，这一问题可能会是绝大多数折叠柔性屏设备的通病。

与之相反，采用硬质双屏设计的硬件设备，从生产成本、工艺成熟度、价格上，都更加有优势。

值得注意的是，柔性折叠屏和硬质双屏设备，在基本的使用体验和逻辑上是一致的，除了极少数特殊的设备之外（比如 TCL的双折叠式的概念机），多数情况下，两者是差不多的。

只不过存在一个问题，双屏设备的交互和体验，需要有对应操作系统支持，因为从单屏到双屏，其实交互逻辑已经发生了巨大的改变。

二、双屏硬件的操作系统

一直在创新且「稳健」地更新软硬件的苹果公司，应该不会在市场未曾成熟的情况下选择发布硬件，这意味着你不会很快看到双屏 iOS 硬件，而面向着大量 OEM 厂商的 Android 和 Windows 则截然不同。这两年厂商已经身体力行证明了一件事情：只要操作系统和设计跟上，硬件马上量产不是问题。

最近泄漏的 Android 11 的新特性已经出现了可折叠屏幕的影子，但是具体情况恐怕要到因为疫情跳票的 Google I/O 大会上会揭晓答案。但是另一边，贼心不死的微软，已经开始布局面向可双屏设备的新一代操作系统 Windows 10X了。

微软发布的两款双屏设备 Surface Duo 和 Surface Neo 并不都是采用尚未发布的 Windows 10X 操作系统，但是两者都沿用了几乎相同的交互逻辑，较小的 Neo 采用的是 Android 操作系统。这两款硬件和系统交互设计，将会在未来一段时间以内，成为双屏硬件的软件交互的重要参考和主要标杆，联想和戴尔这波 OEM 厂商，无疑是参考着微软的风向标来搞硬件产品的。

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

 

传统而臃肿的「开始」菜单栏在 Windows 10X 当中，被精简为我们更熟悉的模式，新的 Windows 10X 在原有的 Windows 10 的基础上，应该有对移动端（比如 ARM 架构的CPU）和小屏幕有更好的支持。

但是，更有价值的，是微软为双屏设备所制定的交互设计规范。

三、双屏的交互规则

双屏设备可以基于不同的工业设计，有多种硬件样式。微软发布的 Surface Neo 和 Surface Duo 可以作为典型的双屏设备作为参考。双屏本身可以借由铰链、转轴来连接，也可以基于柔性屏来实现。

所有的双屏设备都具备有折叠、旋转、翻转的功能，两块屏幕都可以用来作为显示，也可以一个做屏幕一个承载虚拟键盘，当然也可以借由外设，构建、组合成为新的模式。所以，为这样的硬件设计的时候，需要考虑到各种不同的情况，并且适配硬件，帮助用户实现更多的目标。

当用户打开应用的时候，它的主要界面窗口应该最大化，占据一块屏幕的全宽和全高。这样用户可以一次打开多个不同的应用，显示在双屏上。

当然，你的APP 也可以完整铺满两个屏幕，这个界面布局被称为「跨屏布局」。在默认情况下，它应该像在大屏幕上一样，一个窗口跨屏幕显示。但是你可以修改这种模式，让它可以铺满两个屏幕的同时，还可以兼顾到中间有转轴和铰链的硬件。对于这个问题，我们随后有详细的讨论。

 

1、拥抱和改进现有的功能

比起传统的响应式布局，对于双屏硬件，我们要讨论的「响应」模式要复杂得多。就像下面这张图中所说的，要为这样多样、复杂的情况进行设计：

我们默认用户在多数时候，是处于双屏展开的状态，当用户打开 APP 的时候，它的主要界面窗口，将会最大化占据一个屏幕，这个时候另一个屏幕处于空置状态，用户可以在这个屏幕上打开另外的应用，并且用户可以通过托拽窗口的方式，来重新整理窗口和APP的排布模式（具体可查看马海祥博客《移动APP导航设计的10种模式》的相关介绍）。

同时，单个应用程序也应该可以进行跨屏布局，既可以让单个应用分别在两块屏幕上各呈现一个窗口，也可以作为单个窗口完整铺满两块屏幕。不论是充分利用接缝的存在，还是说尽可能地利用全部屏幕区域来聚焦单个内容，应用程序应该都可以做到。当然，这些情况我们随后会单独说到。

2、拥抱和改进现有的功能

首先，作为一个已有的应用程序，在双屏设备上应该能够继承原有的功能，并且尽可能地兼容双屏的体验。在开始讨论如何为双屏场景进行设计应用之前，我们先应该对双屏交互进行介绍。

（1）、双屏的响应式布局

首先，无论屏幕尺寸如何，方向如何，应用程序应该都可以保持良好的外观，善用 UI 平台的现有的布局技术，通过合理地缩放来自适应，填满屏幕。如果你的屏幕元素依赖屏幕长宽比，那么应该善用平台给的 API 来进行灵活的优化。

考虑到你的应用将会在很多不同尺寸、不同长宽比、不同类型的设备上运行，所以你的应用程序应该足以应对各种不同的情况。请记住，你的设计将会遭遇和以往截然不同的屏幕尺寸和长宽比，比如纵向（全景视图）、横向（较宽的全景视图）、纵向双屏分别显示等不同情况（具体可查看马海祥博客《响应式设计时代该如何进行网站设计》的相关介绍）。

（2）、考虑所有的屏幕方向

用户在很多平台上有习惯的、常见的屏幕方向，比如在 Android 和 iOS 上，通常应用是竖屏显示的，在 Windows 上，多数情况下是横向全屏显示的。而在双屏设备上，这种情况会发生改变。

比如你的应用原本是为竖屏设计的，但是需要经常输入内容，那么你要考虑到双屏设备上，你的应用可能是会被横屏显示，用户会像用笔记本电脑那样来使用应用，也就是说两块屏幕都横向显示，靠下平摊在桌面的屏幕会显示虚拟键盘或者手写区域，作为输入窗口，而显示窗口也是横向的。

双屏为多任务提供更好的显示环境，你不会知道用户会在什么样的场合，以什么样的姿势来握持设备，但是考虑潜在的使用姿态，可以让你更好得对应用进行设计和优化。

根据我们的研究，如果你的应用是注重输入的应用，那么用户在平面上打字和输入将会是最舒服也最常见的姿势。那么在这种情况下，你应该针对横屏显示进行针对性的优化。

（3）、支持多种输入模式

对于新的双屏设备，通常都支持多种输入模式，包括打字输入，屏幕触摸和手写笔这样的截至。这意味着用户可以灵活地根据需求，选择不同的姿势和输入模式，并且快速切换，以适应不同的需求。

换句话来说，就是你在设计的时候，需要支持所有的输入方式，以便用户可以自由选择交互模式。

（4）、托拽交互

你的应用应该支持屏幕托拽，这不仅是为了兼容双屏设备，而是对于绝大多数的设备的使用情况而进行兼容，确保用户体验的一致和灵活。只不过相比于在屏幕单屏上进行托拽移动，在双屏上托拽移动，将会带来更多的可能性，并且这样也将会在双屏使用场景之下，最为重要的交互模式之一。

为了确保托拽操作的自然，你需要确保诸如文本、图像、视频等常见的交互对象和元素，可以在任何地方进行剪切、复制、粘贴，并且对于共享和放松之类的操作也启用托拽操作，这将最大化地利用双屏的优势。

（5）、应用的多屏呈现

用户会希望在两块屏幕上并排显示同一应用中的不同内容，因此你的你用应该支持多实例呈现和运行。

（6）、多媒体内容画中画体验

如果你的应用是一个多媒体应用，那么应该支持画中画模式，用户可以边看视频边执行别的操作。

3、双屏用户体验常见注意事项

上面提及的很多功能属于基础应用要求，并不是专门针对双屏设备而做，但是如果你的应用支持上面的功能，那么在双屏上将会明显拥有更好的用户体验。接下来，我们着重聊一下在双屏设备上进行设计的问题。

在双屏设备上，你的应用应当支持在单个屏幕上运行，也可以在双屏上运行，当一个应用在两个屏幕上显示的时候，我们称之为「跨屏」，而跨屏显示这个问题对于双屏设备而言，是至关重要的，如何显示将会带来巨大的影响。这种独特交互模式可能会解锁前所未有的使用方法。比如，有转轴和接缝的双屏设备，因为屏幕的特征而非常适合分隔并行式的生产力解决方案。

在设计双屏设备之前，你需要遵循下面的四个基本原则：

①、提供持续的价值：能够良好地支持不同的交互模式，充分利用不同交互模式和多屏交互，让用户可以灵活地执行任务。它不应该只有有限的使用方法和模式，与其简单的支持一两种模式，不如多考虑几种不同的交互模式。

②、不要只想着「跨屏」：应用不应该只在跨屏状态下才好用，不要将一些基本的功能在非跨屏状态下隐藏，避免用户需要跨屏才能用到基本功能。

③、用户始终享有掌控力：为了避免给用户带来不可预期的破坏性体验，是否要跨屏，这个应该由用户自己来进行选择，而不是一打开就跨屏。

④、让跨屏可预测：了解用户使用跨屏模式的场景，并且使用贴合用户预期的设计。确保不同的跨屏模式和呈现结果是用户可预期的。

（1）、跨屏是用户的选择

用户有选择如何使用应用的方式的权力，包括何时跨屏显示。某些应用可能在单屏或者跨屏显示的时候，看起来不够好看，但是如何使用的权力，应该交给用户去选择。

尽管本文会针对如何处理多屏布局提供几种不同的方案和想法，但是请选择适合你的用户和应用的呈现方式。

（2）、考虑用户意图和设备方向

当你的两个屏幕都被利用起来的时候（横向双屏，纵向双屏），了解用户的意图至关重要。尽管还有更多的调研需要做，但是结合我们目前已有的观察，可以得出如下的趋势：

①、在横向双屏模式下，用户更多希望充分利用屏幕空间，因此量屏幕多是用来扩展展示内容；

②、在纵向双屏模式下，用户通常喜欢执行多任务或者提高生产力的活动。因此这两块屏幕会被分开使用，或者分组使用。

（3）、考虑所有支持的布局

在为双屏设备设计应用的时候，有四种常见的布局方案是你需要考虑的。通常这取决于应用是单屏还是跨屏，是默认视图还是全屏视图：

①、单屏默认模式

默认情况下，应用程序应该是最大化状态占据一个屏幕。在双屏分别显示模式下，用户可以单独同两屏的应用界面进行交互和处理，确保可以进行使用、比较甚至交叉引用。

这个状态应该是默认的。就像 之前说的，如果你的应用已经支持了不同分辨率、不同长宽比的屏幕，那么你不用做其他更多的事情。

②、跨屏默认模式

当设备处于双屏状态下（横屏双屏或者竖屏双屏），用户可以将单个窗口从一个屏幕直接延伸覆盖两个屏幕，为内容呈现提供更多的空间。这应该是用户自己的选择，而不应该作为默认打开的模式固化到程序和设置当中。

这一模式应该是可选的。这种跨屏显示单个窗口的模式，应该是双屏设备所独有的。如果你对于你的应用不做 针对性（针对双屏）的修改的话，它会像是在一个完整的大屏幕上显示一样。但是，你也可以针对双屏进行优化，确保你的应用可以兼容双屏设备的独特形态。这些将在后续详细说明。

③、单屏全屏模式

这种模式和之前的单屏默认模式是类似的，但是系统的UI（系统的任务栏、菜单栏、程序菜单、顶部标题等）将会隐藏，这样可以给你带来沉浸式的体验，是游戏和视频类应用的理想选择。

这种模式应该是可选的。你可以使用系统提供的 API 来实现单屏全屏模式。

④、跨屏全屏模式

同样的，你可以通过开发和优化来实现适合双屏的跨屏显示模式。如果用户在跨屏的时候选择的是跨屏全屏显示模式，那么应用在扩展之后，将会覆盖整个屏幕，并隐藏系统UI 元素。

这种模式应该是可选的，你需要考虑的因素和跨屏默认模式类似。

4、如何处理接缝

当单个应用以单个窗口运行，并且跨越两个屏幕的时候，跨屏布局就出现了。如果你原有的应用从未针对双屏设备进行优化的话，那么系统会提示你「应用将会扩展并占据所有屏幕」，并且这个时候，应用界面会自行调整大小，适应新的尺寸。

这种情况下，界面中间的接缝会显得非常明显。这是双屏设备先天的副产物。要如何优雅地处理接缝？这就是下面这节内容将会探讨的问题，我们将会提供一些常见的处理方案。

（1）、是否总是要适应接缝？

如果你的应用不作任何优化就直接在双屏设备上投放使用，接缝并不总会给用户体验带来影响。比如地图类应用，用户可以随意移动地图内容，接缝带来的割裂并不会对使用体验造成实质性的影响。在后面「扩展画布」这一节，将会对这个问题进行深入讨论。

但是对于另外一部分应用，接缝带来的问题就非常严重了。比如在一个表格类应用当中，如果不作修改和调整，有的内容会直接被接缝给割裂开，你必须进行滚动才能正常查看。而对于某些相对更加固定无法移动的元素而言，接缝带来的体验是破坏性的。而这个时候，我们需要使用一些技术方案来处理这个问题。

（2）、规避接缝

由于两块屏幕之间有明显的接缝，因此当用户在使用应用的时候，某些 UI 元素可能会正好被穿过接缝，逻辑上这不会影响功能，但是如果将这些 UI 元素移动到屏幕的一边来显示，会提供更好的体验。最好避免在接缝处显示文本内容，这会影响可读性。

应用程序对话框应该移到屏幕的一边，尤其是需要点击按钮操作的时候。

底部菜单应该移动到屏幕一侧，而不是延伸到两个屏幕上。

用户调用上下文菜单的时候，应该将接缝视作为屏幕边界处理，尤其是在靠近屏幕边缘的地方触发菜单的时候。

应用内的下拉菜单或者可扩展容器如果可能会跨越接缝的话，应该改变扩展方向。

当整个应用界面扩展开来的时候，应该整个移动到屏幕的上侧，而不是在靠近中心的位置横跨接缝。

（3）、贴合接缝

使用偶数列并和接缝对齐。

当界面中使用网格布局的时候，垂直或者水平方向尽量使用偶数行或者偶数列，这样可以让接缝和界面间隙正好重合，用户可以更加舒适地查看信息。

在网格中使用偶数列，尤其是对于容器、表单，并且考虑到接缝来控制间距。

除此之外，还有许多应用会考虑充分利用另外一个屏幕来显示弹出菜单或者下级页面的内容。这种使用逻辑确实会让应用更加易用，并且在视觉上会更加干净清爽。

但是请记住，如果弹出的界面并不是全屏的，可能会暗示它是可折叠和可关闭的，因此，你需要根据实际的设计需求，来灵活的处理呈现样式。全覆盖另外一屏的弹出界面，更加适合小尺寸屏幕。

 

（4）、重新排列 UI 元素

移动到接缝的任一侧

还有一种用来优化响应式布局的方法是，当屏幕方向或者大小发生变化的时候，重新排列你的内容。这种方式让你可以在两个屏幕上随意扩展你的内容，你可以通过分组来重新排列，以更有目的的方式来适配屏幕和内容。

（5）、遮罩和分割

对于一些无法重新排列的元素，比如全屏图片和视频，这个时候只能使用遮罩和分割的方式来处理。

遮罩的思路是，将接缝视作为一个遮罩元素，而图片被它给遮挡了一部分，根据格式塔原理，我们的大脑会自动补足缺少的部分，遮罩遮罩处理方式适合处理多媒体（视频，图片等）这样的画布类型的场景，在这些场景下，保持图像的连续性比显示内容的完整性更加重要。

分割的思路是将内容均匀切割为两个部分，完整呈现，这对于包含有多个控件和元素的普通界面而言，是更加合理的处理方式，包括可能会出现在屏幕中间的按钮。

根据类型的不同，这两种处理方式各有优势，我们将继续跟进不同的用户行为特征，来寻求更优的解决方案。

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

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

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

1、双屏应用交互模式

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

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

2、画布拓展模式

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

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

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

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

✪ 地图类应用

✪ 绘图类应用

3、主从屏模式

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

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

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

这种设计模式的价值：

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

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

✪ 具有列表或者图库的应用

✪ 邮件类应用

✪ 事务管理型应用

✪ 照片或者图片管理类应用

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

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

4、并排翻页模式

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

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

这种设计模式的价值：使用类似书本的并排布局设计，来创造更好的阅读体验（具体可查看马海祥博客《如何才能让页面文字阅读起来更舒适》的相关介绍）。

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

✪ 文档类的应用

✪ 涉及到内容分页的应用

✪ 专门用来阅读的应用

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

5、双屏对比模式

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

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

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

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

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

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

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

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

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

6、伴行面板模式

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

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

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

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

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

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

✪ 图像和绘图类的创意工具

✪ 音乐和视频类的剪辑工具

✪ 游戏类的应用

五、 外设交互模式

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

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

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

1、Wonder Bar 的人体工程学优势

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

2、Wonder Bar 的设计原则

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

下面是 Wonder Bar 的设计原则：

（1）、随时可以精确输入：对于涉及到生产力的任务和操作，精确输入是无价的。Wonder Bar 应该确保用户能够精确地操作，细致准确地导航。

（2）、Wonder Bar 应该是课预测的：用户应该有能力在自己认为合适的情况下，享受 Wonder Bar 带来的好处，它应该遵循分层模型（后面介绍），并且它应该和整个 Windows 10X 的导航体系保持一致。

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

（4）、始终考虑用户的情况：Wonder Bar 的使用场景和用户所处的状态、使用的姿势、屏幕的翻转情况息息相关。在设计 Wonder Bar 的体验的时候，应该兼顾到这些因素。

（5）、简单的体验是最好的：通过研究发现，对于多任务操作操作，低复杂度的轻量级操作，是最为成功的。Wonder Bar 的设计理应优先考虑用户的舒适度和安心程度。

3、基础输入功能

Windows 10X 当中，Wonder Bar 提供虚拟触摸板和多种不同类型的输入功能。

（1）、虚拟触控板

在双拼设备上，实体键盘和虚拟键盘能够提供Wonder 和传统的笔记本的键盘输入类似的体验，而传统笔记本上所带有的触控板，则可以用 Wonder Bar 来实现。用户可以在 Wonder Bar 的触控板上使用熟悉的手势交互，包括多指交互，因此，这对于他们的工作流程是狠自然的。触控板属于 Wonder Bar 当中集成的基本组件。

此外， Wonder Bar 还支持手写输入，这可以极大地方便用户在使用过程中随时记笔记。这是一种常见且直观的多任务操作模式。

（2）、多功能输入面板

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

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

4、应用集成

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

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

（1）、系统媒体播放组件

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

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

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

（2）、缩略叠加模式

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

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

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

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

5、Wonder Bar 的交互模式

关于Wonder Bar 的交互模式，我们就从可用的应用区域和Z轴上的界面分层这2个方面简单的讲解一下：

（1）、可用的应用区域

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

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

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

（2）、Z轴上的界面分层

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

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

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

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

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

马海祥博客点评：

当今的互联网产品设计市场竞争日益激烈，其本质为用户体验之争。如何协调适合多终端的界面设计，使跨屏应用更加符合平台特性和提升用户体验变得愈发重要，因而富有研究价值和意义。

面对跨屏复杂性特征，根据系统设计目的性、层次性和开放性的原理，以用户为中心提供设计对策，并考虑跨屏产品的“易用性”，从信息架构、视觉风格、界面元素以及交互体验的角度总结了四个针对跨屏复杂性的界面设计原则。

本文发布于马海祥博客文章，如想转载，请注明原文网址摘自于http://www.mahaixiang.cn/jhsj/2727.html，注明出处；否则，禁止转载；谢谢配合！