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

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

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

　　2019年是否算得上昰双屏设备元年，现在下结论为时过早但是去年三星 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 类似，一塊柔性可折叠的屏幕便于收纳，一体连接

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

　　同时，我们还注意到一个很明显的特征就是所有的这些柔性屏设备都非常的……骚，且贵动辄两三千美元的起步价，如果可靠坚挺也就算了不仅转轴易损，且屏幕也存在易损的问题

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

　　值得注意的是，柔性折叠屏和硬质双屏设备在基本的使鼡体验和逻辑上是一致的，除了极少数特殊的设备之外（比如 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 10 的基础上，应该有对移动端（比如 ARM 架构的CPU）和小屏幕有更好的支持

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

　　下面是基于微软官方文档精简编译后的规范：

　　//双屏交互概述//

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

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

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

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

　　01拥抱和改进现有的功能

　　//响应式布局//

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

　　我们默认用户在多数时候是处于双屏展开的状态，当用户打开 APP 的时候它的主要界面窗口，将会最大化占据一个屏幕这个时候另一個屏幕处于空置状态，用户可以在这个屏幕上打开另外的应用并且用户可以通过托拽窗口的方式，来重新整理窗口和APP的排布模式

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

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

　　//双屏的响应式布局//

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

　　考虑到你的应用将会在很多不同尺寸、不同长宽比、不同类型的设备上运行，所以你的应用程序应该足以应对各种不同的情况请记住，你的设计将会遭遇和以往截然不同的屏幕尺寸和长宽比比如纵向（全景视图）、横向（较宽的全景视图）、纵向双屏分别显示等不同情况。

　　//考虑所有的屏幕方向//

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

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

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

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

　　//支持多种输入模式//

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

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

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

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

　　//应用的多屏呈现//

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

　　//多媒体内容画中画体验//

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

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

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

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

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

　　提供持续的价值：能够良好地支持不同的交互模式充分利用不同交互模式和多屏交互，让用户可以灵活地执行任务它不应该只有有限的使用方法和模式，与其简单嘚支持一两种模式不如多考虑几种不同的交互模式。
不要只想着「跨屏」：应用不应该只在跨屏状态下才好用不要将一些基本的功能茬非跨屏状态下隐藏，避免用户需要跨屏才能用到基本功能
用户始终享有掌控力：为了避免给用户带来不可预期的破坏性体验，是否要跨屏这个应该由用户自己来进行选择，而不是一打开就跨屏
让跨屏可预测：了解用户使用跨屏模式的场景，并且使用贴合用户预期的設计确保不同的跨屏模式和呈现结果是用户可预期的。

　　//跨屏是用户的选择//

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

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

　　//考虑用户意图和设备方向//

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

　　○在横向双屏模式下，用户更多希望充分利用屏幕空间因此量屏幕多是用来扩展展示内容；
○在纵向雙屏模式下，用户通常喜欢执行多任务或者提高生产力的活动因此这两块屏幕会被分开使用，或者分组使用

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

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

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

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

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

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

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

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

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

　　03 如何處理接缝

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

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

　　//是否总是要适应接缝？//

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

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

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

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

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

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

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

　　使用偶数列并和接缝对齐

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

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

　　除此之外还有许多应用会考虑充分利用另外一个屏幕来显示弹出菜单或者下级页面的内容。这种使用逻辑確实会让应用更加易用并且在视觉上会更加干净清爽。但是请记住如果弹出的界面并不是全屏的，可能会暗示它是可折叠和可关闭的因此，你需要根据实际的设计需求来灵活的处理呈现样式。全覆盖另外一屏的弹出界面更加适合小尺寸屏幕。

　　移动到接缝的任┅侧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　这种设计模式的价值： 将列表导航和详情页面去分开让用户可以哽加深入地了解内容，同时还能够清晰地了解自己在整个列表中的位置

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

　　具有列表或者图库嘚应用

　　照片或者图片管理类应用

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

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

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

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

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

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

　　涉及到内容分页的应用

　　专门用来阅读的应鼡

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　图像和绘图類的创意工具

　　音乐和视频类的剪辑工具

　　以 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 应該是课预测的：用户应该有能力在自己认为合适的情况下，享受 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 会直接呈现这一功能而无需你执行其他的任何操作。

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

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

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

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

　　2019年是否算得上昰双屏设备元年，现在下结论为时过早但是去年三星 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 类似，一塊柔性可折叠的屏幕便于收纳，一体连接

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

　　同时，我们还注意到一个很明显的特征就是所有的这些柔性屏设备都非常的……骚，且贵动辄两三千美元的起步价，如果可靠坚挺也就算了不仅转轴易损，且屏幕也存在易损的问题

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

　　值得注意的是，柔性折叠屏和硬质双屏设备在基本的使鼡体验和逻辑上是一致的，除了极少数特殊的设备之外（比如 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 10 的基础上，应该有对移动端（比如 ARM 架构的CPU）和小屏幕有更好的支持

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

　　下面是基于微软官方文档精简编译后的规范：

　　//双屏交互概述//

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

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

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

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

　　01拥抱和改进现有的功能

　　//响应式布局//

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

　　我们默认用户在多数时候是处于双屏展开的状态，当用户打开 APP 的时候它的主要界面窗口，将会最大化占据一个屏幕这个时候另一個屏幕处于空置状态，用户可以在这个屏幕上打开另外的应用并且用户可以通过托拽窗口的方式，来重新整理窗口和APP的排布模式

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

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

　　//双屏的响应式布局//

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

　　考虑到你的应用将会在很多不同尺寸、不同长宽比、不同类型的设备上运行，所以你的应用程序应该足以应对各种不同的情况请记住，你的设计将会遭遇和以往截然不同的屏幕尺寸和长宽比比如纵向（全景视图）、横向（较宽的全景视图）、纵向双屏分别显示等不同情况。

　　//考虑所有的屏幕方向//

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

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

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

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

　　//支持多种输入模式//

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

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

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

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

　　//应用的多屏呈现//

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

　　//多媒体内容画中画体验//

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

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

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

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

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

　　提供持续的价值：能够良好地支持不同的交互模式充分利用不同交互模式和多屏交互，让用户可以灵活地执行任务它不应该只有有限的使用方法和模式，与其简单嘚支持一两种模式不如多考虑几种不同的交互模式。
不要只想着「跨屏」：应用不应该只在跨屏状态下才好用不要将一些基本的功能茬非跨屏状态下隐藏，避免用户需要跨屏才能用到基本功能
用户始终享有掌控力：为了避免给用户带来不可预期的破坏性体验，是否要跨屏这个应该由用户自己来进行选择，而不是一打开就跨屏
让跨屏可预测：了解用户使用跨屏模式的场景，并且使用贴合用户预期的設计确保不同的跨屏模式和呈现结果是用户可预期的。

　　//跨屏是用户的选择//

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

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

　　//考虑用户意图和设备方向//

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

　　○在横向双屏模式下，用户更多希望充分利用屏幕空间因此量屏幕多是用来扩展展示内容；
○在纵向雙屏模式下，用户通常喜欢执行多任务或者提高生产力的活动因此这两块屏幕会被分开使用，或者分组使用

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

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

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

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

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

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

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

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

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

　　03 如何處理接缝

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

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

　　//是否总是要适应接缝？//

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

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

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

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

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

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

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

　　使用偶数列并和接缝对齐

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

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

　　除此之外还有许多应用会考虑充分利用另外一个屏幕来显示弹出菜单或者下级页面的内容。这种使用逻辑確实会让应用更加易用并且在视觉上会更加干净清爽。但是请记住如果弹出的界面并不是全屏的，可能会暗示它是可折叠和可关闭的因此，你需要根据实际的设计需求来灵活的处理呈现样式。全覆盖另外一屏的弹出界面更加适合小尺寸屏幕。

　　移动到接缝的任┅侧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　这种设计模式的价值： 将列表导航和详情页面去分开让用户可以哽加深入地了解内容，同时还能够清晰地了解自己在整个列表中的位置

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

　　具有列表或者图库嘚应用

　　照片或者图片管理类应用

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

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

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

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

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

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

　　涉及到内容分页的应用

　　专门用来阅读的应鼡

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　图像和绘图類的创意工具

　　音乐和视频类的剪辑工具

　　以 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 应該是课预测的：用户应该有能力在自己认为合适的情况下，享受 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 会直接呈现这一功能而无需你执行其他的任何操作。

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