为 iPhone Duo 做设计：什么会移动，什么会分栏，什么保持不动

为 iPhone Duo 做设计需要什么？ 需要的是两套布局，而不是每种姿态一套布局：「为外屏准备一套 compact width 布局，为内屏准备一套 regular width 布局，你就有了应对所有姿态的基础」，而 Apple 自己给出的建议是「把应用设计成可以自由改变尺寸的」。(4:32)¹² 在这个基础之上，还有指南与三场配套 Tech Talk 描述的四种模式：控件移到屏幕侧边，并保持从上到下的顺序；除非有意做成全出血，否则内容会相对这些控件产生偏移；交互元素会从折痕处位移开，而滚动内容不会；还有一种新的容器 arrangement，会按规则把两个视图分栏或叠放。后两者背后的 API 由这几场 Tech Talk 讲解，arrangement 随 iOS 27.1 到来。³

Apple 在主题演讲当天下午把 Designing for iPhone Duo 发布到了 Human Interface Guidelines 中，同时还发布了三场面向设计的 Tech Talk：「Design for iPhone Duo」「Strike a pose with adaptive layouts on iPhone Duo」和「Raise the bar with iPhone Duo」。¹²³⁴ 本站的开发者视角文章算的是点数和 SDK 规则。这一篇讲的则是指南要求的设计决策，引用 Apple 自己的原话并标出各场 Tech Talk 中的时间点，以及我打算在自己的应用里怎么落实。

TL;DR： 针对两个尺寸类别做设计，姿态交给系统去处理。在外屏以及横向的内屏上，各种栏会变成竖向；只有纵向的内屏保留横向的栏。⁴ 带图标的项目转为竖向，纯文字项目保持横向；竖栏顶部留给 Back 或 Close，紧随其后的是 Done 这类醒目操作。⁴ 除非是不滚动的沉浸式界面，内容都会通过水平安全区域相对栏产生偏移。² 在折痕处，书本姿态下「像提醒这样的元素会移到 trailing 一侧」(4:09)，平放在桌面上时交互控件会移到下半部分，而「文章、信息流、文稿和列表这类连续滚动的内容不会位移」(3:46)。³ arrangement 是新的布局容器，分为 split 和 overlay 两种；Apple 给出的选择规则就是你已经在用的那一套：水平或垂直堆叠对应 split，ZStack 对应 overlay。³

模式之前，先有一条规则

三场 Tech Talk 中的两场以及指南都在重复同一句话，而这正是应该作为设计起点的一句。Apple 设计团队的 Vince 说：「人们会用各种不同的姿态使用 iPhone Duo，你当然希望应用在所有姿态下都好看。但这并不意味着要为每种姿态做一套定制布局。相反，请专注于两个尺寸类别：外屏的 compact width 和内屏的 regular width。避免使用固定宽度、断点，或任何与具体屏幕绑定的度量值」(3:50)。² 指南在讲姿态的那一节说的是同一件事。¹ Vince 还补充了一种可选布局，用于像笔记本电脑那样架在桌面上的状态，此时「媒体可以放在顶部，可点击的控件则位于底部稳定的基座上」(4:48)，前提是它「拥有与其他姿态相同的控件和整体层级」(4:57)。²

取自 Apple 2026 年 9 月 9 日发布会直播太平洋时间上午 11 点 05 分的画面：站立姿态。指南列出的是「像书一样部分折叠、平放在表面上，或者立在边缘上」。

下面的全部内容都以这个基础为前提，也正是可变尺寸 iPhone 检查清单所核查、iPad 尺寸连续可变那篇文章所解释的同一个基础。如果布局是用尺寸类别、布局边距和安全区域内边距搭起来的，Vince 的承诺是：「你的应用应该已经能适配 iPhone Duo 了」(4:27)。²

侧边：什么会挪过去，什么会留下

在外屏上，原本位于顶部和底部的控件「会移到屏幕右侧，以便最大化纵向空间，并让右手拇指更容易够到」(1:18)。² 侧边承载的是标签栏、工具栏、Back 这类导航控件、状态栏，以及「会在 Live Activities 到来时纵向展开」的 Dynamic Island(1:48)。² 在内屏上，横向时栏保持竖向，纵向时又回到横向——那是「我们唯一保留横向栏的姿态」(5:27)，原因是「应用内容拥有充足的纵向空间」(5:32)。² 在 Split View 中，「当应用位于左侧时，控件也会移到屏幕左边缘」(3:11)。² 而且栏是与硬件对齐的，因此「在从右到左的语言中，它仍停留在设备的同一侧」(4:21)。⁴

取自 Apple 2026 年 9 月 9 日发布会直播太平洋时间上午 10 点 59 分的画面：设备半折状态、内屏朝向观众，侧边安装的控件位于其右边缘。

某个控件会不会转为竖向，由两件事决定。第一是它所在的容器。UI Frameworks 的 Anna 说：「请确认你使用的是 TabView 或 NavigationStack 这类导航容器提供的栏」(2:19)，因为来自自定义 UIToolbar、UINavigationBar 或 UITabBar 实例的内容「不会被纳入考虑」(2:58)。⁴ 在分栏视图中「只有 detail 栏参与其中」(3:43)，检查器则「不会获得自己的」栏(3:53)。⁴ 第二是项目自身的内容。竖栏的「项目高度灵活、宽度固定」(6:10)，这「让竖栏更适合仅含符号的项目表现形式」(6:13)。⁴ 因此「像 back 和 share 按钮这样带图标的项目会把轴向改为竖向；而像 edit 按钮这样纯文字的项目，则继续留在水平轴上」(7:06)。⁴ Vince 的版本是给设计师听的：「对右侧空间来说过宽的工具栏项目，例如文字按钮或分段控件，在 iPhone Duo 上应当留在导航栏里」(6:22)。²

排序规则很简短。「把顶部留给 back 或 close 这类主要导航控件，其后是 done 这类醒目操作」(4:47)。⁴ 在 SwiftUI 中，自定义的 Back 或 Close 使用 cancellationAction 放置位置(5:02)，醒目操作使用 topBarPinnedTrailing(5:24)；在 UIKit 中，则是让 leading 项目的 leftItemSupplementsBackButton 保持默认的 false(5:06)，醒目操作使用 pinnedTrailingGroup(5:27)。⁴ 其余项目保持原有分组，并由「一个竖向间隔件在视觉上分隔顶部与底部的放置位置」(5:34)。⁴

这场讲栏的 Tech Talk 针对单个项目给出的规则，各附一句提示：⁴

• 判断自定义项目的标准：「它只是在强化那个符号，还是承载了独立的信息？」(9:36)
• 数量应当放进徽标，这样一个「文字加符号」的项目就变成了仅含符号的项目，从而「在竖栏中显得自然」(9:23)；而「显示金额的购物车按钮」则保持横向(9:52)。
• 像 Edit 这样在符号与文字之间切换的项目保持横向；系统的 Edit 按钮本就如此，自定义的则要采用仅限水平的 AxisBehavior(8:11、8:32)。
• 自定义视图或复杂视图默认保持横向(8:40)；如果它「确实支持竖向表现形式」(8:48)，那么偏好竖向的 axis behavior 可以让它进入栏中(8:54)。
• 即便项目显示的是符号，也要为每个项目提供标题，因为「每当项目移入溢出菜单或展开形态时，系统都会用到它」(7:44)。
• 键盘附件栏「应当保持附着在键盘上，而不是移到竖向轴上」(10:00)。
• 自定义视图可以读取 toolbarVerticalEdge 环境属性（在 UIKit 中是 trait），以判断是否存在竖栏(10:35)。

溢出是设计偏好得以表达的地方，这场 Tech Talk 给出了五条规则：⁴

• 「默认情况下，项目从下往上溢出」(13:23)；每个项目都可以带有 high、low 或自定义的可见性优先级，先「按分组」(13:36)分配，再在组内分配。优先级与溢出相关的 API 属于 WWDC26 新增的工具栏能力，本站关于 iOS 27 SwiftUI 的文章已有介绍；在 13:49 处，这场 Tech Talk 会把你引向 Apple 关于 SwiftUI 新功能的 WWDC26 场次。
• 决定先压缩什么：在以导航为主的视图中，「工具栏先压缩，这样主要目的地仍可访问」(12:07)，这是默认行为；在以任务为主的视图中，「标签栏先压缩，以保留高频使用的操作」(12:18)，用 toolbarCompressionBehavior 设定(12:22)。
• 把应用自己的溢出菜单并入系统的溢出菜单，在 SwiftUI 中用 ToolbarOverflowMenu，在 UIKit 中用 additionalOverflowItems(12:36、12:43)，并让省略号只用于溢出(12:53)。
• 「像 Mail 里的 Compose 或 Notes 里的 New Note 这类高频操作，应当属于最后才移入溢出的那一批」(13:59)。
• 带徽标的项目「应当保持可见更久，以维持一眼可辨的特性」(14:11)。

竖栏并非强制。像 Calculator 这样单页面、重心偏下的布局，或者只有 Close 一个工具栏项目的表单，都可以用 toolbarVerticalBehavior 或 preferredVerticalBarBehavior 关掉这根栏(14:28、14:37、14:47)。⁴

居中，还是偏移

栏挪到一侧之后，「许多层次现在都不对称了」(6:33)。² Vince 给出三种位置。大多数内容采用偏移，以免被控件挡住；「如果你的应用是按水平安全区域内边距对齐的，这个偏移会自动发生」(6:58)。² 有些 UI 仍然以整块屏幕为准居中、不做偏移，这「很适合不滚动的沉浸式、视觉性强的界面，前提是你确定交互元素不会被右侧的控件挡住」(7:10)。² 两者也可以混用：「全宽的背景图或页头，配上向内缩进的可滚动前景内容」(7:22)，只要「每个交互元素都位于那块可滚动区域内，就不会有东西被遮住」(7:28)。² 指南关于安全区域的说明还补充了 Split View 的情形：对面那一侧的边缘可能承载着另一个应用的控件，所以两侧边缘的安全区域都有意义。¹

折痕：位移

取自 Apple 2026 年 9 月 9 日发布会直播太平洋时间上午 11 点 08 分的画面：屏幕的层结构。部分折叠时，穿过中央的那道弧面就是指南所说的「folding region」。

Apple 设计系统团队的 Human Interface Designer Maria 以一条原则开场：「为 iPhone Duo 做出色的设计，关键在于知道何时该适配」(2:25)。³ 许多界面「可以自然地绕着 reserved region 流动」(2:30)，其余的则使用位移，也就是「根据可用空间调整现有元素的框架，即使设备处于部分折叠状态，也让重要内容保持可见、可及且不被遮挡」(2:39)。³ 这一模式有其适用范围，「小到一个按钮，大到整个容器或布局中更大的部分」(3:03)，并伴随两条规则：「如果某个元素能够独立适配，就让它单独移动。而当多个元素协同工作时，就一起移动它们，以保持彼此的关系」(3:17)，以及「留意过度的移动」(3:26)，因为「把一个元素移到离它原本位置很远的地方，会削弱它们之间的视觉关系」(3:29)。³ 她举的例子是选中照片后弹出的上下文菜单：与其把菜单在 trailing 区域里居中，不如让「两个元素一起移动，并围绕折痕对齐」(3:39)。³

设计师最会依赖的是那条例外：「文章、信息流、文稿和列表这类连续滚动的内容不会位移。这些体验本来就通过滚动完成适配，因此在可用区域之间挪动它们反而会打断连续性」(3:46)。³ Vince 是从另一个方向说的：系统之所以把交互元素推离那道弧面，是因为「按钮正好落在折痕上时很难点中」(9:28)，这一行为已内建于「表单、提醒、菜单、工具栏按钮等等」(9:40)，而且「可滚动内容不需要避开这一区域」(9:57)。²

折痕的走向决定了区域的划分：书本姿态下折痕竖向延伸，区域就是左和右；平放在桌面上或纵向持握时折痕横向延伸，区域就是上和下。²³ 被位移的元素去往何处取决于姿态，而 Maria 给出的理由才是有用的部分。在书本姿态下，「像提醒这样的元素会移到 trailing 一侧。这让它们更接近设备合上、体验延续到外屏时它们将要出现的位置」(4:09)。³ 架在桌面上时，「上方区域很适合那些远距离可见性更有价值的内容」(4:29)，而「下方区域很适合交互控件」(4:39)，「媒体控件这类可点击元素可以移到这里，为触控提供更稳定的表面」(4:43)。³ 讲原则的那场 Tech Talk 也持同样看法：纵向、部分折叠时，「交互元素会移到屏幕下半部分，既更容易够到，又能让设备稳稳放在桌面上」(2:33)。² 当有多个区域都合适时，要贴合上下文：设备展开时，搜索栏「会利用多出来的空间」(5:00)，而随着折叠推进，它的「宽度和位置会随之调整，以便始终位于所搜索的视图之上」(5:04)。³

这些大多由系统代劳。「操作表单、提醒、菜单和浮层都属于轻量的情境化体验，可以出现在 reserved region 之上」(5:23)，系统会「自动围绕 reserved region 重新定位组件」(5:34)。³ 分栏视图会「通过调整宽度并把两栏排成均等的 50/50 分割，让两栏都保持可见」(5:40)。³ 网格则是需要你自己负责的情形：在 Maria 设计的 Fitness 里，「我可以保留外侧边距，同时加大铰链周围的间距，让每个容器都待在各自的区域内」(5:56)。³ 她对所有例子的总结，就是这份设计任务书：「我们所做的是移动、调整尺寸或重新组织已经存在的东西。让内容、功能和布局始终可用，这样无论人们以何种方式使用 iPhone Duo，都能获得完整的体验」(6:04)。³

Reserved region：位移背后的机制

Maria 在讲自适应布局的那场 Tech Talk 中引入了这个术语：「新的硬件特性同样在塑造可用空间。它们包括铰链，以及横跨外屏和内屏的两颗摄像头。我们把这些称为 reserved region」(0:37)，并建议把它们「当作你的布局本来就要适配的其他区域一样」来对待(0:53)，她举的例子是 iPadOS 上的窗口控件。³ 一共有三处：外侧摄像头、处于工作状态的内侧摄像头，以及折痕(1:00、1:18、1:32)。³ 开发者视角那篇文章收录了指南对每一处的定义，也记录了我的核查结果——指南并未为这些 API 链接任何文档，因此本节只谈机制。¹ UI Frameworks 工程师 Harry 介绍了这套 API：「在 SwiftUI 中，你可以通过 GeometryReader 或 onGeometryChange 修饰符得到的 GeometryProxy 来查询 reserved region。使用 geometry proxy 上新增的 reservedRegion 方法，即可获取当前视图中可用的区域。」(6:38) 在 UIKit 中，「你会用到 UIView 上提供的 reservedRegion 方法」(7:03)，并且「可以查询某个 reserved region 的 frame 属性，把它纳入自己的布局」(7:07)。³

它们分为两类。折痕「由一个 division 类型的 reserved region 支撑，因为它把一块较大的区域划分成多块较小的区域」(6:55)，而且「只有当有人折叠设备时才处于激活状态。展平时它未激活，宽度为零」(7:26)。³ 摄像头属于 occlusion 区域：这类区域「不划分区域，而是遮挡区域」(7:54)，并且「摄像头激活时它激活，摄像头未激活时它也未激活」(8:12)。³ 未激活的区域可以通过 includeInactive 选项查询，Harry 认为值得关注它们的理由是一个设计决策：「在网格类布局中，只要存在 division 区域，无论其是否处于激活状态，你都可能更倾向于使用偶数列」(7:41)。³ 指南也把这条重复为一项规则。¹ 截至主题演讲当天太平洋时间下午 4 点 15 分，指南没有为这些 API 链接任何文档页面，而 Apple 的开发者页面把 Xcode 27.1 beta 的时间标注为「本月晚些时候」。¹⁵

Arrangement：分栏还是叠放

取自 Apple 2026 年 9 月 9 日发布会直播太平洋时间上午 11 点整的画面：Apple 称之为大 80% 的内屏，也正是 arrangement 所面向的画布。

Harry 的定义是：「在这些导航容器和内容容器之间，还有一层布局容器。这些布局容器会按一组规则排布两个视图。它们被称为 arrangement」(9:20)。³ 这些规则接受的输入是「视图的水平与垂直尺寸类别、视图宽度与高度之比，以及是否存在处于激活状态的 division 区域」(10:37)，产出的则是：「我到底该不该显示这个视图」(10:52)，以及如果要显示，「它的框架是什么」(10:54)。³ 至于时间：「在 iOS 27.1 中，你可以在自己的应用里使用系统提供的 arrangement」(11:02)。³

在 SwiftUI 中，ArrangementView 接受一个 primary 视图和一个 secondary 视图(11:25)，样式通过 arrangementViewStyle 设定(11:57)；在 UIKit 中，UIArrangementViewController 接受 primary 和 secondary 视图控制器(11:39)。³ 作为默认值的 split 样式，「在视图宽大于高时水平分栏」(12:13)，高大于宽时则垂直分栏，也可以限制为单一轴向；如果无法在主轴上分栏，它「会选择只显示单个视图」(12:49)。³ overlay 样式「倾向于把内容上下叠放」(13:31)，而当设备折叠时，它「倾向于把 primary 和 secondary 视图并排放置」(13:51)，视图可以通过 overlayArrangementZIndex 环境属性察觉这一点，从而在收起形态与展开形态之间切换(14:01)。³

如何在两者之间取舍，是这场 Tech Talk 里最清晰的建议，指南也照单采纳：「如果你在应用的某些部分已经用 HStack 或 VStack 之类的组件实现了类似分栏的布局，不妨考虑使用 split arrangement。如果你已经用 ZStack 之类的组件实现了类似叠放的布局，不妨考虑使用 overlay arrangement」(14:44)。³ 若没有现成的模式，则在「视图之间存在明确的前景／背景关系时」(15:10)使用 overlay，例如 Accessibility Reader 中浮在可读内容之上的控件；在「更接近主从关系时」(15:32)使用 split，例如播客与它的文字稿，此时「两者都不被遮挡这一点很重要」(15:43)。³ 两条限制——导航容器应包在 arrangement 外面而不是放在里面，以及不要把 arrangement 放进 List 或 ScrollView——分别位于 Tech Talk 的 16:15 和 16:26；指南只写明了前者，开发者视角那篇文章引用了那句话。¹³

内屏：三种诚实的布局

「你不会想要一个单纯被拉长的 iPhone 应用」(7:39)。² Vince 提出三种形态。其一是分栏视图，它能「同时呈现应用层级中的多个层次」(7:46)，条件是这套层级「在外屏和内屏之间不发生变化」(7:51)，因为人们「使用应用时可能会频繁开合设备，所以它必须在内外都可预期、保持一致」(7:59)。² 其二是重排，参照 Music 的做法，让「纵向堆叠的布局」(8:15)在「水平空间更充裕时变成双栏布局」(8:18)。² 其三是把标签栏「在内屏上以侧边栏形式」呈现(8:26)，这「最适合像 Health 这个例子一样信息密集的应用」(8:33)。² 指南里的 Mail 例子属于分栏视图这一类：合上时是列表或一封邮件，展开时两者并排。¹

表单有自己的规则。在外屏上，「表单的控件同样会移到侧边」(8:46)；对于只有一个工具栏按钮的表单，你可以关掉这一行为，此时「表单会在前置摄像头前方稍作收住，状态栏则自行调整位置」(9:04)。² 在内屏上，表单默认「使用标准的横向栏」(9:13)，而当设备部分折叠时，它们会「侧移开来，避免正好停在折痕上」(9:20)。² 讲栏的那场 Tech Talk 补充了一条关于放置位置的例外：内屏上的表单「默认居中，其中的项目保持横向」(4:03)，但借助 preferredPlacement API，「放在左侧的表单不会出现竖栏，放在右侧的表单则会获得一根」(4:11)。⁴

核查清单

讲栏的那场和讲自适应布局的那场 Tech Talk，各自都以一份核查清单收尾，这里把它们合成一份。讲栏那场的收尾清单(15:10)是：用最新的 SDK 构建，因为竖栏是按 SDK 选择加入的(2:06)；核查各个栏及其顺序(4:41)，并更新自定义项目使其能够竖向排布；以及分配可见性优先级，「好让系统能够适配」(15:26)。⁴ 接着是讲自适应布局那场(16:40)：「先从核查应用中的居中布局开始。想一想能否把它改成双栏布局，或者在那个使用场景下哪种位移模式更合理」；使用标准容器和呈现方式，以获得那些免费的行为(16:49)；自定义的分栏或叠放布局则改用 ArrangementView；以及「找出视图中优先级最高、由你手动排布的控件，并考虑采用 ReservedRegions API，在必要之处实现自己的位移」(17:06)。³

我打算怎么用它

我有三款 iPhone 应用，指南把它们分得很干净。这个分法是我的解读，不是 Apple 的。

• Get Bananas 是一个列表。列表不会位移；只要我继续使用系统容器，标签栏和工具栏会自行移到侧边。唯一的设计决策是可见性优先级：添加条目这个操作就是我的 Compose，因此它应当是最后才溢出的那一个。
• Reps 把每一组记录成一行，包含重量、次数和一个记录操作，训练过程中呈网格排布，正是 Maria 举的 Fitness 例子。决策是：书本姿态下，三列的一行会让中间那列正好压在铰链上，因此网格改为两两成对的双列。桌面姿态下，记录操作放在下半部分。取舍在于每组多点一次，换来的是目标永远不会落在折痕上——用 Vince 的话说，那里「按钮很难点中」(9:28)。² 组间休息计时器留在顶部，也就是 Maria 所说很适合「远距离可见性更有价值的内容」(4:29)的那个区域。³
• Return 绘制健康图表，属于滚动内容。目前图表和它的时间范围选择器同处一个纵向堆叠，按 Harry 的规则，这个堆叠对应的是 split arrangement，能在设备折叠时让两者都保持可见；而图表本身永远不该位移。

要点回顾

给设计师： - 关注两个尺寸类别，而不是各种姿态：外侧是 compact width，内侧是 regular width。¹ Apple 的设计师建议的唯一可选补充，是一套保持相同控件的桌面姿态布局。² - 图标转竖向，文字留横向；侧栏顶部是 Back 或 Close，其后是 Done；高频操作和带徽标的项目最后才溢出。⁴ - 滚动内容永不位移；提醒、菜单、表单和控件则会位移，去向取决于用途：书本姿态下提醒去 trailing 一侧，桌面姿态下去上方区域，触控控件去下半部分。²³

给设计工程师： - 折痕是 division 区域，仅在折叠时激活，展平时宽度为零；内侧摄像头是 occlusion 区域，仅在摄像头工作时激活；两者都可以通过 GeometryProxy 或 UIView 查询。³ - arrangement 随 iOS 27.1 一同推出：堆叠对应 split，ZStack 对应 overlay，导航容器留在它们外面。³ - 使用导航容器提供的系统栏，否则竖向布局根本不会发生。⁴

常见问题

每种姿态都需要一套布局吗？

不需要。Apple 建议针对两个尺寸类别做设计——外屏的 compact width 和内屏的 regular width——并避免固定宽度、断点或与屏幕绑定的度量值。¹² 讲设计的那场 Tech Talk 提到的唯一可选补充，是一套控件和层级都保持一致的桌面姿态布局。²

在 iPhone Duo 上，哪些控件会保持横向？

纯文字项目、像分段控件这样对侧栏来说过宽的项目、像 Edit 这样在符号与文字之间切换的项目、键盘附件栏；此外，如果你愿意，在重心偏下的单页面应用或只有一个工具栏项目的表单中，也可以让整根栏保持横向。²⁴

什么是位移？

这是 Apple 的一种模式：移动、调整尺寸或重新组织已有元素，使其在设备部分折叠时仍然可见、可及。提醒、菜单、浮层、表单和工具栏按钮由系统自动处理；滚动内容则不在此列。²³

arrangement view 和 reserved region 的 API 什么时候推出？

讲自适应布局的那场 Tech Talk 说，系统提供的 arrangement 可在 iOS 27.1 中用于你自己的应用；Apple 的开发者页面把 Xcode 27.1 beta 的时间定在 9 月晚些时候。设计指南目前尚未为这两套 API 链接任何文档。¹³⁵

滚动内容必须避开折痕吗？

不必。讲设计的那场和讲自适应布局的那场 Tech Talk 都把滚动内容排除在外；它本来就通过滚动完成适配。²³

参考来源