返回《iOS Human Interface Guidelines译文》

导航栏

导航栏用于在层级结构的信息中导航,也可以用来管理屏幕信息

导航栏

欲知更多,详见"Navigation Controllers"和"UINavigationBar Class Reference."

外观和行为

导航栏位于屏幕的顶部,上面紧邻状态栏。导航栏通常居中显示当前这一屏的标题。当在层级信息间穿梭时, 用户可以触摸导航栏左边的返回按钮回到上一层。 用户还可以使用导航栏上与当前内容相匹配的控件来管理屏幕内容。

所有在导航栏里的控件都放在凿出的坑里,这在 iOS 里被称为边框样式(bordered style) 。如果你把一个没边框的控件嵌在导航栏里,它会自动变成边框样式。

在 iPhone 里,把屏幕从竖屏转成横屏模式会自动改变导航栏的高度(估计是想在横屏模式留出更多的空间给内容) 。在 iPad 上,导航栏的透明度和高度不会随旋转改变。

在 iPhone 上,导航栏的是整屏通栏显示的。在 iPad 上,导航栏可能会嵌在分栏中的某一栏里,不会横贯整屏。

指南

你可以使用导航栏在不同视图间切换,或者在上面放置可以操纵内容的控件。

使用当前视图的标题作为导航栏的标题。当用户浏览到新的层级时,应该做这样两件事:

♦ 导航栏标题变成新层级的标题。

♦ 标题左侧出现返回按钮,写着前一级的标题。

确保导航栏上的文字容易懂。系统字体的可读性最强,合适的话你也可以自定义字体。 使用工具栏取代导航栏。 如果你需要放置很多控件, 或者不需要导航时, 就用工具栏吧。

考虑在程序的最顶一级的工具栏放置分段控件(segment control) 。如果能够帮助你扁平化信息结构,让用户更容易找到想要的东西,这样做就会很有用。如果你在导航栏上使用分段控件, 要给子层次的导航栏返回按钮找好标题。 详情请查看 "分段控件" 。

避免用过多的控件填满导航栏,即使看起来好像有足够的空间。除了标题外,导航栏上最多放一个返回按钮,一个操作内容的控件。如果你要在导航栏上放分段控件,就不要放标题或其他控件了。

根据控件的意义选择系统提供的按钮。详情请查看 "工具栏和导航栏中使用的标准按钮"。如果你决定定制自己的导航栏控件,请到 "导航栏、工具栏和 tab 栏上用的图标"查看设计建议。

有必要的时候,定义导航栏的颜色和透明度。

如果你想让导航栏与程序协调起来, 可以定制一下导航栏的颜色。 如果想让用户更关注栏下的内容,甚至可以把栏弄成半透明的。

如果你要这样定制导航栏, 确保它和程序的其外部分外观协调起来。 要是使用半透明的工具栏,就不要使用不透明的工具栏。而且,当设备在同一方向上时,不要让不同屏上的导航栏颜色和透明度变来变去的。

避免改变返回按钮的外观和行为。用户依赖标准的返回按钮帮助他们在层级信息中找到回家的路。

不要创建分段的返回按钮(类似于面包屑)

♦ 使用分段返回按钮会导致很多问题:

♦ 分段控件太长,都没空放标题了

♦ 没法展示某一段的选中态

♦ 段越多,每一段的可点击区域越小,用户想按某一个不好按

♦ 当层级很深时,选择层级的哪一部分来展示是个问题

也许你觉得没有分段返回按钮展示的面包屑, 用户就会迷路, 那说明在你的程序里用户必须进入很深的层级才能获得信息。那么,还是把你的层级扁平化吧。

在 iPhone 上,要考虑到由于设备方向变化导致的导航栏自动改变。确保你定制的导航栏图标适应横屏条件下的窄栏。不要把导航栏的高度写死。