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

底部導航欄（Bottom navigation）規范指南

前言：

最近 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)不推薦使用手勢在視圖內容區域切換視圖

正確方式：

錯誤方式：

尺寸設計

（1）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.

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

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

我們說說Drawer navigation，不要覺得疑惑，關Drawer什么事？沒錯，就是和它有關，認真想想，使用Drawer切換視圖時，使用方式是點擊按鈕或者手勢滑動打開，然后才選擇跳轉的Item，雖然節省了手機視圖空間，但是操作較不方便以致使用率低，從而降低其他頁面的跳轉率這個缺點是不能忽視的。
所以說，相對于Drawer navigation,Bottom navigation就有優勢了。

然后，對于我們開發來說，又是一大難點了

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

原諒我欣賞不了這種美。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。