为 iPhone Duo 做设计

iPhone Duo 依然是一台 iPhone。合上时，它是一台紧凑的手机；展开时，它是一块中间有铰链的宽画布。人们一整天都会在两者之间来回切换，而且常常是在做事做到一半的时候。设计要做的，是让这种切换感觉像同一个 App 得到了更多空间，而不是变成了另一个产品。

Apple 的设计讲座建议你不要为每种姿态都画一套自定义布局。两种宽度就能覆盖大部分工作。本文其余部分讲的是这条建议在大家已经在模拟器中试过的 App 上是如何落地的。API 在竖向栏和折痕指南里，发布前要过一遍的是模拟器检查清单。

为两种尺寸类别做设计

Apple 描述了人们拿这台手机的四种方式：

• 合上，使用外屏。
• 展开，使用内屏。
• 半折，像手里拿着一本书，或像一台放在桌上的笔记本电脑。
• 立起，靠边缘立着。

每种方式都可以竖着或横着，所以一整套草图要六块画板：合上、展开和半折，各分竖向和横向。其中有一种对 iPhone 来说是全新的：合上后横过来的手机，模拟器报告它的宽度和高度都是紧凑尺寸。

你要为分配给你的空间做设计。外屏是紧凑宽度，和其他任何 iPhone 属于同一类。内屏的宽度和高度都是常规尺寸，更接近一台小 iPad。Apple 表示 Duo 会遵守你支持的方向，但 App 仍会缩放到铺满内屏，所以一个只支持竖屏的 App，在手机展开后也会变宽。读取 horizontalSizeClass 和 verticalSizeClass，不要再根据 userInterfaceIdiom 做分支。即使内屏是常规宽度，Duo 报告的设备类型也仍然是 iPhone。

尺寸类别只是一个粗略的信号，不是一把尺子。fatbobman 针对可调整大小的 iPhone 窗口做过这个区分，这里同样适用：尺寸类别告诉你适合用哪些系统容器。需要某一栏的真实宽度时，就去测量视图。

在 Anton Gubarenko 记录的一次小组实验室中，Apple 的工程师用 Apple TV App 描述了同样的思路。展开手机会把窗口拉宽，你会看到更多正在看的东西，外加放置详情的空间。他们还用“查找”App 来检验哪些控件应该放在一起：标签栏要跟着面板走，因为每个标签决定了面板显示什么，把它们拆开就等于把一个控件劈成两半。Anton 提醒说，笔记可能漏掉细节，所以请把这次实验室当作工程师给出的方向，并在模拟器里验证。

从合上的手机开始

Vidit Bhargava 在 Bitrig 黑客松上用几个小时做出了磁带播放器 Duo-Man。正如 Kyle Macomber 引用的那样，Vidit 在和 Sean Allen 聊起它时建议：从合上的手机开始。把大布局缩到小屏幕上，比把小布局扩展到大屏幕上更难。在 Duo-Man 里，你在外屏上依然可以退出磁带。没有展开时那么好玩，但它是同一个功能。

Avionics Buddy 也是这样做的。Sharif El Fatatry 说，它没有单独的一套 Duo 界面，同一套 SwiftUI 布局会在你折叠、旋转或翻转设备时重新排布。

如果某个功能只在手机展开时才存在，从不展开手机的人就用不到它，而在中途折起手机的人则会失去它。上面是画面、下面是控件的免手持桌面布局是很好的加分项，但它不能取代紧凑布局。

用好宽度，否则就是一个空洞

Bunny Lau 在探索 Tweed 浏览器的 Duo 版本时说得很直白：展开后仍然表现得像一台长条手机的布局，就是一片浪费像素的海洋。在完整的内屏上，Tweed 充分利用横向画布；在分屏浏览和外屏上，它切换到竖向侧边栏，让内容栏保持紧凑。

那条帖子里关于 SwiftUI 的说明（根据姿态关闭竖向栏）只是布局的一半。Kashif Mehmood 的回复补上了另一半：姿态告诉你的是模式，而不是铰链落在哪里。侧边栏的分隔线或者居中的控件，仍然可能落在折痕上。系统容器已经会绕开它，所以被拉伸的手机布局是一个尺寸类别问题。折痕只会坑到你自己摆放的控件，对于这些控件，你要读取分隔区域，见折痕指南。

不使用侧边那一列是一个实实在在的选择，而且应该取决于内容。翁天信在设计 Camarts 3.0 时保留了传统的对称布局，没有用侧边控件栏。Camarts 里的照片大多是横幅，所以宽度留给了画面。翁天信说模拟器上的版本目前已经够用，剩下的要在真机上调。

如果你确实关闭了侧边那一列，就对整个页面关闭，并且保持不变。在用户导航时切换栏的方向，会让界面框架跳来跳去。什么时候值得这样做，见竖向栏指南。

让系统去挪它自己的栏

用 iOS 27.1 SDK 重新构建，并把导航、工具栏和标签栏放在系统容器里：NavigationStack、NavigationSplitView、TabView，或者自带栏的 UIKit 控制器。当屏幕又宽又矮时，这些栏会移到侧边；在竖向的内屏上，它们会回到顶部和底部。你自己画的栏会停在你固定的位置。浮动按钮也属于这一类。

Sahil AK 在适配 TimeWave 时发现了这一点。原生工具栏 API 完成了大部分工作，浮动的加号按钮则还需要自己摆放。

Harshil 和 Rob Swift 在各自的 App 里也遇到了同样的分化：系统栏移动了，而一个浮动分享按钮、一个自定义铃铛和一个浮动操作按钮没有动。这些都是自定义界面元素，修复方法见竖向栏指南。

保持同一套层级结构

人们会不停地打开、合上手机，App 的结构应该经得起这种折腾。列表可以变成侧边栏，文章可以有更宽的版心。用户不应该需要重新找回自己的位置，也不应该因为铰链动了一下就落到另一个首页上。

可滚动的内容可以跨过折痕。信息流、文章和列表本来就靠滚动来适应。需要点中的控件，比如发送按钮、播放控件组或浮动操作按钮，应该避开折痕，并待在安全区域内。背景图可以铺到边缘。

Duo 上的安全区域经常左右不对称，而且会在栏移动时变化。检查清单里有测量方法，以及把左侧内边距加倍时会出现的那个 bug。面板本身的数据见尺寸指南。

圆角要贴合玻璃。Apple 的准备讲座指向了 iOS 26 的同心度（Concentricity）API，并针对 Duo 的圆角形状做了更新：SwiftUI 里的 ConcentricRectangle，UIKit 里的 UICornerConfiguration。当某个形状需要贴合屏幕时，用它们代替写死的圆角半径。

交付前的五个问题

在任何人打开 Xcode 之前，对设计中的每个页面都问一遍：

1. 这个功能在合上的手机上存在吗，还是只在展开后才有？
2. 每个栏归哪个系统容器管？列出你自己画的那些，因为它们不会移动。
3. 手机半折时，每个可点按的控件在哪里？可滚动内容可以跨过折痕，按钮不行。
4. 展开后的布局怎么利用多出来的宽度：显示更多内容，还是把同样的内容放大？
5. 做事做到一半时铰链动了，用户会落在哪里？

接下来，读一读竖向栏如何决定哪些东西会移动，再看看如何在不读取铰链角度的情况下围绕折痕布局。