跨屏设计规范

以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来切换不同的画中画窗口。