Material Design 组件图鉴 —— Bottom navigation

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. 一级界面的导航栏

使用
  • 三至最多五个一级界面。
  • 界面间没有跳转，直接到达。
  • 重复点击或可以进行页面刷新。
  • bottom navigation 适用于手机等屏幕较小的设备，pc 或平板推荐使用 side navigation。
颜色
  • 以 app 的 primary 作为 icon 的（avtive color）选中色。假如 bar 本身已有颜色则使用黑色或白色。
尺寸
  • 每个 tab 操作面积根据 icon 数量而定，最大 168dp 最小都要 80 dp。
  • 高度一般为 56dp。
  • icon 大小推荐 24 x 24 dp。

一、使用

Bottom navigation 是为屏幕较小的设备设计的，屏幕较大的设备例如电脑、平板，推荐使用 Side navigation，icon 变成竖排。

On mobile On tablet/Desktop

何时使用
  • 少于三个或多于五个以及页面都不应该使用 Bottom navigation。（多于五个可以使用 drawer 作为导航。）
  • 只用于可以直接到达的一级页面（如果只用两个，推荐使用 tabs 作为导航）

当 Bottom navigation 与 tabs 同时间出现的时候要注意两者之间会否对用户造成疑惑。可以用阴影、不同的样式、不同的转场动效来加以区分。

样式

icon 跟字都要有。

还有以下几个规则：

  • 指代当前所在 view 的 icon 与文字应该高亮。
  • 当只有三个 icon 的时候，文字不必隐藏。
  • 有四到五个 icon 的时候可以考虑将文字隐藏起来。
  • 用 primary color 作为 icon 的选中色。
  • 假如 bar 本身带有颜色，icon 考虑使用黑白两色。
  • 修饰文字不可换行，缩略或字体大小不一。

行为

bottom navigation 在用户快速向下滚动的时候是可以隐藏的。

不应该被用在：

  • 单任务页面不应该出现，例如编写邮件的时候。
  • 用户偏好与设置界面也不应该使用 bottom navigaiton

在android里面，虚拟返回按钮不能被用于 bottom navigation 的各个界面之间的返回。

重复点击 bottom navigaiton 的 icon 可以对相应的页面进行刷新操作。

滚动操作时可以隐藏 bottom navigation，而使用 bottom navigation 进行导航的时候不会隐藏。

不能通过横向滑动来切换 view，所以 view 之间的应该使用 cross-fade 的切换动画，暗示用户不能进行这样的操作。

尺寸

icon 均分 bottom navigation 的面积，垂直方向填满，水平方向平分。所属区域均是 icon 的可触控区域。

规范尺寸：

  • 每个区域最大宽度 168 dp

  • 每个区域最小宽度 80 dp

  • bottom navigation 高度：56 dp

  • icon 24x24dp

  • 选中文字 14sp（Roboto）

  • 未选中 12sp（Roboto）

  • 文字与 icon 居中对齐

  • 选中态 padding-height 是 6dp

  • 未选中态 padding-height 是 8dp

  • 文字 padding-bottom 是 10 dp

  • 文字 padding-left 与 padding-right 最小是 12 dp

Shifting bottom navigation bar 与普通 bottom navigation bar 不一样的点是，未选中 icon padding-bottom 是 16dp。

纵深

search box（2dp）、snackbar（6dp） 、 FAB（6dp） 的高度低于 Bottom navigation bar（8dp）。

键盘、drawer（16dp）、bottom sheet 高于 bottom navigation bar。