iOS 组件图鉴 —— Navigaiton Bars

Navigation Bar 出现在 app 顶部,处于状态栏之下,他的作用是帮助用户在一系列不同层级的界面之间穿梭。**通常伴随返回箭头与上一个页面的 title。(如果没有,写 Back 也行)**在需要时它的右侧可以带有一些常用的操作按钮,例如编辑与完成等等。当处于分隔 view 的时候,navigaiton bar 无需通栏。navigation bar 是透明的,但可以带有一定的背景色。

当需要沉浸式设计的时候,可以考虑隐藏 navigaiton bar,在这种情况下,最好让用户可以通过简单的操作,例如点击或某个方向的滑动呼出 navigaiton bar。

Navigaiton Bar 的 title

在有需要的时候于 navigation bar 展示当前页面的 title,**但是如果没有必要、或当前页面 title 过长的时候可以选择不显示 title。**例如,Notes 就不会显示 title,因为当前页面的场景与内容无需使用 title 来作为当前位置的说明与补充。

**在有需要的时候使用large title。**Large title 的作用除了对当前场景有额外的强调作用外还暗示了当前已处于页面顶端。Large title 不会与 Tab Bar 同时存在,因为 Tab Bar 对当前位置以有足够明显的说明。

Navigation Bar 的控制按钮

**避免让 Navigation Bar 布局了太多的操作按钮。**尽量避免让 Navigation Bar 有超过了“返回、title以及一个操作按钮”以外的操作元素。例如,在 Navigation Bar 使用了 segmented control,就不要带返回按钮和 title 了。

**使用标准返回按钮或外观上与返回按钮相近的图标作为返回按钮。**另外,如果使用了自定义的返回按钮,最要也要提供一个 mask,因为 iOS 需要这个 mask 来做 title 的动画。

不要在 Navigation Bar 里面使用面包屑导航,如果你的层级非常复杂,考虑优化你 app 的层级。

在 Navigaiton Bar 里,如果按钮的 title 太短小,考虑使用热区来增大操作有效区域。