原文鏈接：https://github.com/LittleFriendsGroup/BottomNavigation

底部導(dǎo)航欄（Bottom navigation）規(guī)范指南

前言：

最近 Google 在Material Design設(shè)計(jì)規(guī)范中加入底部導(dǎo)航欄（Bottom navigation）設(shè)計(jì),對(duì)此，我會(huì)在文末給出個(gè)人看法！現(xiàn)在我們先來(lái)學(xué)習(xí)Bottom navigation
在設(shè)計(jì)、使用、交互、風(fēng)格、尺寸的一些規(guī)范。水平有限，如理解有誤，請(qǐng)多多吐槽。

簡(jiǎn)單介紹

底部導(dǎo)航欄（Bottom navigation）這種設(shè)計(jì)在很多 Android App 中都是隨處可見(jiàn)的，如支付寶、微信、QQ等都使用了，它允許用戶可以在多個(gè)頂級(jí)視圖之間快速切換。

如何使用

（1）底部導(dǎo)航欄需要有3-5個(gè)標(biāo)簽（tab）,并且每個(gè)tab選擇的視圖重要性要相似，對(duì)于少于3個(gè)tab的情況，是不推薦使用Bottom navigation的。

正確方式：

錯(cuò)誤方式：

（2）如果標(biāo)簽很多，比如有超過(guò)了5個(gè)這種情況呢？Google也是不提倡使用Bottom navigation的，可以用Drawer navigation替換。

正確方式：

錯(cuò)誤方式：

風(fēng)格樣式

（1）標(biāo)簽Icons和文字的顏色選擇是很重要的，一亮一暗才能有對(duì)比，用戶才很快知道你選擇了哪個(gè)，如果五顏六色，你是很難分清選擇了哪個(gè)的。

正確方式：

錯(cuò)誤方式：

（2）標(biāo)簽的文字說(shuō)明要簡(jiǎn)短而有意義，避免太長(zhǎng)的，也不提倡太長(zhǎng)了換行和省略的方式

正確方式：

錯(cuò)誤方式：

注意：

• 選中的標(biāo)簽要展示高亮圖標(biāo)和文字
• 如果是3個(gè)標(biāo)簽的時(shí)候，要展示Bottom navigation bar中所有的圖標(biāo)和文字
• 如果是多于3個(gè)標(biāo)簽的情況，沒(méi)選中的tab只需要展示圖標(biāo)就可以，不用文字說(shuō)明

行為交互

（1）用戶上拉列表時(shí)，隱藏Bottom navigation，下拉列表時(shí)，顯示Bottom navigation

(2)點(diǎn)擊Bottom navigation Icon 的時(shí)候，不能打開(kāi)菜單選擇或者其他彈窗操作，而只是刷新當(dāng)前視圖的內(nèi)容，如下圖：

(3)不推薦使用手勢(shì)在視圖內(nèi)容區(qū)域切換視圖

正確方式：

錯(cuò)誤方式：

尺寸設(shè)計(jì)

（1）Bottom navigation對(duì)于尺寸的要求還是挺嚴(yán)格的，標(biāo)簽選中和沒(méi)選中都有細(xì)微的差別。

效果如下：

對(duì)手機(jī)app來(lái)說(shuō)已經(jīng)足夠了，如果你想了解更多，可以去官網(wǎng)看看更多詳情：https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs

雜談

Android官網(wǎng)中有這么一句話：

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.

雖然我英語(yǔ)爛，但也不至于看不懂什么意思吧，之前說(shuō)好的Meterial Design 規(guī)范說(shuō)變就變，自己都不遵守，有何規(guī)范可言。

然而，我是理智的，Google + 和 Google Photos 都加入了底部導(dǎo)航欄（Bottom navigation），打臉歸打臉，決定這一因素的還是用戶。

我們說(shuō)說(shuō)Drawer navigation，不要覺(jué)得疑惑，關(guān)Drawer什么事？沒(méi)錯(cuò)，就是和它有關(guān)，認(rèn)真想想，使用Drawer切換視圖時(shí)，使用方式是點(diǎn)擊按鈕或者手勢(shì)滑動(dòng)打開(kāi)，然后才選擇跳轉(zhuǎn)的Item，雖然節(jié)省了手機(jī)視圖空間，但是操作較不方便以致使用率低，從而降低其他頁(yè)面的跳轉(zhuǎn)率這個(gè)缺點(diǎn)是不能忽視的。
所以說(shuō)，相對(duì)于Drawer navigation,Bottom navigation就有優(yōu)勢(shì)了。

然后，對(duì)于我們開(kāi)發(fā)來(lái)說(shuō)，又是一大難點(diǎn)了

比如FB、SnackBar等顯示的方式，個(gè)人覺(jué)得都可以不需要FB了，至于SnackBar，看下圖：

原諒我欣賞不了這種美。

總結(jié)

以上是生活随笔為你收集整理的底部导航栏Bottom navigation规范指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。