Material design：Bottom navigation bars

Pi Day之后看到MD官方文档更新了就爬上去瞅了瞅。

主要更新了两个

The March 2016 release (for Pi Day) of the material design spec includes the following new sections:

• Bottom navigation bars allow switching between top-level views

• Split screens allow the display of two activities at once (Android only)

安卓的那只手机，一直用的Sony，由于原本的操作栏是在屏幕内的，所以之前真的是被各种底栏菜单折磨的不要不要的。之前也有问过其他使用安卓手机的人（小米，vivo，oppo居多），很多人表示底栏操作起来没有很大的障碍。

用着大索法的我真的是对那些放bottom navigation的app哭笑不得。

之前看到Google Photos更新时放出的宣传图瞬间就把我弄懵逼了，不知道为什么就有一种“完了完了，MD会不会过几天在what’s new里面加上如何使用底栏菜单的章节“的想法。

在爬上MD文档去看详细的细节之前的我真的是一脸智障，不过将新更的部分看完了之后觉得Google也确实为退出bottom navigation做了一番工作的。

他们自己都说了...

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.

做一个简单的笔记好了，万一以后用到这种导航模式了呢 -(:зゝ∠)_

1.用法

什么时候使用：

（1）3-5个顶级菜单栏选项

（2）希望导航栏中的导航项在任意界面都能被用户注意到

注意：

bottom navigation 和tab的形式混合使用可能会导致用户感到疑惑。

• 底栏菜单上的选项为3-5个

• 底栏菜单是固定的不能横向滚动

左：手机；右边：桌面或者平板

2.样式

图标和文本：

• （1）将选中的图标明显区分出来

• （2）在只有3个导航项的时候，将图标和文本一直显示出来

• （3）4，5个导航项的时候，未选中的导航项只用显示图标

color

• 对于当前选中的导航项（包括图标和文字）填充app的主色调

• 如果当前的导航有背景色，将当前选中的导航项（包括图标和文字）填充白色或者黑色

text labels

• 使用简洁的，意义明确的文字去描述导航项，文字不能转行，不能缩小或者省略一部分

3.行为

• 回到点击过的导航项直接跳转到新的导航项顶部，点击当前的导航项回到当前内容的顶部。不保留原停留历史

• 每一个导航项必须直接引导到结果页面，不能弹开其他的菜单或者弹窗。

• 上滑自动隐藏，下滑显示。

• 左右滑动导航项不会切换

• 导航项切换时采用淡入淡出的补间，内容区域不能左右切换

• 导航项被点击的时候有ripple动效

四.规范

推出 bottom navigation bar 感觉是合情合理的，只不过之前Google的设计博客有一张图让我印象很深… 对比iOS和Android设计的，特地去翻了出来，然后注意到了底下这行字，恩...世界真奇妙