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）类型的，要覆盖在底部导航栏上边。