为 iPhone Duo 做设计：苹果官方设计原则全解读
很多人看到了iPhone Duo，认为这不过是抄袭罢了，或者一些设计点是“为了设计而设计”，其实不然，苹果每次推出一个形态的产品，背后都是大量的设计规范和设计思考，这就是标准化和秩序的设计产物。而很多厂商只管设计喜爱的尺寸宽高和比例，不在意适配。
iPhone Duo 的设计重点，不是把现有 iPhone 界面按比例放大，而是让内容在外屏、内屏和折叠状态下都能保持可读、可点、可预测。这篇文章介绍的是「iPhone Duo 六支苹果官方 Tech Talks 视频」系列的第一篇，后面五篇分别讨论适配、导航栏、自适应布局、多屏和相机。本文先从苹果给出的设计原则开始，梳理一套不依赖特定姿态的设计方法。
先理解 iPhone Duo 的几种使用姿态
闭合时，iPhone Duo 的外屏更宽、更短，仍是熟悉的手机形态。展开后，内屏提供更大的内容区域。设备还可以像书一样半折、像笔记本电脑一样放在桌上，或靠边自行立起。设计不能只考虑开合两态。
苹果建议先把应用做成可自由调整大小的界面，再处理姿态细节。用户会在看视频、桌面免提等场景中切换设备，功能不能绑定某一种状态。
设计原则：把内容留给内容
控件放到侧边，内容获得更多纵向空间。 在闭合的外屏上，原本常在顶部或底部的按钮与控制项会移到屏幕右侧。这样既方便右手拇指操作，也让左侧保留出更接近传统手机比例的内容区域。标签栏、应用工具栏和返回按钮等导航控件，都可以使用这块侧边区域。
内屏也采用同一思路。控件沿侧边排列，用户不必伸手到中央，内容还能保留更多纵向空间。布局可能不对称，但侧边位置更利于触达和阅读。
半折时，另一个问题出现了：中间的弯曲区域不适合放文字、图片和按钮。系统会让内容离开中心，文字和图像避开弯曲处，按钮与其他交互元素向两侧移动。弯曲处就这样成了布局的自然分隔线。
纵向半折也一样：交互元素移到屏幕下半部分，更易操作，设备放在桌面上也更稳定。可滚动内容不必刻意避开折叠区域。
iPhone Duo 支持两个应用并排运行。将应用拖向一侧即可创建 50/50 分屏，在一侧处理任务时继续使用另一侧。分屏里的控件靠近各自应用的外缘，应用在左侧，控件也到左边缘。画中画视频可固定在顶部，下面的应用按剩余空间调整大小；设备半折后，视频扩展到其中一半。
适配策略：只针对两个尺寸类
不要为每一种持机姿势做一套定制布局。苹果建议把注意力放在两个尺寸类上：外屏的 compact 宽度，以及内屏的 regular 宽度。姿态会变化，可用空间也会变化，但应用只需要根据尺寸类响应，而不是识别每一个具体角度。
实现布局时，避免固定宽度、固定断点和绑定某个屏幕的度量单位。布局边距与水平安全区域内边距更适合这类设备。它们描述的是内容和边界之间应保留的关系，系统可以据此处理不同的可用区域。若现有应用已经依赖这些规则，适配 iPhone Duo 往往不需要重做整套界面。
桌面免提也可以单独设计：媒体内容放在上方，可点击控件放在下方较稳定的区域。控件和整体层级仍要与其他姿态一致，不能让用户因设备摆放方式改变而重新学习。
定位控件：先保证触达，再谈对称
在 iPhone Duo 上，工具栏、标签栏和导航控件通常沿设备侧边放置。内屏竖屏时仍可保留水平控制栏，因为此时有足够的垂直空间展示内容；其他情况下，侧边区域更能兼顾触达和内容面积。
这块空间还要和状态栏、实时活动共享。空间不足时，应用控件会自动折叠到溢出菜单，不要假设所有按钮始终完整显示。
现有工具栏可以这样映射：顶部按钮移到垂直空间顶部，底部按钮移到设备底部，标签栏继续底部对齐。文本按钮或分段控件太宽时，留在导航栏中，不要强行侧置。
界面不对称很正常。检查重点是控件是否易于触达、内容是否被挤压，以及系统元素出现时是否仍可用。
外屏内容：让安全区域替你避让
外屏上，大多数内容都需要从屏幕中央略微偏移，避免被右侧控件遮挡。只要内容按照水平安全区域内边距对齐，这个偏移就会自动发生。不要把同一套内容写死在几何中心，否则在控件出现或展开时，正文可能被盖住。
沉浸式、视觉内容占主导且不支持滚动的界面可以居中，但交互元素不能落在右侧控件下面。游戏画面、全屏图片可以采用这条规则。
也可以组合两种做法：背景图片或标题栏铺满宽度，前景的可滚动内容向内收缩。点击、切换或拖动的元素都放在滚动区域里。
内屏内容：不要只是拉伸
内屏空间更宽，直接拉长外屏界面通常会留下空白。分屏视图可以同时展示应用层级中的多个层次，外层和内层的层级关系要保持一致。
另一种做法是为宽内屏调整内容结构。音乐应用可以在空间较窄时使用垂直堆叠，空间变宽后自动切换为双栏布局。信息密集型应用还可以把标签栏呈现为侧边栏，健康应用就是适合这种方式的例子。但这不是所有应用的默认答案，只有当内容本身有足够信息层级时，侧边栏才有价值。
无论采用哪种布局，外屏与内屏都要保持可预测。用户可能频繁开合设备，功能不应锁在某个状态里。布局可以改变，层级和操作逻辑不能消失。
Sheet 行为：随姿态改变位置
浮动面板在 iPhone Duo 上会根据姿态变化。外屏中，面板里的控件默认移到一侧；如果内容更适合保留原来的位置，可以禁用浮动面板中的垂直条，让控件不移动。对于只有一个工具栏按钮的弹出视图，这种处理尤其合适。弹出视图会停在前置摄像头前方一点的位置，状态栏也会重新定位。
内屏无论横屏还是竖屏，弹出视图都使用标准的水平条。设备半折时，弹出窗格向一侧滑动，避免停在折痕上，许多系统组件也会这样处理。
折叠避让：交互元素远离中线
按钮正好落在折痕上时很难点击，因此 iPhone Duo 会在半折状态下把交互元素向一侧轻推。弹出视图、提示、菜单和工具栏按钮等系统组件已经集成了这种行为。应用应尽可能使用这些组件，少做一套自定义的折痕判断。
判断标准很简单：交互元素尽量远离弯曲区域，可滚动内容无需避开。优先使用系统组件，也能减少自定义布局分支。
结语：先做可调整的界面
为 iPhone Duo 设计，不必为所有姿态逐一写条件判断。用 compact 和 regular 两个尺寸类组织布局，依靠布局边距与水平安全区域内边距处理边界；再把控件移到侧边，让内容避开中线，并用分屏、双栏和系统浮动面板处理内屏与半折状态。
可以从这几项开始：
- 检查界面是否依赖固定宽度、固定断点或特定屏幕尺寸。
- 将顶部、底部工具栏和标签栏按新的侧边规则重新检查一遍。
- 确认外屏上的交互元素不会被右侧控件遮挡。
- 在内屏测试分屏、双栏或侧边栏是否比单纯拉伸更合适。
- 半折设备，逐个检查按钮、菜单、提示和浮动面板是否避开折痕。
做到这些，应用就能用一套稳定的内容层级应对不同屏幕与姿态，而不是为每一种状态维护一张孤立的界面。
系列文章
这套教程一共六篇，对应苹果官方的六支 Tech Talks 视频：
