IOS屏幕尺寸及其界面布局

1,670 阅读11分钟

适应性和布局

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

设备屏幕尺寸和方向

iOS 设备有多种屏幕尺寸,可以纵向或横向使用。在 iPhone X 和 iPad Pro 等无边框设备中,显示屏的圆角与设备的整体尺寸非常匹配。其他设备(例如 iPhone SE 和 iPad Air)具有矩形显示屏。

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

iPad 和两款 iPhone 机型的示意图,分别为纵向和横向。

笔记上表中的所有比例因子均为 UIKit 比例因子,可能与原生比例因子有所不同。有关开发人员指南,请参阅scalenativeScale

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

自动布局

Auto Layout 是一种构建自适应界面的开发工具。使用自动布局,您可以定义管理应用程序内容的规则(称为约束)。例如,您可以约束一个按钮,使其始终水平居中并位于图像下方 8 个点,而不管可用的屏幕空间如何。

显示填充可用屏幕空间的蓝色区域的 iPhone 示意图。 蓝色区域由两条两端带箭头的线重叠,在屏幕的中心点相交。

当检测到某些环境变化(称为特征)时,自动布局会根据指定的约束自动重新调整布局。您可以将应用设置为动态适应各种特征,包括:

有关开发人员指南,请参阅Auto Layout GuideUITraitCollection

布局指南和安全区域

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

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

有关开发人员指南,请参阅UILayoutGuidelayoutMarginsGuidereadableContentGuidesafeAreaLayoutGuide

尺码等级

大小类是根据大小自动分配给内容区域的特征。系统定义了两个尺寸类,regular(表示广阔的空间)和compact(表示受限的空间),它们描述了视图的高度和宽度。

一个视图可以拥有大小类的任意组合:

  • 常规宽度,常规高度
  • 紧凑的宽度,紧凑的高度
  • 常规宽度,紧凑高度
  • 紧凑的宽度,常规的高度

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

设备尺寸等级

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

iPad 和 iPhone 的纵向和横向示意图。 每个方向的每个设备都在该方向的可用全屏区域周围包含一个红色轮廓,以及指示该区域高度和宽度的箭头线。

多任务大小类

在 iPad 上,当你的 app 在多任务配置中运行时,size classes 也适用。

iPad 横屏示意图,其屏幕左侧三分之二的区域为黄色。

2/3 分割视图

横屏状态下的 iPad 示意图,其屏幕的左半部分以黄色阴影显示。

1/2 分割视图

横屏状态下的 iPad 示意图,其屏幕的左侧三分之一为黄色阴影。

1/3 分割视图

一般布局注意事项

**确保主要内容以其默认大小清晰。**人们不应该水平滚动来阅读重要的文本,或者缩放来查看主要图像,除非他们选择更改大小。

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

**使用视觉重量和平衡来传达重要性。**大件物品引人注目,并且比小件物品显得更重要。较大的物品也更容易点击,当应用程序在分散注意力的环境中使用时尤其重要,例如在厨房或健身房。一般来说,将主要项目放在屏幕的上半部分,在从左到右的阅读环境中——靠近屏幕的左侧。

**使用对齐来简化扫描并传达组织和层次结构。**对齐使应用程序看起来整洁有序,帮助人们在滚动时集中注意力,并使查找信息更容易。缩进和对齐还可以指示内容组如何相关。

**如果可能,同时支持纵向和横向。**人们更喜欢以不同的方向使用应用程序,因此最好能满足这种期望。

**为文本大小的变化做好准备。**人们希望大多数应用程序在他们在“设置”中选择不同的文本大小时做出响应。为了适应一些文本大小的变化,您可能需要调整布局。有关应用中文本使用的更多信息,请参阅排版

iPhone 屏幕底部边缘的工具栏示意图。 最左边的图标被一个黄色圆盘覆盖,代表指尖,不与任何其他图标重叠。 在图表下方,圆圈中的绿色复选标记表示这是推荐的布局风格。

iPhone 屏幕底部边缘的工具栏示意图。 最左边的图标被一个黄色的小圆盘覆盖,代表部分指尖,与右侧的图标重叠。 在图表下方,圆圈中的红色 X 表示不推荐布局。

**为交互元素提供充足的触摸目标。**尽量保持所有控件的最小可点击区域为 44pt x 44pt。

用户在 4.7 英寸 iPhone 上的电话应用程序中的收藏夹列表的图像。

4.7 英寸 iPhone

用户在 5.8 英寸 iPhone 上的电话应用程序中的收藏夹列表的图像。

5.8 英寸 iPhone

**在多台设备上预览您的应用。**虽然通常最好在实际设备上预览宽色图像等功能,但您可以使用模拟器(包含在 Xcode 中)来检查剪辑和其他布局问题。例如,如果您的应用程序支持横向模式,您可以使用模拟器来确保无论设备向左还是向右旋转,您的布局看起来都很棒。

笔记默认情况下,视图控制器支持 iPad 上的所有方向和 iPhone 上除颠倒纵向以外的所有方向(有关开发人员指南,请参阅supportedInterfaceOrientations)。某些设备(例如 iPhone X)不支持倒置纵向模式,无论您的应用是否支持。

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

适应环境变化

**在上下文更改期间保持对当前内容的关注。**内容是您的首要任务。当环境发生变化时改变焦点可能会让人迷失方向和沮丧,并且会让人们觉得他们失去了对应用程序的控制。

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

**如果您的应用程序必须仅在横向运行,请同时支持这两种变体。**无论人们向左还是向右旋转他们的设备,您的横向应用程序都应该运行得同样好。不要告诉人们在使用您的应用时旋转他们的设备。如果当有人以不受支持的方向握住设备时您的应用程序没有自动旋转,他们会本能地知道要旋转它。

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

**旨在同时支持 iPad 和 iPhone。**人们喜欢在任一类型的 iOS 设备上灵活运行您的应用程序。如果您的应用程序的某些功能需要特定于 iPhone 的硬件(例如电话),请考虑在 iPad 上隐藏或禁用这些功能,并让人们使用您应用程序的其他功能。

在 4.7 英寸 iPhone 上全屏显示的树图像图。 树图像是全尺寸。

全屏 4.7" 设备图像

在 5.8 英寸 iPhone 上全屏显示的树图像图。 树图像被放大并在左右边缘被裁剪。

在 5.8" 设备上裁剪

在 5.8 英寸 iPhone 上全屏显示的树图像图。 树图像按比例缩小并在顶部和底部边缘加框。

5.8" 设备上的信箱

在 5.8 英寸 iPhone 上全屏显示的树图像图。 树图像是全尺寸。

全屏 5.8" 设备图像

在 4.7 英寸 iPhone 上全屏显示的树图像图。 树图像是全尺寸的,并且在顶部和底部边缘被裁剪。

在 4.7" 设备上裁剪

在 4.7 英寸 iPhone 上全屏显示的树图像图。 树图像按比例缩小并在左右边缘使用邮筒。

4.7" 设备上的柱箱

**重用现有图稿时请注意纵横比差异。**不同的屏幕尺寸可能有不同的纵横比,导致图稿出现裁剪、信箱或邮筒。确保重要的视觉内容在所有显示器尺寸上都保持可见。

设计全屏体验

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

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

横向 iPhone 示意图,蓝色矩形表示安全区域,垂直粉红色条表示左右边距。 每个角落的深灰色圆盘和用于访问主屏幕的指示器左侧和右侧的黄色条纹矩形指示不应包含控件的区域。

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

iPhone 屏幕底部边缘的示意图,带有指示安全区域的蓝色覆盖层和指示左右边距的垂直粉红色条带。 底部边缘的“取消”按钮延伸到边距的内边缘。 在图表下方,圆圈中的绿色复选标记表示这是推荐的布局风格。

绿色勾选圆圈表示正确使用。

iPhone 屏幕底部边缘的示意图,带有指示安全区域的蓝色覆盖层和指示左右边距的垂直粉红色条带。 底部边缘的取消按钮延伸到边距的外边缘。 在图表下方,圆圈中的红色 X 表示不推荐布局。

圆圈中的红色 X 表示使用不当。

**插入全角按钮。**延伸到屏幕边缘的按钮可能看起来不像按钮。遵守全宽按钮两侧的标准 UIKit 边距。出现在屏幕底部的全角按钮在具有圆角并与安全区域底部对齐时看起来最好——这也确保它不会与主页指示器冲突。

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

**注意状态栏的高度。**全屏 iPhone 机型的状态栏比其他机型高。如果您的应用采用固定的状态栏高度来定位状态栏下方的内容,则您必须更新您的应用以根据当前设备动态定位内容。请注意,当录音和位置跟踪等后台任务处于活动状态时,全屏 iPhone 上的状态栏不会改变高度。

**如果您当前隐藏状态栏,请在您的应用在全屏 iPhone 上运行时重新考虑该决定。**全屏 iPhone 机型比其他机型拥有更多的垂直内容空间,并且状态栏占据了您的应用程序可能不会充分利用的屏幕区域。状态栏还显示人们认为有用的信息。它应该只隐藏以换取附加值。

**允许自动隐藏指示器以谨慎访问主屏幕。**启用自动隐藏后,如果用户几秒钟没有触摸屏幕,指示器就会淡出。当人们再次触摸屏幕时,它会再次出现。仅应为被动观看体验(如播放视频或照片幻灯片)启用此行为。

翻译自:developer.apple.com/design/huma…