适配与布局

人们通常希望能够在其所有设备和任何情境中，使用他们喜爱的应用。在 iOS 中，界面元素和布局可以在不同设备上，通过自动改变形状和大小去进行适配，iPad 上的多任务处理、拆分视图、屏幕旋转等。设计一个在任何环境下都能提供出色体验的适配性强的界面，是非常重要的。

设备屏幕大小和方向

iOS 设备有多种屏幕尺寸，可用于纵向或横向。

了解屏幕分辨率如何影响应用的图像，请参阅图像大小和分辨率。

自动布局

自动布局是构建自适应界面的开发工具。使用「自动布局」，可以定义控制内容的规则（称为约束）。例如，你可以约束按钮，使其始终水平居中，并将按钮定位在图像下方八个点，而不考虑可用的屏幕空间。

当检测到环境差异（称为特征）时，「自动布局」会根据指定的约束自动调整布局。你可以将应用设置为动态适应各种特征，包括：

• 不同的设备屏幕大小、分辨率和色域 （sRGB/P3）
• 不同的设备方向（纵向/横向）
• 拆分视图
• iPad 上的多任务模式
• 动态类型文本大小更改
• 基于区域设置的国际化功能（从左到右/从右到左的布局方向、日期/时间/数字格式、字型变体、文本长度）
• 系统功能可用性（3D Touch）

有关开发人员指南，请参阅自动布局指南和 UITraitCollection。

布局指南和安全区域

布局指南定义了一些矩形区域，这些区域实际上不会明显显示在屏幕上，但有助于内容的定位、对齐和间距。该系统包括预定义的布局指南，便于在内容周围应用标准边距，并限制文本宽度以实现最佳可读性。你还可以定义自定义布局指南。

iPhone

iPad

遵守 UIKit 定义的安全区域和布局边距。这些布局指南可确保内容根据设备和情境进行正确的嵌入。安全区域还可以防止内容在状态栏、导航栏、工具栏和选项卡栏等位置发生重叠。系统提供的标准视图会自动采用安全区布局指南。

有关开发人员指南，请参阅 UILayoutGuide，layoutMarginsGuide，readableContentGuide 和 safeAreaLayoutGuide。

尺寸类型

尺寸类型是根据其大小自动分配给内容区域的特征。系统定义了两个尺寸类型，「常规」（表示广阔的空间）和「紧凑」（表示约束空间），它们描述视图的高度和宽度。

视图可能拥有任意组合的尺寸类型：

• 常规宽度，常规高度
• 紧凑宽度，紧凑高度
• 常规宽度，紧凑高度
• 紧凑宽度，常规高度

与其他环境变化一样，iOS 会根据内容区域的尺寸类型动态调整布局。例如，垂直尺寸类型从紧凑高度更改为常规高度，可能是因为用户将设备从横向旋转到纵向，选项卡栏可能会变高。

设备尺寸类型

根据屏幕大小，不同尺寸类型结合适用于不同设备上的全屏体验。

多任务尺寸类型

在 iPad 上，尺寸类型同样适用于运行多任务的应用。

2/3 拆分视图 1/2 拆分视图 1/3 拆分视图

通用布局注意事项

确保主要内容在其默认大小下显示清晰。除非人们选择更改大小，否则不应当使用水平滚动来阅读重要文本，或通过缩放以查看主要图像。

在整个应用中保持整体一致的样式。通常，具有类似功能的元素应该看起来类似。

使用视觉比重和平衡来传达重要性。吸引眼球的较大的项目，比较小看起来更显重要。较大的项目也更易于点击，当应用程序用于注意力分散的环境时（如在厨房或健身房），这一点尤其重要。通常，将主要项目放在屏幕的上半部分，在从左到右阅读环境中下，放置在屏幕左侧。

使用对齐来方便浏览，并传达组织和层次结构。对齐使应用看起来整洁有序，有助于人们在滚动时集中注意力，并更轻松地查找信息。缩进和对齐还可以指示内容组之间的关联方式。

如果可能，同时支持竖屏和横屏。人们更喜欢以不同方向使用应用，因此最好满足用户这一期望。

为修改文本大小做好准备。当人们在「设置」中选择不同的文本大小时，大多数应用都响应。要适应某些文本大小更改，你可能需要调整布局。有关应用中的文本使用的详细信息，请参阅版式。

为交互元素提供足够大的触摸目标。对于所有控件，尝试保持 44pt x 44pt 的最小可点击区域。

在多个设备上预览应用。你可以使用「模拟器」（包含在 Xcode 中）来预览应用并检查剪裁和其他布局问题。如果应用支持横向模式，请确保无论设备是向左旋转还是向右旋转，布局都能看起来良好。全面屏 iPhone 不支持上下颠倒的纵向模式。某些功能（如广色域图像）最好在实际设备上预览。

在较大的设备上显示文本时，请使用高阅读性的边距。这些边距使文本行足够短，以确保舒适的阅读体验。

适应情境中的更改

当情境更改时，保持对当前内容的聚焦。内容是你的最高优先级。当情境变化时，改变焦点可能会令人迷惑和沮丧，并会使人感觉他们失去了对应用的控制。

避免不必要的布局更改。当用户旋转设备时，整个布局不必做更改。例如，如果应用在纵向模式下以网格形式呈现图像，则不必在横向模式下将相同的图像以列表的形式呈现。相反，它可能只是调整网格的尺寸。尝试在所有情境中保持类似的体验。

如果应用必须在单个方向上运行，请支持这两种变体。无论用户是向左旋转还是向右旋转设备，仅在横向模式下运行的应用都应可用。当用户将设备旋转 180 度时，仅在纵向模式下运行的应用应当将内容旋转 180 度，但 iPhone X 上除外，因为它不支持倒置的纵向模式。如果某人以错误的方向持有设备时，应用未自动旋转，他们会本能地知道要旋转设备，而你不需要告诉他们。

根据情境自定义应用对旋转的响应。例如，允许用户通过旋转设备来移动角色的游戏，在游戏过程中可能不应切换方向。但是，它可以根据当前方向显示菜单和简介序列。

确保你的应用可以在 iPad 上运行，而不仅仅是在 iPhone 上。用户喜欢在任一类型的 iOS 设备上灵活地使用你的应用。即使你希望大多数人在 iPhone 上使用你的应用，界面元素也应该在 iPad 上保持可见性和功能性。如果应用的某些功能需要基于 iPhone 的硬件（如 3D Touch），请考虑在 iPad 上隐藏或禁用这些功能，并允许用户使用应用的其他功能。

在重复使用现存素材时，要注意长宽比的差异。不同的屏幕大小可能具有不同的纵横比，从而导致图像出现裁剪、信箱式留白（letterboxed）或邮筒式留白（pillarboxed）。确保在所有屏幕尺寸下都保留重要的视觉内容。

设计全屏的体验

扩展视觉元素以填充屏幕。确保背景延伸到屏幕的边缘，并且垂直可滚动的布局（如表格和集合）一直延伸到底部。

避免在屏幕底部和角落，明显地放置交互控件。人们会在屏幕底部边缘使用轻扫手势，来访问「主屏幕」、切换应用，这些手势可能会取消你在此区域中实现的自定义手势。屏幕的远角可能是人们难以舒适触达的区域。

嵌入基本内容以防止剪切。通常，内容应居中且对称地嵌入，以便它在任何方向上看起来都不错：不会被圆角剪切，不会被传感器外壳遮盖，不会被用于访问主屏幕的指示器遮盖。为获得最佳效果，请使用系统提供的标准界面元素和自动布局来搭建界面，并遵守 UIKit 定义的布局指南和安全区域。当设备处于横向时，某些应用（如游戏）可能适合在屏幕的下部放置可显示控件（延伸到安全区域下方），以留出更多内容空间。在屏幕顶部和底部放置控件时，请使用匹配的内嵌，并在「主屏幕」指示器周围留出足够的空间，这样人们在尝试与控件交互时不会意外瞄准它。由于「主屏幕」指示器在屏幕上保持居中，因此其相对于应用界面的位置可能会改变。

插入全屏宽的按钮。伸展到屏幕边沿的按钮可能看起来不像一个按钮。遵循标准 UI 控件中全屏宽按钮的面距。当一个位于屏幕底端的全屏宽按钮，具有圆角并且与安全区域底对齐时显示效果最佳，同时也保证了它不会与「主屏幕」指示器冲突。

不要隐藏或突出关键的显示特性。不要在屏幕顶部和底部放置黑条，来试图隐藏设备的圆角、传感器区域和主页指示器。也不要使用像括号(brackets)、边框(bezels)、形状(shapes)或指示文字这样的视觉装饰，来引导用户关注这些区域。

注意状态栏的高度。全面屏 iPhone 上的状态栏比旧版 iPhone 的高。如果应用假定将内容定位在状态栏下方的固定状态栏高度，则必须更新应用以根据用户的设备动态定位内容。请注意，当语音录制和位置跟踪等后台任务处于活动状态时，全面屏 iPhone 上的状态栏不会更改高度。

如果你的应用当前隐藏了状态栏，在全面屏 iPhone 上请重新考虑这个决定。与旧版 iPhone 相比，全面屏 iPhone 的内容垂直空间更大，状态栏占据屏幕一定的区域，而你的应用可能无法充分利用此区域。状态栏还显示对人们有用的信息。除非可以换取附加值，否则不能隐藏它。

允许自动隐藏指示器，谨防访问「主屏幕」。启用自动隐藏后，如果用户几秒钟内未触摸屏幕，指示器将淡出。当用户再次触摸屏幕时，它会再次出现。此行为应仅用于被动观看体验，如播放视频或照片幻灯片。

其他布局注意事项

确保你的网站在全屏显示屏上看起来很好。请参阅 webkit.org 上的 为 iPhone X 设计网站。