Material Design——Bottom navigation

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~

Material Design链接：Bottom navigation

在底部导航栏可以导航应用的主要功能并进行功能之间的转换。

一、使用

底部导航栏在屏幕底部显示三到五个主要功能。每个功能都由一个图标和一个可选的文本标签表示。当点击底部导航图标时，就会转换到与该图标相关联的顶级导航功能。

△ 原则

· 人体工程学  手持移动设备时候便于操作底部导航栏

· 持续性  当使用移动设备时候，底部导航栏出现在每个屏幕的底部

· 相关性  相关的底部导航栏功能，应该具有相同的重要性

△ 使用场景

底部导航栏应该用于：

· 在应用程序的任何地方都可以点击底部导航栏触发主要功能

· 设置3-5个主要功能

· 仅限于移动手机或者平板

底部导航栏不应该用于：

· 单个任务，例如查看单个电子邮件用户

· 用户首选项或设置

底部导航栏的主要功能不要少于三个(可使用选项卡代替)。

不要超过五个主要功能。对于这些情况，请尝试选项卡或导航抽屉。

组合底部导航和顶部标签可能会引起混淆，因为它们与内容的关系可能产生干扰，选项卡使用相同主题，底层导航目的地是顶级的，并且彼此之间关联性不强。

二、分析

1.Container；2.Inactive；3. iconInactive text label；4.Active icon；5.Active text label

△ 当前功能

展示主要功能的形式决定于涵盖多少个主要功能：

· 三个主要功能：显示所有功能的图标和文本标签

· 四个主要功能：处于当前触发功能界面时显示一个图标和文本标签。建议未触发功能时显示图标和文本标签

· 五个主要功能：处于当前触发功能界面时显示一个图标和文本标签。未触发功能时使用图标，并谨慎使用文本标签(因为空间可能不允许)

在这个底部的导航中有三个主要功能，每个个功能都有一个图标和文本标签。

△ Icons

底部导航功能始终包括一个图标。最好将图标与文本标签配对，防止图标没有明显的含义不能让人识别。

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

△ 文本标签

文本标签提供了对底部导航主要功能的简短、有意义的描述。

使用简洁的文本标签。

不要截断文本，截断可能会模糊重要的目标信息。

不要将文本缩成一行。

避免包装文字，核心在于简洁，不要使用看似漂亮的语言。

三、行为

底部导航动作

点击底部导航主要功能将产生以下结果之一：

· 它帮助用户转换到相关功能

· 若之前访问过A功能，当从B功能回到A功能时，会跳转到当前的浏览位置

· 若此刻在A功能的界面，当再次点击A功能的图标，会返回顶部，并且刷新该界面

点击底部导航主要功能不会以下结果之一：

· 打开菜单或对话框

· 在Android上，后退按钮不会设置在底部导航中

左：点击以前访问过部分的功能将用户返回到他们上次浏览的位置；右：点击当前的功能将用户带到屏幕的顶部，并在适用的情况下刷新内容。

△ 角标（Badges）

底部导航图标可以包括其右上角的角标。这些角标可以包含动态信息，例如一些请求。

1.Badge；2.Badge with a number；3.Badge with a maximum character count

△ 滚动（Scrolling）

在滚动时，底部导航条可以出现或消失：

· 向下滚动隐藏

· 向上滚动的条形图

左：在浏览信息流的时候会隐藏导航栏；右：当浏览应用程序的层次结构时，底部的导航栏仍然在视图中。

△ 转换（Transitions）

滑动手势不能在底部导航视图之间导航。

左：使用交叉淡出动画在活动视图和非活动视图之间进行转换；右：避免使用横向(左和右)运动来在视图之间进行转换.横向运动保留用于导航相关内容，如选项卡。

当它们出现时，这些项将显示在底部导航栏的前面：

· Bottom sheets（底部表单）

· Navigation drawers（导航抽屉）

· Keyboards（键盘）

底部导航可以临时覆盖底部表单，导航抽屉和键盘。

△ 颜色

当底部导航目标处于触发状态时，将图标和文本标签填充上应用程序的主颜色。

使用应用程序的主颜色来指示触发的功能状态。

如果底部导航栏是彩色的，则将当前操作的图标和文本标签设置为黑色或白色。

如果底部导航栏是彩色的，则使用黑白图标。

四、位置

△ 固定导航条

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

底部导航栏不可以滚动。

△ 横式视窗（Landscape view）

在移动(景观模式)或平板电脑上，底部导航目的地可以保留纵向模式中使用的相同间距，而不是分布在底部的应用程序栏上。

在移动(景观模式)或平板电脑上，底部导航目的地可以水平定位，而不是堆叠。在这种情况下，建议目的地在整个条形图中均匀分布。

五、规定

底部导航目的地可能是触发的、未触发的、聚焦的或按下的。

底部导航使用不透明度和文本来显示目标何时处于触发状态。

状态用于显示按下的、聚焦的和未选择的状态。

非活动的目标状态用减少的不透明表示；活动状态具有完全的不透明度。

1.Inactive destinations；2.An active destination

当文本标签没有持续使用(在任何时候)时，只有活动的目的地才会有文本标签。

左：没有文本标签的非活动目的地；右：一个带有文本标签的活动目的地。

---

END.THANKS FOR YOUR READING~

如有不当，还请多多指教~