导航栏显示在应用界面的顶部、状态栏的下方,并通过一系列层级界面进行导航。显示新界面时,栏左侧将显示一个后退按钮,并标有上一层界面的标题。有时,导航栏的右侧包含一些控件,如「编辑」或「完成」按钮,用于管理活动视图中的内容。在拆分视图中,导航栏可能显示在拆分视图的单个窗格中。导航栏是半透明的,可能具有背景色调,当屏幕上出现键盘、发生手势或调整视图大小时,导航栏可以配置为隐藏。
显示全屏内容时,考虑暂时隐藏导航栏。当要关注内容时,导航栏可能会分散注意力。暂时隐藏导航栏,以提供更沉浸的体验。在全屏查看照片时,照片会隐藏导航栏和其他界面元素。如果实现此类行为,也要允许用户使用简单的手势来还原导航栏,如点击。
有关开发人员指南,请参阅 UINavigationBar。
提示 当不需要导航或需要多个控件来管理内容时,请使用工具栏。请参阅> 工具栏。
导航栏标题
考虑在导航栏中显示当前视图的标题。在大多数情况下,标题可以帮助人们了解他们正在查看的内容。但如果带标题的导航栏看起来多余,则可以将标题留空。例如,「备忘录」不为当前便签提供标题,因为第一行内容提供所需的所有上下文。
当你要特别强调场景时,请使用大标题。大标题不应与内容竞争,但在某些应用中,大标题大而粗体文本可以帮助引导用户浏览和搜索。例如,在选项卡式布局中,大标题可帮助明确当前的选项卡,并指示人们何时滚动到了顶部。手机使用此方法,而「音乐」使用大标题来区分内容区域,如专辑、艺术家、播放列表和电台。在 iOS 13 及更高版本中,默认情况下,大型标题导航栏不包含背景 material 或投影。此外,当人们开始滚动内容时,大标题将会转换为标准标题。有关开发人员指南,请参阅 prefersLargeTitles。
考虑隐藏大标题导航栏的边框。在 iOS 13 及更高版本中,你可以通过删除栏的投影来隐藏导航栏的底部边框(当用户滚动内容区域时,边框会自动重新出现)。无边框样式的大标题导航栏效果很好,因为它增强了标题和内容之间的连接感。但是,无边框样式在标准标题导航栏中可能效果不佳,因为导航栏的标题和按钮可能难以区分。iPad 上的拆分视图中存在例外:你可能在主视图和详情视图中都使用无边框样式,以此保持两者的一致性。
导航栏控件
避免将具有过多的控件挤入导航栏。通常,导航栏内容不应多于:视图当前标题、后退按钮和一个管理视图内容的控件。如果在导航栏中使用分段控件,则导航栏就不应包含标题或分段控件以外的任何控件。
使用标准后退按钮。用户知道,标准后退按钮允许他们通过信息层次结构回溯。但是,如果使用自定义的后退按钮,请确保它仍然看起来像一个后退按钮,行为直观,与界面的其余部分相匹配,并且在整个应用中保持一致。如果将系统提供的 V 形后退按钮替换为自定义图像,请同事提供自定义蒙版图像。iOS 会在过渡期间使用此蒙版为按钮标题设置动画。
不要使用面包屑导航路径。后退按钮始终执行一个操作 —— 返回到上一屏幕。如果你认为,如果没有到当前屏幕的完整路径,人们可能会迷路,请考虑将应用的层次结构扁平化。
为文本标题按钮提供足够的空间。如果你的导航栏包含多文本按钮,这些按钮的文本可能显示在一起,而导致这些按钮无法区分。可以在按钮之间插入固定间距,来进行分隔。有关开发人员指南,请参阅 UIBarButtonItem 中 UIBarButtonSystemItemFixedSpace 的常量值。
请考虑在导航栏中使用分段控件,来使应用的信息层次结构扁平化。如果在导航栏中使用分段控件,只在层级的顶层使用,并确保在较低级别选择准确的后退按钮标题。有关其他指导,请参阅分段控制。