Material Design — 底部导航（Bottom Navigation）

霖酱

0.242018.04.24 12:49:10字数 1,088阅读 1,876

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚！

底部导航（Bottom Navigation）

Material Design链接：底部导航

底部导航

底部导航条能够通过单次点击动作，轻易的进行一级页面之间的切换。

点击底部导航的图标可以：1、直接将你带到相关页面；2、刷新当前页面。

底部导航主要用于移动端，为了在pc端实现类似效果，可以使用侧边导航。

用法

设置3-5个一级页面目的地

这些一级页面是需要直接访问的

颜色

激活的页面icon：1、底部导航栏为黑色/百色——用软件的主色调；2、如果底部导航栏已经有了颜色——使用黑色/白色。

规格

每个部分的宽度：底部导航的宽度除以一级页面数量（最大值为168dp，最小为80dp）

高度：56dp

图标：24×24dp

用法

底部导航提供了一个在一级页面之间的快速导航方式，主要用户移动端。

更大的显示器，如pc端，可以通过使用侧边导航实现类似的效果。例如，紧凑的“rail”处理处理方式默认展示导航图标。

左：移动端    右：pc端

什么时候用？

底部导航应该用于：

3-5个重要性相同的一级页面，且需要从app 中任何地方直接访问目的地

（超过6个：app中一直存在的持久抽屉导航persisitent navigation drawer）

（不满3个：只有1个/2个目的地的tabs）

不满3个可以用tabs

超过6个不要在底部导航用可滚动的内容形式

超过6个就不要放在底部导航里了，太挤了

底部导航和标签

当组合底部导航和tabs时要注意，因为这样的组合可能会因为用户不知道二者的优先级而在导航时引起混乱。

风格

图标和文本

因为底部导航动作以icon呈现，所以底部导航中的内容应该与icon进行适当的互动。

应按下列要求制作每一个动作（目前并不适用，因为图标无法100%传递标签的内容）：

·当页面处于焦点时，显示页面的icon和标签；

·当只有三个动作时，始终显示icon和文本标签；

·如果有四个或五个动作，则只显示icon作为未激活状态。

颜色

激活的页面icon：1、底部导航栏为黑色/百色——用软件的主色调；2、如果底部导航栏已经有了颜色——使用黑色/白色。

文本标签

文本标签为底部导航icon提供了简短、有意义的定义。避免长文本标签。

行为（这部分的动图去MD的网站看吧...）

底部导航栏可以从一个主题中的n级页面移动到另一个主题的一级页面。当用户去往下级页面时要保持底部导航可用，可通过持续展示，或者通过滚动隐藏和显示。

底部导航栏不应用于：

·专注于单一任务的观点，如电子邮件“撰写”页面。

·包含用户首选项或设置的页面

在Android上，后退按钮不在底部导航栏视图之间导航。

底部导航icon

点击底部导航icon将直接带你到相关页面，或刷新当前页面。每个icon必须指向目的地，并且不能打开菜单或对话框。

滚动

底部导航栏滚动时可以动态地出现和消失：

·向下滚动隐藏底部导航栏

·向上滚动显示

手势

在内容区域上使用左右滑动手势不会在一级页面之间切换。

点击icon进行切换时也该避免横向切换在页面之间转换（如左右推进）。