iphone-duo-design-review

为 iPhone Duo 设计

这是一项设计技能，而非实现技能。有关 API，请参阅同级技能。

合上时，iPhone Duo 小巧、熟悉，便于放入口袋。展开后，它拥有 iPhone 上迄今最大的画布。用户会以多种方式拿起或放置它：像书本一样部分折叠、像笔记本电脑一样放在桌面上并让内屏朝向用户，或立在边缘上。

核心原则

一个能适应的应用，而不是拼凑起来的多套设计。

用户会频繁展开和合上设备，常常是在任务进行中。如果内屏和外屏之间的层级结构或可用功能发生变化，用户每次都得重新适应。因此：

• 切勿将功能与某种姿态绑定。在一种姿态下可用的所有功能，在其他姿态下也必须可用。
• 在不同显示屏上保持相同的层级结构。
• 如果确实要为特定姿态构建布局，也要保持与其他布局相同的控件和总体层级结构。

针对两种尺寸类别设计，而非针对姿态设计

为每种姿态定制布局很有诱惑力，但要克制。针对以下两种尺寸类别进行设计：

• 紧凑宽度 — 外屏
• 常规宽度 — 内屏

避免使用固定宽度、断点或任何与特定屏幕挂钩的度量值。使用布局边距和水平安全区内边距进行构建，大部分适配便会自动完成。简单来说：将应用设计为可自由调整大小，iPhone Duo 的适配问题基本就解决了。

唯一值得考虑的可选布局是桌面姿态——媒体显示在上方，便于点击的控件位于下方的稳定底座上。这适合免手持使用。此布局是可选的，而且仍须为用户提供与其他所有姿态相同的控件。

侧边控件

合上时，显示屏比传统 iPhone 更宽、更短。原本位于顶部和底部的控件会移到右侧，以腾出垂直空间，并置于拇指容易触及的位置。控件左侧是完整无遮挡的内容区域，其大小与传统 iPhone 屏幕相当。

这个侧边区域由多个元素共用，包括标签栏、应用工具栏、返回等导航控件、重新设计的状态栏，以及动态岛——实时活动到来时，它现在会垂直展开。空间不足时，应用控件会自动折叠到溢出菜单中。

将现有 iPhone 应用迁移过来，大部分工作只是机械调整：

• 顶部工具栏按钮 → 移到垂直区域顶部
• 底部工具栏按钮 → 移到垂直区域底部
• 标签栏 → 仍与底部对齐

**例外：**过宽、无法放入侧边区域的项目——例如文字按钮或分段控件——应保留在导航栏中。不要强行放入侧边区域。

唯一保留水平栏的姿态，是竖屏方向下的内屏，因为垂直空间充足。

在分屏视图中，控件沿着外侧边缘放置：左侧的应用将控件放在左边缘，确保拇指容易触及，同时远离中央区域。

非对称布局

侧边控件会让大多数布局变得不对称。可根据内容类型采用以下三种方式：

**偏移内容。**默认方式。大多数内容需要偏移，以免被控件遮挡；如果设计基于水平安全区内边距进行对齐，这一调整便会自动完成。

**以整个显示屏为中心。**不偏移。适用于沉浸式、视觉效果突出且无需滚动的界面——但只有在确认没有任何交互元素落在控件下方时才适用。

**混合使用。**全宽背景图片或页眉，配合内缩且可滚动的前景内容。确保安全的规则是：所有交互元素都位于可滚动的内缩区域中，这样可点击的内容就不会被遮挡。

折叠区域

内屏部分折叠时，显示屏会在中央弯曲。内容会自动避开该区域——文本和图像会移到一旁以保持清晰可读，交互元素则会移到两侧，方便点击。弯曲处自然成为布局的分界线。

竖屏折叠时，交互元素会移到下半部分，设备放在平面上时更容易触及。

折叠区域里的按钮确实很难点击。 设备部分折叠时，系统会将交互元素移到一旁；表单、提醒、菜单、工具栏按钮等都内置了这一行为。使用系统组件即可自动获得这一特性。

可滚动内容不受此限制。 无需避开折叠区域。

设计目标很简单：尽可能让交互元素远离弯曲处。

适配折叠区域时，有两点可以改进：

优先选择能自行适配的容器。 能重新平衡面板宽度的分栏视图，比手动定位的布局更适合折叠区域。在网格中，优先采用偶数列，让内容整齐地分布在中线两侧。

尽量少移动内容。 设备弯折时，突然消失或跳到屏幕另一侧的控件很难找到，也更难追踪。与其重新排列布局，不如稍作调整，让内容保持可见且可点击。

善用内屏

将 iPhone 应用单纯拉伸到更大尺寸，就是不理想的做法。以下三种方式行之有效：

分栏视图。 同时呈现多个层级的信息。需要把握的一点是：不同显示屏上的信息层级必须保持一致，但在更大的显示屏上可以多展示一个层级。邮件应用在合上时显示邮件列表或单封邮件，展开时则并排显示两者，这依然是相同的信息层级，只是展示了更多内容——而不是变成了另一个应用。这就是适配与重做的区别。

标准分栏视图也能自行适配预留区域，重新平衡栏宽和边距，让设备折叠时两侧面板都保持可见。

重排为分栏。 在有足够横向空间时，将纵向堆叠的布局改为双栏布局。

将标签栏用作侧边栏。 对于带有标签栏的应用，可在内屏上将标签栏显示为侧边栏。这并不适合所有应用，最适合信息密集型应用。

表单

表单在不同显示屏上的表现各不相同，以下四种情况都值得了解：

• 外屏，默认状态——表单控件会像其他内容一样移到一侧。
• 外屏，停用竖直栏——控件保持原位。适用于只有一个工具栏按钮的表单，因为竖直栏占用的宽度得不偿失。此时表单会停在前置摄像头前方不远处，状态栏也会重新定位。
• 内屏——两种方向下都使用标准的水平栏。
• 部分折叠时——表单会滑到一旁，避开折叠处。

多任务处理和画中画

分屏视图是通过主屏幕手势创建的50/50 分屏——将应用拖到一侧即可。两个区域各自独立运行。画中画窗口可以固定在屏幕顶部；下方的应用会纵向调整尺寸以适应窗口。如果设备部分折叠，视频会扩大并填满半个屏幕。应用会实时根据视频尺寸调整纵向布局，因此纵向灵活性不可或缺。

检查清单

审视任何 iPhone Duo 设计时，问问自己：

1. 是否有可交互元素落在折叠区或侧边控件下方？
2. 某项功能或层级是否只在一种姿势下可用？
3. 是否采用了固定宽度或断点，而不是考虑尺寸类别？
4. 工具栏项目是否能妥善映射到侧边区域？宽的项目是否留在导航栏中？
5. 内屏是否发挥了比单纯拉伸更好的作用？
6. 内容是否相对安全区域偏移、刻意居中，或兼而有之，并确保所有控件都位于可滚动区域内？
7. 布局在两侧的分屏视图中，以及画中画固定显示时，是否都能正常呈现？
8. 自定义组件是否在重新实现本可由系统组件提供的折叠规避机制？
9. 控件是否靠近其所操作的内容，而不是被移到远离所属窗格的侧边栏中？
10. 屏幕之间是否有任何内容会改变状态，而不只是布局？设备开合时，状态应当保持不变。

如果项目是游戏，这些内容大多不适用——请改看 ../iphone-duo-games/SKILL.md，其中介绍了如何在不同姿势下填满屏幕、如何处理宽高比与黑边，以及如何避免触控控件落在折叠区。