iPhone Duo 设计指南：从自适应界面到 App Store 截图
Apple 新增的“Designing for iPhone Duo”强调，应用要在设备打开、闭合和尺寸变化时延续同一个体验。设计评审真正要解决的是：当前任务如何在这些变化中继续。本文概括已公布原则，并提供可用于产品和素材评审的方法。
先建立 Compact 与 Regular 两种布局
Apple 将外屏的紧凑宽度和内屏的常规宽度作为基础。围绕可用空间、安全区域和布局边距组织内容，不必为每种姿态定制一套界面。标准系统组件会承担相当一部分适配工作。
评审时可以挑一个熟悉的任务，画出两种有用的状态。例如，空间有限时只显示选中的笔记，空间展开后让笔记列表保持可见。先列出应保持不变的内容：选中项、草稿、账户和操作。更宽的布局应让任务更清楚，而不是增加重新学习的成本。
打开设备后，任务与信息层级要接得上
展开设备不应让人感觉进入了另一个产品。Apple 要求跨屏幕保持状态与功能一致；更大的空间可以揭示额外一层信息，但当前内容仍应可辨认。
可以用相同示例内容做一组前后对照：外屏正在查看某个行程，内屏也应能立刻找到它。先遮住营销文案，只看界面是否足以追踪当前对象。如果不能，就应先修正交互，再考虑用“无缝切换”描述它。
检查侧边工具栏与操作入口
外屏和内屏横向使用时，Duo 会将熟悉的栏移动到侧边；内屏竖向保留水平栏。应遵循系统布局，并让控件与其作用的内容保持清晰关系。不存在适用于所有状态的固定侧边留白数值。
在最紧凑的有效窗口下检查最高频操作。如果操作进入溢出菜单，其名称是否仍然清楚？某张截图中整齐的工具栏，旋转以后可能变得难用。测试应覆盖每个操作的去向和功能，而不只是图标是否好看。
折叠区域和摄像头会改变可用空间
Reserved Regions 描述受到折叠部位和摄像头影响的空间。Apple 的布局讲座区分了“分割空间”的区域与“遮挡内容”的区域，并说明其状态会变化。系统容器会处理许多调整，自定义内容则可能需要额外适配。
优先检查跨越中心的重要元素，比如确认按钮、图表标注或选中项。判断轻微移动或缩放能否保留关系，不要只为避开一条中心线就搬动整个信息流。评审目标是内容可读、操作可用，并让变化容易追踪。
按内容关系选择容器
导航和内容排列承担不同职责。Apple 的 iOS 27.1 指南引入可组织主次内容的 arrangement 容器，包括 split 与 overlay 行为；自适应布局讲座也说明了它们如何配合导航，以及不合适的嵌套方式。
引入组件之前，先说清两个视图的关系：是列表选择详情、两份必须同时看到的信息，还是盖在内容上的临时层？先画关系，再选择足够简单的标准容器，并使用项目实际目标 SDK 验证行为。
Apple：系统容器与 arrangement views ↗Prepare your app for iPhone Duo ↗
从设计评审得到截图拍摄方案
截图方案应来自应用已经支持的状态。挑一张能证明核心任务的外屏截图，再挑一张展示有用上下文的内屏截图。尽量保留相同示例内容，让观看者容易看懂差异。
标题解释用户价值，导出配置负责设备尺寸。例如“地图旁边，随时查看行程”只有在发布构建确实提供这项布局时才成立。不需要把安全区域或折叠 API 写成面向普通用户的营销文案。
| 决策 | 评审问题 |
|---|---|
| 连续性 | 跨屏后仍能找到同一选中项吗？ |
| 额外空间 | 第二块内容是否帮助当前任务？ |
| 控件 | 重要操作仍然容易找到吗？ |
| 产品证据 | 截图是否真的证明了标题？ |
怎样为内外屏分别排版 App Store 截图
两套素材保持同一品牌风格：配色、字体、标题语气和卖点顺序一致，再围绕各自的真实截图调整构图。普通 iPhone 的长屏模板可能压缩 Duo 外屏的展示空间；较宽的内屏往往需要更短的标题，并为产品细节保留连续区域。
第一版先用正面设备和一个明确卖点。文案放在设备外，避免盖住控件或核心内容。界面细节较多时，可以关闭边框来扩大展示面积；使用倾斜或跨图全景后，要逐张检查导出图片的文字、裁切和阅读顺序。这些是排版建议，不是额外的 Apple 上传规则。
| 决策 | 外屏素材 | 内屏素材 |
|---|---|---|
| 首张信息 | 展示一个有用的结果 | 说明更多上下文如何帮助同一任务 |
| 源截图 | 真实的紧凑界面 | 真实的展开界面 |
| 标题 | 在设备上方或旁边简短表达 | 用短标题给宽界面留空间 |
| 设备边框 | 使用带角落摄像头的外屏边框 | 使用符合展开形态的内屏边框 |
| 最终检查 | 主要操作清晰可见 | 次级内容仍然可读 |
从 Apple 的 Mail 与 Notes 示例学什么
Apple HIG 展示了 Mail 的变化：外屏聚焦一层内容，内屏可将邮件列表与选中邮件并排显示。Notes 则演示了分栏怎样随折叠调整。这些是 Apple 的界面示例，不能当作第三方 App 已发布商店截图的案例。
为自己的应用策划截图时，可以在内外屏保留同一封邮件、同一条笔记或同一个收藏地点，让读者看懂额外空间带来的帮助。只有实际验证过切换，才写连续体验的承诺。可以借鉴布局思路，产品素材仍应使用自己应用的真实捕获。
用上架工坊的模板制作并检查成套素材
打开 Duo 生成器，上传某一块屏幕的真实截图，选择系列与配色。第一版可保留默认的正面构图，再逐张编辑标题。在导出规格中选择外屏或内屏以及对应方向，确认预览显示的是当前审核目标。
导出后打开全尺寸 PNG，保存可编辑工程；再换用另一块屏幕的真实截图，沿用配色和卖点顺序制作第二套。模板负责排版，切换导出预设不会自动改造上传图片里的应用界面。
常见问题
iPhone Duo 官方设计指南在哪里？
在 Apple Human Interface Guidelines 的“Designing for iPhone Duo”页面，并有设计、控件和自适应布局等配套 Tech Talks。
每种折叠角度都要设计不同 UI 吗？
Apple 建议按可用空间自适应，并只做必要的调整，而不是为每种姿态重做界面。
内屏直接套 iPad 布局就可以吗？
应把它作为可变尺寸的 iPhone 体验，保留原有层级与状态，在确实有帮助时使用额外空间。
截图尺寸能用来计算安全区域吗？
不能。截图尺寸是导出图片像素；安全区域和保留区域来自应用当前的布局环境。