Material Design 「底部导航栏」设计规范解析

Google 给出的设计规范之前一直所提倡的是导航栏等相关要素应置于视图顶部，苹果提倡在底部，这一点可以在我们自己的手机上找到对应案例。但是最近这份设计规范又有了更新，提出了 Bottom navigation （底部导航）这一概念，与之前“应避免使用底部Tab”的说辞相违背，看来没有任何规范是可以一成不变的。「只要能提高效率，我们不在乎打脸」，是否能提高效率暂且不说，请告诉我怎样处理底部导航和 Tabs 共存的情景。这个问题的答案会在下一篇文章中做出解答，今天我们先来了解一下新的底部导航规范。

底部导航栏

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.

底部导航栏让浏览及切换顶层视图这件事变得轻松。

1. 用法

底部导航为应用中的顶层视图提供快速导航功能。主要为移动设备而设计。

大一点的显示器，像平板电脑或其他台式机一样，需要使用侧边导航来达到类似效果。例如，默认显示导航图标的紧凑的条形栏目。

如下图，左侧为移动设备底部导航栏，右侧为大屏设备（平板电脑等）的左侧导航条。

何时使用

底部导航应该用于：

• 包含 3 ~ 5 个同等级的顶层目标页
• 超过 5 个目标页的应用应使用任意页都可以持续访问的导航抽屉
• 应用中任意页都可以直接访问目标页
• 只包含 1 或 2 个目标页的应使用标签（Tabs）

以下是底部导航应用方面的建议：

推荐：

底部导航栏展示出一个应用中的 3 ~ 5 个顶层目标页。

不推荐：

如果少于 3 个目标页，请考虑使用标签（Tabs） 来替代。

如果你的顶层导航有六个以上的目标页，可以通过其他位置而非底部导航来访问，如导航抽屉。

推荐：

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

不推荐：

应避免底部导航栏上出现滚动内容。

推荐：

底部导航栏最多使用5个顶层目标页。

不推荐：

避免底部导航使用多于五个目标页作为点击目标，这会让两个按钮间距离过密。

底部导航和标签

底部导航与标签（Tabs）配合使用时应小心，因为这种组合可能会让用户在使用导航时产生混淆。例如，在标签和底部导航之间点按可能会令同种内容显示出不同的转场效果。

2. 风格

图标及文本

因为底部导航是以图标形式存在的，应该使用可以准确描述内容信息的图标语言。

各种动作状态风格应依照以下的规则进行：

• 当某视窗处于选中状态，显示当前视窗图标及文字提示
• 当只有三个标签时，一直显示图标以及文字提示
• 如果有四或五个标签，未激活的视窗只用图标表示

颜色

底部导航当前激活状态（包括图标以及其他文字提示）要与应用主题色一致。

推荐：

用应用的主题色表示视窗选中色。

不推荐：

避免使用不同颜色的图标或文字提示。

如果底部导航栏已经是彩色的了，请将被选中的图标和文字设置为黑或白。

推荐：

如果底部导航栏已经是彩色的，请用黑色或白色的图标。

推荐：

避免多色图标和带颜色的底部导航栏搭配使用。

文字标签

文字标签为底部导航图标提供短小精炼的描述。避免使用长文本，并且长文本不可以截断或折行。

推荐：

使用短小精炼的文字标签。

不推荐：

避免文字折行。

不推荐：

避免截断文字标签，这可能会妨碍对功能的理解。

不推荐：

避免一味地追求单行效果而缩小标签字号。

3. 行为

点击底部导航图标可以直接转到对应视图或者刷新当前页。

每个底部导航图标必须指向一个目标页，同时无法打开其他菜单或弹窗。

• 敲击底部导航栏上的动作区域将回到页面顶部。
• 在底部导航栏上切换导航时，应重置页面状态。

底部导航栏在屏幕滚动时可以显示或隐藏：

向下滚动时隐藏底部导航栏；向上滚动时显示出来。

• 底部导航栏可在内容浏览的同时隐藏或重现。
• 预览应用内各层级页面时底部导航栏保留在视图当中。

在内容区域使用滑动手势不会切换视图。

推荐：

视图间切换动效是淡入淡出效果。

不推荐：

视图间切换时避免使用横向切换效果。

4. 规格

固定底部导航栏

计算每个底部导航标签的动作触发宽度，根据标签个数来平分宽度。或者，给予底部导航标签最大的触发宽度。

最小和最大宽度值（包括边距）：

• 最大宽度：168dp
• 最小宽度：大屏不小于120dp，小屏不小于104dp

高度：56dp

图标尺寸：24 x 24dp

内容对齐方式：文本和图标水平居中。

边距：

• （active状态）图标上边距 6dp，（inactive状态）图标上边距 8dp
• 文本下方边距 10dp
• 文本左右侧边距 12dp

文本标签：

• （active状态）Roboto Regular 14 sp
• （inactive状态）Roboto Regular 12 sp

横屏预览时底部导航栏固定效果

平板上底部导航栏固定效果

轮换式底部导航栏

计算每个底部导航标签的动作触发宽度，根据标签个数来平分宽度。

最小及最大宽度值（包括边距）：

激活状态：

• 最大：168dp
• 最小：96dp

未激活状态

• 最大：96dp
• 最小：64dp

高度：56dp

图标大小：24 x 24dp

内容对齐方式：文本和图标水平居中对齐

边距：

• （激活状态）图标下边距 6dp，（未激活状态）图标下边距 16dp
• 文本下边距 10dp

文本标签：（激活状态）Roboto Regular 14sp

手机横屏预览效果：

平板设备上的预览效果：

5. 高度/厚度

因为 snackbars 的高度较低（6dp），他们会显示在底部导航栏（8dp）之后。

Bottom sheet，导航抽屉和键盘都会在底部导航栏之上显示并覆盖它。

bottomsheet.gif 189 KB

最后放上一张结构图，让大家可以更直观地知晓各控件的高度：

规范解析完毕，要点总结来说：

• 底部导航栏标签个数应保持在 3 ~ 5 个之间
• 当导航栏无背景色时，标签激活状态颜色应于App主题色保持一致
• 当导航栏有背景色时，标签颜色建议设置为白色或黑色
• 标签提示文字应精炼，不可折行、截断显示或缩小文字
• 3个标签时应显示图标及文字
• 4或5个标签时，激活标签显示图标及文字，未激活标签只显示图标
• 为解放用户操作空间，上拉隐藏底栏、下滑显示底栏；
• 点击标签切换页面，左右滑动手势无效

打赏

微信扫一扫，打赏作者吧～