组件 底部导航栏

底部导航栏

仅仅点击一次就可以轻松的在底部导航栏上切换顶级视图。

点击底部导航图标,可以直接进入对应视图、或者刷新当前视图。

底部导航主要用于移动设备。如果要在桌面设备上实现类似效果,请使用侧边栏导航。

用法

  • 3-5 个顶级视图
  • 目标视图需要快速访问

颜色

激活的图标使用应用的主色调。有背景色的底部导航栏,则使用白色或黑色的图标和文字。

规格

  • 导航项的宽度:视图的宽度除以导航项的数量(最大 168dp、最小 80dp)
  • 高度:56dp
  • 图标:24x24dp

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

底部导航可以快速切换应用的顶级视图。它主要为移动端设计。

在较大的显示器上,例如桌面显示器,可以通过侧边栏导航实现类似的效果。例如,在侧边栏使用简洁的「轨道」来排列导航图标。

手机上的底部导航栏

在较大的显示器上(如平板和桌面端)的左侧导航

何时使用

底部导航用于:

  • 有 3-5 个同等重要的顶级视图(替代方案:可从应用的任何地方访问的抽屉式导航栏
  • 目标视图需要从应用的任何地方直接访问(替代方案:只有一两个目标页面时请使用Tabs

底部导航栏显示 3-5 个顶级页面的入口。

如果目标页面少于 3 个,请使用 Tabs 来替代。

如果你有超过 6 个顶级视图,将底部导航栏之外的项目放入其他位置,比如抽屉导航栏。

视图固定在底部导航栏中。

避免需要滚动的内容出现在底部导航栏。

在底部导航栏中放置不超过 5 个顶级视图。

避免在底部导航栏中放置超过 5 个入口,紧挨的触控范围很容易操作误操作。

底部导航栏和 Tabs

尽量不要同时使用底部导航和 Tabs,同时使用会让用户感到困惑。在同个页面同时点击 Tabs 和 底部导航栏会出现很奇葩的转场。

样式 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

图标和文本

底部导航栏的导航操作是基于图标,因此图标应当能够反应内容。

根据以下条件来为每个导航项设置样式:

  • 视图被激活时,同时显示该试图的图标和文本标签
  • 当只有三个入口时,显示所有图标和文本标签
  • 如果有四五个入口,未激活的视图则仅显示图标

颜色

对激活的导航项目添加主体色(包括图标和文本标签的颜色)。

使用主体色来表明激活状态。

避免使用不同颜色的图标和文字。

将有颜色的底部导航栏上的图标和文本设置为白色或黑色。

在有颜色的底部导航栏上使用黑色或白色的图标。

避免在有颜色的底部导航栏上使用有颜色的图标。

文本标签

文本标签是对导航项图标的简短说明。这些文本不会被截断或换行,请避免使用长文本。

使用短文本

避免使文本换行

避免截断文本,因为这样会导致理解困难。

避免为了使文本在单行显示而缩小文本。

行为 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

点击底部导航的图标将直接进入相应视图,或刷新当前视图。

每个图标都必须指向唯一的目标视图,不能打开菜单或弹窗。

在 Android 上,后退按钮不能切换底部导航。

点击当前视图的导航项,将跳转到当前视图的顶部。

在不同的底部导航之间切换时,视图的任务状态会被重置。

底部导航栏刻意随着界面的滚动而显示或隐藏:

  • 向上滚动时隐藏底部导航栏
  • 向下滚动时显示底部导航栏

底部导航栏的隐藏和显示,带来了沉浸式的阅读体验。

在应用的不同结构间相互切换时,底部导航栏始终保持可见。

在内容区使用滑动手势无法切换顶级视图。

在不同视图中切换时使用交错淡出的过渡效果。

避免使用横向滑动来切换视图。

规格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

等宽的底部导航栏

用底部导航栏的宽度除以导航项的个数,就是每个导航项的宽度:

导航项的宽度 = 视图的宽度 / 导航项的数量

例如:视图的宽度是 360dp,有 3 个导航项,那么每个导航项宽度是 120dp。

桌面端和更大的显示器
可以使每个导航项的宽度为最大宽度。

手机上的等宽导航栏

手机上的等宽导航栏

最小宽度和最大宽度(包含内边距):

  • 最大宽度:168dp
  • 最小宽度:80dp

高度:
56dp

图标:
24 x 24dp

内容对齐:
文本和图标水平居中。

内边距:

  • 图标上边距 6dp(激活状态),8dp(不激活状态)
  • 文本下边距 10dp
  • 文本的左右边距 12dp

文本标签:

  • Roboto Regular 14sp(激活状态)
  • Roboto Regular 12sp(未激活状态)

最小宽度 80dp
内边距 12dp

高度 56dp
文本左右边距 12dp
文本下边距 10dp

最大宽度 168dp
内边距 12dp

等宽导航栏示例

手机横屏模式中等宽导航栏。

高度 56dp
图标:24x24dp
图标上边距 6dp(激活状态)
图标上边距 8dp(未激活状态)
文本下边距 10dp

平板上的等宽导航栏
高度:56dp
图标:24x24dp
图标上边距(激活状态):6dp
图标上边距(未激活状态):8dp
文本下边距:10dp

可变的底部导航栏

最小宽度和最大宽度(包含内边距):

Active view

  • 最大宽度:168dp
  • 最小宽度:96dp

Inactive view

  • 最大宽度:96dp
  • 最小宽度:56dp

高度:
56dp

图标:
24x24dp

内容对齐:
文本和图标水平居中对齐。

内边距:

  • 图标上边距 6dp(激活状态),图标上下边距均为 16dp(未激活状态)
  • 文本下边距 10dp

文本标签:
Roboto Regular 14sp(激活状态)

手机上的可变导航栏
高度:56dp
图标:24x24dp
图标上边距(激活状态):6dp
文本下边距:10dp
图标下边距:6dp
没有标签的图标下边距:16dp

手机上的可变导航栏

激活状态:最小宽度 96dp

未激活状态:最小宽度 56dp

激活状态下的文本宽度可以等于最大值。

激活状态:最大宽度 168dp

未激活状态:最大宽度 96dp

激活状态下的文本宽度可以等于最大值。

手机横屏模式中可变导航栏。
高度:56dp
图标:24x24dp
图标上边距(激活状态):6dp
文本下边距:10dp
图标下边距:6dp
没有标签的图标下边距:16dp

平板上的可变导航栏
高度:56dp
图标:24x24dp
图标上边距(激活状态):6dp
文本下边距:10dp
图标下边距:6dp
没有标签的图标下边距:16dp

海拔

因为 Snackbar 的海拔较低(6dp),因此它们会出现在底部导航(海拔 8dp)的后面。

底部 Sheet、抽屉导航和键盘会显示在底部导航栏的前面,会临时遮住它。

Snackbar 在底部导航栏后面。

底部 Sheet 和键盘会临时遮住底部导航栏。

应用结构的正交视图