Material Design學習之 Bottom navigation

轉載請註明出處：王亟亟的大牛之路

禮拜4一天因爲事假沒有去單位而後禮拜3因爲生日也沒寫文章，今天一早上班就補一篇MD的內容。這一篇是關於很有爭議的Bottom navigation相關內容（主要是翻譯和理解，代碼部分還沒來得及實驗）

---

衆所周知Android以前一直提倡者」Bar」一系列的東西儘可能是在「上面」，而蘋果的設計通常在如下

像這樣

而蘋果的通常在如下像這樣（拿個人微信作樣例，圈掉的部分無視）

而現在Material Design設計規範中增長底部導航欄也就是咱們今天文章的主角Bottom navigation

來看看官方是怎麼形容他的（接下來的翻譯全是 我人工翻譯。若有不許確可請原諒。臨時還沒找到字幕組或者什麼機構去解釋這部分）

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.
底部導航欄讓咱們可以更輕鬆的在幾個頂層的視圖間進行選擇和查看

這是一個給與咱們選擇和切換試圖組用的。

（就像上面微信，聯繫人。發現。我這系列作功能卡片切換。TMD怎麼拿微信作樣例了）

---

知道了這是一個幹什麼用的東西以後咱們來看看他的一些要點

Three to five top-level destinations of similar importance (Alternative: A persistent navigation drawer accessible from anywhere in the app)

比較推崇3-5個頁面的切換，假設過多就不推薦使用Bottom navigation
那假設過少，僅僅有2個這樣的也是不太推薦的。

推薦

不推薦

不推薦

注意點：
在與標籤相結合的底部導航時要當心。因爲在用戶使用應用程序時可能會引發混淆。

---

Style

Because bottom navigation actions are presented as icons, they should be used for content that can be suitably communicated with icons.

因爲底部的導航行爲是做爲圖標的，因此它們應該被用於內容，可以與圖標進行適當的溝通,至少要讓用戶簡單的理解這個圖標表明瞭什麼。

顏色不要五光十色的，僅僅要讓用戶清楚的理解他選擇的是哪一個便可了

推薦

不推薦

If the bottom navigation bar is colored, make the icon and text label of the current action black or white.

假設Bottom navigation自己是彩色的，那麼圖標和文字儘可能用黑色或者白色

推薦

不推薦

Text labels provide short, meaningfully definitions to bottom navigation icons. Avoid long text labels as these labels do not truncate or wrap.

文字部分不要太長儘可能精簡，表達意思便可

推薦

不推薦

那假設必定要很是長的描寫敘述文字，請把多餘部分隱藏掉，不要換行或者縮小字體大小

推薦

不推薦

注意點：
標籤真的多了。就別貼字了。假設僅僅有三個就請字+圖標都放上去
被選中的必定要高亮。高亮，高亮重要的事情說三遍

---

Behavior

Tapping on a bottom navigation icon takes you directly to the associated view, or refreshes the currently active view.

上拉列表時。隱藏Bottom navigation，下拉列表時，顯示Bottom navigation

這個和我以前寫過的一個解放用戶操做空間差點兒相同概念（我好66 哈哈哈哈，傳送門：http://blog.csdn.net/ddwhan0123/article/details/50352662）

像這樣

推薦點擊切換，而不是類似於viewpager形式的滑動切換

推薦

不推薦

---

Specs

和其它控件同樣也有他的尺寸規格。這邊就不詳解了，看看便可。

在不一樣的屏幕大小下也有着不一樣的規格體現

在平板裏，又是這樣

最後貼一下視圖厚度分佈

原文地址：https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs

2016.3.25 補上Demo:
https://github.com/aurelhubert/ahbottomnavigation