最近 Material Design 设计调整，增加底部导航栏设计规范的事情想必大家都已经了解了，此设计历来争议颇大，终于在近日作出了调整，可能是考虑到底部栏离手比较近，可以促进活跃。调整本无可厚非，也是一种自我完善，但值得一提的是，Google 在规范正式发布前，自家产品先违背了之前的设计规范，也是让大家纷纷吐槽打脸。

新的规范既然来了，我们还是应该好好了解下，怎样才是正确的底部导航栏使用姿势呢？Google 还是给出了一些规范指南，CJJ 同学在这篇文章里给大家介绍了一下，同时也给出了自己的一些看法。

CJJ 同学曾给我投稿过 BottomSheets使用介绍与源码解析 一文，本文也是选择在这里首发，这种精神值得鼓励，哈哈。

 前言

最近 Google 在 Material Design 设计规范中加入底部导航栏（Bottom navigation）设计，对此，我也会在文末给出个人看法！现在我们先来学习 Bottom navigation 在设计、使用、交互、风格、尺寸的一些规范。水平有限，如理解有误，请多多吐槽。

简单介绍

底部导航栏（Bottom navigation）这种设计在很多 Android App 中都是随处可见的，如支付宝、微信、QQ等都使用了，它允许用户可以在多个顶级视图之间快速切换。

如何使用

（1）底部导航栏需要有3-5个标签（tab），并且每个 tab 内的视图重要性要相似，对少于3个 tab 的场景，是不推荐使用 Bottom navigation  的。

正确方式：

错误方式：

（2）如果标签很多，比如超过5个怎么办？Google 也是不提倡使用 Bottom navigation 的，可以用 Drawer navigation 替换。

正确方式：

错误方式：

风格样式

（1）标签 Icons 和文字的颜色选择是很重要的，一亮一暗才能有对比，用户才很快知道你选择了哪个，如果五颜六色，你是很难分清选择了哪个的。

正确方式：

错误方式：

（2）标签的文字说明要简短而有意义，避免太长的，也不提倡太长了换行和省略的方式。

正确方式：

错误方式：

注意：

• 选中的标签要展示高亮图标和文字
  

• 3个标签的场景，要展示 Bottom navigation bar 中所有的图标和文字
  

• 多于3个标签的场景，没选中的 tab 只需要展示图标就可以，不用文字说明
  

行为交互

（1）用户上拉列表时，隐藏 Bottom navigation，下拉列表时，显示 Bottom navigation

（2）点击 Bottom navigation Icon 的时候，不能打开菜单选择或者其他弹窗操作，而只是刷新当前视图的内容，如下图：

（3）不推荐使用手势在视图内容区域切换视图

正确方式：

错误方式：

尺寸设计

Bottom navigation对于尺寸的要求还是挺严格的，标签选中和没选中都有细微的差别。

效果如下：

以上对 app 来说已经足够了，如果你想了解更多，可以去官网看看：https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs

杂谈

Android官网中有这么一句话：

Don’t use bottom tab bars
Other platforms use the bottom tab bar to switch between the app’s views. Per platform convention, Android’s tabs for view control are shown in action bars at the top of the screen instead. In addition, Android apps may use a bottom bar to display actions on a split action bar.
You should follow this guideline to create a consistent experience with other apps on the Android platform and to avoid confusion between actions and view switching on Android.

虽然我英语烂，但也不至于看不懂什么意思吧，之前说好的 Material Design 规范说变就变，自己都不遵守，有何规范可言？

然而，我是理智的，Google + 和 Google Photos 都加入了底部导航栏（Bottom navigation），打脸归打脸，决定这一因素的还是用户。

我们先说说经典侧滑导航 Drawer navigation，不要觉得疑惑，关 Drawer 什么事？没错，就是和它有关，认真想想，使用 Drawer 切换视图时，操作方式是点击按钮或者手势滑动打开，然后才选择希望跳转的 Item，这虽然节省了 app 可视空间，但是隐藏较深操作不便以致使用率低，从而导致其他页面的跳转率低这个缺点是不能忽视的。

因此相对于 Drawer navigation，Bottom navigation 就有优势了。

但这对于我们开发来说，也造成了一些困扰：

比如 FAB (Floating Action Button)、SnackBar 这种，个人觉得都可以不需要FAB了，至于 SnackBar，看下图：

原谅我欣赏不了这种美。

总结：被坑的最惨的还是Android程序员！

关于我

Github：Android-CJJ—能follow下我就更好了

https://github.com/android-cjj

微博：Android_CJJ—能关注下我就更好了

http://weibo.com/chenjijun2011

如果喜欢这篇文章，欢迎帮助转发，点击阅读原文可直接访问 CJJ GitHub 原文，大家有啥想说的，可以直接在下面留言喔。