1. Bottom navigation 简述

Android 官方在三月的某一天更新了一个新的设计规范，所谓设计规范就是告诉开发者和设计师要如何去设计和使用某一个组件。不过这次 Bottom navigation 的发布，让许多人大跌眼镜，毕竟 Bottom navigation 这样的组件，在之前的 MD 设计语言中可是只字未提，Android 开发者与 iOS 开发中最大的不同也是由于 Bottom navigation 是 iOS 应用的必备，而遵循 MD 设计规范的 Android 应用，则对 Bottom navigation 敬而远之。

1.1 Android 之前的关于底栏的设计规范

Google 之前对于底栏的设计规范

1.2 微信的改版

上上一次 Bottom navigation 在 Android 圈引起轩然大波还是微信的改版（5.2版本），在试错之后迅速换回了 Bottom navigation 。

测试改版的微信 改版后的微信

1.3 Google + 的改版

而上一次 Bottom navigation 在 Android 圈引起轩然大波的就是 Google Plus 的改版：

Google + 的改版

反正打脸啪啪啪，不过规则是用来遵守的，你看微信没有遵守，活的比 Google + 好几百倍了。

2. Bottom navigation 设计规范

闲话说完了我们就来看看官方发布的 Bottom navigation 的设计规范，毕竟对于我们广大程序员来说，设计方面的能力还是没有专业的设计师强的，有一些规范我们做出来的东西不至于太难看。

2.1 Bottom navigation 使用

Bottom navigation 主要为手机应用设计，它提供了应用内顶层视图的快速导航功能。一些大的显示设备，比如桌面设备，可以使用侧面导航达到类似的效果。

The bottom navigation bar on mobile
Left navigation on a larger display, such as tablet or desktop

2.1.1 使用时机

Bottom navigation 的使用时机：

• 三到五个同样重要的顶级功能界面
• 需要从应用程序的任意位置访问的功能界面

[Do and Don't] 1. 当底栏的 Item 太少的时候，不要使用 Bottom navigation ，用 Tab 来替代。（毕竟只有两个 Item 的时候，还是蛮奇怪的看上去。

Do. The bottom navigation bar exposes the three to five top-level destinations of an app.
Don't. If there are fewer than three destinations, consider using tabs instead.

[Do and Don't] 2. 如果你的底栏 Item 多于6个，可以在 Navigation drawer 中提供访问入口，不要将底栏做成可以滑动的。

Do. Views are fixed in a bottom navigation bar. Don't. Avoid scrollable content in the bottom navigation bar.

[Do and Don't] 3. 最好提供3-5个底栏 Item ，当底栏 Item 超过五个的时候，会显得每个 Item 过于紧凑，影响美观

Do. Use up to five top-level destinations in a bottom navigation bar. Don't. Avoid using more than five destinations in bottom navigation as tap targets will be situated too close to one another.

3. Bottom navigation 与 tabs

当 Bottom navigation 与 tabs 混合使用的时候，可能会造成使用上的混乱。 举个栗子，点击 tab 和点击 Bottom navigation 可以显示不同的内容组合，这些功能的组合会给用户带来使用上的混乱。
另外 Tabs 在体验上和 Bottom navigation 也有很大的不同，Tabs 更依赖手势操作带来的便利，而 Bottom navigation 则由于位置比较靠近手指，使得点击更加方便。

本文标题:Android Bottom navigation 规范一：使用方法
文章作者:Gracker
发布时间:2016年04月05日 - 22时57分
最后更新:2016年04月05日 - 23时06分
原始链接:http://androidperformance.com/2016/04/05/android-bottom-bar-1.html **
许可协议:** "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。