Google 发布 Bottom Navigation design guidelines

原文 https://www.google.com/design/spec/components/bottom-navigation.html#

额，谷歌发布了新的设计标准：底部导航栏……说好的顶部才是真爱呢？

底部导航栏
底部导航栏让在两个顶级的页面中进行探索和选择变得更加简单。（大概是因为屏幕越来越大的原因。）

-

用法

底部导航栏在app中的两个顶级界面中提供了快速导航。这是对于手机的主要设计。
更大屏幕的，比如平板，台式（孤陋寡闻了），可能会通过侧边导航来实现相同的功能。比如，紧凑的小图标显示在侧边栏。

手机上的底部导航栏

大屏幕的导航栏，平板或者台式

什么时候使用

底部导航栏应该被用于：

• 3-5个顶级同等重要的板块（代替：一个可以在程序任何地方那个都可以访问的持续的抽屉导航）
• 在应用的任何地方需要直接展示的（代替：Tabs（这里指顶部的导航栏）只有一个或者两个按钮）

3-5个使用底部导航栏

这个是错误示范

如果你的顶级界面超过6个，使用侧边抽屉而不是把所有的icon堆积在底部导航栏中。避免在底部导航栏中进行滑动

底部导航栏和顶部导航栏

谨慎使用底部导航栏和顶部导航栏的结合。当在导航时，结合会给应用带来混淆。比如，在同一个内容界面，同时监听顶部和底部导航栏会导致展示的混乱，交互的混淆。

样式

图标和文字

因为底部导航栏按下动作和按钮一样，可以使用文字配合图片进行合适的传达。
每个动作应该符合以下条件：
focus的时候，展示文字和图标
只有三个图标的时候，文字和图标一直显示
如果是4-5个图标，只有被选中的才展示文字，其他只展示图标。
（这一块的图片太多了，大家去原网站看吧）
如果底部导航栏的图标和文字的彩色的，把文字和图标在当前动作的情况下显示白色或者黑色。

文字标签

应该提供短的，有明确定义的文字给底部导航栏的图标，避免使用长的文字标签。不要截断或者把长文字换行。

行为

监听底部导航栏的图标，直接关联你的界面或者刷新你的界面。每一个底部导航栏的图标要导致一个现象，可能不打开菜单或者其他的弹框。

底部导航栏可以显示和隐藏在滑动的过程中。
向下滚动隐藏底部导航栏，向上滚动因此顶部。

底部导航栏的动画之作用与底部导航栏，不作用与页面。

规格

固定底部导航栏

计算底部导航栏每一个按钮的宽度，把屏幕的宽度平分给他们。让点中的按钮大于没被点中的按钮。

宽度最低限度和最大限度（包括padding）：
最大宽度：168dp
最小宽度：120dp大屏，104dp小屏
高度：56dp
图标：24*24dp
内容对齐：
文字和图标水平居中对齐

内边距padding：
选中的图标上面6dp
没选中的图标上面8dp
文字下方10dp
看动画，可以看出，选中的时候是把图标上移，然后文字变大，但是图标没有变大。

文字标签：
选中的文字14sp
没选中的12sp

移动的底部导航栏
为了计算每一个底部导航栏的宽度，平分屏幕宽度。

宽度最低限度和最大限度（包括padding）：
被选中的：
最大宽度：168dp
最小宽度：96dp
没被选中的：
最大宽度：96dp
最小宽度：64dp

高度：56dp
图标：24*24dp
内容对齐：
文字和图标水平居中对齐

内边距padding：
选中的图标上面6dp
没选中的图标上面16dp
文字下方10dp
文字标签：
选中的文字14sp

底部menu：Elevation：（这个有点像从底部往上弹出的ppw）
显示在底部导航栏之上。
如果是弹窗（sheets）类型的，要覆盖在底部导航栏上边。