[翻译] UI元素 – 控件 (Controls) – 人机交互指南 for iOS7

原文地址：http://isnofate.com/human_interface_guidelines_for_ios7_ui_elements_controls/

活动指示器 (Activity Indicator)

活动指示器表示任务或进程正在进行中 (如下图和文字标签一起使用).

API NOTE
想了解如何在代码中定义活动指示器, 请参考 UIActivityIndicatorView Class Reference.

活动指示器是:

• 当任务进行和加载时旋转, 任务完成后自动消失
• 用户无法与之交互

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

不要展示静止的活动指示器. 会让用户产生进程停滞的错觉.

活动指示器是用来让用户知道任务或进程仍在正常运转. 有些时候, 告诉用户进程没有停滞比告诉他们何时完成更加重要.

可自定义一个与当前页面风格协调的活动指示器. 可以的话, 调整活动指示器的尺寸和颜色以便与当前页面背景协调.

添加联系人按钮 (Contact Add Button)

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

API NOTE
想了解如何在代码中定义添加联系人按钮, 请参考 Buttons.

添加联系人按钮是:

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

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

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

日期选择器 (Date Picker)

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

API NOTE
想了解如何在代码中定义日期选择器, 请参考 Date Pickers.

日期选择器是:

• 最多可以展示4个独立的滚轮, 每一个滚轮表示一个不同的值, 比如月份或小时等
• 当前选中的值在中间, 以深色字体标识
• 尺寸不可更改 (日期选择器的尺寸与 iPhone 键盘相同)
• 包括四种模式, 每种模式由一组不同的值组合而成:
  • 日期和时间. 日期和时间模式 (默认模式) 包含日期, 小时,和分钟, 以及一个可选的 AM/PM 值.
  • 时间. 时间模式包括小时和分钟, 以及可选的 AM/PM 值.
  • 日期. 日期模式包括月份, 天以及年.
  • 倒计时器. 倒计时器模式展示了小时和分钟. 你可以精确地设定倒计时长, 倒计时的最大值为 23 小时 59 分钟.

使用日期选择器来让用户选择时间, 以代替让用户自己输入包含了日期、时间等多个部分的时间值.

尽量把日期选择器嵌入在当前内容中. 最好避免用户在使用日期选择器的时候要进入另外一个界面. 在iPad上, 日期选择器可能会出现在一个浮层中, 或者嵌入在当前内容里.

如果合适的话, 可以改变分钟滑轮的单位刻度. 在默认情况下, 分钟滑轮包含从0到59共60个值, 如果选择粒度没必要这么精细, 你可以让分钟滑轮的单位刻度变大, 只要这个刻度可以整除60. 比如说你可能会设定每15分钟为一个刻度, 此时分钟滑轮就有0, 15, 30, 45这四个值.

详情展开按钮 (Detail Disclosure Button)

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

API NOTE
想了解如何在代码中定义详情展开按钮, 请参考 UITableViewCell Class Reference 和 Buttons.

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

当详情展开按钮在表格行中出现时, 点击表格行的其它区域不会激活此按钮, 只会选中该行, 或者触发应用特定的行为.

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

信息按钮 (Info Button)

信息按钮展示了应用的配置信息, 有时候它会出现在当前视图的背面.

API NOTE
想要了解如何在代码中定义信息按钮, 请参考 Buttons.

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

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

标签 (Label)

标签用于放置静态文本.

API NOTE
想了解如何在代码中定义标签, 请参考 UILabel Class Reference.

标签是:

• 展示任意数量的静态文本
• 文本可能会被用户复制, 除此之外一切交互行为都是不允许的

使用标签去命名或描述你的界面的某个部分, 或者为用户提供简短的信息提示. 标签最好显示相对少量的文字.

尽量做到让你的标签清晰可辨. 显示在一个标签里的内容, 最好是支持动态类型和使用 UIFont 的方法preferredFontForTextStyle 来获取文本. 如果你选择使用自定义字体, 不要为了使用花式的字体或亮丽的色彩而牺牲可读性. (关于应用中使用文字的指南, 请参考 Color and Typography; 想了解更多关于动态类型, 请参考 Text Programming Guide for iOS 中的 Text Styles.)

网络活动指示器 (Network Activity Indicator)

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

API NOTE
你可以在代码中使用 UIApplication 的方法 networkActivityIndicatorVisible 来控制该活动指示器的可见性.

网络活动指示器是:

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

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

页面控件 (Page Control)

页面控件告诉用户当前共打开了多少个视图, 以及当前正处于那一页. (下图是天气应用中的页面控件)

API NOTE
想了解如何在代码中定义页面控件, 请参考 Page Controls.

页面控件是:

• 包含一系列圆点, 圆点的个数代表了当前打开的视图数量 (从左到右, 这些圆点代表了视图打开的先后顺序).
• 默认情况下, 使用不透明点来标识当前打开的视图, 使用半透明点来表示所有其它视图.
• 不允许用户访问不连续的视图
• 当显示视图数量过多时, 点的间距并不会因此减少 (如果需要显示的点超过页面所限时, 则会被截断.)
• 不适用默认的视图之间导航方式; 仅只支持页对页 (view-to-view) 的导航方式且要随时更新控件的当前状态.

页面控件最重要的功能是让用户了解有多少个开启的视图并且帮助他们选择特定视图，页面控件是专为这种任何一个视图都与其他视图处于同一级的应用设计的。

不要使用页面控件来显示有层级的视图或其他复杂布局. 页面控件无法显示视图之间的关联关系, 也不能指示每个视图与每个点的对应关系, 所以它不能帮助用户导航到一个特定的视图.

避免显示过多的点. 超过10个点就会让用户难以一扫而知, 而如果有超过20个视图, 逐个访问是十分低效的方式. 如果你的应用中用户需要访问超过20个视图，可以尝试用带有更多信息说明及允许不连续访问的布局方式显示这些视图.

将页面控件垂直居中放置于当前开启的视图底部边缘与屏幕底边之间. 这个位置即可以保证它的可见性又不会阻碍用户.

选择器 (Picker)

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

API NOTE
想了解如何在代码中定义选择器, 请参考 UIPickerView Class Reference.

选择器是:

• 一个简化版的日期选择器 (想了解更多关于日期选择器的信息, 请参考 Date Picker)
• 包括一个或多个滑轮, 每个滑轮含有一组值
• 当前选中的值在中间, 以深色字体标识
• 尺寸不可更改 (选择器的尺寸与 iPhone 键盘相同)

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

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

尽可能让让用户在当前视图中使用选择器. 不要让他们在使用选择器时还要进入其它的视图.

如果你需要展示的备选项数量很多, 考虑使用表格视图 (Table View) 而不是选择器. 因为表格视图的高度较大, 内容滚动起来会更快.

进程视图 (Progress View)

进程视图展示了时间可预计的任务或进程的进度 (下图是邮件应用的工具栏).

API NOTE
想了解更多如何在代码中定义进度视图, 参考 UIProgressView Class Reference.

进程视图是:

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

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

• • 默认 (Default). 默认样式包含未填充的轨迹, 适合独立放置在主要内容区中.

• • 进度条 (Bar). 进度条样式不包含未填充的轨迹, 因为其需要与栏组合使用, 例如导航栏或工具栏.

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

可以的话, 请根据你应用的风格来设计进度条的外观. 进度条的轨迹和填充都可以自定义颜色, 也可以直接使用图片.

刷新控件 (Refresh Control)

刷新控件执行用户发起的内容刷新操作——它常在表格中出现 (下图是邮件应用的收件箱列表页).

API NOTE
想了解如何在代码中定义刷新控件, 请参考 UIRefreshControl Class Reference.

刷新控件是:

• 看起来类似活动指示器
• 可以显示一个标题
• 默认状态下不可见, 只有当用户发起刷新操作时 (在表格上缘往下拖拽时) 才出现

刷新控件可以让用户用一种一致的方式立即更新表单或者其他视图的内容, 无需等待自动更新.

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

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

圆角矩形按钮 (Rounded Rectangle Button)

iOS7 已经不再使用圆角矩形按钮, 而是使用了新的系统按钮——类型为 UIButtonTypeSystem 的 UIButton. 使用指南可参考 UIButtonSystem Button.

分段控件(Segmented Control)

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

API NOTE
想了解如何在代码中定义分段控件, 请参考 Segmented Controls.

分段控件是:

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

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

保证每个分段都容易点击. 为了保证每个分段的大小有至少44×44像素, 请控制分段的数量. 在iPhone上, 1个分段控件最多包含5个分段.

尽可能地保持每个分段中的文字长度一致. 因为每个分段都是等宽的, 当文本长度差异很大时看上去会很不协调.

不要在同一个分段控件中混用文字和图片. 每一个分段都仅可支持纯文字或纯图片. 避免在同一个分段控件中, 一些分段里使用纯文字, 另一些分段里使用纯图.

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

滑动器 (Slider)

滑动器允许用户在一个限定范围内调整某个数值或进程(下图展示的是 iOS 设置中亮度设置的滑动器, 滑动器的左边和右边均为自定义图形).

API NOTE
想了解如何在代码中定义滑动器, 请参考 Sliders.

滑动器是:

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

使用滑动器来让用户精准地选择自己想要的值, 或者控制当前的进程.

如果合适的话, 自定义滑动器的外观. 比如, 你可以:

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

不要将滑动器用作控制音量. 如果需要用到音量滑动器, 可以用 MPVolumeView 类中自带的系统默认音量滑动器. 注意, 如果当前处于活动状态的音频输出设备不支持音量控件, 音量滑块将被恰当的设备名称取代。

步进器 (Stepper)

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

API NOTE
想了解如何在代码中定义步进器, 请参考 Steppers.

步进器是:

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

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

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

确保步进器所调整的值明显可见. 步进器自身不展示任何数值, 所以你需要保证让用户知道他们正在调整哪一个数值.

开关 (Switch)

开关展示了两个互斥的选项或状态.

On	Off

API NOTE
想了解如何在代码中定义开关, 请参考 Switches.

开关是:

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

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

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

系统按钮 (System Button)

系统按钮执行应用中特定的行为.

API NOTE
在 iOS7 中, UIButtonTypeRoundedRect 已经被重新定义为 UIButtonTypeSystem. 如果在 iOS6 中使用了圆角矩形按钮, 在连接到iOS 7的时候会自动替换为新的系统按钮. 
想了解如何在代码中定义系统按钮, 请参考 Buttons.

系统按钮是:

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

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

• • 使用动词或动词短语来描述按钮所代表的动作. 这种命名方法告诉用户这个按钮是可交互的, 也提示了用户点击之后会执行什么操作
  • 使用标题式大写(title-style capitalization). 除了冠词, 并列连词以及少于4个字母的介词外, 标题中每个单词的首字母均大写.
  • 标题不要太长. 太长的标题会被截断, 让用户难以理解其含义.
  • 合适的话, 为内容区域内的系统按钮描边或者加入背景. 大多数情况下, 你可以通过定义一个清晰的按钮名称、选择一个不一样的标题颜色或提供上下文情景提示来让用户知道这是一个按钮而非普通文本. 但在某些特定的内容区域内, 为按钮描边或者添加背景颜色, 让用户迅速地把注意力放到按钮上, 也是必要的.

以 iPhone 为例, 给数字按键添加圆形边框迎合了用户拨电话的心智模型, 而拨打按钮的背景色更受到用户瞩目从而容易被使用.

文本框 (Text Field)

文本框支持用户输入单行的文本.

API NOTE
想了解如何在代码中定义文本框, 以及在文本框中支持图片和按钮, 请参考 Text Fields.

文本框是:

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

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

你可以自定义一个文本框, 帮助用户更好地理解如何使用它. 举个例子, 你可以在文本框的左侧或者右侧加入自定义图形, 或者加入系统按钮, 如书签按钮等. 一般来说, 文本框的左侧用于表述文本框的含义, 而右侧用于展示附加的功能, 如书签.

合适的话, 在文本框右侧加入清除按钮. 轻击清除按钮变可清空当前框内输入的全部内容, 无论你原本打算在这个按钮上面展示什么其它图片.

如果可以帮助用户理解的话, 可以在文本框中加入提示文字. 当文本框里没有任何其它提示文字时, 会展示占位符文本(placeholder text), 如名字、地址等.

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