原文 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)类型的,要覆盖在底部导航栏上边。