编者注:也许你从未做过iPhone应用程序的设计,也不知道从哪里开始。又或者你已经设计了几十个APP,但仍然希望可以获得最佳实践。而苹果的《人机界面指南》又感觉像读天书。为此,本文编译了Erik D. Kennedy的一篇关于iOS 13设计准则的文章,内容涵盖了遵循「iOS 13约定」所需的几乎所有知识,包括屏幕尺寸、页面布局、导航、UI元素、字体排版、App图标、附加约定等7大块内容。

1. iPhone屏幕尺寸

在iPhone发布的最初5、6年,屏幕尺寸还是很好管理的。如果你的设计可以在320x480的屏幕分辨率上工作,那么一切都没问题。但是现在就远远不够了。仅仅在过去的三年里,就出现了3个全新的屏幕尺寸。

以下表格列出了所有iPhone涉及的屏幕尺寸清单:

设备 画布尺寸 导出比例
11 Pro Max, XS Max 414 x 896 @3x
11 Pro, X, XS 375 x 812 @3x
11, XR 414 x 896 @2x
6+, 6S+, 7+, 8+ 414 x 736 @3x
6, 6s, 7, 8 375 x 667 @2x
5, 5s, 5c, SE 320 x 568 @2x
4, 4s 320 x 480 @2x
1, 2, 3 320 x 480 @1x

备注:6+, 6S+, 7+, 8+从技术上讲应该是2.61x

  • 画布尺寸。也就是设备的pt尺寸或者@1x尺寸。强烈建议在画布上进行设计的时候使用这两个单位尺寸。
  • 导出比例。这是为设备使用最清晰解析度的位图(PNG, JPG)的导出尺寸。

1.1 为iPhone做设计的时候画布应该使用哪个尺寸?

为用户使用最常见的iPhone屏幕尺寸,但如果你需要密集的或大量数据内容的屏幕,请确保在较小的屏幕上进行测试。

  • 如果你正在当前的应用程序或网站上记录并分析数据,请查看以了解受众群体最常用的屏幕尺寸
  • 如果你要设计面向大众的应用,请使用整体上最受欢迎的iPhone屏幕尺寸:375x667pt
  • 如果你是为精通技术或设计的受众群体设计应用程序,那么最受欢迎的iPhone屏幕尺寸可能是较新的375x812pt

tips:如何找到受众群体的屏幕尺寸统计结果

  • Google分析对屏幕尺寸的统计:菜单Audience > Mobile > Devices,找到 Primary Dimension 标签,然后设置 Screen Resolution 即可。
  • 百度统计对屏幕尺寸的统计:菜单访客分析 > 系统环境 > 屏幕分辨率

如果你的设计能够在相对较窄的屏幕尺寸(375pt)上工作良好,那么基本上都可以适应较宽的屏幕尺寸(414pt)。但是反过来就不一定了。所以最好的方式就是先为较窄的屏幕进行设计,然后再复查以及调整较大的屏幕尺寸下的设计样式。由于高度的限制较小,所以画布的高度(667pt或812pt)也就无关紧要了。

1.2 iOS pt(point)和 px(pixel)的区别

pt是设计人员用来比较iOS设备上的字体和UI元素大小的一种测量单位,也称之为逻辑像素px是由iPhone屏幕组成的微小的正方形光点,也就是屏幕的像素密度,亦称之为物理像素较小的像素意味着更清晰的图像。但是,如果仅使像素变小,屏幕上的所有内容也会变小!为了平衡这一点,设计人员以pt为单位测量屏幕上元素的大小。一旦像素开始变成高或宽的一半,我们就可以为每个点使用2x2平方像素(也称为@2x)。一旦像素大约是开始时的高或宽的三分之一,我们就可以为每个点使用3x3平方像素。

pt和px:pt的大小始终相同(或近似),但随着技术效果的提高,像素会变小。更高的分辨率意味着位图导出的尺寸会更大

2. 页面布局

尽管不同的iOS应用具有不同的布局,但是大多数标准页面的布局如下所示:

2.1 状态栏 Status Bar

状态栏出现在每一个页面的顶部,但是以下几种情况除外:全屏图片、视频和多媒体。

iPhone X 及以后版本的iOS状态栏。高度为44pt。在浅色背景上使用黑色文本/图标。在深色背景上使用白色文本/图标。

状态栏包含时间、运营商信号、wifi以及电池指示,并且支持黑色和白色(文字和图标)两种颜色模式。

状态栏的背景可以是任何颜色,甚至可以是透明的。若要找到白色的正确对比色,请使用可访问性颜色生成器

iOS透明状态栏设计。状态栏背景可以是透明的。使用白色的文本/图标可以使其从图片上脱颖而出。

如果你正在除最亮的图像以外的任何位置上使用状态栏,使用白色字体也许是比较好的选择。

又或者你希望在各种图像上使用最小化状态栏,请使用背景模糊

iOS背景模糊状态栏设计。这种“磨砂玻璃”样式的状态栏不会在界面上添加任何额外的颜色、边框或不必要的吸引注意力的元素,它只会模糊其下方的任何颜色,从而使文本更具可读性。

在上面的示例中,浅灰色页面背景颜色是磨砂玻璃样式的默认颜色,这意味着其上方的文本应该是黑色而不是白色。

只有iPhone X 以后的机型才具有“缺口”设计和边框圆角。较早的iPhone(和所有iPad)的状态栏还是紧凑型的。

iPhone 8和早期机型的状态栏设计

2.2 导航栏 Nav Bar

导航栏是应用程序显示导航、页面标题、主要页面操作、以及通常还会带有搜索的位置。

你可以认为iOS导航栏最多由三行组成

  • 状态栏: 44pt高
  • 第一行: 44pt高
  • 第二行: 54pt高
  • 第三行: 48pt高

这些测量值并不总是准确的,iOS默认应用程序与它们会有些出入,但至少它们可以帮助你从头开始进行设计。

因此,iPhone应用程序会显示一行、二行或三行,具体取决于(a)页面的需要和(b)滚动状态。

如果你只需要紧凑地显示一些页面操作(甚至连页面标题都是可选的),那么使用一行即可。

仅使用一行的iOS应用导航

当然,如果你有足够的空间,默认的iOS应用页面布局包含了二行:第一行放置页面操作,第二行放置大标题。

默认带有两行的iOS导航栏。第一行包含页面操作,第二行包含标题。

但是如果你需要显示搜索的话,那么你就需要第三行了(即使第一行是留白的!)。

使用三行的iOS导航栏。第一行包含页面操作,第二行包含标题,第三行是搜索。

现在上面的截图仅显示了预滚动的样式。当用户开始滚动屏幕的时候,iOS会发生一些有趣的行为。

iPhone导航栏滚动行为。在没有滚动的情况下,标题左对齐,34pt,粗体,显示在第二行;导航栏与页面的其余部分无缝衔接。在滚动的情况下,标题居中对齐,17pt,常规粗细,在第一行显示;导航栏通过背景颜色和下边框线和页面区分开。

如果始终需要看到搜索栏,则在滚动应用程序屏幕时,搜索栏只会从第三行向上移动到第二行。

如果搜索栏不太重要,它将会完全消失,仅在屏幕位于页面顶部时可见。

当iOS导航栏在屏幕滚动的同时消失时,又将会在屏幕滚动回到顶部时重新出现。

请注意,状态之间的过渡是完全流畅的动画,这是iOS样式的一个小而有特色的细节。

2.3 标签栏(选项卡栏) Tab Bar

在iOS应用里,主要位置在应用的底部,显示为选项卡(标签)。

iPhone标签栏设计

让我们先关注一些样式方面的要点:

  • 所选图标使用应用程序主题的填充颜色
  • 标签使用10-11pt大小的SF字体(中文对应的字体为PingFang)文本
  • 背景可能会略微半透明,并具有背景模糊的“磨砂玻璃”效果,类似于导航栏部分

以及有关标签栏及其按钮行为的一些注意事项:

  • 不同的选项卡会记住它们的屏幕状态。如果你从一个标签切换到另一个标签,然后再切换回第一个标签,那么屏幕位置将是你离开该标签时的地方,而不是该标签的起始屏幕。
  • 如果点击活动标签,你将返回该标签的起始屏幕
  • 标签栏始终在应用程序中可见,但以下情况除外:当显示键盘时当模式对话框打开时(在执行关键任务期间,用户应专注于手头的任务而不是导航以及应用程序的其他部分)

iPhone带有“更多 more”的标签栏设计

标签栏总共应该有2-5个标签。如果你需要显示超过5个标签,则第五个图标应该使用“更多 more”来获取功能,在点击时会在准选择器屏幕上显示其他选项。

2.4 Home指示器 Home Indicator

iPhone X 及其以后发布的所有iPhone都有一个位于屏幕底部无处不在的细的圆形条形符号:Home指示器

iPhone浅色模式下的Home指示器

Home指示器在所有浅色模式下都是黑色的,但是也可以在深色模式下变为白色。

iPhone深色模式下的Home指示器

通过将其向上拖动一些,你可以在应用程序和主屏幕之间进行切换:

  • 向上短拖动:应用程序切换屏幕
  • 向上长拖动:回到主屏幕

通常,Home指示器除了所占空间高度为34pt,没有其他任何可显示的的固定元素。

iPhone带键盘设计的Home指示器

但是滚动列表可以在Home指示器下方显示,甚至可以通过点击来选择Home指示器下方的项目。Home指示器仅在向上滑动时做出响应。

​iPhone的Home指示器下方点击按钮交互效果

3. 导航

3.1 主要位置

应用程序主区域的导航可以参看前述「2.2 导航栏 Nav Bar」

3.2 返回

在iOS中,你可以根据上下文不同以4种方式执行返回操作。

返回导航的方式 上下文内容
点击屏幕左上角的返回操作 出现返回操作的任何屏幕
从屏幕左边缘向右轻扫 出现返回操作的任何屏幕
点击屏幕顶部的取消完成动作 模式窗口视图(参看「3.4 模式窗口表单 Modal Sheets」)
向下滑动 模式窗口视图(参看「3.4 模式窗口表单 Modal Sheets」)或全屏视图(例如照片和其他媒体)

前两种方式通常适用于同一屏幕。

navigating back in an iOS app 在大多数屏幕上,你可以通过(1)左上角的动作链接或(2)从屏幕左边缘向右轻扫执行返回操作。

3.3 搜索

在「电话 Phone」应用中可以从3个主要切入点进行搜索:

  1. 导航栏上的搜索栏
  2. 导航栏上的搜索图标
  3. 标签栏上的搜索图标

如果搜索非常重要,那么可以在导航栏上以全屏幕宽度显示搜索栏。但默认情况下它也可以是隐藏的,并且需要向上滚动才能显示在顶部。搜索也可以使用图标以不太明显的方式显示在导航栏的第一行页面动作中,甚至还可以放在屏幕底部的标签栏里面。

但是,无论搜索切入点的位置在哪里,搜索的体验基本都是相同的:

iOS应用中搜索的用户体验模式。从上至下依次为:在搜索框中显示输入提示符;搜索栏右侧显示取消按钮;分段按钮过滤器;在搜索结果显示之前可以选择性地列出近期搜索、常用搜索或搜索预测;轻敲搜索栏后屏幕底部会显示键盘。

3.4 模式窗口表单 Modal Sheets

有些任务涉及一个屏幕或一系列线性屏幕,你希望用户在不完全离开其所处上下文的情况下完成一些屏幕操作。

现在,我们在iOS 13中拥有一个完美的UI元素:模式窗口表单。

模式窗口表单是一个普通的页面,它(a)从底部向上滑动出现,几乎覆盖了前一页的全部内容,但(b)在背景中使前一页可见。

iOS模式窗口表单动画

模式窗口可以通过以下方式关闭:

  • 按下顶部类似关闭 close的动作按钮(上图是右上角的「取消 Cancel」)
  • 向下滑动模式卡片本身

4. UI元素和控件

4.1 列表 (Table Views)

请记住:“90%的移动设计是列表设计”。如果你想熟练掌握iPhone应用程序设计,请了解Apple如何看待其列表(亦即他们所说的“Table Views”)。

任何时候你在iPhone上做列表设计的时候,都需要问自己以下三个问题:

  1. 我要显示什么文字?
  2. 我还想要一个图标/图像吗?
  3. 单元格右半部分会出现什么?

让我们依次介绍这些内容。

你要在每个列表项上显示什么文本?你可以选择:

  1. 仅显示主要文本(17pt普通字体)
  2. 主要文本(17pt普通字体)以及辅助文本(15pt普通字体)
  3. 自定义布局:例如主要文本(17pt普通字体),辅助文本(15pt细体字)以及第三级别文字(15pt细体字)

iOS列表设计类型

对于左侧文本来说,你可以选择性的显示图标或者图像。

iOS列表中的图像或图标

最后,列表项的右侧有几个选项供选择:

  • 向右的人字形图标。几乎是默认设置,这使用户知道他们将被导航到另一个屏幕
  • 文字和向右的人字形图标。这意味着用户可以被导航到另一个屏幕以对此处显示的值进行选择
  • 复选框。允许用户在列表中的某一组选项之间进行选择(注意:此处多项选择)
  • 切换按钮。允许用户切换列表项在打开或关闭时引用的属性。
  • 文字按钮。使用系统颜色链接到其他页面或流程。使用红色文本表示“破坏性操作”,即将其关闭、删除或移除等。

iOS列表用户界面右侧附件的选项

以上是一些最常用的列表使用方式的概述。对于此处未涉及的列表,你可以查看更多的iOS范例。 有关更多信息,请查看输入控件(参见「4.3 输入控件」)。

4.2 按钮

通常,我们认为按钮是带有居中文本的彩色矩形。但是,如果你来自网页设计领域,你可能会惊讶地发现iOS上的许多按钮仅仅是(a)图标或(b)彩色文本,以及在(a)导航栏中(屏幕顶部)或(b)操作栏(屏幕底部)。

导航栏和操作栏上的iOS按钮

但是,iOS也具有页面上的按钮。

页面卡片、图标和文本上的iOS按钮

由于页面范围的操作显示在固定菜单上,即导航栏(参看「2.2 导航栏」)或操作栏上,许多页面上的按钮仅应用于页面的特定部分,也因此将其显示在卡片上。

4.3 输入控件 Input Controls

关于iOS应用如何执行输入控件的一件显而易见的事情是它们几乎都具有列表项样式

4.3.1 文本框

文本输入看起来像一个列表项,并带有在输入时会消失的提示。

iOS文本输入控件

4.3.2 切换开关

切换开关出现在列表项内,标签位于左侧,二进制选择开关位于右侧。

iOS切换开关控件。切换到“开启 ON”上的时候,背景通常使用绿色。切换到“关闭 OFF”的时候,背景通常使用灰色。

4.3.3 日期和/或时间选择器

起初看起来像一个列表项目,左侧带有标签,而值位于右侧。但是一旦你点击了列表项目,它会扩展为特殊的Spinner控件。

iOS日期选择器控件

你可以通过修改该控件来选择(a)仅一个时间,(b)仅一个日期,(c)一个时间和一个日期,或(d)一些其他自定义值。话虽如此,不建议使用它作为下拉列表的通用替换。相反,在移动设备上,你通常会希望使用“选择器屏幕”模式。

4.3.4 选择器屏幕 Picker screens

如果你曾经想过使用下拉列表,你也许应该在iPhone应用程序上使用选择器屏幕模式。有这样的想法是基于你具有类似于列表项的内容,但实际上它会导致你被带到选择值对应的另外一个页面。

iOS选择器屏幕控件

因此,使用选择器屏幕控件通常包含以下两点:

(1)带有标签、值和人字形图标的单个列表项会导致(2)页面中的列表具有许多选项,其中一个选项可以被选择,并使用复选标记显示其状态。

一旦做出选择,你可以通过轻扫或按左上角的导航按钮执行返回操作(详见「3.2 返回」) 。

5. 字体排版

iOS具有独特的文本样式范例,下面是一个快速参考:

元素类型 样式
页面标题(未滚动) 34pt bold #000
页面标题(滚动) 17pt medium #030303
段落文本,列表项标题,链接 17pt normal #000
辅助文本 15pt normal #8A8A8E
三级文本,说明文字 13pt normal #8D8D93
按钮,文本输入控件 17pt normal, 不同颜色
操作栏标签 10pt regular #8A8A8E

5.1 标题文本

在iPhone应用程序中,页面标题以两种不同的方式显示。

iOS应用设计的标题文本样式

当屏幕尚未滚动(或已经滚动,然后又滚动回到顶部)时:

  • 大小: 34pt
  • 粗细: 粗体
  • 颜色: #000
  • 深色模式颜色: #FFF
  • 对齐: 左侧

当屏幕已经向下滚动时:

  • 大小: 17pt
  • 粗细: 中等
  • 颜色: #030303
  • 深色模式颜色: #FFF
  • 对齐: 居中

5.2 默认文本

iPhone应用程序上文本的默认样式是:

  • 大小: 17pt
  • 粗细: normal
  • 颜色: #000
  • 深色模式颜色: #FFF

iOS应用设计的默认文本样式

通过对该基本样式进行一些细微调整,你可以获得很多好处。

iOS应用设计的默认文本样式的变体

例如,当普通列表项以默认文本样式编写时,「邮件 Mail」应用以粗体显示电子邮件发件人,因为它有助于发件人的名称从主题行和预览中脱颖而出。

同样,基于文本的链接按钮基本上是默认文本,但颜色不同。

搜索字段提示文本是默认文本,但使用了较浅的灰色。

5.3 辅助文本

iPhone应用程序具有支持所有辅助文本的标准化样式。

  • 大小: 15pt
  • 粗细: normal
  • 颜色: #8A8A8E
  • 深色模式颜色: #8D8D93

iOS应用程序设计的辅助文本样式

5.4 三级文本和说明文字

任何解释性的说明文字(caption)都比辅助文本更小、更轻。

  • 大小: 13pt
  • 粗细: normal
  • 颜色: #6D6D72
  • 深色模式颜色: #8D8D93

iOS应用设计的三级文本样式

5.5 最小文本大小

对于任何设计系统,只要定义了最小尺寸就可以为你省去很多麻烦。对于iPhone应用,操作栏标签的最小尺寸为10pt:

  • 大小: 10pt
  • 粗细: normal
  • 颜色: #999 (未选择的状态)
  • 深色模式颜色: #757575 (未选择的状态)

iOS应用程序设计的最小文本样式

6. App图标

如果你设计一个应用图标,使其尺寸可以适应所有可能的iPhone和iPad的位置上,则最终需要创建同一图标的十几种变体

如果你使用Sketch,则可以使用其模板「文件 File > 从模版创建 New from Template > iOS App 图标」来完成此操作。

但是,你可能宁愿覆盖更常见(或更新)设备上的常见尺寸,并进行调用。毕竟,这个@3x规格的全部意义难道不就是为了避免单个像素太小看不清吗?

以下是 Erik 的 80/20 iPhone应用程序图标设计方法:

  1. 创建一个60x60px的正方形图标(并验证它是否被Apple的超椭圆形状遮盖好)
  2. 将其拉伸到@2x(120x120px),然后根据需要将其调整到像素完美
  3. 将其拉伸到@3x(180x180px),然后根据需要将其调整到像素完美
  4. 将其拉伸到1024x1024px
  5. 将所有4种尺寸导出为PNG。完成!

6.1 iOS 超椭圆(即方圆形)图标形状

即使你应该始终将图标导出为正方形,Apple也会使用一种称为超椭圆(Superellipse)的形状来切掉拐角。

Apple超椭圆与圆角矩形图标设计对比

超椭圆(或方圆形)看起来很像普通的圆角矩形。实际上,这种区别基本上是肉眼看不到的。 Apple这样处理的理由是(a)将超椭圆从笔直部分过渡到弯曲部分,从而使整个形状更加有机,并且(b)与Apple硬件设备的各个拐角更加吻合。

这仅在图标具有边框时才有意义,在这种情况下,边框形状应由超椭圆而不是圆角矩形确定。以下是在 Sketch 和 Figma 中创建超椭圆/圆角矩形的方法:

如何在Sketch中创建Apple图标的超椭圆/圆角矩形

  1. 使用「Insert」菜单或快捷键「r」创建一个正方形
  2. 将拐角半径更改为一个大小乘以0.222的长度
  3. 将「Radius (Round Corners)」更改为「Radius (Smooth Corners)」

如何在Figma中创建Apple图标的超椭圆/圆角矩形

  1. 使用「Rectangle」菜单项或快捷方式「r」创建一个正方形
  2. 将拐角半径更改为一个大小乘以0.222的长度
  3. 打开「Independent Corners」菜单(位于拐角半径设置的右侧)
  4. 打开「Corner Smoothing」菜单(“…”图标)并将其设置为“iOS”指示器,位置处于60%

7. 其他iOS约定

如果你正在设计iPhone应用程序,则可能还需要了解其他几件事:

7.1 点击目标大小

用户能够轻按的所有内容,包括每个按钮、每个滑块、每个输入控件,大小至少应为44x44pt

唯一可以打破此规则的例外是文本链接。在段落文本中,每行文本都可能比44pt短很多。这意味着(a)你的链接的点击目标小于44pt,并且(b)如果连续两行文本中的相同位置有链接,用户很难准确地点击它们。虽然这些情况是不可避免的,但至少可以将其最小化。

iOS应用设计的点击目标尺寸

即使苹果公司也没有严格遵守其点击目标准则,但还是建议你能这样做。

7.2 深色模式

从iOS 13开始,iOS具有OS级别的深色模式设置,参与其中的应用程序通常都具有深色背景和浅色文本,而不是浅色背景和深色文本。

iPhone应用程序深色模式和浅色模式对比

如果你使用的是原生的控件和颜色,iOS会自动将其转换为深色版本,但你应该了解自己使用的任何自定义UI的深色模式的通用原理。以下是一些简单的准则:

  • 文本颜色反转。也许这有点过于简单化了,黑色文本变成白色,深灰色文本变成浅灰色,而中间灰色文本基本保持不变。但是如果你看一下上面的排版样式(详见「5.字体排版」),你会发现iOS实际上会添加一些额外的阴影并简化其深色主题的文本颜色。如果你不确定是否应该将中间亮度的灰色调得更深还是更浅,请使用与其背景具有较高对比度的文本对比度。
  • 背景颜色已切换。与较暗的颜色变得更浅的文本不同,背景颜色只是变暗了。如果背景颜色在浅色模式下较浅,则在深色模式下仍较浅。为什么?因为光来自天空。如果你能理解这一点,就会了解我们依靠背景颜色获得深度提示(与文本不同)。因此,它以完全不同的方式工作。
  • 主题颜色被转换为凸显的深色。以前在任何浅色背景上使用的强调色现在都需要在深色背景下以类似方式凸显。由于白色的亮度为100%,黑色的亮度为0%,所以这通常意味着你会降低明亮颜色的亮度。

iOS浅色模式和深色模式下的颜色对比。

颜色来源于iOS系统颜色

进阶阅读