iOS平台设计规范（八）控件-Controls

无论是UI、交互，还是产品经理，都应该熟读iOS平台设计规范。这对我们的产品设计，百利而无一弊。

控件（Controls）

一、按钮（Buttons）

按钮常用于触发特定操作，可自定义的背景颜色，并且可以包含标题或图标。系统为大多数用例提供了许多预定义的按钮样式。你也可以设计自定义按钮。

系统按钮

系统按钮通常出现在导航栏和工具栏中，也可以在任何地方使用。

1、在标题中使用动词

一个特定动作的操作按钮标题，可以间接告诉用户按钮是可交互的，并说明点击它的结果。

2、使用标题格式命名标题

将除了冠词、并列连词和四个或更少字母的介词之外，每个单词首字母都应大写。（中文下的APP几乎不存在这个问题）

3、按钮标题尽量简短

过长的文本会占用界面过多空间，显得拥挤，而且在较小的屏幕上可能会显示不全。

4、只在必要时添加边框或背景颜色

默认情况下，系统按钮没有边框或背景。然而，在某些内容区域中，通过边界或背景表示按钮的交互性也是有必要的。

例如：在电话APP中，带边框的数字键加强了传统的拨打电话模式，而“呼叫”按钮突出的背景颜色使按钮更引人注意，更易点击。

详情展开按钮

详情展开按钮可打开视图（通常是模态视图），其中包含与屏幕上特定项目相关的信息或功能。虽然你可以在任何类型的视图中使用它们，但详情展开按钮通常是用于列表中，便于用户访问有关某行列表的信息。

在列表中适当使用详情展开按钮。当列表中有详情展开按钮时，点击该按钮会显示附加信息，点击其他位置则选择行或APP的自定义行为。如果你希望用户点击整行以查看更多详细细节，请不要使用“详情展开”按钮。相反，可以使用指向性的显示附件（如箭头）。

信息按钮

信息按钮会显示有关App配置的详细信息，有时会在下一页展示，有时以弹出窗口的形式展示。

信息按钮有两种风格 - 浅色和深色。选择与你的设计最适合的样式，且不会在页面上被看不清楚的样式。

添加联系人按钮

用户可以点击“添加联系人”按钮来浏览现有联系人列表，并选择一个用于插入文本字段或其他视图的列表。例如，在邮件APP中，你可以点击邮件“收件人”字段中的“添加联系人”按钮，从联系人列表中选择收件人。

除“添加联系人”按钮外，应同时允许键盘输入。“添加联系人”按钮只是为键入联系人信息提供了一种形式，而不是替代方法。可以将它作为添加现有联系人的快捷方式，但同时也要让用户可以通过键盘输入联系人信息。

二、情境菜单（Context Menus）

在iOS 13及更高版本中，你可以使用情境菜单让用户访问与APP相关的其他功能，而不会使界面混乱。

情境菜单类似于Peek（轻压手势唤醒）和Pop（重压手势唤醒），有两个主要区别：

a. 所有运行iOS 13及更高版本的设备都可以使用情境菜单；但Peek和Pop仅适用于支持3D Touch的设备。

b. 情境菜单会立即弹出与相关的命令；Peek和Pop则需要向上滑动才能查看命令。

用户可以通过系统定义的触摸并按住或3D Touch（只是3D Touch可以使情境菜单更快地显示），来显示情境菜单。打开时，情境菜单将显示该项的预览并列出对其起作用的命令。用户可以选择命令或将项目拖动到另一个区域、窗口或应用程序。

1、一致采用情境菜单

如果你为某些地方的项目提供情境菜单而不是所有项目，用户将不知道他们到底可以在哪些地方使用该功能，并且可能认为是APP有问题/Bug。

2、仅包括适用于该项的最常用命令

例如，在邮件的上下文菜单中，显示用于回复和移动邮件的命令是很有意义的，但如果显示格式或邮箱命令没有意义。列出太多命令可能会让人头昏眼花。

3、使用子菜单来管理复杂性

子菜单是情境菜单的菜单项，显示逻辑相关命令的二级菜单。为子菜单提供直观的标题来描述它们的内容，这样用户就可以预测子菜单的命令而不必全部显示出来。简洁、以行动为导向的标题，同时允许用户跳过他们在当前环境中不需要的子菜单。

4、将子菜单保持在一个层级

虽然子菜单可以缩短情境菜单并说明用户可以执行的命令，但是如果子菜单都不在一个层级使得体验变得复杂，并且让用户难以导航。

5、将最常用的项放在情境菜单的顶部

当用户打开情境菜单时，他们的焦点是位于菜单的顶部区域。将最常用的项应该放在菜单顶部，以便用户及时找到他们正在寻找的项。

6、使用分隔符对相关菜单项进行分组

创建可视分组可以帮助用户更快地浏览菜单。例如：你可以使用分隔符对与需要编辑的相关的操作项进行分组，使用另一个分隔符对与共享的相关操作项进行分组。通常，用户不希望情境菜单的分组超过三个。

7、避免为同一项目提供情境菜单和编辑菜单

当人用户为同一个项目启用这两个功能时，系统很难检测到用户的真正意图，这可能会让用户感到困惑。

8、避免提供项目预览的操作按钮

用户可以通过点击打开他们正在预览的项目，因此通常不需要额外再提供明确的“打开”按钮了。

三、编辑菜单（Edit Menus）

用户可以触摸并按住或双击文本字段、文本视图、网页视图或图像视图中的元素，来选择内容，并弹出编辑内容的操作选项，例如复制和粘贴。

1、为当前内容提供的相应命令

默认情况下，命令选项包括剪切、拷贝、粘贴、选择、全选以及删除，其中任何命令都可以被禁用。如果未选择任何内容，则编辑菜单应该禁用需要用到选择的选项，例如“拷贝”或“剪切”。同理，如果已选择某些内容，则菜单应禁用“选择”选项。（见下图对比）

2、如有必要，可调整编辑菜单的位置

默认情况下，根据可用空间，菜单位于插入点/选择的上方或下方，并包含指向相关内容的箭头。虽然你无法更改编辑菜单的形状，但它的位置是可配置的 - 你可以改变展示位置来避免它覆盖重要内容或界面的某些部分。

3、不要使用与编辑菜单相同功能的其他控件

提供多种方式来进行相同的操作，会导致不一致的用户体验并造成混淆。例如：如果允许用户通过编辑菜单来拷贝内容，就不要再添加一个复制按钮。

4、不能编辑文本也应允许选择和拷贝

用户通常希望将静态内容（例如图像标签或社交媒体状态）拷贝到电子邮件，便笺或网络搜索中使用。

5、不要在编辑菜单上加“编辑”按钮

如果这样做，用户很容易误点，从而导致编辑菜单被取消。

6、让编辑操作可撤消

在编辑菜单上执行操作之前不需要确认。但用户在执行操作后可能改变主意，所以始终要实现撤消和返回功能。

7、使用有用的自定义命令扩张编辑选项 

通过提供特定于应用程序的其他命令来增加菜单的选项，与标准命令一样，任何自定义命令都可以对选择的文本或对象进行操作。

8、当系统提供的命令满足不了需求时，才考虑自定义命令

不要尝试用自定义命令替代系统提供的命令，因为这些命令是众所周知且经常使用的。

9、尽量减少自定义命令的数量

太多的选项反而会让人陷入纠结。

10、自定义命令的标题尽量简短

命令名称应该是动词或简短的动词短语，简单地描述了要执行的操作即可。

四、标签（Labels）

标签用来描述屏幕中的界面元素或提供短消息。虽然用户无法编辑标签，但他们有时可以复制标签的内容。标签可以显示任意数量的静态文本，但尽量保持言简意赅。

保持标签清晰。标签可以包含各种样式的文本。如果你需要调整标签的样式或使用自定义字体，请确保文本的可读性和易读性。

最好采用动态类型，这样当用户在其设备上更改文本大小时，标签的可读性仍然可以很好。同时，你还需要在启用了辅助功能选项的情况下测试标签，例如粗体文本。

五、页面控件（Page Controls）

页面控件主要用来显示当前页面在一系列页面中的所处位置。即一系列小小的指示圆点，代表一系列可用页面的顺序。实心点则表示当前页面。

在视觉上，这些点总是等距的，并且如果在页面上出现太多则会显示不全。用户可以点击页面控件的左边或右边来访问上一页或下一页，但是无法点击特定圆点来转到特定页面。导航也总是按顺序发生，通常是顺着手势滑动的方向将页面滑动到某一侧。

1、不要在层级不同的页面之间使用页面控件

页面控件并不会显示页面之间的关联或指示哪个页面对应于哪个点。此类控件仅用于彼此层级相同的页面。

2、不要显示太多页面

超过大约10个点很难让人一目了然，超过20个页面按顺序浏览过去也是非常耗时的。如果你的应用需要显示超过20个页面，请考虑使用其他的排列方式 - 例如网格 - 启用非顺序导航。

3、页面控件显示在屏幕底部的中心

页面控件应始终位于内容底部和屏幕底部之间的区域，并保持居中。这样即能让页面控件是可见，又不会遮挡其他内容。

六、选择器（Pickers）

选择器显示为一个或多个不同值的可滚动列表，每个列表都可以选择一个值 - 选中的通常以文字深色加粗的形式突出显示。当用户编辑字段或点击菜单时，选则器通常出现在屏幕底部或弹出窗口中。

选择器也可以以内部嵌入的方式显示，例如在日历事件中编辑日期时。选择器的高度大致是五行列表的高度。选择器的宽度可以是屏幕的宽度，也可以是封闭视图，具体取决于设备和上下文。

1、使用可预测、合理有序的值

当选择器列表静止时，很多值可能会被隐藏。所以列表中的值最好是可预测的，例如使用按字母顺序排列的国家/地区列表，这样他们就可以快速浏览列表。

2、避免切换页面来显示选择器

选择器显示在正在编辑的字段下方或附近，是最为合适的。

3、如果很多值的话，使用列表而不是选择器

太长的列表在选择器中选择起来，可能会很繁琐。而列表即可以适当调整行高，还可以包含索引图标，而且滚动速度比选择器更快。

日期选择器

日期选择器是用于选择特定日期、时间或两者兼顾的界面交互。同时，它还提供了一个显示倒计时的交互接口。

日期选择器有四种模式，每种模式都有一组不同的可选值。

· 日期：显示年、月、日

· 时间：显示小时、分钟和 AM/PM（可选）。

· 日期和时间：显示年、月、日、小时、分钟和 AM / PM（可选）。

· 倒计时器：显示小时、分钟，最长23小时59分钟。

日期选择器中显示的具体的值，及其顺序取决于用户设备的区域设置。

在指定分钟时，提供较少颗粒度。默认情况下，分钟列表包含60个值（0到59）。你可以选择增加分钟间隔，只要它均匀分为60即可。例如，你可能需要每隔一小时的间隔（0、15、30和45）。

七、进度指示器（Progress Indicators）

不要让用户长时间盯着静止的屏幕上，来等待加载内容或执行冗长的数据处理操作。使用加载器和进度条让用户知道你的APP并没有停止，最好让他们知道大概需要等待多长时间。

加载器

当执行无法量化的任务（例如加载或同步复杂数据）时，加载器会旋转。任务完成后它会消失。加载器是不是可交互元素。

1、进度条优于加载器

如果加载过程是可量化的，请使用进度条而不是加载器，以便用户可以更好地衡量正在发生的事情以及需要多长时间。

2、保持加载器的转动

用户会很自然地把静止的加载器与于APP的卡顿联系起来。让它旋转，让用户知道正在发生的事情。

3、如果有帮助，请在用户等待任务完成时为其提供有用的提示信息

可以在加载器上方添加标签以提供额外的上下文信息。避免使用模糊的术语，如加载或验证，因为它们通常不会有任何帮助。

进度条

进度条是一个从左到右填充的轨道，用以显示当前页面的任务进度。进度条是非交互式的，但通常伴有用于取消相应操作的按钮。

1、保持进度条的准确性

请勿显示不准确的进度信息，不要仅仅为了让加载看起来很快而显示不准确的进度信息。只能对可量化的任务使用进度条。否则，使用加载器。

2、对可量化时间的任务使用进度条

进度条非常适合显示任务的当前状态，特别是当它有助于传达任务需要完成的时间时。

3、隐藏导航栏和工具栏中未填充的轨道部分

默认情况下，进度条的轨道包括已填充和未填充的部分。在导航栏或工具栏中使用时，例如表示页面加载，应配置进度条来隐藏轨道的未填充部分。

4、自定义进度条的样式

为了与APP的设计风格协调，你可以自定义进度条的样式。例如，为轨道的填充指定自定义颜色或图像。

网络加载器

当网络进行加载时，网络加载器会出现在屏幕顶部的状态栏中并旋转，当网络加载完成后，它自动会消失。该图标看起来就像是一个加载器，并且也是非交互式的。

当网络加载时间超过几秒时，才显示此加载器。加载很快的情况下不要显示此加载器，因为它可能会在用户注意到它之前就消失了。

八、刷新控件（Refresh Content Controls）

刷新控件被手动启动后，对当前内容进行重新加载，无需等待内容自动更新，通常应用于列表视图中。

刷新控件是一种特殊加载器，默认情况下是隐藏的，在向下拖动且需要重新加载内容时才变为可见。例如，在Mail中，向下拖动收件箱邮件列表可以检查是否有新邮件。

1、执行自动内容更新

虽然用户觉得手动刷新内容很不错，但他们更希望内容会定期进行自动刷新。不要让用户手动发起每个更新。定期主动更新数据，保持数据的时效性。

2、有必要时才为刷新提供简短标题

可以为刷新控件加一个标题。但在大多数情况下，这是没有必要的，因为刷新控件的动效就很明确地表明了内容正在加载。如果真的有加标题的需求，请用它来解释如何进行刷新。而是提供有关正在刷新的内容的有价值信息。

例如：播客APP中的刷新控件使用标题来告知用户上次播客更新的时间。

九、分段控件（Segmented Controls）

分段控件是两个或更多个段的线性集合，每个段是互斥的，不可同时存在的。在控件内，所有段的宽度相等。与按钮一样，段也可以包含文本或图像。分段控件通常用于展示不同的视图。

例如：在地图APP中，分段控件可让你在Map、Transit和Satellite视图之间切换。

1、限制段的数量以提高可用性

越宽的段越容易点击。在iPhone上，分段控件应该控制在5个或5个一以下的段。

2、尽量让段内容大小一致

所有段的宽度都是相同的，如果段内容（例如段的标题）长度或大小不一致，则分段控件看起来会很不协调。

3、分段控件中不要同时包含文本和图像

虽然段可以包含文本或图像，但将两者被混合在一个控件中可能会导致界面混乱让人难以理解。

4、若自定义分段控件，请爆出内容协调

若要更改（自定义）分段控件的视觉样式，请确保内容看起来协调可读并且对齐。

十、滑块（Sliders）

滑块是带有一个称为“拇指”控件的水平轨道，你可以用手指滑动该控件以在最小值和最大值之间移动，例如屏幕亮度的调节或媒体文件播放期间的位置调节。

当滑块的值发生变化时，最小值和拇指之间的轨道部分会填充颜色。滑块的左右位置好可以展示图标，来说明最小值和最大值的含义。

1、如有必要，可以自定义滑块的外观

为了与你的设计风格融合并且更准确地传达设计意图，滑块的外观是可以更改的，包括轨道颜色、“拇指”图标以及左右位置的图标。

例如：可以调整左右位置图标的大小，在左侧显示一个小图像图标，而在右侧显示一个大图像图标。

2、不要使用滑块来调节音量

如果你的APP需要提供音量控制，请使用音量视图，音量视图是可以自定义的，其中包括音量视图的滑块和用于改变音频输出设备的控件。

十一、步进器（Steppers）

步进器是用于增加或减少增量值的两段式控件。默认情况下，步进器的一个段显示加号，另一个段显示减号。

如果需要，可以自定义步进器或替换这些图标。

1、确保随着步进器变化的那个值，清晰可见

步进器本身不展示任何值，因此请确保用户知道，使用步进器时它们正在改变哪个值。

2、不要使用步进器调整较大数量级的值

调整小数量级的值时，使用步进器是很合适的。例如，在打印页面上，使用步进器设置份数效果是很好的，因为用户很少对份数设置进行更改。

另外，使用步进器选来择页面范围是没有意义的，因为即使一个合理的页面范围也需要大量的点击。

十二、开关（Switchs）

开关主要用于两个互斥状态之间的视觉切换。  

1、自定义开关的视觉样式，使它与你的设计更协调

根据设计风格，自定义开关在其关闭和打开时的背景颜色，可以使开关在APP中的体验更好。

2、仅在列表中使用开关

开关用在列表中，例如可以打开和关闭的设置列表。如果你需要工具栏或导航栏中使用类似功能，请改用按钮，并提供两个不同的图标来传达不同的状态。

3、避免在开关中添加说明标签

关于开关的打开或关闭，用户是很明确的。额外的提供文本标签描述开关状态是多余的，还会使界面混乱不堪。

4、可以用开关来管理相关界面元素的可用性

开关通常会影响屏幕上的其他内容。

例如，在“设置”中打开“飞行模式”开关会禁用其他功能/设置，例如“蜂窝”和“个人热点”。在“设置>Wi-Fi”中关闭“Wi-Fi”，会导致“可用网络”和“其他”列表消失。

十三、文本输入框（Text Fields）

文本输入框是单行且固高度固定的区域，通常带有圆角，当用户点击它时会自动弹出键盘。

使用文本输入框来输入少量信息，例如电子邮件地址。

1、在文本输入框中显示必要的提示，以帮助用户更好的输入

当输入框中没有其他文本时，文本输入框可以包含占位符文本 - 例如“电子邮件”或“密码” 。

当有足够的控件放占位符文本时，请勿使用单独的标签来描述文本输入框。

2、适当时侯，在文本输入框的右端显示“清除”按钮

若有“清除”按钮，点击它便会立即清空文本字段的内容，从而用户完全不必一直继续点击Delete键来删除。

3、适当时候，使用安全文本字段

若需要输入的是敏感数据（如密码）时，请始终使用安全提示类的文本字段。

4、使用图像和按钮在文本字段中提供清晰度和功能

可以在文本输入框的左侧或右侧显示自定义图标，也可以添加系统提供的按钮，例如“书签”按钮。

通常，使用文本输入框的左端来说明文本输入框的用途或目的，使用其右端来放置其他附加功能，例如书签。

键盘

根据实际情况，显示适当的键盘类型。iOS提供了几种不同的键盘类型，每种键盘都用于方便不同文本类型的输入。当用户在输入文本时，根据输入的文本类型显示相应的键盘类型，可以简化数据输入。

例如：如果用户需要填写电子邮件地址，则应显示邮件键盘（见上图左）。