苹果IOS 14设计规范-适应性和布局

作者: 来点火 | 来源:发表于2020-07-02 14:30 被阅读0次

人们通常希望能够在所有设备上和任何上下文中使用自己喜欢的应用程序。在iOS应用中，您可以配置界面元素和布局，以在iPad上执行多任务处理时，在拆分视图中，在屏幕旋转时以及在其他设备上自动更改形状和大小。设计一个适应性强的界面在任何环境下都提供出色的体验非常重要。

设备屏幕尺寸和方向

iOS设备具有各种屏幕尺寸，可以纵向或横向使用。

如果您的应用在特定设备上运行，请确保该应用在该设备的所有屏幕尺寸上运行。换句话说，仅iPhone应用程序必须在每个iPhone屏幕尺寸上运行，而仅iPad应用程序必须在每个iPad屏幕尺寸上运行。

设备肖像尺寸景观尺寸

12.9英寸iPad Pro2048像素×2732像素2732像素×2048像素

11英寸iPad Pro1668px×2388px2388px×1668px

10.5英寸iPad Pro1668px×2224px2224像素×1668像素

9.7吋iPad1536px×2048px2048像素×1536像素

7.9吋iPad mini 41536px×2048px2048像素×1536像素

iPhone XS最大1242px×2688px2688px×1242px

iPhone XS1125px×2436px2436px×1125px

iPhone XR828px×1792px1792像素×828像素

iPhone X1125px×2436px2436px×1125px

iPhone 8 Plus1242px×2208px2208px×1242px

iPhone 8750px×1334px1334px×750px

iPhone 7 Plus1242px×2208px2208px×1242px

iPhone 7750px×1334px1334px×750px

iPhone 6s Plus1242px×2208px2208px×1242px

iPhone 6s750px×1334px1334px×750px

iPhone SE640px×1136px1136px×640px

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

自动版面

Auto Layout是用于构建自适应界面的开发工具。使用“自动版式”，您可以定义用于控制应用程序内容的规则（称为Constraints）。例如，您可以约束一个按钮，使其始终水平居中并定位在图像下方八点，而不管可用的屏幕空间如何。

当检测到某些环境变化（称为特征）时，“自动布局”会根据指定的约束条件自动重新调整布局。您可以将应用程序设置为动态适应各种特征，包括：

不同的设备屏幕尺寸，分辨率和色域（sRGB / P3）

不同的设备方向（人像/风景）

拆分视图

iPad上的多任务处理模式

动态类型的文字大小更改

基于区域设置启用的国际化功能（从左到右/从右到左的布局方向，日期/时间/数字格式，字体变化，文本长度）

系统功能可用性（3D Touch）

有关开发人员的指导，请参见《自动布局指南》和《UITraitCollection》。

布局指南和安全区域

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

苹果手机

的iPad

遵守UIKit定义的安全区域和布局边距。这些布局指南可确保根据设备和上下文进行适当的插入。安全区域还可以防止内容重叠在状态栏，导航栏，工具栏和选项卡栏上。系统提供的标准视图将自动采用安全区域布局指南。

对于开发人员指南，见UILayoutGuide，layoutMarginsGuide，readableContentGuide和safeAreaLayoutGuide。

尺寸等级

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

视图可以具有尺寸类别的任何组合：

常规宽度，常规高度

宽度紧凑，高度紧凑

常规宽度，高度紧凑

宽度紧凑，常规高度

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

设备尺寸等级

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

设备纵向横向取向

12.9英寸iPad Pro常规宽度，常规高度常规宽度，常规高度

11英寸iPad Pro常规宽度，常规高度常规宽度，常规高度

10.5英寸iPad Pro常规宽度，常规高度常规宽度，常规高度

9.7吋iPad常规宽度，常规高度常规宽度，常规高度

7.9吋iPad mini 4常规宽度，常规高度常规宽度，常规高度

iPhone XS最大宽度紧凑，常规高度常规宽度，高度紧凑

iPhone XS宽度紧凑，常规高度宽度紧凑，高度紧凑

iPhone XR宽度紧凑，常规高度常规宽度，高度紧凑

iPhone X宽度紧凑，常规高度宽度紧凑，高度紧凑

iPhone 8 Plus宽度紧凑，常规高度常规宽度，高度紧凑

iPhone 8宽度紧凑，常规高度宽度紧凑，高度紧凑

iPhone 7 Plus宽度紧凑，常规高度常规宽度，高度紧凑

iPhone 7宽度紧凑，常规高度宽度紧凑，高度紧凑

iPhone 6s Plus宽度紧凑，常规高度常规宽度，高度紧凑

iPhone 6s宽度紧凑，常规高度宽度紧凑，高度紧凑

iPhone SE宽度紧凑，常规高度宽度紧凑，高度紧凑

多任务大小类

在iPad上，当您的应用程序在多任务配置中运行时，大小类也适用。

2/3分割视图

1/2分割视图

1/3分割视图

设备模式纵向横向取向

12.9英寸iPad Pro2/3分割视图宽度紧凑，常规高度常规宽度，常规高度

1/2分割视图不适用常规宽度，常规高度

1/3分割视图宽度紧凑，常规高度宽度紧凑，常规高度

11英寸iPad Pro2/3分割视图宽度紧凑，常规高度常规宽度，常规高度

1/2分割视图不适用宽度紧凑，常规高度

1/3分割视图宽度紧凑，常规高度宽度紧凑，常规高度

10.5英寸iPad Pro2/3分割视图宽度紧凑，常规高度常规宽度，常规高度

1/2分割视图不适用宽度紧凑，常规高度

1/3分割视图宽度紧凑，常规高度宽度紧凑，常规高度

9.7吋iPad2/3分割视图宽度紧凑，常规高度常规宽度，常规高度

1/2分割视图不适用宽度紧凑，常规高度

1/3分割视图宽度紧凑，常规高度宽度紧凑，常规高度

7.9吋iPad mini 42/3分割视图宽度紧凑，常规高度常规宽度，常规高度

1/2分割视图不适用宽度紧凑，常规高度

1/3分割视图宽度紧凑，常规高度宽度紧凑，常规高度

总体布局注意事项

确保主要内容以其默认大小清晰可见。人们不必水平滚动即可阅读重要文本，也无需缩放即可查看主要图像，除非他们选择更改大小。

在整个应用程序中保持整体一致的外观。通常，具有相似功能的元素应看起来相似。

利用视觉上的重量和平衡来传达重要性。大件物品比小件物品引人注目，并且显得更重要。较大的物品也更容易挖掘，这在将应用程序用于分散周围环境（例如在厨房或健身房中）时尤其重要。通常，将主要项目放置在屏幕的上半部分，并在从左至右的阅读上下文中放置在屏幕的左侧附近。

使用对齐方式可以简化扫描并传达组织和层次结构。对齐使应用看起来整洁有序，可帮助人们在滚动时集中精力，并使查找信息更加容易。缩进和对齐还可以指示内容组之间的关系。

如果可能，请同时支持纵向和横向。人们倾向于以不同的方向使用应用程序，因此，当您能够实现这一期望时，这是最好的。

准备更改文本大小。人们期望大多数应用程序在“设置”中选择不同的文本大小时做出响应。为了适应某些文本大小的更改，您可能需要调整布局。有关应用程序中文本使用情况的更多信息，请参见Typography。

为交互元素提供足够的触摸目标。尝试将所有控件的最小可触碰区域保持在44pt x 44pt。

4.7英寸iPhone

5.8英寸iPhone

在多个设备上预览您的应用。您可以使用Simulator（Xcode随附）来预览您的应用，并检查剪切和其他布局问题。如果您的应用支持横向模式，则无论设备向左还是向右旋转，请确保布局看起来都不错。全屏iPhone不支持上下颠倒肖像模式。某些功能（例如彩色图像）最好在实际设备上进行预览。

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

适应环境变化

在上下文更改期间保持对当前内容的关注。内容是您的最高优先事项。当环境变化时改变焦点可能会令人迷惑和沮丧，并使人们感到失去对应用程序的控制。

避免不必要的布局更改。当有人旋转设备时，整个布局不必更改。例如，如果您的应用以纵向模式显示图像网格，则不必以横向模式显示与列表相同的图像。相反，它可能只是调整网格的尺寸。尝试在所有情况下保持可比的经验。

如果您的应用必须在单一方向上运行，则必须同时支持这两种变体。无论设备向左还是向右旋转，仅在横向模式下运行的应用都应该可用。仅在纵向模式下运行的应用程序应在设备旋转180度时将其内容旋转180度（iPhone X除外，后者不支持上下颠倒的纵向模式）。如果当有人以错误的方向握住设备时您的应用程序不会自动旋转，他们会本能地知道如何旋转设备。您无需告诉他们。

根据上下文自定义应用对轮换的响应。例如，允许人们通过旋转设备来移动角色的游戏可能不应该在玩游戏时切换方向。但是，它可以根据当前方向显示菜单和介绍序列。

旨在同时支持iPad和iPhone。人们赞赏能够在两种类型的iOS设备上运行您的应用程序的灵活性。如果您的应用程序的某些功能需要iPhone专用的硬件（例如电话），请考虑在iPad上隐藏或禁用这些功能，并让人们使用您应用程序的其他功能。

全屏4.7英寸设备图像

在5.8英寸设备上裁剪

5.8“设备上的信箱

全屏5.8英寸设备图像

在4.7英寸设备上裁剪

4.7英寸设备上的弹药筒

重用现有图稿时请注意宽高比的差异。不同的屏幕尺寸可能具有不同的宽高比，从而导致图稿出现被裁剪，出现字母框或竖框的现象。确保在所有尺寸的显示器上都保留重要的视觉内容。

设计全屏体验

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

避免在屏幕的底部和角落中明确放置交互式控件。人们使用显示屏底部边缘的滑动手势来访问主屏幕和应用切换器等功能，这些手势可能会取消您在此区域中实现的自定义手势。屏幕的远处可能是人们难以舒适到达的区域。

插入基本内容以防止剪切。通常，内容应居中且对称地插入，这样它在任何方向上都看起来不错，不会被圆角夹住，不会被传感器外壳隐藏，也不会被访问主屏幕的指示器遮盖。为了获得最佳结果，请使用系统提供的标准界面元素和“自动布局”来构造您的界面，并遵守布局指南和安全区域由UIKit定义。当设备处于横向时，可能适合某些应用程序（例如游戏）将可点击的控件放置在屏幕的下部（在安全区域下方延伸），以便为内容留出更多空间。将控件放在屏幕的顶部和底部时，请使用匹配的插图，并在“主页”指示器周围留出足够的空间，以便人们在尝试与控件进行交互时不会意外地将其作为目标。由于“主页”指示器仍在屏幕上居中，因此它相对于应用程序界面的位置可能会发生变化。