双屏设备简介
双屏设备是便携式设备，具有两个以独特的方式协同工作的对称屏幕，以灵活的外形规格实现高效工作。
使用 Microsoft Surface Duo 等双屏设备，用户可随时随地以前所未有的速度完成工作：在一个屏幕上做笔记，然后在传输过程中在另一个屏幕上查看整个项目提案；在餐桌旁坐下，一边等待午餐，一边用软件或硬件键盘写一封仔细编写的电子邮件；看一段视频、浏览网页或者阅读书籍，回到你的生活。
尽管双屏设备为应用解锁了新的可能性，但你现有的应用仍可在设备上如预期一样工作，并且你无需执行任何工即可获得一些改进。 本文档将指出这些问题，同时还将展示通过使应用了解设备的双屏特性来增强应用体验的新方法。
虽然现在市场上有不同的双屏设备，而且将来还会有更多，但我们认为可以通过一种常用的方式来实现这些设备的应用设计。 我们希望这有助于你的应用适用于更多的设备，而无需针对每个设备从头开始重新设计。
在本文中，我们将讨论一些通用的设计模式和概念，无论你的目标操作系统或所使用的开发语言是什么，它们均适用。 有关为双屏设备开发应用的特定于平台的信息，请参阅 Kotlin 和 Java、React Native、Xamarin、Unity 游戏开发、Web 技术或 Windows。
技术仍在不断发展，我们此处的指南可能会随着我们的进步而改变。 欢迎你提供反馈。
双屏概述
双屏设备可以有一系列的硬件和工业设计变化。 最近发布的 Surface Duo 以及其他计划内设备旨在帮助定义这一类别，但其他设备可能配备更大的显示器或不同的铰链设计。 在设计应用时，请记住，应避免按照当前可用的任何特定设备的规格进行设计。
所有双屏设备都可以折叠、翻转和旋转。 两个屏幕都可以用作显示器，或者一个屏幕可以用作键盘。 不同的外形规格支持各种各样的活动，并允许用户根据自己的情况调整设备。 通过配合应用使用各种模式，你可帮助你的用户实现更多目标。
用户启动应用时，其核心窗口将打开并最大化，占据单个屏幕的全宽和全高。 用户可以通过这种方式同时打开多个应用，从而实现并行使用应用和直观的拖放场景。
应用也可以跨两个屏幕显示，这就是所谓的跨屏布局。 默认情况下，应用表现得像是在更大的屏幕上显示一样。 你可修改现有的应用布局以适应两个屏幕之间的接缝，也可以进一步使用专为充分利用双屏设备而创建的布局控件来设计应用。 本文稍后将更详细地讨论这一点。
采用和改进现有功能
你可能已在你的应用中利用了许多功能，而这些功能将继续在 Microsoft 支持的双屏设备上轻松工作，并将继续提供良好的应用体验。 在讨论如何针对专门双屏场景设计应用之前，我们将讨论这些问题。
响应式应用布局
如果你设计的应用使用了响应式布局，则无论设备的屏幕大小和方向如何，它在每台设备上都会看起来很棒。 为所选择的 UI 平台使用现有的布局技术，自动缩放以填充屏幕。 如果你有依赖于大小和纵横比的屏幕元素，请使用 UI 平台提供的 API 在大小或纵横比更改时调整布局。
由于你的应用在许多不同的设备上运行，因此你可能已开发它来处理各种屏幕和窗口大小，它应该能够继续无缝地工作。 但请记住，你可能需要考虑电脑和移动设备不常见的新屏幕大小和纵横比，例如纵向（高视图）、横向（宽视图）、纵向双屏（纵向宽度的两倍）和横向双屏（横向高度的两倍）。
考虑所有设备方向
我们希望用户能够以适合自己的方式创造性地使用双屏设备。 这意味着你的应用程序可能并不始终以典型的方向（Android 为纵向或 Windows 为横向）使用。 考虑支持所有方向和屏幕配置。 例如，如果应用主要是针对纵向设计的，但支持大量文本输入，则用户可能更倾向于在双屏幕设备上以横向方式使用它，键盘位于底屏幕上。
双屏布局可以为多任务处理提供更好的环境。 你无法始终了解用户会以何种模式拿着设备；但通过了解潜在的模式，你可针对对于应用最有意义的模式来优化应用。
我们的研究表明，用户在平面上打字或书写更为舒适。 如果应用高度地以输入为导向（比如一个笔记应用），你可优化它以用于横向布局（如果尚未这样做）。
支持各种输入
许多设备（包括新的双屏设备）支持多种输入，包括键入、触控和笔。 双屏设备的灵活性让用户可根据自己的任务在模式之间快速切换。 若要确保获得良好的用户体验，请确保你的应用支持所有可用的输入类型，以便用户保持控制，并可以按其喜欢的方式与你的应用进行交互。
拖放
确保应用支持拖放，这是另一种确保在使用不同类型的输入时获得良好用户体验的方法，这不仅适用于双屏设备，也适用于所有其他设备类型。
拖放功能是一个你已经可以利用的功能。 然而，并行运行应用的双屏设备特别适合拖放式交互，以获得出色的应用体验。
若要在应用中启用拖放功能，请考虑用户可直接操作文本、链接、图像或丰富对象进出应用体验的场景，然后：
- 在任何可以剪切、复制和粘贴的位置，启用拖放。
- 在任何可以共享内容的位置，考虑启用拖放。
应用的多实例
用户可能希望利用第二个屏幕查看来自同一应用的不同内容。 若要启用此功能，请考虑支持多实例，即应用的多个实例并行运行。
媒体的画中画体验
如果你正在创建一个媒体应用，该应用可在另一个应用运行时继续在前台播放视频，请考虑支持画中画体验。 随着屏幕面积的增加，用户有机会通过在观看视频的同时执行另一项任务来完成多项任务。
双屏用户体验注意事项
在上一节中，我们讨论了在应用中可以支持的功能，这些功能并不特定于双屏设备，但是当应用在双屏设备上运行时，这些功能可改进用户体验。 现在，我们来看看当应用在双屏设备上运行时，你可以执行哪些操作以提供独特的体验。
在双屏幕设备上，应用可以在单个屏幕上运行，也可以在这两个屏幕上运行。 跨两个屏幕显示单个应用时，就是所说的跨屏。 应用对跨屏状态的响应会对用户体验产生很大影响。 双屏设备所提供的独特模式可能解锁前所未有的应用使用方式。 例如，中间有接缝的设备可以很好地适应从内容条块化中获益的高生产率场景。
在决定哪些特定的双屏设计技术可能适用于应用之前，你应该考虑以下一些原则：
- 提供连续值
- 作为用户在应用中执行的端到端任务流的一部分，跨屏状态应该会丰富用户的体验。 它不应该是一个仅仅是暂时有价值的自定义状态。 与其考虑具体的屏幕，不如考虑整体情况。
- 这不仅仅是跨屏
- 应用不应该只有在跨屏时才出色。 请勿将基本功能隐藏在跨屏状态中，使用户必须跨屏使用应用才能执行基本任务。
- 用户始终拥有控制权
- 为了避免给用户带来不可预知（或潜在破坏性）的体验，应用不应该在没有用户有意发起的操作的情况下自动进入跨屏状态。 让用户决定。
- 使跨屏可预测
- 理解用户的跨屏意向，并为此进行设计。 确保跨屏的结果是可预测的，并在任何给定的时间增加价值。
用户选择了跨屏
用户有权完全控制其使用你的应用的方式，包括需要跨屏使用应用的时间。 一些应用（比如计算器）可能看起来不太好，或者从这种配置中得不到任何好处，但这仍然是用户的选择。 但是，你可能会认为，由于大多数用户不会选择跨屏使用应用，因此不采取任何操行动来适应用户的操作是可以的。
虽然本文就如何处理多屏幕布局提供了几种不同的想法，但请做出适合用户和应用的选择。
考虑用户意向和设备方向
设计应用的体验以利用两个屏幕时，在横向双屏和纵向双屏配置中，了解用户跨屏背后的意向，这点非常重要。 虽然还有更多的研究要做，但我们开始了解到了这些用户偏好的趋势：
- 在横向双屏中，用户想要使用更多的屏幕空间，因此使用两个屏幕来扩展内容区域。
- 在纵向双屏中，用户更喜欢多任务或高生产率的活动，因此这两个屏幕用于对内容进行分离和分组。
在决定如何应用双屏设计模式时，请记住这一趋势。 如果你完全适应应用的布局和体验，用户是否会受益？或者你是否可以通过简单地排列应用的控件和元素来支持跨屏，以使它们不会被接缝遮挡？
考虑所有支持的布局
在为双屏设备设计应用程序体验时，需要考虑四种布局方案，具体取决于应用是在单屏上使用还是跨屏使用，以及视图是默认视图还是全屏视图。
单屏 - 默认
- 默认情况下，应用以最大化状态打开并占据一个屏幕。 在双屏模式中，用户可以并排运行两个应用以同时比较、使用或交叉引用内容。
- 默认情况下支持。 如前所述，如果应用的设计可处理不同的屏幕大小、纵向和横向，则无需执行其他操作。
跨屏 - 默认
- 当设备处于双屏模式（纵向双屏或横向双屏）时，用户可以在两个屏幕上扩展一个应用，从而为内容留出更多空间。 用户负责跨屏使用应用，这不是应用以编程方式进入的状态。
- 支持是可选的。 跨屏模式是双屏设备独有的。 如果不对应用进行任何修改，它就会表现得像是在一个大屏幕上显示一样。 但是，你可以实现一系列布局优化，使应用利用双屏设备的独特功能。 本文稍后将更详细地介绍这些内容。
单屏 - 全屏
- 这与默认布局类似，只是隐藏了系统 UI（任务栏、系统栏、应用栏、应用标题）以创建完全沉浸式体验，非常适合游戏和视频播放。
- 支持是可选的。 可使用可用的 API 将应用置于全屏模式。
跨屏 - 全屏
- 可以通过编程方式扩展应用，以便在跨屏时使用全屏模式。 如果应用以全屏模式显示在单个屏幕上，它将保持全屏状态。
- 支持是可选的。 考虑在跨屏模式下的全屏以及单屏的好处。
如何处理接缝
跨两个屏幕显示单个应用时，将发生跨屏布局。 默认情况下，如果应用未针对此场景进行自定义，系统将通知应用，它现在占据了更大的屏幕宽度和高度，然后应用的 UI 将调整自身大小以适应新的屏幕尺寸。
当一个应用跨越两个屏幕时，会出现一个接缝 - 两个屏幕之间的空间。 这是制造双屏设备的副产品。 本节将讨论一些可以让应用处理接缝的想法和技术。
是否始终适应接缝？
根据你的应用，一些 UI 可能完全可以正常使用。 如果用户可以操作应用内容以避免被接缝所遮挡，你可能会决定不执行任何特殊工作来适应接缝。
例如，地图应用可以跨两个屏幕以利用屏幕上的空间，而不执行任何操作来处理接缝，因为用户可移动地图内容来避开接缝。 稍后将在扩展画布一节中详细讨论此问题。
下图显示了一个网格 UI，用户可以轻松滚动以避开接缝。 但是，如果 UI 无法像网格上方的工具栏一样滚动，你可考虑贴靠到边界，这是我们稍后讨论的技术之一。 我们建议你与用户测试不同的设计思想，确定应用的最佳选择。
避开接缝
将项目移到一边
因为在两个屏幕的中间有一个明显的接缝，当用户跨屏使用应用时，一些 UI（尤其是位于应用布局中心的元素）可能会被接缝遮挡。 这不会导致任何功能问题，应用将继续工作；但是，如果将 UI 移到屏幕的一侧，它可能会提供更好的体验。 避免在接缝处显示文本或内容是一个很好的经验法则，因为这可能会影响应用的易读性和可用性。
应用启动的对话框应该移至其中一个屏幕上，而不是同时延伸在两个屏幕上，尤其是当该处有用户需要执行的按钮或操作时。
底部菜单应该移动到一边或另一边，而不是延伸在两个屏幕上。
用户调用的上下文菜单应将接缝视为边界，尤其是当它们在屏幕边缘附近被调用时。
应用内下拉菜单或可扩展容器应改变扩展的方向。
当应用跨屏时，将 UI 移到顶部或左侧屏幕的中心，而不是整个应用区域的中心。
贴靠到接缝
使用偶数列对齐接缝边缘
UI 有网格或表格布局时，如果垂直线或水平线与接缝对齐，用户可能更容易查看和使用应用。
在网格中使用偶数列（特别是容器、表格等），并考虑距离接缝的边距。
此外，许多应用利用重叠在应用内容之上的部分屏幕 UI。 根据其大小，你可能希望重叠的 UI 占据整个第二个屏幕。 这会使你的应用更易于使用、视觉上更清晰。 请记住，重叠的部分 UI 有时可能意味着它是可折叠的或临时的，因此在更改此行为时请注意交互含义。 此方法可能更适合小型设备。
重新排列 UI 元素
移到接缝的任意一侧
当屏幕方向或大小改变时，可对内容进行重新排列，这是一种可用来优化双屏设备的响应式布局技术。 请勿在两个屏幕上随意延伸应用的元素，而可以使用更好的分组重新排列它们，以便更有目的地调整应用内容。
屏蔽和拆分
软件可以通过两种方式处理接缝。 一种是屏蔽，另一种是拆分 。
屏蔽技术在接缝后面渲染图像。 当部分图像被遮挡时，我们的大脑会自然地将“看不见的”部分连接起来。 这种技术对于媒体（视频、照片等）以及画布类型的场景（在这些场景中，保持图像的连续性比确保所有内容都被显示出来更为重要）来说通常较好。
拆分技术通过切割和拉开图像来呈现图像。 这与跨多个监视器显示应用时的行为相同。 这项技术适用于有许多控件的应用，如可能出现在两个屏幕中间的按钮。
根据要创建的应用类型，每个选项都有好处，我们将继续了解不同情况下的最佳默认行为。
双屏应用模式
前面讨论的技术主要是为了适应接缝，以便应用继续为用户提供价值。 你可以通过以下模式使用两个屏幕。
下面是 5 个要考虑的双屏模式。 这些并不是双屏设备仅有的模式，而是作为你想象力增长的起点在此处提供。
扩展的画布
扩展画布模式是最简单的双屏模式，但功能强大。 如果你需要更大的画布来完成绘图等任务，或者如果你的应用有自由流动的画布，在某些重要内容被遮挡时，用户可以自由滚动以避开接缝，则可以考虑使用此模式。 这样做的好处是让你的应用拥有更多的屏幕空间，而不是把它限制在一个或另一个屏幕上。
此模式仅适用于 UI 的画布部分。 如果接缝会遮住应用的非画布部分，你可能仍然需要使用一种其他技术来适应接缝。
核心价值：
通过扩展画布，用户可以利用双屏设备所提供的更大的屏幕空间。
可从此模式中受益的应用类型：
- 地图应用
- 绘图画布应用
List-detail
列表 - 细节模式具有一个主窗格（通常带有列表视图）和一个内容细节窗格。 当选择列表中的项时，将会更新细节窗格。 此模式自然地适用于在你具有更大的查看区域的情况下。 它通常用于电子邮件和通讯簿。
通过利用两个不同的屏幕并贴靠到自然边界，你可以使用一个屏幕显示“项目”列表，另一个屏幕显示所选项目的详细信息。
如前所述，我们开始观察到用户倾向于使用横向双屏视图以利用更大屏幕空间。 因此，你可以考虑在纵向双屏模式下并行显示列表视图和细节视图，但在横向双屏模式下改为仅显示列表视图和细节视图。
核心价值：
将导航或概述从细节中分离出来，使用户可以深入挖掘内容，同时保持它们在整个列表/聚合中的位置不变。
可从此模式中受益的应用类型：
- 具有列表或库的应用
- 邮件应用
- 计划应用
- 照片或图像特选应用
- 带有播放列表和歌曲详细信息的音乐应用
- 具有强大导航结构的应用
双页
有些应用自然地倾向于一种类似书籍的分页体验。 你可以使用自然边界显示集合中的多个项（如页面或图片），否则用户可能只可一次查看一项。
根据你的应用，可以决定每 2 页分页，或一次前进一页。
核心价值：
利用书籍拟态隐喻在每个屏幕上显示一个页面，这样更有利于阅读。
可从此模式中受益的应用类型：
- 面向文档的应用
- 具有分页内容的应用
- 用于阅读的应用
- 带有明细化画布的应用（例如笔记、画板等）
双视图
通过两个屏幕可以自然地对同一类型内容的两个版本同时进行比较和对比（例如两张图像、两个列表或两个文档）。
它还可以用来同时以两种不同的方式显示相同的信息，每个屏幕都可以无缝地工作，为用户提供更多的信息。 例如，一个屏幕上是一个餐厅列表，另一个屏幕上是位置地图。
如果你想在不设计两个特定视图的情况下获得类似双视图的体验，可以考虑用你的应用支持多实例，以利用操作系统提供的内置支持。 这对于比较在两个选项卡上打开的两个产品或其他类似场景可能很有用。
核心价值：
在同一容器中拥有同一应用的多种视图，从而实现同时比较类型相似的内容。
可从此模式中受益的应用类型：
- 能够从拥有并行的“之前”/“之后”状态中受益的编辑工具（例如，Markdown 代码和预览）
- 内容和上下文并行（例如，地图和餐馆列表）
- 允许用户比较类似项目的应用
- 有两张内容协调但每页需分开的画布（例如，一边是画布，另一边是笔记）
伴侣窗格
通过在应用跨屏时显示原本隐藏的二级表面，伴侣窗格模式是一个利用增加的屏幕空间的好机会。
你还可以利用两个屏幕，将应用画布置于一个屏幕上，并使用另一个屏幕保存操作画布内容的工具。 对工具场景使用伴侣窗格时，出于人体工程学的原因，工具可能更适合置于右侧或底部，具体请测试你的应用，查看哪种最适合你的应用。
核心价值：
显示互补上下文以扩大用户的任务，通常具有主/次关系，方法是提升到先前隐藏的二级功能的表面，以便更快地访问。
将用于使用的内容与用于交互的工具分离开来，使用户更容易分析和关注内容。 通过将工具置于更靠近手的位置，它提供了一个更符合人体工程学的体验，尤其是在横向双屏模式下。
可从此模式中受益的应用类型：
- 在主要内容旁边显示补充信息的高生产率应用
- 图像绘制应用之类的创造性工具
- 音乐或视频编辑器应用
- 游戏应用
后续步骤
选择开发平台，了解如何生成双屏应用：