布局自适应_【iOS12人机交互指南】5.1-自适应与布局

该系列是iOS12人机交互指南的翻译，翻译的过程中加深自己的理解。

用户通常希望能够在所有设备和环境中使用他们最喜欢的应用。在iOS中，界面元素和布局可以配置为在不同设备上自动改变形状和大小，比如在iPad上进行多任务处理时，在分屏视图中，当屏幕旋转时等等。设计一个在任何环境中都能提供良好体验的自适应界面是非常重要的。

设备屏幕尺寸和方向

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

自动布局

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

当检测到某些环境变化(被称为特征)时，自动布局会根据指定的约束自动调整布局。你可以设置应用动态适应广泛的特征，包括:

• 不同设备屏幕尺寸、分辨率和色域(sRGB/P3)
• 不同设备朝向(竖屏/横屏)
• 分屏视图
• iPad多任务模式
• 动态类型文本大小更改
• 基于语言环境启用的国际化特性(从左到右/从右到左布局方向、日期/时间/数字格式、字体变化、文本长度)
• 系统功能可用性(3D Touch)

布局指南和安全区域

布局指南定义了矩形区域，这些区域实际上在屏幕上不可见，但有助于内容的定位、对齐和间距。系统包含了预定义的布局指南，可以方便地在内容周围应用标准空白，并限制文本的宽度，以获得最佳的可读性。你还可以定义自定义布局指南。

iPhone

ipad

遵循UIKit定义的安全区和布局边距。这些布局指南确保根据设备和情景进行适当的应用。安全区还可以防止内容覆盖状态栏、导航栏、工具栏和选项卡栏。标准系统提供的视图自动采用安全区域布局指南。

尺寸类别

尺寸类别是根据大小自动适配内容区域的特征。系统定义了两种尺寸类别，常规(代表宽阔空间)和紧凑(代表受约束空间)，这两种分类描述了视图的高度和宽度。

视图可以拥有以下任何尺寸归类的组合:

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

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

设备尺寸类别

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

多任务尺寸类别

在iPad上，当应用在多任务配置下运行时，尺寸类别也适用。

总体布局注意事项

确保主内容在其默认大小下是清晰的。用户不应该需要水平滚动来阅读重要的文本，或者放大来查看主要的图像，除非他们选择改变大小。

在整个应用中保持整体一致的外观。一般来说，具有类似功能的元素应该看起来相似。

用视觉的重量和平衡来传达重要性。大的元素吸引眼球，看起来比小元素更重要。更大的元素也更容易点击，这一点在应用被出于分散注意力的环境时尤其重要，比如在厨房或健身房。一般来说，将主要元素放在屏幕的上半部分，在从左到右的阅读环境中，靠近屏幕的左侧。

使用对齐来简化浏览，传达层次结构。对齐使应用看起来整洁有序，帮助用户在滚动时集中注意力，并使查找信息变得更容易。缩进和对齐还可以暗示内容组之间的关系。

如果可能的话，支持竖屏和横屏方向。用户倾向于在不同的方向上使用应用，所以当你最好能够满足这种期望。

为文本大小的改变做好准备。当人们在设置中选择不同的文本大小时，大多数应用都会做出响应。为了适应一些文本大小的更改，你可能需要调整布局。

为交互元素提供足够的点击区域。尽量保持所有控件的最小点击区域为44pt x 44pt。

在多个设备上预览你的应用。可以使用模拟器(包含在Xcode中)预览你的应用，并快速检查和其他布局问题。如果你的应用横向模式，确保你的布局在无论设备是向左旋转还是向右旋转时都看起来很棒。全屏iphone不支持倒立竖屏模式。一些特性，如宽色域图像，最好在实际设备上预览。

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

适应上下文的变化

在上下文更改期间保持当前内容为焦点。内容是你的最高优先级，当环境发生变化时，改变焦点可能会让用户迷失方向，感到沮丧，甚至让人感觉自己失去了对应用的控制。

避免不必要的布局更改。当用户旋转设备时，整个布局不需要改变。例如，如果你的应用在竖屏模式下显示一个图像网格，它不必像在横屏模式下显示列表那样显示相同的图像。相反，它可以简单地调整网格的大小。试着在所有情况下都保持类似的体验。

如果你的应用必须在一种方向模式运行，那么支持左右。一个只在横屏模式下运行的应用不管用户是向左还是向右旋转设备时，都应该是可用的。当用户旋转设备180度时，只在竖屏模式下运行的应用应该将内容旋转180度——但iPhone X不支持倒立竖屏模式。如果你的应用在别人拿错方向的时候没有自动旋转，他们会本能地知道要旋转它，你不需要告诉他们。

根据上下文自定义应用对旋转的响应。例如，一款让玩家通过旋转设备来移动角色的游戏，可能不应该在游戏过程中改变方向。但是，它可以根据当前的方向显示菜单和介绍序列。

确保你的应用在iPad上运行，而不仅仅是在iPhone上。用户喜欢在任意一种iOS设备上运行应用的。即使你希望大多数人在iPhone上使用你的应用，界面元素也应该在iPad上保持可见性和操作性。如果应用的某些功能需要特定于iphone的硬件，比如3D触摸，考虑在iPad上隐藏或禁用这些功能，让用户使用应用的其他功能。

在复用原图时，要注意纵横比的差异。不同的屏幕尺寸可能有不同的长宽比，导致原图出现裁剪，拉伸或出现黑边。确保重要的视觉内容在所有显示尺寸上都能看到。

设计全屏体验

扩展可视元素以填充屏幕。确保背景扩展到显示的边缘，以及垂直可滚动布局，如列表和集合，一直延续到底部。

避免将交互式控件放置在屏幕的最底部和角落。用户使用屏幕底部边缘的滑动手势来访问主屏幕和应用切换器等功能，这些手势可能会取消你在该区域实现的自定义手势。对于用户来说，屏幕的远端角落可能是难以触及的地方。

嵌入必要的内容，以防止剪切。一般来说，内容应该居中并对称地嵌入，这样它在任何方向上看起来都很好，不会被圆角剪切，不会被传感器外壳隐藏，也不会被访问主屏幕的指示器遮挡。为了获得最好的结果，使用标准的、系统提供的接口元素和自动布局来构建你的界面，并遵循UIKit定义的布局指南和安全区。当设备处于横向方向时，某些应用程序(如游戏)可能适合将可点击控件放置在屏幕的较低部分(延伸到安全区域以下)，以便为内容留出更多空间。在屏幕的顶部和底部放置控件时使用匹配的插入，并在Home指示器周围留出足够的空间，以便人们在尝试与控件交互时不会意外地将其作为目标。由于Home指示器始终位于屏幕的中心，它相对于应用界面的位置可能会发生变化。

嵌入全屏宽度的按钮。一个延伸到屏幕边缘的按钮可能看起来不像一个按钮。在使用全屏宽度按钮时尊重标准的UIKit的边距。当屏幕底部出现一个全宽度按钮时，如果它有圆角并且与安全区域的底部对齐，那么它看起来是最好的——这也确保了它不会与主指示器冲突。

不要屏蔽或特别注意关键的显示特性。不要试图通过在屏幕的顶部和底部放置黑条来隐藏设备的圆角、传感器外壳或用于访问主屏幕的指示器。也不要使用像括号、边框、形状或说明文字这样的视觉装饰来引起对这些区域的特别注意。

注意状态栏的高度。全屏iphone的状态栏比老款iphone高。如果你应用假设状态栏高度固定，以便将内容定位到状态栏以下，则必须更新应用以基于用户的设备动态定位内容。请注意，当语音记录和位置跟踪等后台任务处于活动状态时，全屏iphone上的状态栏不会改变高度。

如果你的应用当前隐藏了状态栏，那么对于全屏iphone，请重新考虑这个决定。全屏iphone比老款iphone有更多的垂直内容空间，状态栏占据了你应用可能不会完全利用的区域，状态栏还显示人们认为有用的信息，它只应该隐藏起来以换取更多附加值。

允许自动隐藏指示符，以便节省访问主屏幕的时间。当启用自动隐藏时，如果用户有几秒钟没有触碰屏幕，该指示器就会淡出。当用户再次触摸屏幕时，它会重新出现。这种行为应该只在播放视频或照片幻灯片等被动观看体验时启用。