在 iPhone Duo 上，内屏不仅会在完全展开的平整状态下使用，也经常会被折成书本形态握持，或支在桌面上作为支架形态使用。当屏幕从平整转为半折时，原本位于屏幕正中央的元素（如选中的照片及其上下文菜单、居中的提示框等）就会落入中央弯折区域，不仅画面容易变形，手指点按也变得不便。如果界面仅仅按照屏幕宽度做等比缩放，并不能解决折叠姿态带来的空间变化。

今天的这篇文章，来自官方发布的《Strike a pose with adaptive layouts on iPhone Duo》视频，由 Apple 设计系统人机界面设计师 Maria 和 UI Frameworks 工程师 Harry 共同讲解。视频从半折状态下的界面变化切入，先探讨照片、菜单、提示框等元素如何避开中央弯折区域，再延伸到分栏列表与卡片网格的布局调整，后半段则重点讲解了保留区域（Reserved Regions）与 Arrangement 两套开发接口。下面梳理这场视频的核心设计与适配要点。

全文速览

一. 设备半折时，避开屏幕中央的保留区域

设备完全展开时，应用获得的是一块连续平整的画布；而在半折状态下，屏幕中央会形成一道明显的弯折区。横跨这一区域的图片会因为曲面而难以看清，落在该区域的交互按钮也不便点按。此外，内屏与外屏的前置摄像头也会各自占用局部的显示空间。因此，在设计自适应布局时，不能只看窗口的总宽高，还需要结合当前姿态判断：哪些区域适合展示内容，哪些位置方便手指触控。

视频中将这类因硬件结构或折叠姿态而影响内容显示与交互的空间，统一称为保留区域（Reserved Regions）。其中，外屏前置摄像头属于固定存在的硬件区域，系统会自动配合安全区域（Safe Area）和纵向工具栏进行处理；而内屏中央的弯折区域则会随设备的展平与半折动态变化。当内屏的屏下 FaceTime 摄像头开启时，摄像头所在的位置，也会成为需要避让的区域。由于内外屏硬件及折叠状态处于动态变化中，界面适配不能只套用一张固定的留白模板，需要考虑更多复杂的情况。

二. 居中元素需要结合可用空间做位移调整

视频中，两位主讲用实体书做了一个直观的类比：当书页没有完全摊平时，跨过书脊印刷的照片会向内凹陷，视线很难一次看全整个图片。iPhone Duo 的内屏在半折时也会遇到同样的问题。原本居中的卡片、按钮和照片，需要根据铰链两侧实际可用的平整面积，重新调整位置，必要时还要同步缩放尺寸。这种根据可用区域重新排布元素的机制，在规范中称为位移调整（Displacement）。

执行位移调整时，哪些元素需要一起移动，取决于它们之间的上下文关联。以相册应用为例，用户长按选中一张照片后，弹出的上下文菜单（“拷贝”“共享”等），会直接作用于这张照片。如果只把菜单移到折痕另一侧，而把照片留在原处，用户就很难直观确认菜单对应的是哪张照片。因此在视频演示中，被选中的照片与上下文菜单，会作为一个整体同步移动并调整尺寸，用来维持原有的视觉与操作关联；而功能独立的悬浮按钮则只需单独避让，不必牵动整页布局。

相比之下，长文章、信息流、文档和列表等可滚动内容（Scrollable Content）则无需整块迁移。这类视图本身支持连续滚动，用户随时可以将想要阅读的段落或列表项滑入舒适的视野范围内。设备半折时，正文只需按新的列宽重新换行、调整滚动容器尺寸即可，不必为了避开折痕而将整篇内容挤到另外半边屏幕。

三. 根据持握与姿态安排提示框等组件

同样是一个系统提示框（Alert），手持设备与支在桌面上时，最合理的显示位置并不相同。当用户像拿书一样手持半折的设备时，音乐应用中的“新建文件夹”提示框会向布局的末尾侧（trailing，即从左向右书写语言中的右侧）位移。这样一来，如果用户紧接着合上手机继续操作，外屏上的提示框位置就能与刚才内屏右侧的位置自然衔接，视觉过渡更加连贯。需要注意，这里的末尾侧（trailing）遵循当前语言的书写方向，在设计规范与开发中不能简单写死为固定的“右侧”。

当设备半折并支在桌面上（桌面支撑形态）时，用户通常离屏幕稍远，视线自然落向立起的上半屏。此时系统会将提示框移至上半屏，方便直接阅读与输入。而在视频播放等媒体场景下，画面内容会安排在上半屏供用户观看，进度条和播放控制按钮则留在有桌面支撑的下半屏——上半屏负责稳定展示画面，下半屏则让手指点按时机身更加稳固。

局部工具控件同样需要紧贴它所服务的视图。例如在提醒事项（Reminders）的左右分栏布局中，搜索框用于检索左侧的任务列表，而非右侧的单个任务详情。因此当屏幕半折时，搜索框应跟随左侧列表一起收窄和位移，避免跨入右侧详情区而让用户误以为是在当前任务内搜索。

对于菜单与弹出框，系统标准组件已经内置了折痕避让机制。以翻译应用的语言选择菜单为例，内屏展平时菜单靠近画面中央；设备半折后，菜单会自动偏移到折痕一侧的平整区域。应用只要采用系统标准的模态面板（Sheet）、提示框（Alert）、菜单（Menu）和弹出框（Popover），即可直接获得这套自适应避让行为；若使用自定义弹出控件，则需要单独验证半折状态下的显示位置。

四. 分栏列表与卡片网格的折叠避让策略

当页面由多列内容或卡片网格组成时，避让折痕的方式需要根据布局结构灵活调整。在提醒事项这类典型的双列分栏界面中，左侧为列表，右侧为选中项详情；设备半折时，左右两列正好分别落入折痕两侧的平整区域，并根据各自区域的宽度调整内边距。需要注意，双列布局并非只能采用 50/50 的均分比例，设计时应根据主次内容的信息密度分配列宽，并确保空间收窄后用户依然能顺畅访问每一列。

而像健身（Fitness）应用首页这样的双列卡片网格，则无需把所有卡片都挤到同一侧。它的核心适配方式是：在保持屏幕外侧边距不变的前提下，加大中央铰链处的列间距（Gutter），让左右两列卡片各自退入平整区域。这样既能让每张卡片的阅读和点按避开折痕，又能完整保留原有的双列网格结构。

从单个弹出菜单、双列主从视图到多卡片网格，虽然调整的粒度从小到大，但判断逻辑是一致的：先识别哪些内容因横跨折痕而看不清或点不准，再确定哪些关联元素需要成组位移，同时保证原有的导航层级与操作入口不丢失。

五. 自定义界面通过保留区域确定避让范围

如果应用使用了自定义相机取景器、自绘卡片网格或悬浮工具面板，就需要直接读取受影响区域的几何信息来手动排布元素。为此，系统提供了保留区域 API（Reserved Regions API），用于向应用返回当前受影响区域的类型、坐标范围（Frame）以及激活状态。

保留区域具体分为两类：第一类是分割区域（Division Region，.division），对应设备半折时的屏幕中央弯折区，它会把可用画布一分为二；当屏幕完全展平时，该区域转为非活动状态，宽度也随之变为 0。第二类是遮挡区域（Occlusion Region，.occlusion），用于描述摄像头等硬件占用的局部空间。例如，当内屏的屏下 FaceTime 摄像头启动拍摄时，系统就会将该镜头周围的局部区域作为活动的遮挡区域返回给应用；拍摄结束后，该区域便恢复为非活动状态，就又可以被调用了。

在默认查询的时候，接口只会返回当前处于激活状态的保留区域的信息。如果传入 includeInactive 参数，应用还能在屏幕完全展平时，预先获取未来折痕所在的分割位置。比如卡片网格可以在屏幕展平时就依据这一位置采用偶数列排布，这样当用户把屏幕半折时，卡片只需微调间距就能自然落入两侧，避免发生大幅度的布局跳动。

在代码实现上，SwiftUI 可以通过 GeometryReader 或 onGeometryChange 获取视图几何信息（GeometryProxy）并读取 reservedRegions；UIKit 则可以直接从视图对象查询 UIView.ReservedRegion。

在设计交接时，设计师需要明确标注：哪些核心内容必须避开保留区域、哪些组件需要成组移动，以及哪些可滚动视图可以直接跨过折痕。

六. 使用 Arrangement 容器协调主视图与辅视图

很多应用需要在同一页面内同时呈现主次两块内容。以播客（Podcasts）应用为例，正在播放的节目画面与单集逐字稿（Transcript）同属一个页面，用户点开逐字稿时，两部分左右并排，方便边听边对照文字；收起逐字稿后，播放器则舒展至更大的空间。当 iPhone Duo 处于半折状态时，播放器固定在左半屏，播放控制按钮与进度条完全避开中央折痕，逐字稿则在右半屏清晰呈现。

而当窗口切换为狭长的竖向状态（如内屏纵向持握或分屏模式）时，左右并排会让两列都过于局促。此时界面会切换为内嵌式布局：播放信息缩略在上方，逐字稿在下方与之共享纵向空间。用户的核心任务没有改变，但主次视图的组合方式随空间比例完成了自适应切换。

为了简化这类双视图的自适应排布，iOS 27.1 新增了 Arrangement 布局容器（SwiftUI 对应 ArrangementView，UIKit 对应 UIArrangementViewController）。开发者只需传入主视图（Primary View）和辅视图（Secondary View），容器就会综合当前的尺寸类（Size Classes）、窗口宽高比以及激活的分割区域，自动决定两块视图能否同时显示、按什么方向与比例排列。

从架构层级来看，页面之间的层级跳转与多列导航仍由外层的导航容器（如 NavigationSplitView）管理，而 Arrangement 则专门负责单个页面内部两块关联视图的空间排布。

七. 根据内容关系选择分栏还是叠放

Arrangement 容器提供了 split（并排分栏）和 overlay（前后叠放）两种核心布局样式。在视频的音频笔记（Audio Notes）示例中，当前播放页为主视图，待播列表为辅视图。采用默认的 split 样式时，容器较宽就左右并排，容器较高就改为上下堆叠。如果某个页面不适合上下分割，开发者也可以将分割轴向限制为仅允许水平分割（Horizontal Axis Only），这样当窗口变得又高又窄时，系统会优先展示主播放器并自动收起待播列表，应用只需在工具栏上提供一个切换按钮，方便用户随时重新唤出列表。

而 overlay 样式则会让两块内容在空间受限时前后层叠：音频笔记的播放控件悬浮在前景，待播列表作为背景层铺在后方；一旦设备半折、左右两侧都有独立空间可用，背景层的待播列表便会展开到另一侧。开发接口中的 overlayArrangementZIndex（即 zIndex）用于标识当前视图所处的前后层级，应用可以根据层级变化切换列表的收起或展开外观。需要注意，zIndex 反映的是布局容器的层叠状态，而非铰链的物理弯折角度。

在实际设计中，选择 split 还是 overlay 取决于两块内容的交互关系。像辅助功能阅读器（Accessibility Reader）这类应用，底层正文支持自由滚动，即使局部段落暂时被前景的播放控件挡住，用户也能把文字滚出遮挡区，因此非常适合采用 overlay。而在播客或音频笔记中，播放控制与逐字稿、待播队列需要同时看清并频繁点按，彼此互不遮挡的 split 并排布局才是更合理的选择。

在你为现有的 APP 进行 iPhone Duo 适配时，原有使用 HStack 或 VStack 排列双视图的页面，可以优先迁移为 split；原本使用 ZStack 前后叠放的页面，则可对应 overlay。使用时应确保导航容器包裹在 ArrangementView 外层，同时避免将整个 ArrangementView 嵌套进 List 或 ScrollView 中，列表与正文的滚动应当交给各自的内部子视图独立处理。

应用检查清单

在评审自适应布局时，建议依次在平整内屏、手持书本半折、桌面支撑半折及分屏状态下逐项核对：

• 检查居中元素与上下文关联：原本居中的照片、卡片和按钮在半折后是否落入折痕区；上下文菜单、局部工具栏在发生位移后，是否依然紧贴其对应的操作对象。
• 检查不同姿态下的控件位置：手持半折时提示框是否移向末尾侧（trailing）以便与外屏衔接；桌面支撑时提示框与视频画面是否位于上半屏、播放控件是否留在稳定的下半屏；分栏列表中的搜索框是否始终锚定在对应列表上方。
• 检查自定义界面与双视图容器：自定义网格或取景器是否正确读取保留区域（Reserved Regions）避开折痕与活动摄像头；采用 Arrangement 布局的主次视图在窄屏收起辅视图后，是否保留了清晰的重新唤出入口。

结语

《Strike a pose with adaptive layouts on iPhone Duo》展示的适配逻辑，从一张照片旁的上下文菜单，一直延伸到双列网格与主次视图容器。每一次位置与尺寸的变化背后都有明确的交互依据：照片与菜单成组位移，是为了保持操作对象的指代清晰；提示框与播放控件随姿态转移，是为了贴合手持或桌面支撑时的视线与拇指动线；而选择并排分栏还是前后叠放，则取决于两块内容是否需要同时无遮挡地阅读与交互。让界面顺应折叠形态的变化，用户才能在姿态切换时无缝延续当前的任务。

引用与开发参考

原始视频

• 《Strike a pose with adaptive layouts on iPhone Duo》：Maria、Harry 主讲，本篇核心知识点与截图来源。

补充开发文档

• UIView.ReservedRegion：查询 UIKit 保留区域的类型、坐标范围与激活状态。

• SwiftUI updates：查阅 SwiftUI 中的 ArrangementView 与 reservedRegions 相关接口。

来源：优设

作者：陈子木