iOS与Android设计规范 完整规范2020

适应性和布局

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

设备屏幕尺寸和方向

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

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

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

自动版面

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

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

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

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

• 拆分视图

• iPad上的多任务处理模式

• 动态类型的文字大小更改

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

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

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

布局指南和安全区域

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

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

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

尺寸等级

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

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

• 常规宽度，常规高度

• 宽度紧凑，高度紧凑

• 常规宽度，高度紧凑

• 宽度紧凑，常规高度

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

设备尺寸等级

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

多任务大小类

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

2/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定义。当设备处于横向时，可能适合某些应用程序（例如游戏）将可点击的控件放置在屏幕的下部（延伸到安全区域下方），以便为内容留出更多空间。将控件放在屏幕的顶部和底部时，请使用匹配的插图，并在“主页”指示器周围留出足够的空间，以便人们在尝试与控件进行交互时不会意外地将其作为目标。由于“主页”指示器仍在屏幕上居中，因此它相对于应用程序界面的位置可能会更改。

插入全角按钮。延伸到屏幕边缘的按钮可能看起来不像按钮。遵守全角按钮两侧的标准UIKit边距。屏幕底部出现一个全角按钮时，如果该按钮具有圆角并与安全区域的底部对齐，则该按钮最佳，这也确保了它与“主页”指示器不冲突。

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

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

如果您的应用当前隐藏状态栏，请为全屏iPhone重新考虑该决定。全屏iPhone的内容垂直空间要比旧版iPhone多，并且状态栏占据了您的应用可能无法充分利用的屏幕区域。状态栏还会显示人们认为有用的信息。它仅应隐藏以换取附加值。

允许自动隐藏指示器以节省访问主屏幕的时间。启用自动隐藏后，如果用户几秒钟未触摸屏幕，指示灯就会淡出。当人们再次触摸屏幕时，它会重新出现。仅对于被动观看体验（例如播放视频或照片幻灯片），应启用此行为。