iOS12界面设计指南之栏(Bars)–导航栏(Navigation Bars)

导航栏出现在应用屏幕的顶部,状态栏之下,它能实现在一系列有层级的应用页面间的导航。当进入一个新页面时,导航栏的左侧会出现一个返回按钮,并且一般会标有上一个页面的标题。有时,导航栏右侧还有含有类似编辑或完成按钮的控件,用来管理当前视图的内容。在分屏视图内,导航栏可能只会出现在分屏视图的一个单独窗格。导航栏是半透明的,也可能会有一个背景颜色,并且在适当时可以被隐藏,比如当前屏幕有键盘时、施加了某手势时或是某个视图在调整大小时。

TIP:当不需要导航或是你需要多个控件来管理当前内容时,请使用工具栏。

考虑在导航栏显示当前视图的名称(Consider showing the title of the current view in the navigation bar. )在大多数情况下,名称提供了环境,因为它让用户知道他们在看什么。但是,如果给导航栏命名看起来是多余的,你可以让名称栏空着。比如,备忘录(Notes)不会在当前笔记的导航栏上放名称,因为内容的第一行已经提供了所需的环境线索。

考虑在应用最高层级的导航栏放置一个分段控件(Consider putting a segmented control in a navigation bar at the top level of an app. )如果这么做帮助你扁平信息层级,让用户更容易找到他们想要的内容,你会深受其益。如果你在导航栏使用了分段控件,请确保为返回按钮选择了正确的标题。了解更多指导,请参阅 Segmented Controls。

不要包涵多段的面包屑路径(Avoid crowding a navigation bar with too many controls.)返回按钮只能执行一个单独的操作,即返回到上一屏。如果你认为用户可能会因为忘记到达当前屏的完整路径而迷路,请考虑扁平你的应用层级。

避免用过多控件填充导航栏(Don’t include multisegment breadcrumb paths.)一般来说,导航栏最多只能包含当前视图的标题、返回按钮以及一个管理当前视图内容的控件。如果你在导航栏使用了分段控件,除此之外,该栏就不应再包含标题或其它控件。

给文本按钮留出足够的空间(Give text-titled buttons enough room. )如果你的导航栏含有多个文本按钮,文本可能会让多个按钮看起来像是同时运行的,导致按钮间难以区分。在按钮之间插入固定空间项使它们隔开。了解开发细节,请参阅 UIBarButtonItem Class Reference中的UIBarButtonSystemItemFixedSpaceconstant value。

考虑在显示全屏内容时暂时隐藏导航栏(Consider temporarily hiding the navigation bar when displaying full-screen content.)当你想要关注内容时,导航栏会令人分心。暂时隐藏该栏以提供一个更加沉浸式的体验。地图应用在浏览一个全屏地图时会隐藏导航栏及其它界面元素。如果你要隐藏导航栏,允许用户通过简单的手势复原导航栏,比如点击。

使用标准的返回按钮(Use the standard back button.)用户已经知道,标准的返回按钮会让他们在信息层级中按原路径返回。但是,如果你使用了自定义的返回按钮,请确保它们看起来像是返回按钮,有直观的表现,和界面的其它部分保持一致,并且在应用内统一使用该自定义按钮。如果你用自定义图片替换了系统提供的返回按钮,请同时提供一个自定义遮罩图片(custom mask image)。iOS使用这个遮罩来实现按钮标题在转场时的过渡动画。