适配各种环境的一致布局可帮你打造更友好的体验，还有助于用户在其所有设备上享用喜爱的 App 和游戏。

App 的布局可帮助用户从打开 App 的那一刻起就沉浸在内容之中。用户期望控制和内容之间存在自己熟悉的关系以帮助其使用和发现 App 的功能，而设计出能够充分利用这一点的布局可让 App 完美契合各个平台。

Apple 提供了模板、指南和其他资源以帮助你整合 Apple 技术并设计出可在所有 Apple 平台上运行的 App 和游戏。请参阅 Apple 设计资源。

1. 最佳实践

将相关项目分组，帮助用户找到想要的信息。例如，你可以使用负空间、背景形状、颜色、材质或分隔线来显示互相关联的元素以及将信息分隔到不同的区域中。这样操作时，请确保内容与控制之间具有明显区别。

为重要信息留出足够空间来使其易于找到。用户希望立即看到最重要的信息，因此不要将其与不重要的细节挤在一起以妨碍查看。你可以在窗口的其他部分中提供次要信息，或者将其包括在附加视图中。

扩展内容以填满屏幕或窗口。确保背景和全屏插图延伸至显示屏边缘，同时确保可滚动布局能持续滚动至设备屏幕的底部和两侧。控制以及像边栏和标签页栏等导览组件会显示在内容之上而非显示在同一平面中，因此布局时考虑到这一点十分重要。

当内容未占满整个窗口时，请使用背景扩展视图在屏幕任一侧的控制层后面提供内容外观，例如在边栏或检查器下方。

2. 视觉层次

将控制和内容区分开来。充分利用 Liquid Glass 材质，为控制提供在 iOS、iPadOS 和 macOS 间显示一致的独特外观。请使用滚动边缘效果而非背景来提供内容和控制区域之间的过渡。有关指南，请参阅滚动视图。

项目放置应传达其相对重要性。用户通常按阅读顺序开始查看项目（即从上到下和从前端到后端），因此将最重要的项目放在窗口、显示或视场顶部和前端附近一般效果不错。请注意，阅读顺序因语言而异，请在设计时将从右到左的语言纳入考量。

将组件互相对齐，让其更易于浏览并传达出条理性和层次感。对齐可让 App 看起来整洁有序，还可帮助用户在滚动或移动视线时跟踪内容，从而能够更容易找到信息。对齐还可搭配缩进来帮助用户理解信息层级结构。

利用渐进显示来帮助用户发现当前隐藏的内容。例如，如果无法一次显示大集合中的所有项目，你需要指明当前还有不可见的更多项目。取决于不同平台，你可以使用显示控制或者显示项目的一部分，以提示用户可通过与视图交互（如滚动）来显示更多内容。

通过在控制四周提供足够的空间并将其分组到合理的分区，提高控制的易用性。如果不相关控制之间的距离过近（或者与其他内容挤在一起），用户可能很难区分这些控制或者了解其用途，从而导致 App 或游戏难以操作。有关指南，请参阅工具栏。

3. 适配性

每款 App 和游戏在设备或系统环境发生变化时均需进行适配。在 iOS、iPadOS、Apple tvOS 和 visionOS 中，系统定义了一系列特征以描述可能影响 App 或游戏外观的各种设备环境。使用 SwiftUI 或“自动布局”可帮助你确保界面动态适配这些特征和其他环境变化；如果不使用这些工具，则需要使用替代方法进行适配。

以下是你需要处理的最常见设备和系统变化因素：

• 不同的设备屏幕尺寸、分辨率和色彩空间
• 不同的设备方向（竖排/横排）
• 各种系统功能，例如灵动岛和相机控制
• iPad 上的外接显示器支持、缩放显示和大小可调整的窗口
• 动态字体文字大小更改
• 基于区域设置的国际化功能（如从左到右/从右到左布局方向、日期/时间/数字格式调整、字体变体和文本长度）

设计完美适应环境变化且在视觉上保持一致的布局。用户希望你打造的体验在其旋转设备、调整窗口大小、添加其他显示器或切换到不同设备时运行良好并且使用顺手。你可以遵循系统定义的安全区、外边距和指南（可用时），并指定布局修饰符来微调界面中视图的放置，从而帮助确保界面的高适配性。

事先考虑文字大小变化。用户希望在选取不同文字大小时，App 和游戏都能响应。如果支持动态字体这项功能（可让用户在 iOS、iPadOS、Apple tvOS、visionOS 和 watchOS 中选取可见文本的字号），当用户调整文字大小时，你的 App 或游戏可适当响应。若要在基于 Unity 的游戏中支持动态字体，请使用 Apple 的辅助功能插件。有关在你的 App 中显示文本的指南，请参阅字体排印。

在多台设备上使用不同的方向、本地化语言和文字大小预览 App。首先测试使用最大和最小大小布局的体验版本可简化测试过程。虽然通常最好在实际设备上预览广色域等特性，但你可以使用 Xcode Simulator 检查截断或其他布局问题。例如，如果你的 iOS App 或游戏支持横排模式，你可以使用 Simulator 确保无论设备向左还是向右旋转，布局看起来都很美观。

必要时，缩放插图以响应显示更改。例如，在不同环境（如不同宽高比的屏幕）中查看 App 或游戏可能导致插图看起来被裁剪、以信箱模式（上下加框）或邮筒模式（左右加框）显示。发生这种情况时，请勿更改插图的宽高比，而应缩放插图以保持重要的视觉内容可见。在 visionOS 中，当窗口沿 z 轴移动时，系统会自动对其进行缩放。

4. 指南和安全区

布局指南定义了一个矩形区域，可帮你在屏幕上放置、对齐和间隔内容。系统包括预定义的布局指南，可让你轻松在内容周围应用标准外边距，以及限制文本宽度以优化可读性。你还可以自定义布局指南。

安全区定义了视图内不会被工具栏、标签页栏或者窗口可能提供的其他视图遮挡的区。安全区对于避开设备的交互和显示特性（如 iPhone 上的灵动岛或部分 Mac 机型上的相机防护罩）而言必不可少。

遵循每个平台中的关键显示和系统特性。如果 App 或游戏不适应此类特性，则会在平台中显得格格不入且用户可能更难以上手。除了帮助你避免显示和系统特性，安全区还可帮助你考虑诸如栏等交互式组件，并在尺寸更改时动态调整内容位置。

有关包括各平台适用的指南和安全区的模板，请参阅 Apple 设计资源。

5. 平台考量因素

5.1 iOS

力争同时支持竖排和横排方向。用户希望 App 和游戏在不同设备方向下都能完美运行，但有时你也会提供需要在仅限竖排或横排方向下运行的体验。出现这种情况时，你可以依赖用户自行尝试这两种方向并选定你支持的方向，而无需告诉用户旋转设备。如果你的 App 或游戏仅支持横排方向，请确保其在用户向左或向右旋转设备时同样运行良好。

首选为游戏使用全幅界面。向玩家呈现填满整个屏幕且适配圆角半径、传感器外壳和灵动岛等功能的精美界面。根据需要，考虑向玩家提供可使用信箱模式（上下加框）或邮筒模式（左右加框）外观查看游戏的选项。

避免使用全宽按钮。当按钮遵循系统定义的外边距且从屏幕一侧嵌入时，可完美契合 iOS。如果需要包括全宽按钮，请确保其与硬件的弧度协调一致，并与相邻安全区对齐。

仅在有好处或可优化体验时隐藏状态栏。状态栏显示用户认为有用的信息，并且占据的是大多数 App 不会全部使用的屏幕区，因此通常最好保持其可见。但在提供玩游戏或观看媒体这类深度体验时例外，这时隐藏状态栏可能较为合理。

5.2 iPadOS

用户可以随意将窗口大小调整至最小宽度和高度，这与 macOS 中的窗口行为类似。设计布局时，考虑到此大小调整行为和所有可能的窗口大小范围十分重要。有关指南，请参阅多任务处理和窗口。

用户调整窗口大小时，尽可能推迟切换至紧凑视图。优先为全屏幕视图设计，且仅在全屏布局版本不再适配时切换至紧凑视图。这有助于在尽可能多的情况下提高用户界面的稳定感和熟悉感。对于拆分视图等更复杂的布局，最好隐藏次要栏，例如随着视图变窄隐藏检查器。

采用系统提供的常见大小测试布局，并提供流畅的过渡效果。窗口控制提供的选项可将窗口排列为填充屏幕的二分之一、三分之一和四分之一，因此在各种设备上检查这每种大小下的布局十分重要。确保在用户调整至最小和最大窗口大小时，尽量减少意外的用户界面变化。

考虑为自适应导览采用可转换的标签页栏。对于许多 App 而言，你无需为导览选取标签页栏或边栏，而是可以采用同时提供这二者的标签页栏样式。App 首次启动时会显示你选择的边栏或标签页栏，之后用户可以轻点在二者之间切换。随着视图大小的调整，呈现样式会变化以适配视图宽度。有关指南，请参阅标签页栏。

5.3 macOS

避免将控制或关键信息放在窗口底部。用户常常移动窗口并导致底部边缘位于屏幕底部以下。

避免在窗口顶部边缘的相机防护罩内显示内容。

5.4 Apple tvOS

事先考虑各种电视机尺寸。在 Apple TV 上，布局不会像在 iPhone 或 iPad 上那样自动适配屏幕尺寸。与之相反，App 和游戏会在所有显示屏上显示相同的界面。设计布局时请多加留心，以确保其在各种屏幕尺寸上看起来都美观。

遵循屏幕的安全区。在距离屏幕顶部和底部 60 点、距离两侧 80 点的位置处嵌入主要内容。用户可能很难看清靠近边缘的内容，旧款电视机上的过扫描也可能导致意外裁剪。仅允许部分显示的离屏内容和故意延伸至屏幕外的元素显示在此区域之外。

在可获得焦点元素之间包括适当的内边距。使用 UIKit 和焦点 API 时，元素在获得焦点时会变大。考虑元素在获得焦点时的外观，并确保避免让其与重要信息重叠。

网格

以下网格布局提供了优化的观看体验。请确保在未获得焦点的行和列之间使用适当的间距，以避免项目在获得焦点时发生重叠。

如果使用 UIKit 集合视图流元素，网格中的列数会自动基于内容的宽度和间距来确定。

为有标题的行留出更多垂直间距。如果某行有标题，请在上一个未获得焦点的行底部和标题中心之间提供足够间距，以避免拥挤。标题底部和该行中未获得焦点的项目顶部之间也请提供间距。

使用一致的间距。内容间距不一致时，看起来就不再像网格，用户也会更难扫描。

让部分隐藏的内容看起来对称。为帮助用户将注意力集中到完全可见的内容上，请为部分隐藏的离屏内容在屏幕的每一侧保持相同的宽度。

visionOS

以下指南可帮助你在 visionOS App 或游戏窗口内布局内容，让内容有熟悉感且易于使用。有关在空间中显示窗口的指南以及在 visionOS App 中使用深度、缩放和视场的最佳实践，请参阅空间布局。若要进一步了解 visionOS 窗口组件，请参阅“窗口”> visionOS。

注

为标准窗口中的内容添加深度时，内容会沿 z 轴延伸出窗口边界。如果内容沿 z 轴延伸过远，系统会截断它。

考虑将 App 或游戏中最重要的内容和控制居中放置。通常当内容位于窗口中间附近时，用户可更容易发现内容并与之交互，当窗口较大时尤其如此。

保持窗口内容位于其边界内。在 visionOS 中，系统会在 XY 平面中窗口边界之外显示窗口控制。例如，“共享”菜单显示在窗口上方，用于调整窗口大小、移动和关闭窗口的控制显示在其下方。让 2D 或 3D 内容侵占这些区域可能导致用户难以使用系统提供的控制（尤其是窗口下方的控制）。

如果需要显示不属于窗口内部的额外控制，则使用挂饰。挂饰可让你提供与窗口在视觉上保持关联但与系统提供的控制互不干扰的 App 控制。例如，窗口的工具栏和标签页栏会显示为挂饰。有关指南，请参阅挂饰。

让窗口的交互式组件易于用户注视。你需要在交互式组件周围留出足够空间，以便用户可以从视觉上轻松、舒适地进行辨识，同时防止系统提供的悬停效果遮挡其他内容。例如，放置按钮以使其中心至少相距 60 点。有关指南，请参阅眼睛、空间布局和“按钮”> visionOS。

5.5 watchOS

将内容设计为从屏幕一侧边缘延伸至另一侧边缘。Apple Watch 的外框在内容周围提供了自然的视觉内边距。为避免浪费宝贵空间，请考虑最小化元素之间的内边距。

避免在界面中并排放置超过两个或三个控制。一般规则是在一行中显示的含图形按钮不超过三个，含文本的按钮不超过两个。虽然让文本按钮横跨屏幕的完整宽度通常更好，但只要屏幕不滚动，两个带短文本标签的按钮并排放置的效果也不错。

在用户可能想要向他人展示的视图中支持自动旋转。用户将手腕转到背向自己的方向时，App 通常会让显示屏睡眠以响应该动作，但在某些情况下有必要自动旋转内容。例如，佩戴者可能想要向朋友展示图像或向扫码器出示二维码。

6. 规范

6.1 iOS、iPadOS 屏幕尺寸

注:上表中所有缩放系数为 UIKit 缩放系数，可能与原生缩放系数不同。

6.2 iOS、iPadOS 设备尺寸分类

尺寸分类值要么是常规，要么是紧凑，其中常规指的是较大屏幕或横排方向下的屏幕，而紧凑指的是较小屏幕或竖排方向下的屏幕。

不同设备上的全屏体验基于屏幕尺寸应用了不同的尺寸分类组合。

6.3 watchOS 设备屏幕尺寸