腾讯力作！IOS 9人机界面指南（4）：UI元素

编者按： 苹果 官方人机指南技术章下篇来咯！仅仅会画图标的美工不能叫UI设计师，想尽快达到合格线，熟读 苹果 官方的人机界面指南是最方便科学的方法之一。感谢腾讯ISUX团队的辛苦付出，收下这本教科书级别的设计读物！

腾讯力作系列：

1. 《腾讯力作！超实用的IOS 9人机界面指南（1）：UI设计基础》
2. 《腾讯力作！超实用的IOS 9人机界面指南（2）：设计策略》
3. 《腾讯力作！IOS 9人机界面指南（3）：IOS 技术 （上）》
4. 《腾讯力作！IOS 9人机界面指南（3）：IOS 技术 （下）》

文章索引

• 4.1.1 状态栏
• 4.1.2 导航栏
• 4.1.3 工具栏
• 4.1.4 工具栏与导航标准按钮
• 4.1.5 标签栏
• 4.1.6 标签栏标准图标
• 4.1.7 搜索栏
• 4.1.8 范围栏
• 4.2.1 活动
• 4.2.2 活动视图控制器
• 4.2.3 集合视图
• 4.2.4 容器视图控制器
• 4.2.5 图片视图
• 4.2.6 地图视图
• 4.2.7 页面视图控制器
• 4.2.8 浮出层
• 4.2.9 滚动视图（Scroll View）
• 4.2.10 分栏视图控制器
• 4.2.11 表格视图
• 4.2.12 文本视图
• 4.2.13 网络视图
• 4.3.1 活动指示器
• 4.3.2 添加联系人按钮
• 4.3.3 日期时间选择器
• 4.3.4 详情展开按钮
• 4.3.5 信息按钮
• 4.3.6 标签
• 4.3.7 网络活动指示器
• 4.3.8 页面控件
• 4.3.9 选择器
• 4.3.10 进度视图
• 4.3.11 刷新控件
• 4.3.12圆角矩形按钮
• 4.3.13 分段控件
• 4.3.14 滑块
• 4.3.15 步进器
• 4.3.16 开关按钮
• 4.3.17 系统按钮
• 4.3.18文本框
• 4.4.1 警告框
• 4.4.2 操作列表
• 4.4.3模态视图

4.1 栏

4.1.1 状态栏

状态栏展示了关于设备及其周围环境的重要信息。

默认（深色）内容

浅色

状态栏：

• 是透明的
• 始终固定在整个屏幕的上边缘

API注释

你可以将全应用的状态栏风格设计成统一的，或者给不同的视图控制器定义不同的状态栏风格。想要了解更多内容，你可以通过 UIApplication Class Reference 来了解 UIStatusBarStyle 常数，以及通过 UIViewController Class Reference 来了解更多关于 preferredStatusBarStyle 属性的内容。

不要创建自定义状态栏。

用户依赖系统默认状态栏的一致性。就算你可能会在应用中隐藏它，也不宜定制一个新的UI来代替原有系统状态栏。

避免滚动内容直接透过状态栏显示。

你不会希望用户在滚动的时候看到五花八门的内容和状态栏自身的元素混合在一起。想要让用户感受到内容区域够大的同时，最大限度地保证可读性，请保证在状态栏后面添加一块背景，用以模糊出现在状态栏后的内容。以下有一些方法可以让滚动的内容能正常显示在状态栏后面：

• 使用导航控制器（navigation controller）来展示内容。导航控制器自动展示状态栏背景，同时能确保内容视图不会出现在状态栏后面。（了解更多请参考 Navigation Controllers ）。

• 在状态栏后面放一个低调的、不会抢走用户注意力的自定义图形——比如一道渐变。想要保证这样的图形始终固定在状态栏后面，你可以用视图控制器（view controller）来让它固定在滚动内容上一层，又或者可以用滚动视图（scrolling view）来保证图形固定在屏幕的顶部。
• 让内容固定在导航栏区域外显示（这个区域由应用的 statusBarFrame 属性来定义）。如果你确定要这样做的话，请给导航栏区域添加固定的、与屏幕背景色相同的背景色。

千万千万，避免在状态栏后面叠加会分散注意力的内容。

尤其是，你不能让用户觉得轻击状态栏之后可以获取内容或激活你的应用中的控件。

隐藏状态栏时请慎重。

由于状态栏是透明的，通常情况下不需要隐藏它。始终隐藏状态栏意味着用户必须退出你的应用才能知道现在的时间，或者了解当前环境下是否有Wi-Fi连接。

在用户全屏观看媒体时，考虑隐藏状态栏以及所有页面UI。

当你这么做的时候，请确保用户在轻击屏幕时即可重新唤起状态栏以及相关的UI。而除非你有充分的理由，否则最好不要重新定义一个手势来让用户唤起状态栏，因为用户不会发现，就算发现了也难以记住。

为你的应用选择配色协调的状态栏颜色。

默认的状态栏内容是黑色的，在浅色应用中效果出色，而相应的浅色状态栏则更适用于颜色较深的应用。

在适当的时候展示网络活动指示器（network activity indicator）。

这可以提醒用户显示长时间的网络接入状态。更多详情请参考本章第三节控件部分的网络活动指示器部分（ Network Activity Indicator ）。

4.1.2 导航栏

导航栏能够实现在应用不同信息层级结构间的导航，有时候也可用于管理当前屏幕内容。

导航栏：

• 是半透明的

• 通常位于屏幕的上方，状态栏正下方。在横屏视图中，导航栏也可以包含在某一视图中，不需要与整个屏幕等宽，比如说它可以出现在对分视图控制器（split view controller）的其中一侧。

• 当键盘被唤起、用户使用了手势、或者当前视图变为竖屏的情况下，导航栏可以隐藏。
• 可以填充颜色（使用 tintColor 来定义导航栏中的图标与文字颜色；使用 barTintColor 来填充导航栏背景色）

API注释

导航栏包含于导航控制器（一个管理显示自定义视图层级结构的程序对象）中。想要了解更多关于如何在代码中定义一个导航栏的信息，请参阅 Navigation Controllers , UINavigationController Class Reference 和 UINavigationBar Class Reference .

你可以用导航栏在不同视图间提供导航，或在上面放置管理当前视图内容的相关控件。如果你需要提供导航栏难以承载的大量控件同时又不是非要提供导航不可，你可以考虑使用工具栏（Toolbar）。

当用户到达一个新的层级，导航栏需要做出这样的改变：

• 导航栏标题应该变成当前层级的标题。
• 当前标题左侧放置应有返回按钮，需要的话，返回按钮可以以前一层级的标题命名。

使用当前视图的标题作为导航栏标题。

若觉得标题冗余，你也可以将标题留空。举个例子，备忘录的导航栏中就没有当前备忘录的标题，因为备忘录的第一行就已经提供了所有用户需要的内容。

考虑在应用最高层级的导航栏中放置一个分段控件。

它能够帮助你更好地扁平信息层级，也会让用户更容易找到所需内容。如果在导航栏中使用了分段控件，请确保返回按钮标题命名的准确。（更多使用指引请参阅本章第三节中的分段控件。）

如果需要的话，可以考虑在导航栏位置使用提示语（prompt）来告诉用户在当前屏幕中他们可以做什么。提示语是一句出现在导航栏顶部的短句。举个例子，股票应用（Storcks）中就给用户提供了这么一句提示，来确保用户知道怎么去搜索自己想要的信息。

如果你需要用到提示语，请设计一句简明扼要的单句，并在句末配以适当的标点符号。

即使空间充足，也应当避免让过多的控件填满你的导航栏。

一般来说，导航栏上应该不多于以下三个元素：当前视图的标题、返回按钮和一个针对当前的操作控件。而当你在导航栏中使用了分段控件，就不要再放标题以及其它多余控件了。

确保文字按钮之间拥有足够的空间。

如果导航栏左边或右边的文字按钮之间的间距太小，那些文字看起来会像挤在一起一样，让用户难以区分。如果按钮在导航栏中显得太过拥挤，你可以使用UIBarButtonSystemItemFixedSpace常数来给他们增加适当的间距。（想要了解更多关于这个常数的内容，请参考 UIBarButtonItem Class Reference .）

确保你自定义的导航栏在你的应用的每个视图中都拥有一致的外观与体验。

举个例子，不要在同一个应用中使用不透明导航栏和半透明工具栏。在屏幕处于同一方向时，最好不要改变不同屏上导航栏的背景图片、颜色和透明度。

确保你自定义的返回按钮的外观与操作仍然像一个返回按钮。

用户知道系统默认的返回按钮能帮助他们在信息层级中追踪自己的路径，如果你想重新设计它，请确保使用一个自定义的蒙版图层 （custom mask image），它可以在iOS中让这些按钮标题在系统各转场中出现或者消失。

重要

不要创建多段式（multisegment）返回按钮。返回按钮通常是用来帮助用户回到当前层级的父层级中去的。如果你担心用户在没有了这种多节式的、如同面包屑一般的返回按钮后会迷路，那么你也许该好好考虑如何扁平你的信息层级了。

在用户需要专注于内容的时候，可以考虑隐藏导航栏。

当你这么做的时候，请确保用户通过一个简单的手势（比如一下轻击）即可重新唤起导航栏。

4.1.3 工具栏

工具栏上放置着用于操作当前屏幕中各对象的控件。

工具栏：

• 是半透明的
• 在iPhone上，工具栏始终位于屏幕底部，而在iPad上则有可能出现在顶部
• 当键盘被唤起、用户使用了手势、或者当前视图变为竖屏的情况下，工具栏可以隐藏。

API注释

工具栏包含在导航控制器（navigation controller）中，该控制器用于管理定制视图中信息层级的展示形式。 想要了解如何在代码中定义工具栏，请参考 Displaying a Navigation Toolbar 以及 UIToolbar Class Reference .

你可以在工具栏里提供一系列让用户对当前视图内容进行操作的工具。

在工具栏里放置用户在当前情景下最常用的指令。

尽量避免在工具栏里提供一些仅会偶尔用到的指令。

可以在工具栏里放置分段控件以方便用户快速切换当前内容的不同视图或模式。

在工具栏中提供应用全局的任务或者模式分段控件是不恰当的，因为工具栏中的所有操作都应当是针对当前屏幕和视图的。如果你需要让用户可以快速唤起应用全局的任务、或改变全局视图和模式，可以使用标签栏（Tab Bar）。想要了解更多分段控件的内容，请参考下文的分段控件（Segmented Control）部分；想要了解更多标签栏的内容，请参考下文中的标签栏（Tab Bar）部分。

如果需要在工具栏上展示3个以上的项目，可以使用图标。

由于文本按钮通常会比图标更占空间，所以用图标可以避免文字标题们挤在一起。

保证工具栏文字按钮之间有足够的间距。

如果按钮之间间距过小，会让蚊子看起来挤在一起，让用户觉得它们难以区分。如果按钮在导航栏中显得太过拥挤，可以用UIBarButtonSystemItemFixedSpace常数来增加他们之间的间距。（想要了解更多关于这个常数的内容，请参考 UIBarButtonItem Class Reference .）

4.1.4 工具栏与导航标准按钮

iOS提供了一系列工具栏与导航栏上的内置标准按钮。想要了解如何设计自定义图标，请参考本文第五章栏按钮图标（Bar Button Icons）部分。工具栏和导航栏图标的颜色可以通过tintColor属性来设定。

想要了解每一个按钮所对应的标志名称及其含义，请参阅 UIBarButtonItem Class Reference 中的 UIBarButtonSystemItem 部分。

重要

跟所有标准按钮和图标相同，应当根据文档中说明的图标含义，而不是只凭图标外观来使用这些工具栏图标和导航栏图标。这样能够保证在关联特定意义的按钮改变了外观的情况下，你的应用中的UI仍然是可用而有意义的。

表格 41-1 工具栏与导航栏标准按钮 （Standard buttons available for toolbars and navigation bars）

除了表格41-1里展示的标准按钮之外，你还可以使用系统提供的编辑、取消、保存、完成、撤销、重做等等按钮来支持编辑或其它操作。这些按钮的标题即是按钮的操作内容。想要了解每一个按钮的名称及其含义，请参阅 UIBarButtonItem Class Reference 中的 UIBarButtonSystemItem .

另外，你还可以在工具栏中放置系统提供的信息按钮（info button）.

4.1.5 标签栏

标签栏让用户在不同的子任务、视图和模式中进行切换。

API注释

标签栏包含在标签栏控制器中，该控制器用于管理自定义视图的展示形式。想要了解如何在代码中定义标签栏，请参考 Tab Bar Controllers 和 UITabBar .

标签栏位于屏幕底部，并应该保证在应用内任何位置都可用。标签栏是半透明的，展示图标和文字内容，每一项均保持等宽。当用户选中某个标签时，该标签呈现适当的高亮状态。

标签栏：

• 是半透明的
• 始终出现在屏幕的底部
• 一个标签栏一次最多可承载5个标签（多于5个标签的时候，可以展示前4个标签和一个“更多”，并将其他的标签以列表形式收纳到“更多”里面）
• 在横屏与竖屏情况下，高度均保持一致
• 你可以在标签上加上红底白字，显示数字或者省略号的小气泡（badge）以展示特定的应用信息

你可以使用标签栏来切换对同一组数据的不同视图模式，或者整体功能下不同的子任务。

一般而言，使用标签栏来组织整个应用层面的信息结构 。

标签栏非常适合用于应用的主界面中，因为它可以很好地扁平信息层级，并且同时提供多个触达同级信息类目与模式的入口。

不要使用标签来让用户执行对于当前应用与屏幕内容的操作。

如果你需要给用户提供操作控件，请使用工具栏。

即使标签当前不可用，也不要把它从标签栏中删除。

让某些标签时而出现时而隐藏，会让用户觉得你的应用UI不稳定而且难以预测。最好的解决方式是确保每个标签都可用，然后给用户解释某个标签的内容不可用的原因。举个例子，当用户没有在设备中保存任何歌曲，在系统音乐应用的歌曲标签页里就可以教育用户如何去下载一首歌。

考虑在tab上加入红色的小气泡（Badge）以低调地传达信息。

你可以通过添加小气泡来告知用户该标签中包含新的内容。

根据控件的标准含义来选择系统提供 的图标。

详情请查看下文中的标签栏标准图标（Tab Bar Icons）。如果想自定义标签栏图标，请参考文档第五章中Bar Buttons Icons里给出的建议。

在横屏视图中，你可能会在对分视图（split view pane）或者浮出层 （popover） 内使用标签栏以切换或筛选视图中的内容。

如果这些标签是用于切换或者过滤当前视图中的内容的话，你可以这么做。然而通常情况下，在对分视图和浮出层底部使用分段控件效果会更好，因为视觉上看起来更为协调。更多详情请参考文档本章第三节中的分段控件。

避免让过多的标签填满你的标签栏。

放置太多标签会让用户难以选中他想要点击的那一个。而同时每添加一个标签，意味着你的应用程序又复杂了一分。

尽可能地在横屏与竖屏情况下都展示相同数量的标签。

在不同的屏幕方向下提供同样的标签可以让用户对应用建立很好的视觉稳定感。在横屏中，你应该将与竖屏时数量相同的标签居中展示。在横屏中，避免使用“更多”标签。如果应用是横屏的，那么把额外的操作都塞到一个“更多”里面是对空间一种糟糕的浪费。

4.1.6 标签栏标准图标

iOS提供了一系列标签栏标准图标，在下面的表格35-2中有详细展示。想要了解如何设计自定义图标，请参考文档第五章栏标准按钮部分。标签栏图标的颜色可以通过 tintColor 属性来设定。

想要了解每一个图标的名称及其含义，请参阅 UIBarItem Class Reference 中的 UITabBarSystemItem 部分。

重要

跟所有的标准按钮与图表相同，根据文档说明的图表含义而不是仅凭图表外观来使用这些图标是很关键的。这样能够保证在关联特定含义的按钮改变了外观的情况下，你的应用中的UI仍然是可用而有意义的。

表格 41-2 标签栏标准按钮 （Standard icons for use in the tabs of a tab bar）

4.1.7 搜索栏

搜索栏获取用户键入的文本，用以作为搜索的关键字（下图中显示的文本为占位符，非用户输入文本）。

API注释

想要了解如何在代码中定义搜索栏，请参考 UISearchBar .想要了解更多如何显示搜索栏，请参考 UISearchDisplayController .

搜索栏可能包含以下这些可选元素：

• 占位符文本（Placeholder text） 。占位符文本通常会写明控件的功能（比如上图里的 “Search”字样），或者提示用户输入的文本将在哪里搜索（如“Google”）。

• 书签按钮（The Bookmarks button） 。书签按钮可以让用户方便地找到他们需要的内容。例如在地图中搜索时，用户可以通过书签按钮快速选中书签地址、最近搜索记录、或通讯录。

书签按钮只有当搜索栏中没有占位符或用户输入内容时才会出现，当搜索栏中已有文本时，书签按钮会被清除按钮（Clear button）所代替。

• 清除按钮（The Clear button）。大多数搜索栏都会提供清除按钮，方便用户一键清空输入内容。

一旦用户在文本框中输入内容，清除按钮就会出现，用户可以用它来一键清空输入内容；而当搜索框中没有任何文本内容时，清空按钮将被隐藏。

• 结果列表图标（The results list icon） 。结果图标说明此次搜索有搜出结果。当用户点击它时会出现用户最近一次搜索的搜索结果。

• 提示（Prompt）。描述性标题，我们称之为提示。描述性标题是一个短而完整的句子，为搜索栏提供介绍或指引应用特定信息。

在你的应用中使用搜索栏让用户进行搜索。不要使用文本框，因为文本框的外观不符合用户对搜索的预期。

在iOS 8以及之后的版本里，你可以通过 UISearchDisplayController 简单快捷地把搜索栏放在导航栏中。请注意，当搜索的视图控制器包含在导航控制器里面的时候——比如在邮件应用（Mail）中那样，当用户激活搜索时，搜索栏会自动上浮，平铺到原来导航栏的位置上。

根据搜索功能在你的应用中的重要程度来选择搜索栏的样式。

如果搜索在你的应用中是最基础的功能，请使用突出样式（the prominent style）；如果搜索不是用户常用的功能，那么可以使用弱化样式（the minimal style）。

4.1.8 范围栏

范围栏只有在与搜索栏一起时才会出现，它让用户可以定义搜索结果的范围。

API注释

想要了解如何在代码中定义搜索栏与范围栏，请参考 UISearchBar .

当搜索栏出现时，范围栏会出现在它的附近。范围栏的外观与你所指定的搜索栏的外观兼容。

当用户想在明确的分类范围内进行搜索时，使用范围栏是非常有用的。然而，更好的选择是优化您的搜索结果，让用户不需要使用范围栏对搜索结果进行筛选，便可以找到他们所需要的内容。

4.2 内容视图

4.2.1 活动

每个活动表示一个系统提供的或自定义的服务——它可以通过访问活动视图控制器（Activity view controller）来作用于某些特定的内容。

API注释

想要了解如何在代码中定义活动，请参考 UI Activity Class Reference .想要了解如何将活动视图控制器整合到你的应用中，请参考 Activity View Controller .

动作与分享扩展程序也可以在活动视图控制器中展示。想要了解更多关于这些扩展程序的内容，请参考 Share and Action Extensions .

活动是：

• 一种可定制对象，代表着某个可以让用户在app中执行操作的服务
• 以图标的形式呈现，外观与栏按钮图标相似

用户通过点击活动的图标来启动某样活动。点击之后该项服务通常会立刻执行，当这项服务过于复杂时，系统将会进一步索取更多的信息之后才会为用户执行该服务。

使用活动来让用户执行你的应用所提供的服务。请注意，iOS本身提供了若干内置的服务，如打印，转发到Twitter，发送信息和Airplay等等，你不需要再额外为这些内置任务创建活动。

为你应用的各种服务设计一套精简的线性模板图标（Template image）。后台会将会把这种模板图标作为剪影遮罩，组合成用户最终看到的图标效果。想设计出好看的模版图标，可以遵循以下原则：

• 使用透明度适当的黑色或白色
• 不要使用阴影
• 进行抗锯齿处理

一个活动模版图大小应该保持在70×70像素左右（高分辨率下），在区域里居中显示。

为每一个活动设计清晰简练的文字标题。

标题将会出现在活动菜单图标的下方。一般来说短标题效果最好，因为它在屏幕上的显示效果更好并且更容易本地化。如果你的标题文字过长，iOS会将缩小文本，仍然过长的话则会被截断。一般而言，最好能避免在活动标题中提及你的公司或产品名称。

4.2.2 活动视图控制器

活动视图控制器是一个临时视图，当中罗列了一系列可以针对页面特定内容的系统服务和定制服务。

API注释

想要了解如何在代码中定义活动视图控制器，请参考 UIActivityView Class Reference .想要了解如何设计一个提供自定义服务的活动菜单，请参阅上文中关于活动彩蛋的内容。

活动视图控制器：

• 显示了让用户可以针对当前内容执行操作的一系列的可配置服务
• 根据所处的场景不同，可能出现在操作列表或浮出层中

使用活动视图控制器来为用户提供一系列针对当前内容的服务。这些服务可以是系统自带的，比如复制，分享到twitter，打印等等，也可以是自定义的。活动视图控制器通常用作让用户把他们选中的内容复制到他们的社交媒体账户上。

不要创建一个自定义按钮来触发活动视图控制器。

用户更习惯点击动作按钮后使用系统提供的服务。你应该学会如何更好地利用用户这一既定习惯，而不是强迫他们以一种全新的方式来完成同样的事情。

确保控制器中的操作适用于当前场景。

你可以适当地在活动视图控制器中增减系统操作，或增加自定义操作。例如，如果你不希望用户打印某张图片，你可以把打印功能从控制器中删除。

注意

你不能改变系统默认服务在控制器中的顺序。同时，所有系统服务都应该出现在自定义服务之前。

4.2.3 集合视图

集合视图用于管理一系列有序的项，并以一种自定义的布局来呈现它们。

API注释

想要了解如何在代码中定义集合视图，请参考 Collection View Programming Guide for iOS .

集合视图：

• 可包含装饰视图，以从视觉上区分项的子集或者提供装饰性项目，例如自定义背景。
• 布局切换时支持自定义转场动画。（默认情况下，当用户导入、移动或者删除项的时候，会出现系统默认的动画效果。）
• 支持开发者额外定义手势识别来执行自定义操作。默认情况下，集合视图可以识别轻击（tap）某项以选中，和长按（touch-and-hold）某项进行编辑。

使用集合视图来让用户查看和操作一系列不适合以列表形式呈现的项。由于集合视图的布局不是一个严格的线性布局，因此尤其适合用来展示一些尺寸不一致的项。

集合视图支持广泛的自定义，因此我们要尽量避免把心思都放在进行全新的设计上。集合视图是用来帮助用户更好地完成任务的，视图本身并不是用户体验的焦点所在。以下指南可以帮助你设计出用户体验更好的集合视图：

表格视图（table view）更适用的时候，不要使用集合视图。

有时候用户会觉得以列表呈现的信息更容易阅读和理解，例如将文本信息放在滚动列表中的时候，用户阅读和处理起来会更为简单和高效。

让视图中的项更容易选中。

如果用户很难点中集合视图中的项，他们是不会愿意用你的应用的。跟所有用户可以点击的UI对象一样，请确保你的集合视图中每一个项的最小点击区域有44×44pt，尤其是在iPhone上。

当你要让整个布局进行动态变化时，请务必谨慎。

集合视图允许你在用户浏览和操作项的时候调整视图的布局。但当你决定调整它的时候，请确保这个动态变化是有意义且容易跟踪的。没有明确目的而贸然改变集合视图的布局会让用户对应用留下难用、不符合预期等负面的印象。更有甚者，如果用户此时关注的项在变化中消失了，用户会觉得这个应用超出了他们的控制能力。

4.2.4 容器视图控制器

容器视图控制器采用自定义的方式来管理和呈现它的视图控制器或一系列子视图。系统定义的容器视图控制器典型例子包括标签栏视图控制器（Tab bar view controller）、导航视图控制器（navigation view controller）和对分视图控制器（split view controller）。

API注释

想要了解如何在代码中定义容器视图控制器，请参考 UIViewController Class Reference .

容器视图控制器不存在任何预先定义好的外观或者行为。

用容器视图控制器来呈现内容，使用户可以通过控制器来以自定义的方式进行导航。

先问问你自己是不是必须用到容器视图控制器。

用户会更习惯诸如对分视图、或者是标签栏视图这类他们所熟知的东西。你必须确保你设计的控制器的优点不会由于用户不熟悉、不认识、不会用而白费功夫。

确保你的容器内容控制器在横屏与竖屏模式都可用。

很重要的一点是，你的容器视图控制器无论在横屏还是竖屏中，体验都应该是一致的。

一般来说，避免太过花哨的转场动画。

如果你采用了故事板（storyboard）的设计方法来设计你的视图控制器，你往往自然而然地会为它自定义一些动画。但绝大多数情况下，这些花哨的转场动画会让用户分心，让他们忘记了当前要做的事，还可能降低你的应用整体的美感。

4.2.5 图片视图

图片视图用以展示一张单独的图片，或者一系列动态图片。

API注释

想要了解如何在代码中定义图片视图，请参考 UIImageView .

图片视图：

• 不存在任何预先定义好的外观，同时在默认状态下它不支持用户的交互行为。
• 可以检测图片本身及其父视图（parent view）的属性，并决定这个图片是否应该被拉伸、缩放、调整到适合屏幕的大小，或者固定在一个特定的位置。

在iOS 7及以上版本里，包含了模版图片（template image）的图片视图会把当前的色调（tint color）应用到图片上。

请务必确保图片视图中的每一张图片都保持相同的尺寸和比例。如果你的图片尺寸各不相同，图片视图将会逐一对它们进行调整；而当你的图片比例不一，渲染的时候很可能会出错。

4.2.6 地图视图

地图视图呈现地理数据，同时支持系统内置地图应用的大部分功能（如下图所示）。

API注释

想要了解如何在代码中定义图片视图，请参考 MapKit Framework Reference .

地图视图：

• 通常以标准地图、卫星图像、或两者结合的形式来展示地理区域
• 可以展示以单点标注的备注，以及叠加图层（绘制路径或二维区域绘制轮廓的）
• 支持编程时定义的，或用户所控制的缩放和移动

利用地图视图可以给用户提供一个可交互的地理区域视图。如果你在开发一个导航类应用（routing app），可以使用地图视图来展示你给用户的路径。

一般来说，允许用户在视图中进行交互行为。

用户习惯了在系统内置地图中进行交互，因此他们会有预期，能在你所提供的地图中进行类似的行为。

使用标准的地图标注颜色。

地图上标注了一系列地点。因为用户习惯了内置地图的各个标注的颜色，所以最好避免在你的应用中重新定义这些颜色的含义。定义颜色时，请遵循以下这些标准：

• 红色表示目的地
• 绿色表示起点
• 紫色表示用户指定的地点（User-Specified Point）

4.2.7 页面视图控制器

页面视图控制器通过滚动（Scrolling）或翻页 （Page-curl transition style）两种方式来处理长度超过一页的内容。下图是iOS模拟器中的翻页样式：

API注释

想要了解如何在代码中定义图片视图，请参考 Page View Controllers .

页面视图控制器：

• 带滚动条的页面视图控制器没有默认的外观。

带翻页效果的控制器可以在两页中间增加书脊（book spine）的效果

• 可以根据指定的转场来模拟出页面切换时的动画。

使用滚动条效果的时候，当前页面将滚动到下一页；而使用翻页效果时，页面上会出现一个模拟实体书或笔记本翻页效果的翻页动画

使用页面视图控制器来展示那些线性的内容（比如一个故事的文本），或者是一些可以被自然地拆分成块的内容（比如日历）。

如果需要的话，设计一种自定义的方式让用户可以以非线性的方式来获取内容。

页面视图控制器让用户从一页移动到前一页或者后一页，而并不支持用户在并不相邻的页面间快速切换。如果你希望在页面视图控制器中展示一些非线性的内容——比如说字典，或者书籍的目录——那么你就需要自定义一种方式，让用户可以随意地到达不同的内容区块。

4.2.8 浮出层

浮出层是当用户轻点某个控件或页面中的某一区域时浮出的，半透明的临时视图。

API注释

在iOS 8以及以上版本里，你可以使用 UIPopoverPresentationController 来展示一个浮出层。UIPopoverPresentationController定义了一种委托，让你可以调整浮出层的内容样式，让它能够更好地适应当前的屏幕内容。举个例子，在横屏视图中，你的内容可能会全部承载在浮出层内部；而在竖屏的情况下，浮出层可以以一种全屏模态视图的样式出现。

浮出层：

• 是一个自包含的模态视图
• 在横屏环境中，浮出层会包含一个箭头，指向其出处
• 背景是半透明的，并且会模糊其背后的内容（毛玻璃效果）
• 可以包含多种对象和视图，比如：
• 表格，图片，地图，文本，网页或者自定义视图
• 导航栏，工具栏，和标签栏
• 可以操作当前app视图中的对象的各种控件或对象

（默认情况下， 浮出层中的表格视图，导航栏和工具栏的背景都是透明的，这样会让浮出层的毛玻璃效果展示出来）

在横屏的情况下，动作列表总是出现在浮出层里。

使用浮出层来展示与当前焦点或被选中对象相关的额外信息，或者相关的一系列项。

重要

这一个部分的指引仅适用于在横屏情况下的UI与用户体验。如果你想在竖屏环境中展示全屏的浮出层，请参阅下文中的模态视图相关内容。

避免提供“取消浮出层”按钮。浮出层应当在它不需要的时候自动关闭。如果要决定什么时候不再需要浮出层，请考虑如下场景：

一般来说，在用户点击浮出层以外的区域的时候，保存用户输入的内容。

不是每一个浮出层都会让用户明确地确认取消操作，因此用户可能会误操作。只有当用户点击“取消”按钮时，才清空他们在浮出层中输入的内容。

让浮出层中的箭头尽可能直接地指向其出处。

这样有助于用户这个浮出层是从哪里来的，以及他们与哪些任务和对象相关。

确保用户在看不到浮出层背后的内容的时候仍然能顺利使用浮出层。

浮出层会模糊背后的内容而且用户不能把它拖拽到其它位置。

确保同一时间内屏幕上只有一个浮出层。你不应该同时展示超过一个浮出层（或者外观和行为跟浮出层很相似的模态视图）。尤其应当避免同时展示一连串或者一系列浮出层，从一个浮出层中弹出另一个浮出层。

不要在浮出层上面再展示一个模态视图。

除了告警框（alert）外，浮出层中不应当有任何模态视图。

可能的话，让用户可以仅点击一下就关闭当前浮出层并开启一个新的浮出层。

这在若干栏按钮每个都会唤起一个浮出层的时候尤其好用，因为它减少了用户的额外点击。

不要把浮出层设计得太大。浮出层不应当占据整个屏幕。相反，它的大小应当恰好能承载当中的内容，又能清楚地指向浮出层的唤起出处。浮出层的高度是不固定的，因此你可以用它来承载一个很长的项目列表。但一般来说，还是应当避免需要滚动浮出层才能开启一个任务。请注意，系统可能会调整浮出层的宽高，以让它能够更好地适应屏幕的尺寸。

在浮出层中使用标准的UI控件和视图。

一般来说，包含标准控件和视图的浮出层看上去最理想，而且更容易让用户理解。

确保自定义浮出层仍然长得像一个浮出层。

尽管使用 UIPopoverBackgroundView API能够很容易自定义浮出层的多种外观属性，还是应当避免设计出一个用户可能无法辨识的浮出层外观。如果你对浮出层的改动过大，用户就不能凭借之前的经验来理解如何用你的app里的浮出层了。

当浮出层可见的时候，想要改变它的尺寸的话请务必谨慎。

当你要在浮出层里展示同样信息的精简或拓展视图时，你可能需要改变浮出层的大小。当你一定要这么做的时候，使用转场动画往往是个好主意，因为这不会让人觉得一个新的弹出窗口取代了原来的窗口。

4.2.9 滚动视图（Scroll View）

滚动视图方便用户浏览尺寸超越滚动视图边界的图片（下图中地球的图片无论是长度还是宽度都超过了）。

API注释

想要了解如何在代码里定义滚动视图，请参考 UIScrollView .

滚动视图：

• 没有预定义的外观
• 在刚出现或者当用户对它进行操作的时候会短暂地闪烁
• 响应速度和对各个操作手势的识别都应当让用户感到自然。当用户在视图中拖拽内容，内容随之滚动；当用户轻扫屏幕时，内容将快速滚动——直到用户再次触摸屏幕或内容已经到达底部时停止。
• 可以应用在页模式（paging mode）中，在此模式下用户可以通过拖拽和轻击等手势来浏览一页的内容

使用滚动视图来允许用户在固定的空间内浏览大尺寸或大量的视图。

适当地支持缩放操作。

如果放大和缩小对于当前内容是有用的话，你可以支持用户通过捏或者双击来对当前视图进行缩放。而若是支持了缩放操作的话，你还应当根据用户当前的任务来设定在当前情景下允许缩放的最大值和最小值。如果你允许一个字符被放大到充满整个屏幕的话，用户会很难阅读当前内容。

在页模式滚动视图中，可以考虑使用页面控件（page control）。

当你想要展示分页、分屏或者分块的内容，可以使用页面控件来让用户知道当前内容一共有多少块，以及他们当前浏览的是第几个。

当你在滚动视图中使用页面控件的时候，最好禁用同一方向的滚动指示器（scroll indicator）。这样一来可以让用户聚焦到页码控件上，并让他们有了一种唯一且清晰的方式来浏览当前内容。想要了解更多，请参考下文控件中的页面控件部分内容。

一般来说，一次只展示一个滚动视图。

由于用户滚动屏幕时动作幅度经常都会很大，如果在一屏中同时存在不止一个滚动视图，他们很容易会碰到另一个。如果你确实要在同屏中放两个滚动视图，可以考虑给他们设定不同的滚动方向，来避免用户想要滚动一个视图的时候误操作。比如iPhone上的股票应用，纵向滚动上半部分会展示股票报价，横向滚动下半部分时则展示该公司的特定信息。

4.2.10 分栏视图控制器

分栏视图控制器是一个用于管理两个相邻视图控制器显示的全屏视图控制器。

API注释

每一个对分视图控制器的子视图负责管理一个窗格的展现。对分视图控制器本身负责展示这些子视图控制器与管理不同屏幕方向下对分视图的转场效果。想要了解更多如何在代码里定义对分视图，请参考 UISplitViewController Class Reference 和 SplitControllers .

在iOS 7及之前的版本里，对分视图控制器仅适用于iPad.

默认情况下，对分视图控制器通过当前的尺寸来管理其子视图。举个例子，对分视图：

• 可以在横屏环境中展示并排展示两个窗格
• 可以让主窗格在详情窗格上方显示，也可以在不需要的时候（尤其是竖屏情况下）隐藏主窗格。

你可以指定特殊的展示环境下对分视图的版式，并且通过请求对分视图控制器聚焦于这个版式，以此改变窗格的排列方式。

对分视图控制器包含广泛的对象和视图，诸如：

• 表格，图像，地图，文本，网络，或自定义视图
• 导航栏，工具栏，或标签栏

注意

即使左侧窗格通常被称为主窗格，右侧窗格被称为详情窗格，但在代码中并没有强制固定这种从属关系。

使用对分视图控制器，在左侧主窗格展示固定的信息，在右侧详情窗格展示相关的详情或从属信息。以这种设计模式，当用户选择类主视图中的某一项，右侧详情窗格应当展示相应与这一项相关的内容。（你应当在代码中实现这个效果。）

避免创建一个比主窗格更窄的详情窗格。

如果右侧详情窗格比左侧主窗格窄，对分视图控制器将不能占满整个屏幕，产生视觉不平衡的整体效果。

避免在两侧窗格中都同时展示导航栏。

这样会让用户很难分清这两个窗格的从属关系。

一般来说，始终显示左侧主窗格中当前选中的项。

尽管右侧窗格中的内容会变化，但它应当始终保持着与当前选中窗格的相关性。这样的体验有助于用户理解左侧窗格项与右侧窗格内容的关系。

合适的话，给用户提供不止一种获取主窗格的方式。

默认情况下，竖屏方向时只会展示右侧窗格，因此你需要向用户提供一个按钮（通常位于导航栏上）来让用户唤起和隐藏主窗格。对分视图控制器也支持轻扫手势来执行呼出和隐藏的动作。除非你的app有定义轻扫的手势执行其他功能，否则你应当支持用户轻扫以唤起左侧窗格。

4.2.11 表格视图

表格视图以一个可滚动的单列多行的形式来展示数据。

API注释

想要了解如何在代码中定义表格视图，请参考 Tabel View Programming Guide for the iOS 以及 UITableView .

表格视图：

• 以容易进行分段或分组的单列形式展示数据
• 用户可以通过点击来选中某行，或通过控件来添加、移除、多选、查看详情或者展开另一个表格视图

iOS定义了两种表格样式：

分组型 （Grouped）。

表格行以分组形式展示，可以有页眉和页脚。分组表格视图中至少含有一组列表，而每一组中至少包含一项内容。与平铺型不同，分组型表格没有索引。

平铺型 （Plain）。

平铺型表格可被分为若干带标签的段落，表格右侧可能会出现垂直的表格索引。每行开头可以有页眉，尾部可以有页脚（也可以没有）。

在这两种样式中，当用户选中某一行时，该行会短暂地高亮。当选中某行将展开另外一屏内容的时候，该行会短暂地高亮，然后新一屏内容滑入。当用户回到前一屏时，之前选中的那一行同样会短暂地高亮，提醒用户他们先前选中了什么（但并不会一直保持高亮）。

除了以上表格中列举的元素外，iOS定义了刷新控件，让用户可以刷新当前的表格内容。想要了解更多关于刷新控件的用法，可以参考文档本章第三节控件中的刷新控件。iOS提供了若干表格视图元素（table-view elements）来扩展表格视图的功能。除了特别标明外，这些元素只适用于表格视图。

iOS定义了在平铺型表格和分组型表格中最常用到的四种单元格布局样式。每种单元格样式都有最适合展示的信息类型。

重要

从编程角度来说，这些样式应用于单元格中，用以控制表格里每一列的绘制方式。

默认型（Default） （ UITableViewCellStyleDefault ）。

默认型样式包括左侧的图标（可选），和图标右边左对齐的文字标题。

默认型样式适合展示一系列无须通过附加信息便可以区分的项。

副标题型（Subtitled） （ UITableViewCellStyleSubtitle ）。

副标题型包括左侧图标（可选），图标右边左对齐展示的文字标题，以及在标题下方同样左对齐展示的副标题。

左对齐的文本标签让用户可以更快速地扫视表格。这种样式适用于列表各项较为相似的情况，用户可以通过副标题中的详细信息来区分列表中的各项。 （ UITableViewCellStyleSubtitle ）。副标题型包括左侧图标（可选），图标右边左对齐展示的文字标题，以及在标题下方同样左对齐展示的副标题。

Value 1 （ UITableViewCellStyleValue1 ）.在Value 1样式下，标题左对齐，副标题用较细的字体右对齐。

Value 2 （UITableViewCellStyleValue2 ）.Value 2样式蓝色字体标题右对齐，黑色字体的副标题左对齐，混排在同一行中。这种样式通常不包含图片。

Value 2的布局中，文本和副标题中间的垂直间距会让用户专注于副标题的第一个单词。

重要

以上四种单元格样式均支持添加表格视图元素，如勾选或展开标志。添加这些元素会缩小标题以及副标题单元格的可用宽度。

使用表格视图可以简洁而高效地展示少量或者大量信息。举例来说，你可以通过表格视图来：

• 展示用户可选的选项列表。 你可以使用选中标记来告知用户当前选中了哪些项。

无论是平铺型还是分组性，用户点击某一行中的某一项时都可以显示一个选项列表。当用户点选了一个不属于表格行的按钮或者其他UI元素的时候，可以使用平铺型表格视图来展示唤起的选项列表。

• 展示层级信息。 平铺型表格样式非常适合展示层级信息。表格中的每项都指向承载于另一个列表中的不同子信息。用户可以沿着这些层级结构的路径来点击每一层列表中的项。以展开标志告知用户点击这一列中的任何位置，都将展开新的列表以展示其子类信息。
• 展示可以在概念上进行分组的信息。 平铺型和分组型列表都允许你通过提供页眉和页脚来对信息进行分组和分段。

你可以用页眉页脚视图（header-footer view）——即UITableViewHearderFooterView中的一个实例——来展示页眉和页脚的文字，或图片。想要了解如何在代码中定义页眉页脚视图，请参考 UITableViewHeaderFooterView Class Reference .

使用表格视图时，可遵循以下这些指引：

用户选择列表项时，始终给与反馈。

当用户点击可选的列表项时会认为被点击的项都应短暂地高亮一下。在点击后，用户期望出现新的视图，或者出现一个复选标记以表明先前点击的项已经被选中或激活。

如果表格的内容庞大而且复杂，不要在所有数据都加载完之后才一起显示出来。

可以首先展示文本信息，图片等较为复杂的内容则在加载完后再显示。这样可以将有用的信息立即传达给用户，同时也提高了应用的响应能力。

在等待信息加载的时候，可以考虑展示“过期”信息。

尽管我们并不推荐在数据频繁变化的应用中这样做，它还是可以帮助更多的静态应用程序立即给到用户有用的信息。当然在你这么做之前，请认真衡量你应用中数据的变化频率，并弄清楚你的目标用户有多需要立即获取最新的信息。

如果信息加载速度很慢或者非常复杂，你需要告诉用户加载正在进行中。

如果表格中所有内容都很复杂，我们很难即时地给用户展示任何内容。在这种极端情况下，切勿显示空白的表格，因为这会让用户以为应用挂了。此时应当在屏幕中央展示一个活动指示器（activity indicator）和一个信息标签（information label），比如“加载中…”，让用户知道加载仍然在进行。

如果合适的话，为删除按钮自定义一个名称。

如果这能让用户更好地理解应用的相关功能的话，你可以创建一个合适的标题，来取代“删除”这个字样。

尽量使用简洁的文字标签，以避免被截断。

繁冗的文字和词组不方便用户浏览和理解。以上所有单元格样式均会自动截断文本，而文本截断所造成的问题可大可小，取决于你采用的单元格样式，以及被截断了哪一部分文字。

如果你想以一种非标准的形式来布局你的表格，最好是自定义一种单元格样式，而不是在现有的表格样式上进行改动。如何创建自定义单元格样式，请参考 Table View Programming Guide for iOS 中的 Customizing Cells 部分。

4.2.12 文本视图

文本视图可以接收和展示多行文本。

API注释

想了解如何在代码中定义文本视图，参考 Text Views .

文本视图：

• 是一个可定义为任何高度的矩形
• 当内容太多超出视图的边框时，文本视图支持滚动
• 支持自定义字体、颜色和对齐方式（默认情况下，文本视图会以左对齐的黑色系统字体显示）
• 可以支持用户编辑，当用户轻击文本视图内部时，将唤起键盘（键盘的布局和类型取决于用户的系统语言设置）

始终确保文字的易读性。

虽然你可以使用属性字符串将不同的字体、字色和对齐方式串联在同一个文本视图内，但保持文本的可读性是必不可少的。最好是可以支持动态文本（Dynamic Type）和UIFont method preferredFontForTextStyle来展示文本框中的文本。想要了解更多动态文本的指引，可以参阅本文第一章中颜色与字体里的部分；想要了解更多编程相关的内容，可以参阅 Text Styles .

根据输入内容的类型来指定不同的键盘类型。

举例来说，你希望用户能更方便地输入网址、密码或者电话号码。但请注意，由于键盘的布局以及输入方法是由用户的系统语言设置决定的，这是你不能控制的。

iOS提供了各种不同的键盘类型，以便用户输入不同类型的文本。想要了解可用键盘类型，可以参考 UIKeyboardType .想要了解如何在管理你的应用中的键盘，请参考 Managing the Keyboard .

4.2.13 网络视图

网络视图是一个可以展示丰富的HTML内容的区域。（下图是iPhone自带的邮件应用，网络视图指的是下图中导航栏和标签栏中间的区域）

API注释

想要了解如何在代码中定义网络视图，请参考 Web Views .

网络视图：

• 展示网络内容
• 会自动处理页面中的内容，比如把页面中的电话号码转化成电话链接（译者按：phone link，点击之后iPhone将自动拨打该号码）。

如果你有一个网页或者网络应用，你大约会用网络视图来实现一个简单的iOS App，来对你的网页或者应用进行一个封装。如果你打算用网络视图来访问你所控制的网页内容，请务必阅读 Safari Web Content Guide .

不要用网络视图来创建一个看起来像迷你网络浏览器的应用。

用户期望使用iOS自带的Safari来浏览网页内容，因此我们并不推荐你在自己的app里复制这种以被广泛应用的功能。

4.3 控件

4.3.1 活动指示器

活动指示器表明任务或进程正在进行中，如下图所示。

API注释

想要了解如何在代码中定义活动指示器，可以参考 UIActivityIndicatorView Class Reference.

活动指示器：

• 当任务进行和加载时旋转，任务完成后自动消失
• 不支持用户交互行为

在工具栏或主视图中使用活动指示器来告知用户任务或加载正在进行中，但并不提示该过程何时会结束。

不要使用静止的活动指示器。 用户会以为该进程停滞了。

用活动指示器来让用户知道进程仍在进行中。 有些时候，告诉用户进程没有停止比告诉他们何时完成更加重要。

设计一个与应用的风格协调的活动指示器。 可以的话，让活动指示器的尺寸和颜色与它所在的背景协调。

4.3.2 添加联系人按钮

添加联系人按钮让用户将现有联系人添加到文本框或者其它文字视图中。

API注释

想要了解如何在代码中定义添加联系人按钮，请参考 UIButton .

添加联系人按钮：

• 展示联系人列表
• 帮助用户将一个联系人添加到当前联系人按钮所在的视图中

使用添加联系人按钮让用户在不需要使用键盘的情况下就可以方便地访问到联系人。举个例子，在新建邮件的界面中，用户可以点击该按钮来在邮件中添加收件人，而不需要用键盘输入收件人的名字。

由于添加联系人按钮属于键盘输入联系人方法的替代品，我们不推荐在不支持键盘输入的界面中使用添加联系人按钮。

4.3.3 日期时间选择器

日期时间选择器展示关于日期和时间的组件，比如小时，分钟，天，以及年。

API注释

想要了解如何在代码中定义添加日期时间选择器，请参考UIDatePicker.

日期时间选择器：

• 最多可以展示4个独立的滑轮，每一个滑轮表示一个不同的值，比如月份或小时等
• 在每个滑轮的中央使用深色字体来表示当前选中的值
• 日期时间选择器的大小与iPhone键盘的大小相同，并且不可更改
• 包括四种模式，每一种模式代表了一组不同的值:

• 日期和时间 。日期和时间模式（默认模式）包含日期、小时、和分钟，以及一个可选的AM/PM值。
• 时间 。时间模式包括小时和分钟，以及可选的AM/PM值。
• 日期 。日期模式包括月份，天以及年三个值。
• 倒计时器 。倒计时器模式展示了小时和分钟值。你可以精确地设定总共的倒计时间，倒计时的最大值为23小时59分钟。

使用日期时间选择器来让用户选择时间，而不是让用户自己输入一个包含了日期、时间等多个部分的时间值。

尽量地让用户在当前内容中使用日期选择器。

尽量地让用户在当前内容中使用日期选择器。最好避免用户在使用日期选择器的时候要进入另外一个界面。在水平方向的常规环境，日期时间选择器可能会出现在一个浮层中，或者嵌入在当前内容里。

有必要的时候，改变分钟滑轮的单位刻度。

在默认情况下，分钟滑轮包含从0到59共60个值，如果你要展示一个颗粒度较大的时间，你可以让分钟滑轮的单位刻度变大，只要这个刻度可以整除60。比如说你可能会设定每15分钟为一个刻度，此时分钟滑轮就有4个值，0、15、30、45。

4.3.4 详情展开按钮

详情展开按钮展示了与该项相关的更多详细信息与功能描述。

API注释

想要了解如何在代码中定义详情展开按钮，可以参考 UITableViewCell Class Reference 和 UIButton .

详情展开按钮以一个单独的视图展示特定项目的更多详情信息与功能。

当详情展开按钮在表格行中出现时，点击表格行的其它区域不会激活此按钮，只会选中该行，或者触发app中其它自定义的行为。

一般来说，你会在一个表格视图中使用详情展开按钮来让用户知道更多关于这个列表项的信息。当然你也可以将这个按钮用在其它类型的视图中来为用户展示更多与特定项目相关的信息和功能。

4.3.5 信息按钮

信息按钮展示了app的配置信息，有时候它会出现在当前视图的背面。

API注释

想要了解如何在代码中定义信息按钮，可以参考 UIButton .

iOS包含了两种信息按钮样式：适用于浅色内容上的深色按钮，以及适用于深色内容上的浅色按钮。

使用信息按钮来显示app的配置信息或选项。你可以根据自己app的UI风格来选择最为协调的信息按钮样式。

4.3.6 标签

标签用于放置静态文本。

API注释

想要了解如何在代码中定义标签，可以参考 UILabel Class Reference .

标签可以：

• 展示任意数量的静态文本
• 禁止除了复制文本外的任何用户交互行为

你可以使用标签来命名或解释你的部分UI，又或者用它来给用户提供一些简单的信息。标签最适合拿来展示相对简单的文本信息。

保证你的标签清晰易读。

最好支持动态文本（Dynamic Type），并使用 UIFont 中的preferredFontForTextStyle来获得标签中的展示文本。如果你要用自定义字体的话，请慎重选择字体种类，不要以牺牲清晰度为代价来换取花哨的颜色和字体效果。（想要了解关于app中字体使用的指南，可以参考 Color and Typography ;想要了解更多动态文本的内容，可以参考 Text Programming Guide for iOS 里面 的 Text Styles 部分。）

4.3.7 网络活动指示器

网络活动指示器在状态栏中出现，表示网络活动正在进行。

API注释

你可以在代码中使用 UIApplication的 networkActivityIndicatorVisible 来控制该活动指示器的可见性。

网络活动指示器：

• 出现在状态栏中，当网络活动正在进行时它会旋转，在活动停止时它则消失
• 不支持用户交互行为

当你的app正在链接网络，而这个连接过程将会持续好几秒的时候，你可以通过网络活动指示器来给用户以反馈。如果进程所需时间很短，则不需要用到它，因为很可能在用户注意到它之前，它就消失了。

4.3.8 页面控件

页面控件告诉用户当前共打开了多少个视图，还有他们正处在其中哪一个。

API注释

想要了解如何在代码中定义页面控件，可以参考 UIPageControls .

页面控件：

• 包含一系列圆点，圆点的个数代表了当前打开的视图数量（从左到右，这些圆点代表了视图打开的先后顺序）
• 默认情况下，使用不透明点来标识当前打开的视图，使用半透明点来表示所有其它视图
• 不支持用户访问不连续的视图
• 当视图数量超过页面宽度可承载的氛围时，点的大小和间距并不会因此变小（如果需要显示的点超过一定数量，系统会把它截断）
• 默认情况下不支持视图之间导航；你必须实现视图到视图之间的导航并适当地更新页面控件状态

当告知用户有多少打开的视图的需求比帮助用户选择特定的视图更重要时，使用页面控件。页面控件是为所有视图均平等的场景而设计的。

不要使用页面控件来显示视图中的层次结构或其他复杂的排列。

页面控件不显示视图是如何相互关联的，而且不表明哪个视图对应于每个点，因此它不能帮助用户导航到特定的视图。

避免显示太多点。

超过10个点就很难让用户一目了然，而超过20个视图在序列中访问起来非常耗时。如果用户可以在你的应用程序打开超过20个视图，请考虑给视图一个不同的展示方式，以提供关于视图的详细信息，使其支持不连续的导航。

在打开视图的底部边缘和屏幕的底部边缘里垂直居中页面控件。

在这个位置，页面控件是始终可见的，并且不会阻挡用户的使用。

4.3.9 选择器

选择器展示了一组值，用户可以从中选择一个。

API注释

想要了解如何在代码中定义选择器，可以参考 UIPickerView Class Reference.

选择器：

• 是日期时间选择器的通用模式
• 包括一个或多个滑轮，每个滑轮含有一组值
• 当前选中的值在中间，以深色标识
• 不可以自定义大小（选择器的大小与iPhone的键盘相同）

使用选择器可以让用户更容易从一系列不同的值中间进行选择。

一般来说，当用户对整组值都比较熟悉的时候，可以使用选择器。

由于当滑轮静止的时候，大部分的数值会被隐藏，最好是在用户对所有数值均有预期的情况下才使用选择器。当你需要展示一大组用户并不熟悉的选项，此种选择器可能不太适合。

尽可能让让用户在当前视图中使用选择器。

不要让他们在使用选择器时还要进入其它的视图。

如果你需要展示的备选项数量很多，考虑使用表格视图（Table View）而不是选择器。

因为表格视图的高度较大，内容滚动起来会更快。

4.3.10 进度视图

进度视图展示了任务或进程的进度（下图是iOS默认邮件App的工具栏）。

API提示：

想要了解更多如何在代码中定义进度视图，可以参考 UIProgressView Class Reference.

进度视图：

• 是一条轨迹，随着进程的进行从左向右进行填充
• 不支持用户交互行为

iOS定义了两种进度视图样式：

• 默认（Default） .默认样式适合用在app的主要内容区中。

• 进度条（Bar）. 此样式比默认样式细，适合用在工具栏中。

当一个任务存在明确的进程，可以使用进度条来给与用户反馈，尤其在需要明确告诉用户这个任务大约需要多少时间完成的时候。

可以的话，请根据你的app的风格来设计进度条的外观。 你可以自定义进度条的底色以及轨迹颜色，也可以直接使用图片。

4.3.11 刷新控件

刷新控件执行用户触发的内容刷新——一个典型的例子，它常在表格中出现（下图展示的是iOS默认的邮件app的mailbox列表页）。

API提示：

想要了解更多如何在代码中定义刷新控件，可以参考 UIRefreshControl Class Reference.

刷新控件：

• 看起来类似活动指示器
• 可以出现在标题中
• 默认状态下不可见，当用户在表格上缘往下拖拽以刷新内容时才出现

使用刷新控件，给用户提供一个一致的方式来了解一个表格或其他视图的内容更新，而不需要等待下一个自动更新。

就算你使用了刷新控件，也不要因此就不支持内容自动刷新。 尽管用户喜欢在执行刷新操作时内容立刻刷新，他们也同样会喜欢内容自动刷新。如果过于一来用户自己执行所有刷新操作的话，那些不会自动刷新的用户就会疑惑，为何你app中的数据永远都不更新。一般来说，刷新控件给了用户多一个选择，让他们可以立刻获得最新的内容，但同时，你也不能奢望用户会主动获取所有的更新信息。

只有在必要的时候才加短标题。 特别需要注意的是，不要使用短标题来描述刷新控件怎么使用。

4.3.12圆角矩形按钮

iOS7及更新版本中已经不再使用圆角矩形按钮，而是使用了新的系统按钮——类型为UIButtonTypeSystem的UI按钮 （UIButton） 。使用指南可参考 System Button .

4.3.13 分段控件

分段控件是一组分段的线性集合，每一个分段的作用类似按钮，点击之后将切换到相应的视图。

API提示：

想要了解更多如何在代码中定义分段控件，可以参考 Segmented Controls

分段控件：

• 由两个或以上的分段组成，每一个分段的宽度相同，与分段的数量成比例（分段数量越多，则宽度越小）
• 可以包含文字或者图片

使用分段控件来提供密切相关而又互斥的选项。

保证每个分段都容易点击。

为了保证每个分段的大小有至少44×44像素，请控制分段的数量。在iPhone上，1个分段控件最多包含5个分段。

尽可能地保持每个分段中的文字长度一致。

因为每个分段都是等宽的，当文本长度差异很大时看上去会很不协调。

不要在同一个分段控件中混用文字和图片。

每一个分段都仅可支持纯文字或纯图片。避免在同一个分段控件中，一些分段里使用纯文字，另一些分段里使用纯图。

请在必要时调整分段控件中文本的对齐方式。

如果你给分段控件添加了自定义底图，请确保控件里自动居中的文本依然清晰美观。你可以通过bar metrics APIs 来调整分段控件内文本的对齐方式（想要了解如何定义bar metrics，可以参考 UISegmentedControl 中关于自定义API外观（appearance-customization APIs）的描述）。

4.3.14 滑块

滑块允许用户在一个限定范围内调整某个数值或进程（下图展示的是iOS设置中亮度设置的滑块，滑块的左边和右边均为自定义图形）。

API提示：

想要了解更多如何在代码中定义滑块，可以参考 Sliders

滑块：

• 由一条水平的轨迹和一个Thumb（滑块中支持用户水平拖拽的圆形控件）组成
• 左边和右边支持使用自定义图片来表述相对的最小值与最大值的含义
• 填充轨道左边缘最小值之间到Thumb之间的部分

使用滑块来让用户精准地选择自己想要的值，或者控制当前的进程。

如果合适的话，自定义滑块的外观。

比如，你可以:

• 定义Thumb的外观，让用户一看就知道滑块当前的状态
• 在轨迹的左右两端使用自定义图片来告诉用户滑块的最小值和最大值所代表的含义。比如说，一个图调整图片尺寸的滑块可以在最小值的左边放一张小图，在最大值的右边放一张大图。
• 根据Thumb所在的位置和当前滑块的状态来为滑块的轨迹定义不同的颜色

不要使用滑块来显示音量控制。

如果你需要显示一个音量滑块，当你使用 MPVolumeView 类的时候请使用系统提供的音量滑块。请注意，当当前活动的音频输出设备不支持音量控制时，音量滑块以适当的设备名称替换。

4.3.15 步进器

步进器可以以常数为幅度来增减当前数值。

API提示：

想要了解更多如何在代码中定义步进器，可以参考 UIStepper .

步进器：

• 是一个两段控件，其中一段默认显示减号，另一端默认显示加号
• 支持自定义图片
• 不展示用户更改的值

当用户想要对数值进行小幅度调整时，可以使用步进器。

当用户需要大幅度调整数值的时候，不要使用步进器。

用户可能会在打印机里使用步进器来确定打印份数，因为这个值的变化幅度通常并不大；而当用户需要选择打印的页码范围时，使用步进器就会让操作变得繁琐，因为用户很可能要点很多下才能选定页数。

确保步进器所调整的值明显可见。

步进器自身不展示任何数值，所以你需要保证让用户知道他们正在调整哪一个数值。

4.3.16 开关按钮

开关按钮展示了两个互斥的选项或状态。

API提示：

想要了解更多如何在代码中定义步开关，可以参考 UISwitch .

开关按钮：

• 显示了一个项存在二元状态
• 仅在表格视图中可用

在表格中使用开关按钮来让用户从某一项的两个互斥状态中指定一个，比如是/否（Yes/No），开/关（On/Off）。

你可以使用开关按钮来控制视图中的其它UI元素。根据用户的选择，新的列表项可能出现或者消失，或从激活状态变为不激活状态。

4.3.17 系统按钮

系统按钮执行app中定义的行为。

API提示：

在iOS 7中，UIButtonTypeRoundedRect已经被重新定义为 UIButtonTypeSystem. 想要了解更多如何在代码中定义系统按钮，可以参考 UIButton .

系统按钮：

• 默认状态下不含边界，也不含背景图
• 可以是图标或者文字标题
• 支持自定义样式，如描边或者加背景图（想要自定义按钮外观，可以使用 UIButtonTypeCustom 类型的按钮，并且提供背景图片）

使用系统按钮来执行某个动作。当你为系统按钮命名时，请遵循以下方法：

• 使用动词或动词短语来描述按钮所代表的动作 。这种命名方法告诉用户这个按钮是可交互的，也提示了用户点击之后会执行什么操作
• 使用标题式大写 （title-style capitalization，每个单词的首字母均大写）。除了冠词，并列连词以及少于4个字母的介词外，标题中每个单词的首字母均大写。
• 标题不要太长 。太长的标题会被截断，让用户难以理解其含义

以iPhone为例，给数字按键添加圆形边框强化了用户拨电话号码时的心理模型，而结束（End）和隐藏（Hide）按钮的背景色让用户拥有了更大的点击范围。

合适的话，为内容区域内的系统按钮描边或者加入背景。

大多数情况下，你可以通过定义一个清晰的按钮名称、选择一个不一样的标题颜色或提供上下文情景提示来让用户知道这是一个按钮而非普通文本。但在某些特定的内容区域内，为按钮描边或者添加背景颜色，让用户迅速地把注意力放到按钮上，也是必要的。Value 2的布局中，文本和副标题中间的垂直间距会让用户专注于副标题的第一个单词。

4.3.18文本框

开关按钮展示了两个互斥的选项或状态。

API提示：

想要了解如何在代码中定义文本框，以及在文本框中支持图片和按钮，可以参考 UITextField.

文本框

• 高度固定，包含圆角
• 当用户点击它时，自动唤起输入键盘
• 可以包含系统提供的按钮，如书签按钮（Bookmarks）
• 可以展示多种文字样式（了解更多请参考 UITextView ）

使用文本框来获取用户输入的少量信息。

你可以自定义一个文本框，帮助用户更好地理解如何使用它。

举个例子，你可以在文本框的左侧或者右侧加入自定义图形，或者加入系统按钮，如书签按钮等。一般来说，文本框的左侧用于表述文本框的含义，而右侧用于展示附加的功能，如书签。

合适的话，在文本框右侧加入清除按钮。

轻击清除按钮变可清空当前框内输入的全部内容，无论你原本打算在这个按钮上面展示什么其它图片。

如果可以帮助用户理解的话，可以在文本框中加入提示文字。

当文本框里没有任何其它提示文字时，会展示占位符文本（placeholder text），如名字、地址等。

根据输入内容的类型来指定不同的键盘类型。

举例来说，你希望用户能更方便地输入网址、密码或者电话号码。iOS提供了各种不同的键盘类型，以便用户输入不同类型的文本。想要了解可用键盘类型，可以参考 UITextInputTraits Protocol Reference 中的 UIKeyboardType .想要了解如何在管理你的应用中的键盘，请参考 Managing the Keyboard 部分。但请注意，由于键盘的布局以及输入方法是由用户的系统语言设置决定的，这是你不能控制的。

4.4临时视图

4.4.1 警告框

警告框用于告知用户一些会影响到他们使用app或设备的重要信息。

API提示：

如需在代码中使用警告框，你可以创建 UIAlertController 并且指定 UIAlertControllerStyleAlert .

警告框：

• 必须包含标题，有时候会包含正文文本
• 包含一个或多个按钮

一般来说，警告框警告出现的频率较低，也正因为如此，警告的出现通常会让用户额外重视。请严格控制你的app中警告的个数，并且保证每一个警告都能提供重要的信息，或者有用的选项。

避免出现不必要的警告框。

一般来说，在以下情景中，是不需要用到警告框的：

当你在设计警告文案的时候，了解以下这些定义非常有用：

• 标题式大写（Title-style capitalization） 指的是除了冠词，并列连词以及少于4个字母且不处在第一个单词位置上的介词外，标题中每个单词的首字母均大写。
• 句子式大写（Sentence-style capitalization） 指的是第一个字母大写，其余除了专有名词和专有形容词外的字母均小写

简明扼要地描述当前情景，并告诉用户他们可以做什么。

理想情况下，警告框中的文字应该给与用户足够的情景和上下文联想，让他们可以清楚地知道为什么警告会出现，同时帮助他们判断自己应该点哪个按钮。

保证标题足够简短，最好在一行之内。

过长的标题让用户很难快速理解它的意思，还可能会被截断。

避免单个字的标题。 单字标题，例如：错误，或警告，几乎不能提供任何有用信息。

如果可以的话，使用句子片段而非完整的句子。 一个简洁清晰的状态描述往往比一个完整的句子更容易理解。

尽可能的精炼你的标题文字，让警告框即使没有下面的正文信息也能完全让用户理解。 举个例子，当你使用一个问题，或者两个短句来作为警告框标题的话，很可能你并不需要添加文本信息。

不用刻意避免在警告框中使用消极负面的文案。 用户们理解大多数警告框是为了告诉他们发生的问题，或者对他们目前的状态作出警告。因此消极但清晰直接的文案优于积极但晦涩间接的文案。

尽可能地避免使用“你”，“你的”，“我”，“我的”这类字眼 。有时候，这些直接指向的字眼容易引起歧义，有时候甚至会被误认为是一种冒犯。
适当地使用大写和标点符号，尤其是在以下这些场景中：

如果你必须为警告框添加正文文本，请使用一个完整的短句。

可能的话，尽量保证句子在1到2行之间。如果句子太长，用户会需要滚动才能看完，这样的体验很糟。使用句子式大写，并在句末加上适当的标点符号。

避免在文本中详细描述“该按哪个按钮”而导致文本过长。

理想情况下，表意明确的警告文案和逻辑清晰的按钮文案已经足以让用户正确判断自己该按哪个按钮了。但如果你一定要在文案中描述这些内容，请遵循以下原则：

• 确定使用轻击（tap）来描述这个选择操作，不要用触摸（touch）、点击（click）或者选择（choose）这类字眼。
• 不要用引号，但保证大写

确保警告框在竖屏和横屏中均显示正常。

横屏模式下警告框的高度会受到限制，其大小与竖屏下可能会有区别。我们推荐您限定好警告框的最大高度，保证在竖屏和横屏模式下文字均能不需要滚动便可完整地显示。

一般情况下，使用两个按钮的警告框。

两个按钮的警告框是最为常见和有用的，因为它最便于用户在两个按钮中做选择。单按钮警告框不那么有用，因为它通常只是起到告知的作用，并未给予用户控制当前状态的能力。多于两个按钮的警告框太过复杂，应该尽可能地避免使用。如果你在警告框中设计了太多按钮，它也许会导致警告框被强制滚动，这也是一个非常糟糕的体验。

提示

如果你需要在警告框中给与用户超过2个选项，可以考虑使用操作列表来代替警告框。

正确地放置按钮。

理想情况下，最容易点击也最不容易点错的按钮符合两个条件：它代表了用户最可能会选择的操作，即使用户一时不注意误点了它，也不会造成严重问题。尤其是：

• 如果这个按钮不会造成损害性结果，又是用户最有可能会选择的操作，那么它应该放在右边，取消按钮则应该放在左边。
• 如果这个按钮会造成损害性后果，又是用户最有可能会选择的操作，那么它应该被放在左边，取消按钮应该放在右边。

提示

一般来说，当警告框出现的时候，按Home键将会从该app里切回主屏幕，此时Home键的效果类似于取消按钮——当用户回到app中的时候，警告框将消失，操作也不会被执行。

为按钮设计简短而逻辑清晰的文案。

好的按钮文案一般只有1到2个单词，描述用户点击按钮后的结果。设计文案时可以遵循以下指南：

• 跟其它所有按钮一样，使用标题式大写，而且不需要标点符号
• 尽可能的使用与警告文案直接相关的动词或动词词组，如”取消（Cancel）”，”查看全部（View All）”，”回复（Reply）”和“忽略（Ignore）”等
• 当没有更好的选择的时候，可以使用”OK”.避免使用”是（Yes）”或”否（No）”。
• 避免使用”你”，“你的”，“我”，“我的”这类字眼。含有这些字眼的文案可能会指代不清，还有可能造成冒犯。

4.4.2 操作列表

操作列表展示了与用户触发的操作直接相关的一系列选项。

API提示：

如需在代码中使用操作列表，你可以创建一个 UIAlertController .并指定 UIAlertControllerStyleActionSheet

操作列表：

• 由用户某个操作行为触发
• 包含两个或以上的按钮

使用操作列表来：

提供完成一项任务的不同方法。

操作列表提供一系列在当前情景下可以完成当前任务的操作，而这样的形式不会永久占用页面UI的空间。

在用户完成一项可能有风险的操作前获得用户的确认。

操作列表让用户有机会停下来充分考虑当前操作可能导致的危险结果，并为他们提供了一些其它的选项，尤其是在以下这些情景下：

使用红色文字来表示可能存在破坏性的操作。

在操作列表的顶部使用文字颜色为红色的按钮，因为越靠近列表顶部的操作越容易引起用户注意。在iPhone里，潜在风险的操作离列表底部越远，用户在关注Home键的时候就越不容易误点它。

避免让用户滚动操作列表。

如果你的操作列表中存在过多按钮，用户必须要滚动才能看完所有操作。这样的体验是可能让用户不安，因为他们要花更多的时间来充分理解每个选项的区别。此外，用户在滚动的过程中将很有可能误点其它按钮。

4.4.3模态视图

模态视图是一个以模态形式展现的视图，它为当前任务或当前工作流程提供独立的、自包含的（self-contained）功能。

API提示：

如需在代码中使用模态视图，你可以创建一个 UIPresentationController . 并指定适当的样式（完整的样式列表，请参考 Modal Presentation Styles）

模态视图：

• 能占据整个屏幕，它也可能占据整个父视图（parent view）的区域，或者是屏幕的一部分
• 包含完成当前任务所需的文字和控件
• 通常也会包含一个完成任务的按钮（点击后即可完成任务，当前模态视图也会消失），和一个取消按钮（点击后即放弃当前任务，同时当前模态视图消失）

当需要用户完成与你的app中的基础功能相关的、独立的任务的时候，可以使用模态视图。模态视图尤其适用于那些所需元素并非常驻在app主要UI中、又包含多个步骤的子任务。

根据当前任务的种类和你的app的整体视觉风格来选择适当的模态视图。 你可以使用以下定义的任何一种模态视图样式：

不要让模态视图覆盖在浮出层之上。

除了警告框外，没有任何元素应该覆盖在弹出层上面。除非极其少有的情况下，用户在弹出层内进行的操作结果必须要以模态视图的形式展现，即便是这个时候，也请先将弹出层关闭，再出现模态视图。

确保你的模态视图看起来与你的app的整体视觉风格相协调。

举个例子，如果一个模态视图中含有导航条和取消或完成任务的按钮，这里的导航条样式应该与你的app中导航条一样。

合适的话，在模态视图里加入可以说明任务内容的标题。

你可能还需要在模态视图里加入一些补充文字，来清楚地阐明任务内容，并提供一些任务指南。

选择一个适当的过渡动画来展示模态视图。

使用与你的app一致的过渡动画，让用户可以准确地理解当前页面内容的转变与模态视图的出现。关于这一点，你可以指定以下任意一种过渡动画：

• 垂直出现（Vertical）. 模态视图从底部边缘滑入屏幕，也同样从屏幕底部滑出（默认模式）。
• 弹出（Flip） .当前视图从右往左水平滑动，露出模态视图。从视觉上看，模态视图好像原来就处于当前视图的下面，当前视图移开时，它便出现了。离开模态视图时，原先的父视图从左边滑回屏幕右边。

如果你要改变当前的过渡动画样式，请确保这种改变对于用户而言是有用而且有意义的。

用户很容易便能感知到这些改变，还会认为这些改变存在特别的意义。最好能设计出一种符合逻辑并始终保持一致的过渡方式，让用户容易感知并且记忆。在没有充分理由支持的情况下，最好不要改变这些默认的过渡方式。

本章英文原文访问地址： iOS Human Interface Guidelines
本章中文翻译PDF下载： 点此下载

【优设名师访谈系列】

1. 曾任腾讯大粤网设计主管的跨域达人： 《优设访谈！腾讯设计师米田的设计之道与成长之路》
2. 没有听过冯叔的设计师不是好设计师： 《优设访谈！著名设计师冯铁的设计思考与经验之谈》
3. 前端重构视觉交互无一不精的设计师： 《优设访谈！腾讯高级交互设计师C7210的十年设计路》
4. 非议不断前行不止，用心的设计团队： 《优设访谈！国内知名设计团队专访之滴滴DISIGN》
5. 前网易现阿里写的书是交互领域必读： 《优设访谈！阿里交互设计专家刘津的设计管理之路》
6. 职业路径最为清晰的科班交互设计师： 《优设访谈！LBE安全大师产品总监晓生的职场进阶之路》
7. 能靠脸吃饭偏偏不的设计界「鹿晗」： 《优设访谈！阿里资深设计师的自学设计之路》
8. 300多人的百度设计团队该如何运转： 《优设访谈！国内知名设计团队专访之百度大UE》
9. 百度上海团队负责人的非科班设计师： 《优设访谈！百度设计大咖JJ YING的自学成才之路》
10. 他带的学生已经是国内的设计大咖了： 《优设访谈！灰昼：从非科班生到首席美术总监的15年设计路》
11. 设计的产品有几亿人在用的非科班生： 《优设访谈！腾讯电脑管家视觉负责人张晓翔的UI自学之路》
12. 英雄联盟穿越火线天天爱消除都有他： 《优设访谈！腾讯游戏Tgideas团队设计总监李若凡的十年设计路》
13. 高考一百多分现任UC艺术指导的大神： 《优设访谈！小火：从非科班生到UC艺术指导的励志设计路》

译文地址： 腾讯ISUX