底部导航栏Bottom navigation规范指南

一时失言乱红尘 2022-07-13 04:26 376阅读 0赞

原文链接：[https://github.com/LittleFriendsGroup/BottomNavigation][https_github.com_LittleFriendsGroup_BottomNavigation]

# 底部导航栏（Bottom navigation）规范指南 #

### 前言： ###

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

![components_bottomnavigation_spec_elevation3.png][]

### 简单介绍 ###

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

### 如何使用 ###

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

正确方式：

![components_bottomnavigation_usage3.png][]

错误方式：

![components_bottomnavigation_usage4.png][]

（2）如果标签很多，比如有超过了5个这种情况呢？Google也是不提倡使用Bottom navigation的，可以用Drawer navigation替换。

正确方式：

![components_bottomnavigation_usage5.png][]

错误方式：

![components_bottomnavigation_usage6.png][]

### 风格样式 ###

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

正确方式：

![components_bottomnavigation_style5.png][]

错误方式：

![components_bottomnavigation_style6.png][]

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

正确方式：

![components_bottomnavigation_style1.png][]

错误方式：

![components_bottomnavigation_style2.png][]  
![components_bottomnavigation_style3.png][]  
![components_bottomnavigation_style4.png][]

#### 注意： ####

*  1.  选中的标签要展示高亮图标和文字
 *  1.  如果是3个标签的时候，要展示Bottom navigation bar中所有的图标和文字
 *  1.  如果是多于3个标签的情况，没选中的tab只需要展示图标就可以，不用文字说明

### 行为交互 ###

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

![7ef01fcajw1f1zw7j8vbyg209w0hmu0y.gif][]

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

![7ef01fcajw1f1zwkyevefg209w0hm4gx.gif][]

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

正确方式：

![7ef01fcagw1f1zwwyi12mg209y0hmx5p.gif][]

错误方式：

![7ef01fcagw1f1zwz18jkkg209y0hmx6p.gif][]

### 尺寸设计 ###

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

![components_bottomnavigation_spec_fixed1.png][]

效果如下：

![7ef01fcajw1f1zxp58q1pg209w08kwfo.gif][]

对手机app来说已经足够了，如果你想了解更多，可以去官网看看更多详情：[https://www.google.com/design/spec/components/bottom-navigation.html\#bottom-navigation-specs][https_www.google.com_design_spec_components_bottom-navigation.html_bottom-navigation-specs]

### 杂谈 ###

Android官网中有这么一句话：

[Don’t use bottom tab bars][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.

![68747470733a2f2f706963332e7a68696d672e636f6d2f30316530633265323131313864663739353037623437393762646137316465655f622e706e67][]

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

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

我们说说Drawer navigation，不要觉得疑惑，关Drawer什么事？没错，就是和它有关，认真想想，使用Drawer切换视图时，使用方式是点击按钮或者手势滑动打开，然后才选择跳转的Item，虽然节省了手机视图空间，但是操作较不方便以致使用率低，从而降低其他页面的跳转率这个缺点是不能忽视的。  
所以说，相对于Drawer navigation,Bottom navigation就有优势了。

然后，对于我们开发来说，又是一大难点了

比如FB、SnackBar等显示的方式，个人觉得都可以不需要FB了，至于SnackBar，看下图：

![components_bottomnavigation_spec_elevation1.png][]

原谅我欣赏不了这种美。

[https_github.com_LittleFriendsGroup_BottomNavigation]: https://github.com/LittleFriendsGroup/BottomNavigation
[components_bottomnavigation_spec_elevation3.png]: /images/20220713/684771869cb54f40ae5c6f0476322ba9.png
[components_bottomnavigation_usage3.png]: /images/20220713/88e66f6d76c64ff3babfd2c8cae5f7b8.png
[components_bottomnavigation_usage4.png]: /images/20220713/20a2994019c14d1e8c97ebd5082cec69.png
[components_bottomnavigation_usage5.png]: /images/20220713/f5b97985840a40a59f5c78c2e87738d6.png
[components_bottomnavigation_usage6.png]: /images/20220713/ad829d21cabf4fd9980eb5ffd984be3b.png
[components_bottomnavigation_style5.png]: /images/20220713/1b7583506d5a428799642c6dd2a8b412.png
[components_bottomnavigation_style6.png]: /images/20220713/c55801d2c71f4e56850b8bdd2ebe268e.png
[components_bottomnavigation_style1.png]: /images/20220713/9482e9f1428e44c38efcc9f97e6584c0.png
[components_bottomnavigation_style2.png]: /images/20220713/8edf88f2cb8b40cabe87ea348b7c9964.png
[components_bottomnavigation_style3.png]: /images/20220713/500c20c3b8674195a82e8b549e606bcc.png
[components_bottomnavigation_style4.png]: /images/20220713/eb8d206e9743450c95557feeccfe1233.png
[7ef01fcajw1f1zw7j8vbyg209w0hmu0y.gif]: /images/20220713/135aaa5f9f1847ffac990940c44b491e.png
[7ef01fcajw1f1zwkyevefg209w0hm4gx.gif]: /images/20220713/e52988d82b964420892b6144e1339453.png
[7ef01fcagw1f1zwwyi12mg209y0hmx5p.gif]: /images/20220713/4465bc0ff3994f91ba559e84d74d06da.png
[7ef01fcagw1f1zwz18jkkg209y0hmx6p.gif]: /images/20220713/62ab0d43855240f6a6a23b5df1bc08d7.png
[components_bottomnavigation_spec_fixed1.png]: /images/20220713/92d2a471a66d4cc38c5db868d6ed1ab8.png
[7ef01fcajw1f1zxp58q1pg209w08kwfo.gif]: /images/20220713/1d56ce11aa7f4819b0fd51e7bbd62f1c.png
[https_www.google.com_design_spec_components_bottom-navigation.html_bottom-navigation-specs]: https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs
[Don_t use bottom tab bars]: http://developer.android.com/design/patterns/pure-android.html
[68747470733a2f2f706963332e7a68696d672e636f6d2f30316530633265323131313864663739353037623437393762646137316465655f622e706e67]: https://camo.githubusercontent.com/d2c03ce73cff8a3bdcf8110e52522bff37d9e029/68747470733a2f2f706963332e7a68696d672e636f6d2f30316530633265323131313864663739353037623437393762646137316465655f622e706e67
[components_bottomnavigation_spec_elevation1.png]: /images/20220713/ef3e8e0bf7904581b2f7f90915d535d1.png