Bottom navigation 底部导航

这是一个翻译系列，原文是谷歌18年所出的材料设计指南（文末有链接），强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇，一共百余篇，欢迎关注哦。

底部导航栏让用户在App中的主要目标位置之间切换。

目录

1. 用法
2. 剖析
3. 行为
4. 位置
5. 状态
6. 主题化
7. 研究
8. 规格

用法

底部导航栏在屏幕底部显示三到五个目标位置。每个目标位置都由一个图标和一个可选的文本标签表示。点击底部导航图标时，用户将进入与该图标关联的顶级导航目标位置。

原则

使用场景

底部导航应该用于：

1. 需要从App中的任何位置访问的顶级目标位置
2. 三到五个目标位置
3. 仅限手机或平板电脑
   

底部导航不该用于：

1. 单个任务，例如查看单个电子邮件
2. 用户首选项或设置

不要使底部导航栏少于三个目标位置（此时用标签代替）。

不要超过五个目标位置。这种情况，请尝试tab选项卡或导航抽屉。

同时使用底部导航和tab选项卡可能会引起混淆，因为它们与内容的关系可能不清楚。tab选项卡之间有共同的主题，而底部导航目标位置是顶级的并且彼此没有联系。

已缩小至50％。

剖析

这个底部导航中有三个目标位置，每个都带有图标和文本标签

1. 容器
2. 未激活图标
3. 未激活文本标签
4. 激活的图标
5. 激活的文本标签

代表目标位置

表示底部导航目标位置的方式取决于使用的数量：

1. 三个目标位置：显示所有目标位置的图标和文本标签。
2. 四个目标位置：激活目标位置显示图标和文本标签。未激活目标位置显示图标，建议使用文本标签。
3. 五个目标位置：激活目标位置显示图标和文本标签。未激活目标位置使用图标，并谨慎使用文本标签（因为空间可能不够）。

此底部导航中有三个目标位置，每个目标位置都带有图标和文本标签。

图标

底部导航目标位置始终包含图标。最好将图标与文本标签配对，尤其是当如果图标没有明显的含义时。

图标与底部导航中的文本标签配对

文本标签

文本标签对底部导航目标位置进行简短有意义的描述。

使用短文本标签。

不要省略文字。 省略可能会使重要的目标位置信息产生歧义。

不要为了单行放下而缩小文本。

避免文本换行。

图标和文本标签的颜色

激活状态和未激活状态的图标以及文本标签应该与容器颜色有着强烈的对比。在考虑了此组件色调的同时，应该让激活状态的目标位置图标以及其文本标签使用应用的主色或者重度强调的“之上”色。非激活状态的图标及其标签则可使用中度强调的“之上”色。

底部导航栏中的激活状态的目标位置使用了主色或者重度强调的“之上”色。

底部导航栏中避免使用低对比的配色，否则用户很难区分出激活状态的项目并正确导航。

行为

导航

安卓和iOS的底部导航行为并不相同。当你选中一个底部导航（尚未被选中的）选项时，这两个平台所呈现的结果有所差异：

1. 安卓端：将跳转至该目标位置的界面顶部。所有之前的用户交互和当前的屏幕状态都被重置，例如滚动位置、tab选项卡选择，以及在线搜索。
2. ios端：目标位置将呈现之前的用户交互。若用户先前访问了应用的某个区域，则显示该区域（若能做到，会保存之前的状态）。否则就直接回到该目标位置的界面顶部。

如果需要提升用户体验，这样默认的平台导航方式也可以被修改。例如，一个需要频繁切换目标位置的安卓应用可以做到保存每个位置的状态。又如，若在一个具体场景中使用更方便，iOS应用也可以定义为跳转到界面顶部。

在安卓端，重新访问一个目标位置会重置应用，并跳转至界面顶部。

在iOS中，重新访问一个目标位置会跳转至上次离开的地方，例如一个详细页。

当沿着应用的层级向下时（从父级页面到子级页面），底部导航栏可以始终可见，以便用户在目标位置间快速切换。

在这款音乐应用中随着查看专辑的操作，底部导航栏一直可见。

徽标

底部导航图标可以在其右上角放置徽标。这些徽标可以包含动态信息，例如多个待处理请求。

1. 徽标
2. 带数字的徽标
3. 具有最大字数的徽标

滚动

滚动时，底部导航栏可以显示或消失：

1. 向下滚动隐藏底部导航栏
2. 向上滚动则显示

底部导航栏可以消失，以便为内容留出更多空间。

在App的层次结构中导航时，底部导航栏仍然可见。

转换

滑动手势不会在底部导航目标位置之间导航。

在激活目标位置和未激活目标位置之间进行切换时使用淡入淡出动画效果。

在目标位置之间转换时避免使用横向（左右）切换，横向切换用于对等的内容之间。

位置

海拔高度

底部导航可以暂时被对话框、底部卡片、导航抽屉、屏幕键盘或其他有必要的元素遮挡。但这些元素不能永久停在界面上。

“Radio”中的搜索功能出发了屏幕键盘，暂时遮挡了底部导航，直到搜索流程结束为止。

固定导航栏

底部导航栏目标位置具有固定位置。它们不会滚动或水平移动。

底部导航栏目标位置不该滚动。

横屏目标位置

在移动设备（横向模式）或平板电脑上，底部导航目标位置可以保留纵向模式中使用的相同间距，而不是在底部导航栏中均匀分布。

在移动设备（横向模式）或平板电脑上，底部导航目标位置可以水平放置，而不是堆砌在一起。 在这种情况下，建议把目标位置均匀分布在整个导航栏上。

状态

底部导航目标位置可以是激活状态、未激活状态、聚焦或按下状态。

底部导航使用不透明度和文本来显示目标位置何时处于激活状态。状态有：显示按下、聚焦和未选择状态。

未激活目标位置状态用不透明度降低来表示; 激活状态则完全不透明。

1. 未激活状态的目标位置
2. 有一个激活的目标位置

当文本标签不常在（始终出现）时，则只有激活目标位置带有文本标签。

1. 无文本标签的未激活目标位置
2. 带有文本标签的激活目标位置

研究

材料设计就将浮动操作按钮（FAB）嵌入到底部导航栏做了研究，以便更好地理解可用性和设计受喜好程度。这些不同的受喜好排名来自于650名美国、20名印度和10名巴西参与者。

研究发现：

1. 所有地区的参与者都喜欢带有居中FAB的底部导航栏，因为美观，且符合人体工学。
2. 所有地区的参与者都喜欢导航和常规操作可以合并在一起并位于方便触摸的区域，比如底部导航栏。
3. 对于操作栏形状的喜好因地区而异。美国和巴西的参与者更喜欢迷你FAB，而印度参与者偏爱内嵌或悬浮型的FAB。

主题化

Owl材质主题

这款教育App的底部导航栏已使用材料主题进行了自定义。定制领域包括颜色和排版。

Owl的自定义底部导航栏

颜色

Owl的底部导航栏在三个元素上使用自定义颜色：容器，激活项和未激活项。

排版

Owl的底部导航栏使用了自定义排版文本标签。

规格

移动端

竖向

最小宽度和最大宽度

大屏幕

原文地址：Material Design

译者：珠珠

转载请注明：学UI网 » Bottom navigation 底部导航