[翻译] UI元素 – 栏 (Bars) – 人机交互指南 for iOS7

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

状态栏 (The Status Bar)

状态栏展示了关于设备及其周围环境的重要信息. (在iPhone顶部出现)

默认(深色内容)状态栏

浅色内容状态栏

状态栏是：

• 半透明的
• 始终出现在设备屏幕的上边缘

API NOTE
你可以将状态栏样式设计为全应用统一, 也可以针对独立的视图配置与之匹配的状态栏样式. 想了解更多, 请阅读 UIApplication Class Reference 中关于 UIStatusBarStyle 常量的内容, 以及 UIViewController Class Reference 中关于 preferredStatusBarStyle 属性的内容.

不要自定义状态栏的样式. 用户依赖于系统状态栏所提供的一致性. 就算你在应用中隐藏了它, 也好于创建一个自定义UI来代替它.

避免滚动时内容透过状态栏展示. 当用户滚屏时, 你显然不希望他们看到在状态栏区域里内容和状态栏重叠在一起. 想要给用户足够的空间感同时还能确保最佳的可读性的话, 最好让状态栏有一个可以盖住内容的朦胧的背景. 这里有一些方法可以避免滚动时内容会透过状态栏被看到：

• 使用导航控制器显示内容, 导航控制器会自动显示状态栏的背景, 保证内容视图不会在状态栏下出现. (想了解更多关于导航控制器, 请参考 Navigation Controllers.)
• 创建一个低调一点的自定义背景图, 例如渐变色的, 将其显示在状态栏后面. 为了确保背景图始终待在状态栏后面, 你需要使用视图控制器让背景图处于滚动视图的上一层, 或在滚动视图中设置其固定在顶层.
• 内容的位置最好不要和状态栏区域重叠 (就是在应用的 statusBarFrame 属性中定义的状态栏区域), 如果一定要这样做的话, 你需要用窗口的背景色给状态栏设置一个纯色背景.

尽量避免把焦点内容放置在状态栏区域. 特别是不要暗示用户点击导航条区域可以访问内容或激活控件.

保持状态栏隐藏的话一定要思考再三. 因为状态栏是半透明的, 所以通常没有必要隐藏它. 如果要在应用里一直隐藏状态栏, 那意味着用户要切换出去才能看时间或确认是否链接wifi

当用户全屏观看媒体文件时, 可以考虑把状态栏藏以及其他控件隐藏起来. 如果真这么做的话, 记得允许用户轻触屏幕的时呼出它们. 最好别自定义呼出状态栏的手势, 除非你有很必要的理由. 否则用户既不容易发现, 又很难记住.

为你的应用选择配色协调的状态栏颜色. 默认的样式是深色内容, 和顶部区域是浅色的应用很搭, 而浅色内容状态栏则更适用于顶部颜色较深的应用.

恰当地使用网络活动指示器. 在状态栏上显示网络活动指示器, 这可以提醒用户正在进行远程网络链接, 详情请参见 Network Activity Indicator

导航栏 (Navigation Bar)

导航栏用于在信息层级之间切换, 也可以用来管理屏幕上的内容.

导航栏是：

• 半透明的
• 通常置于屏幕顶部, 状态栏的下方. 
  在iPad中, 导航栏也可以显示在某一个视图中, 而非贯穿整个屏幕, 例如只在对分视图控制器的其中一个窗格中使用
• 当iPhone改变屏幕方向时自动调整高度, 而在iPad中任何方屏幕向都维持高度不变

API NOTE
导航控制器中包含了导航栏, 这是管理自定义视图层级显示的可编程对象.  想了解如何在代码中定义导航栏, 请参考 Navigation Controllers 和 Navigation Bars.

导航栏主要作用是在不同视图间进行导航, 另外在上面放置管理页面内容的控件也是可以的. 但如果有一组控件就不要充塞在导航栏上了, 应该考虑使用工具栏代替之 (了解更多请参考 Toolbar)

当用户浏览到新的层级时, 会发生两件事：

• 如果使用导航栏, 导航栏标题要显示新层级的标题.
• 标题左侧出现返回按钮, 并示以上一层级的标题.

当新建一个视图时, 应使用该视图的标题作为导航栏的标题. 如果标题看起来是多余的, 可以将导航栏留空. 例如, 应用 Note 的当前便签就没有标题, 因为第一行内容就可以让用户理解前后关系.

考虑在应用程序顶层的导航栏上放置分段控制器. 这么做有助于让信息层级扁平化, 让用户更容易找到他们想要的东西. 如果你在导航栏中使用分段控制器, 一定要确保选择了正确的返回按钮标题. (更多使用指南, 请参考 Segmented Control.)

如果有必要, 可以考虑用一个提示向用户说明可以在当前屏可以做什么. 提示是显示在导航栏的顶部附近一段简短的句子. 例如, 应用 Stocks 使用了一条提示告诉用户如何搜索到他们所需的信息.
如果要使用提示, 编写一段简洁的单行句子, 并用正确的标点结尾.

避免额外的控件让导航栏变得拥挤, 即使看起来还有充足的空间. 一般来说, 一个导航栏最多包括当前视图标题、返回按钮以及一个用来管理视图内容的控件. 如果你在导航栏中使用了分段控件, 那么导航栏就不能展示标题了, 也不应该再放置分段控件以外的任何控件.

要确保文本标题按钮有足够的空间. 导航栏中, 如果左边和右边多个按钮项目之间没有足够的空间, 那么文本标题就会挤到一起, 很难让用户区分彼此. 如果导航栏中的按钮标题看起来太接近, 那可以用 UIBarButtonSystemItemFixedSpace 在它们中间添加适当的空间. (了解更多关于这个内容的常量, 可参考UIBarButtonItem Class Reference.)

确保自定义导航栏与你的应用程序外观和风格一致. 例如, 不要把一个不透明的导航栏和一个半透明的工具栏组合在一起. 而且, 设备方向保持不变时, 要避免不同屏幕上导航栏的图片、颜色或透明度发生改变.

确保自定义返回按钮看起来像个返回按钮, 用户知道标准的返回按钮可以按原路退回上一信息层级. 如果你决定使用自定义图片替换系统所提供的, 你需要自定义一个遮盖图 (mask image) . iOS7使用遮盖图实现返回按钮的标题从图标中浮出或隐入的过渡效果.

IMPORTANT
不要创建多级 (multisegment) 返回按钮, 返回按钮永远只能返回当前页面的父级. 如果你认为用户没有一个面包屑般的多级返回按钮就会迷失在你的应用中, 那多半说明你的信息层级应该扁平化.

在iPhone上, 要将设备持握方向改变时导航栏高度的自动变化考虑进去. 特别注意, 要让你的自定义图标也适用于横屏时变窄的导航栏. 不要在程序里指定导航栏的高度; 而应该利用 UIBarMetrics 常量来确保内容自适应.

工具栏 (Toolbar)

工具栏中的控件可以执行与屏幕或视图上对象相关的动作.

工具栏是

• 半透明的
• 在iPhone上, 工具栏总是出现在屏幕或视图的底部边缘, 但在iPad上, 还可以出现在屏幕或视图的上边缘.
• 当iPhone改变屏幕方向时自动调整高度, 而在iPad中任何方屏幕方向都维持高度不变.

API NOTE
工具栏通常会包含在导航控制器中, 这是一个管理自定义视图层级展示的对象. 想了解如何在代码中定义工具栏, 请参考 View Controller Catalog for iOS 中的 Displaying a Navigation Toolbar 以及 Toolbar.

使用工具栏来提供一系列用户可以在当前环境中采取的行动.

涵盖了当前环境中最频繁使用的命令才有意义. 尽量避免在用工具栏上只提供一些偶尔有用的命令

考虑使用分段控件来控制在当前环境下不同的视角或模式的切换. 不要让工具栏上的分段控件支持应用全局的任务或模式切换, 因为工具栏只能对当前屏或视图起作用. 如果需要在你的应用中提供全局任务, 视图或模式切换, 可以用标签栏完成. 想了解更多关于分段控件, 请参考 Segmented Control; 想了解更多关于标签栏, 请参考 Tab Bar.

如果你需要在工具栏上展示3个以上的项目, 可使用图标. 因为文本标题按钮比图标占用了更多空间, 所以防止标题拥挤在一起是件麻烦事儿.

确保文本标题按钮有足够的空间. 如果工具栏中的图标间没有足够的空间, 文本标题就会挤到一块儿, 用户很难把它们区分开来. 如果工具栏中的按钮标题看起来太接近, 那可以用 UIBarButtonSystemItemFixedSpace 在它们中间添加适当的空间. (更多关于这个常量的内容, 请参考 UIBarButtonItem Class Reference)

在iPhone上, 为因设备方向旋转而产生的工具栏高度变化做好准备. 尤其是要确保你的自定义工具栏图标可以很好的适应设备横屏模式下较细的bar. 不要以编程方式指定工具栏的高度, 相反要充分使用 UIBarMetrics 常量来确定内容适配得当.

工具栏和导航栏按钮 (Toolbar and Navigation Bar Buttons)

iOS提供了许多在内建应用中广泛使用的的工具栏和导航栏标准按钮. 了解如何设计自定义图标, 参考 Bar Button Icons. 工具栏和导航栏中的各种项目都可以使用 tintColor 属性改变颜色.

想了解这些按钮的符号含义和用法请见 Table 35-1, 相关文档请参考 UIBarButtonItem Class Reference 中的 UIBarButtonSystemItem一节.

IMPORTANT
与所有标准按钮和图标一样, 有必要基于语义含义来使用按钮, 而不是根据其外观. 这样即便关联特定意义的按钮改变了外观, 也可以保证你的应用的UI仍然可用.

Table 35-1 可用于工具栏和导航栏标准按钮

按钮	名称	含义
	分享	打开动作选单, 列出作用于特定内容的系统默认或应用专有服务.
	相机	打开动作选单，以显示拍照模式下的照片选择器.
	撰写	在编辑模式下打开新消息视图.
	书签	显示应用特定的书签.
	搜索	显示搜索区框.
	创建	创建一个新条目.
	删除	删除当前条目.
	分组	将某项移动或传送至应用程序的目标位置, 如某文件夹.
	回复	将某项发送或传送至其他位置.
	刷新	刷新内容(仅当必要时使用, 否则自动刷新).
	播放	开始播放媒体或幻灯片.
	快进	在播放媒体或幻灯片时快进.
	暂停	暂停播放媒体或幻灯片(请注意这意味着要保持当前播放位置).
	回退	在播放媒体或幻灯片回退.

除了 Table 35-1 中列出的按钮, 还可以用系统提供的编辑, 取消, 保存, 完成, 撤销和重做等按钮支持你的应用上的编辑或其他的内容操作. 这当中每个按钮的外观都有自己的文本标题. 想了解这些按钮的符号含义和用法, 可参考 UIBarButtonItem Class Reference 中的 UIBarButtonSystemItem 一节.

你也可以在工具栏中使用系统提供的Info按钮：

标签栏 (Tab Bar)

标签栏赋予用户在不同子任务, 视图或模式中切换的能力

API NOTE
标签栏包含在标签栏控制器中, 这是一个用来管理一系列自定义视图展示的对象. 想了解如何在代码中定义导航栏, 请参考 Tab Bar Controllers 和 Tab Bars.

标签栏是：

• 半透明的
• 永远置于屏幕的底部边缘
• 在iPhone上一栏最多只能显示5个标签 (如果应用有更多标签, 那么标签栏会显示其中四个, 其余的会以列表形式出现在 “更多” 标签里面.)
• 在任何方屏幕方向都维持高度不变
• 可以显示徽标. 徽标是一个红色圆圈, 包含白色文本, 或者一个数字, 或者感叹号. 用以传达应用中特定的信息.

标签栏是让用户访问同一数据集的不同视角或与应用整体功能相关的各子任务.

一般来说, 使用标签栏来组织应用层次信息. 标签栏适合在应用主界面中使用, 可以很好地将你的信息层级扁平化, 并且可以让用户同时访问几个同级信息类别或者模式.

不要使用标签栏为用户提供可作用于当前模式或者屏幕中元素的控件. 如果你需要为用户提供这种控件, 可以用工具栏代替 (使用指南可参考 Toolbar).

不要移除功能不可用的标签. 作为你应用程序一部分的标签如果在当前环境中不可用, 那么展示一个禁用标签要好过移除标签. 如果你在这种情况下移除标签而在其它情况显示, 就会让用户认为你应用的UI不稳定且不可预期. 最好的方法是确保所有的标签都固定显示, 但要解释为什么有些标签是不可用的. 比如, 如果用户的iOS设备上没有任何歌曲, 那么音乐应用中的歌曲标签就用第一屏来解释如何下载歌曲.

考虑为标签图标添上一个不显眼的小徽标来传达信息. 你可以在标签栏的图标上展示一个徽标来暗示该视图或者模式有相关新消息.

在iPad上, 你可以在对分视图窗口或者弹出层中使用标签栏. 可以用于切换标签或筛选视图中的内容. 不过, 在对分视图窗口或弹出层底部边缘放置分段控件效果更好, 因为分段控件的外观与这两者的外观更协调. (了解更多分段控件相关内容, 可参考 Segmented Control)

在iPad上, 避免添加过多标签让标签栏变得拥挤. 放置过多标签会给用户点中目标制造难度. 同时, 你添加的每个额外标签都会增加应用的复杂性. 一般来说, 把主界面或右窗口上标签数目限制在7个以内. 而弹出窗(popover)或者对分视图(split view)的左窗口上, 五个标签比较合适.

在iPad上, 避免创建 “更多” 标签. 在iPad应用中, 用整整一屏展示 “更多” 标签的列表纯粹是浪费空间.

横屏或竖屏模式下展示相同的标签可以提高iPad应用的视觉稳定性. 竖屏模式下, 推荐使用7个标签. 横屏模式下, 你应该在屏幕上居中展示相同的标签. 该指南同样适用于对分视图(split view)窗口或者弹出窗(popover)中的标签栏. 比如, 如果你在竖屏模式下使用标签栏, 那么横屏模式下, 它也能很好地展现在对分视图(split view)的左窗格中.

标签栏图标 (Tab Bar Icons)

Table 33-2 是 iOS 提供的用在标签栏中的标准图标的说明. 要了解如何设计自定义标签栏的图标, 请参考 Bar Button Icons. 标签栏图标可以使用 tintColor 属性改变颜色.

想了解这些按钮的符号含义和用法请见 Table 35-2, 相关文档请参考 UIBarButtonItem Class Reference 中的 UIBarButtonSystemItem.

IMPORTANT
与所有标准按钮和图标一样, 有必要基于语义含义来使用图标, 而不是根据其外观. 这样即便关联特定意义的按钮改变了外观, 也可以保证你的应用的UI仍然可用.

Table 35-2 可在标签栏的标签上使用的标准按钮

图标	名称	含义
	书签	显示应用特定的书签.
	联系人	显示联系人.
	下载	显示下载项.
	收藏夹	显示用户设定的收藏夹.
	特色	显示应用的特色内容.
	历史	显示用户操作历史.
	更多	显示额外的标签栏项.
	最近的	显示最近使用的项.
	最关注	显示所有用户最关注的项.
	最近	显示在应用定义的一段时间内用户访问过的项.
	搜索	进入搜索模式.
	最高分	显示用户评分最高的项.

搜索栏 (Search Bar)

搜索栏接受用户输入用以搜索的文本 (同时在上面显示预置文字)

API NOTE
想了解如何在代码中定义工具栏, 请参考 Search Bars.

搜索栏可显示一些可选元素, 例如：

• 占位文本. 是描述控件的功能的文本. 例如 “搜索” , 或者提醒用户他们使用的搜索环境 (例如 “Google”).
• 书签按钮. 书签按钮可以提供信息的短链接, 方便用户表下次轻松找到他们想要的信息. 例如, 地图搜索模式下的书签按钮, 可以让用户访问书签地址、最近搜索记录以及联系人.只有在搜索栏中没有用户输入内容或其他非占位文本 (nonplaceholder text) 时书签按钮才会显示. 当搜索栏中含有这些文本时, 会显示清除按钮以便用户清除文本.
• 清除按钮. 大部分搜索栏包含可以让用户一键清除搜索栏中文本的清除按钮.当搜索栏中包含任何非占位文本时, 清除按钮出现并可以用其清除文本. 当搜索栏中没有用户输入内容或其他非占位文本时, 清除按钮是隐藏的.
• 搜索结果列表图标. 该图标用以指示展现搜索结果展现. 当用户点击结果列表图标, 应用就会展示他们最近的搜索结果.
• 提示. 描述性的标题, 称作提示, 出现在搜索栏的上方. 提示通常是一个短语, 提供关于搜索栏的介绍或使用场景.

务必在应用中使用搜索栏来提供搜索功能. 不要使用文本框提供搜索, 因为文本框不具备用户熟知的标准搜索框的外观.

在 iOS7 及之后的版本中, 使用 UISearchDisplayController 可让在导航栏中插入搜索栏变得简单. Note 的搜索视图下的导航控件实际上是由搜索控件构成的 (Note that when a search display controller’s view controller is contained within a navigation controller) , 同样的例子是在 Mail 中, 当用户发起搜索时, 搜索栏会自动转换到导航栏上.

通过选择搜索栏样式加强在你应用中搜索的重要性. 如果在你的应用中搜索是主要功能, 你可能需要使用强化样式; 如果用户不常用到搜索, 你也许需要使用弱化样式.

搜索栏强化样式(如 Mail 中所示)

搜索栏弱化样式(如 Music 中所示)

范围选择栏 (Scope Bar)

范围栏仅和搜索栏一起出现, 允许用户定义搜索范围.

API NOTE
想了解如何在代码中定义范围选择栏, 请参考 Search Bars.

当搜索栏出现时, 范围选择栏会出现在其旁边. 而且范围选择栏与搜索栏要有一致的外观.

当搜索内容被明确定义或者有用户想要搜索的典型类别时, 展示范围选择栏会非常有效. 当然, 改进搜索结果让用户不必选择范围才是最好的.