iPhone Duo 发布后，相信很多设计师都会有这样一个疑问，那就是当一台 iPhone 可以在外屏、内屏、展开和半折叠之间不断变化时，原来的 App 还是否应该沿用过去那套布局方式？

要知道，折叠屏改变的并不只是屏幕尺寸，而是整个界面的空间关系。原本位于上下两端的控件开始移向侧边，内容需要重新寻找视觉中心，折叠区域本身也会参与布局；而进入更大的内屏后，信息又需要按照新的层级重新组织。

iPhone Duo 新的屏幕形态的出现，需要让我们重新理解移动端 UI，过去那些围绕固定屏幕建立起来的设计规则，也需要开始适应一个不断变化的空间

那么，这套新的折叠屏 UI 具体该怎么设计？让我们听听 Apple 设计团队怎么说。

你好，欢迎观看《为 iPhone Duo 设计》。我是 Marcos。我是 Vince。我们都是 Apple 设计团队的设计师。

这节课程中，我们会向你介绍，如何为 iPhone Duo 设计出体验出色的 App。我们先从这台设备背后的设计原则讲起。然后，我会介绍如何调整你的 App，让它在 iPhone Duo 的各种使用形态下都能呈现出色的效果。

1. 一台 iPhone，两种完全不同的屏幕体验

当 iPhone Duo 合上时，它小巧而熟悉，握在手里也很舒适。展开后，你会看到 iPhone 迄今最大、最具沉浸感的显示屏，它为你喜爱的 App 和内容提供了理想的画布，同时整台设备依然可以轻松放进口袋。

iPhone Duo 可以用多种方式手持或放置。你可以像翻书一样，让它保持半折叠状态；也可以像笔记本电脑一样放在桌上，让内屏朝向自己；或者让它依靠机身边缘自行站立。

iPhone Duo 提供了很高的使用灵活性，无论处在什么场景，你都可以按自己习惯的方式使用这台设备。合上时，它的显示屏比传统 iPhone 更宽、更矮。

原本通常位于屏幕顶部和底部的按钮与控件，会移到显示屏右侧，以尽可能释放垂直空间，同时让右手拇指更容易触达。

这样一来，左侧就能留出一块连续、不受干扰的内容区域，其可用面积与传统屏幕比例的 iPhone 大致相当。

侧边这块新区域用于放置 App 控件。其中包括标签栏、App 工具栏，以及返回按钮等导航控件

还有重新设计的状态栏和灵动岛；当有实时活动出现时，灵动岛会沿垂直方向展开。

这种对空间的高效利用方式同样延伸到了内屏。内屏上的控件也会移到侧边，为内容尽可能释放垂直空间，同时让这些控件保持在容易触达的位置。

2.折叠区域不只是物理结构，也成为了布局的一部分

当你像翻书一样，以半折叠状态使用 iPhone Duo 时，屏幕中央会自然形成一道弧面。这时，内容会自动避开中央区域。文字和图片会向弧面两侧移动，从而更容易阅读。按钮和其他交互元素也会移向两侧，让点击和操作更容易。

这样一来，中间的弧面就自然成为 App 布局的分隔线。

竖屏时也是一样。当设备处于半折叠状态时，交互元素会移动到屏幕下半部分，既方便触达，也能让设备稳定地放在平面上。

3. 分屏、画中画，以及不断变化的可用空间

iPhone Duo 还带来了一种并排运行两个 App 的新方式。它基于 iPhone 熟悉的主屏幕手势，操作流畅而自然。只需把一个 App 拖到一侧，就能创建分屏视图。

新的 50/50 分屏会把显示区域分成两个彼此独立的部分，你可以在一侧持续处理某项任务，同时使用另一侧。

在分屏视图中，控件会沿屏幕外侧边缘排列。

当 App 位于左侧时，控件也会移动到显示屏左侧边缘，既方便拇指触达，也能避开中央区域。

当视频以画中画模式播放时，现在可以把它固定在屏幕顶部继续观看。当前 App 会在垂直方向自动调整尺寸，以适应剩余空间。

如果你把设备折到半折叠状态，视频则会扩展并占据半个屏幕。因此，App 会根据不同的视频尺寸实时调整垂直布局。

Vince，接下来给我们讲讲，怎样让 App 为 iPhone Duo 做好准备吧。下面来看看该如何调整你的设计。

4. 不要为每一种折叠形态设计一套界面

用户会以很多不同形态使用 iPhone Duo，你需要确保 App 在各种形态下都表现出色。但这并不意味着你要针对每一种形态分别设计一套布局。

更好的做法，是关注两种尺寸类别：外屏使用紧凑宽度，内屏使用常规宽度。

避免使用固定宽度、断点，或任何绑定到某个特定屏幕的尺寸参数。相反，应始终围绕这两种尺寸类别进行设计。

构建布局时，请使用布局边距和水平安全区边距。

如果你已经在使用这些机制，那就已经有了很好的基础。你的 App 应该已经能够适配 iPhone Duo。

也可以换个角度理解：把 App 设计成可以自由调整尺寸，基本就不会有问题。

5. 注意一种特殊形态

刚才我说过，没有必要为每一种使用形态单独设计布局，不过有一种可选布局值得考虑。

当 iPhone Duo 放在桌面上时，非常适合免手持使用。媒体内容可以放在上半部分，可点击控件则放在下方稳定的区域。

如果你决定为这种形态专门设计布局，请确保它与其他形态拥有相同的控件和整体信息层级。不要让某项功能只能在某一种形态下使用。所以在大多数布局里，控件都会移到侧边。这是一个新的设计变化，可以释放更多垂直空间。我们来看看它具体是怎样工作的。

6. 侧边栏不是简单地把工具栏旋转 90°

在 iPhone Duo 上，控件会沿设备侧边排列，更容易触达。

唯一继续保留水平栏的情况，是内屏竖屏显示时，因为这种状态下，App 内容拥有足够的垂直空间。

需要注意的是，移到侧边的不只是 App 自己的控件。它们还会与系统中的动态元素共享这块垂直空间，包括实时活动和状态栏。

如果空间不够，App 控件会自动收进溢出菜单。但如果你已经有一款 iPhone App，把现有控件映射到 iPhone Duo 上其实很简单，而且其中很多工作都会自动完成。

原本位于 App 顶部的工具栏按钮，会移动到这块垂直区域的顶部；

而原本位于底部的工具栏按钮，在 iPhone Duo 上仍会落在底部。如果你的 App 有标签栏，它也会继续与底部对齐。

不过也有少数例外。并不是所有内容都会移到侧边。如果某些工具栏项目太宽，无法放进右侧区域，例如文字按钮或分段控件，那么在 iPhone Duo 上，它们应该继续留在导航栏中。

7. 当界面变得不对称，内容应该以哪里为中心？

当控件移到侧边后，很多界面布局都会变得不对称。设计师在这方面需要注意什么？

我们在把自己的 App 适配到 iPhone Duo 的过程中学到了很多。根据内容类型的不同，其实有不少非常有效的处理方式。

你可能已经习惯让内容相对于整个屏幕居中。但在 iPhone Duo 上，大多数内容都需要做一定偏移，避免被控件遮挡。

如果你的 App 按水平安全区边距进行对齐，这种偏移会自动完成。

不过有些 UI 仍然应该相对于整个屏幕居中，不需要偏移。这种方式很适合沉浸式、视觉表现很强、且无需滚动的界面，只要你能确保交互元素不会被右侧控件挡住。

你也可以把两种方式结合起来：背景图或页头保持全宽，前景中的可滚动内容则向内缩进。

只要确保所有交互元素都位于这块可滚动区域内，就不会出现被遮挡的问题。

外屏部分说得差不多了，那内屏呢？你肯定不希望只是把一个 iPhone App 简单拉宽。下面来看看几种更好的处理方式。

分屏视图就是一个很好的选择。它可以同时呈现 App 信息架构中的多个层级。

但要确保你的信息层级在外屏和内屏之间保持一致。不要把某些功能限制在特定使用形态中。

用户在使用 App 时，可能会频繁展开或合上设备，所以无论外屏还是内屏，体验都需要可预期且保持一致。

另一种方式，是针对更宽的内屏优化内容。以“音乐”App 为例，原本垂直堆叠的布局，在获得更多水平空间后，可以自动重排为双栏布局。

第三种方式适用于带有标签栏的 App：

你可以在内屏上把标签栏呈现为侧边栏。

当然，这并不适合所有 App。它更适用于信息密度较高的应用，比如这里的“健康”App。

Sheet 面板在这台设备上也增加了一些新的行为。根据不同使用形态，它会以几种方式进行适配，这些变化值得了解。

默认情况下，在外屏上，Sheet 面板中的控件同样会移到侧边。

不过，如果更符合你的内容需求，也可以让它们保持原位，方法是在 Sheet 面板中关闭垂直栏。这种方式很适合只有一个工具栏按钮的 Sheet 面板。

启用这个选项后，Sheet 面板会在前置摄像头下方留出一点距离，同时状态栏也会重新定位。

在内屏上，无论横屏还是竖屏，Sheet 面板都会使用标准的水平栏。

当 iPhone Duo 处于半折叠状态时，Sheet 面板会向一侧滑动，避免落在折叠区域。

事实上，还有不少其他组件也会这样处理。

交互元素避开折叠区域，可滚动内容不必避开,我们发现，如果按钮正好落在折叠处，会很难点击。

所以我们设计了一套行为：只要 iPhone Duo 处于半折叠状态，就会把交互元素轻微推离折叠区域。

这套行为已经内置在许多系统组件中，包括 Sheet 面板、警告、菜单、工具栏按钮等等。

因此应尽可能使用这些系统组件，让你的 App 也获得同样的折叠避让行为。

也就是说，核心思路是尽量让交互元素避开中间的弧面区域。可滚动内容则不需要避开这一区域。

好，我们来总结一下。这是你的 iOS App 第一次出现在一台可折叠的 iPhone 上。

无论设备如何变化，App 都应该让人感觉是同一套完整体验，能够自然适应不同的屏幕尺寸和使用形态。

通过让界面适配这种新的设备形态，比如把控件移到侧边，并支持自由调整尺寸，你的 App 才会真正像是为 iPhone Duo 而生。

我们在为 iPhone Duo 做设计时收获了很多乐趣。希望你也一样。感谢观看。

以下为官方中文译注版完整视频