主页 > APP设计 > iOS 人机界面指南精简版笔记之界面元素:Controls(下)

iOS 人机界面指南精简版笔记之界面元素:Controls(下)

最近仔细研读了苹果官网最新的设计规范。网上没有找到很满意的翻译版本,于是自己老老实实的啃了几遍官方文档,顺便把学习笔记输出给大家分享一下。

这里有几点要提醒一下大家:

  1. 这是简明笔记,只选了重点内容,不是通篇逐字逐句的翻译。想要全面了解的同学建议认真学习官方文档。
  2. 笔记没有完全按照官方的目录排序(官方二级目录按字母表顺序排列),而是根据重要程度、使用频率、相关性以及易混淆程度等,综合考量,重新排序
  3. 如果有疏漏和错误,欢迎找茬提意见~

基本界面元素包括三大类,分别是Bars(栏)、Views(视图)、Controls(控件)。今天是最后一期:Controls(控件)


 

 

以下是正文。

Pickers 选择器

选择器包括一列或者多列可滚动列表,每列都有一个选中值,选中值位于中间且颜色更深。通常在用户编辑字段或点击菜单后,选择器出现在屏幕底部或弹窗中。选择器可内联显示(一种函数调取方式,例如编辑日期),高度大致是 5 行内容,宽度横跨屏幕或内容边界。

 

1. 选项排序要符合用户预期

在用户滚动选项列表之前,大多数选项是被隐藏的。采用符合用户预期的排序方式,用户可快速滑动列表并定位到相应选项。

2. 不要把选择器放入另一个页面

选择器应该和上下文内容紧挨在一起,把选择器放入另一个页面会疏离两者的关联关系,导致用户产生茫然:「我在哪里?我要干什么?」

3. 如果选项太多,建议使用表格代替选择器

表格可以增加高度,从而展示更多选项、且可以包含索引(例如通讯录的字母表索引。关于表格内容,在人机界面指南界面元素-Views(下)中 Tables 表格视图中有详细介绍),可提升搜索效率。

 

 

4. 日期选择器

日期选择器可以方便用户快速选择特定日期、时间、日期+时间,它还提供了显示倒计时器的界面。

四种日期选择器类型可包含的字段

  • 日期:年、月、日
  • 时间:小时、分钟、AM/PM(可选)
  • 日期+时间:年、月、日、小时、分钟、AM/PM(可选)
  • 倒计时器:小时(0-23 时)、分钟(0-59 分)

「分钟」的颗粒度粗细:默认是 60 个值(0-59 分),也可以是 4 个值(0 分、15 分、30 分、45 分)

Text Fields 文本框

文本框是单行的输入框,高度固定(区别于文本域),一般带有圆角,点击后调出输入键盘。文本框用来向用户获取输入量不大的信息,例如邮件地址。

1. 在文本框内展示提示和说明

可在文本框内使用占位符来向用户提示和说明。若已使用占位符,请勿再使用其他文字标签辅助说明。

2. 可在右侧提供「清除」按钮

点击「清除」按钮,文本框内字符被一键清空。可免去用户使用输入键盘的删除键将字符逐个删除。

3. 脱敏展示(敏感字段用其他符号遮挡)

当要求用户输入敏感数据(例如密码)时,请提供脱敏展示方式供用户选择,以保护用户隐私。

4. 图标、按钮可用来提示用途和展示附加功能

通常左侧放置图标来说明字段用途,右侧放置按钮来指示附加功能(如「书签」)。

5. Keyboards输入键盘

系统可根据输入字段的内容类型,调取适当的键盘类型。

Sliders 滑块

滑块包括①一条水平轨道,②一个可以在最小值和最大值之间拖动的拇指控件。轨道的左右侧可展示图标,辅助说明最小值和最大值的含义。

1. 外观可自定义

滑块的外观,包括轨道颜色,拇指控件图片、左右侧图标,都可以自定义。左右两侧的图标大小可以调整,例如左小、右大。

2. 不要将滑块用于调整音量

如果需要提供音量控件,请使用自定义的音量视图,其中包括音量滑块和更换音频输出设备的控件。

Steppers 步进器

步进器由两段组成,用来增加或减少某值的大小,默认图标是加号和减号,也可以根据场景替换为自定义图像。

1. 将变量值突出显示

因为步进器本身不显示任何值,变量值作为操作反馈需要突出显示,确保人们知道使用步进器时,值已经发生改变。

2. 如果变动范围很大,不要使用步进器

步进器适合用在变动范围很小的场景中,例如文件打印份数。如果变动范围非常大,用户需要在步进器上进行连续大量的点击,这样的效率非常低。

按钮类

1. Buttons 按钮

按钮用于启动特定操作,可具有自定义背景,可包含标题或者图标。系统提供了一些预定义的按钮样式,适用于大多数用例场景。您也可以完全自定义按钮样式。

System Buttons 系统默认按钮

系统默认按钮常用在导航栏和工具栏中,其他位置也可使用。

关于按钮标题

  • 请使用动词标题。动词标题表明按钮的可交互性,并说明点击后会发生什么。
  • 使用英文时要注意首字母大写(并列连词和 4 个字母以下的介词除外)。
  • 保持文案简短,文案太长会导致页面拥挤,甚至被截断。

视情况添加边框或背景色

按钮在默认情况下不带边框和背景色,可以根据实际情况添加边框和背景色,突出其可点击的交互隐喻。

Detail Disclosure Buttons 细节展开按钮

点击细节展开按钮后打开一个新视图(通常是模态视图),视图内展示附加信息或承载相关功能。

细节展开按钮没有被限制使用在何种视图内,不过一般用在表格视图中,用于查看某行的信息(如下图所示)。

如果用户点击行的任何位置都可以展示附加信息(区别于点击按钮),不要使用细节展开按钮,而是使用细节披露按钮(列表右侧的小箭头)。

Info Buttons 详情按钮

点击详情按钮后展示有关 App 的信息,有时使用转场动效,效果像是翻开当前视图的背面。

详情按钮有深色、浅色两种效果,选择时注意不要将按钮和背景混在一起难以分辨。

Add Contact Buttons 添加联系人按钮

用户在点击添加联系人按钮后,可以查看联系人列表,还可以选择将某联系人插入文本框或其他视图中。下图展示的是按钮应用在邮件 App 中。

注意添加联系人按钮可以作为键盘输入的补充方式,但不要完全取代键盘输入。