底部tab導(dǎo)航是現(xiàn)在應(yīng)用里非常常見的一種組件。關(guān)于這種最常用到的組件，你了解的全面嗎？下面我們來分別看一下Material Design設(shè)計規(guī)范以及iOS設(shè)計規(guī)范里是怎么規(guī)定的。

Google Material Design Guideline

MD規(guī)范，先是給這個控件來了總述：底部導(dǎo)航欄可以使用戶通過點擊一下，就在頂層視圖間的進(jìn)行方便的切換。

用法

底部導(dǎo)航欄主要是為手機(jī)的導(dǎo)航設(shè)計的。如果是在較大的顯示屏上，比如桌面，則可以使用側(cè)邊導(dǎo)航，如下圖：

底部導(dǎo)航欄主要用于以下兩種情況：

1. 3至5個同等重要的頁面間切換（注：在Material Design中，這種情況也可視情況使用抽屜導(dǎo)航，如下圖：）

抽屜導(dǎo)航

2. 需要在應(yīng)用里方便地對頁面進(jìn)行切換（注：如果是1或者2個頁面，則可以使用標(biāo)簽導(dǎo)航）。

底部Tab導(dǎo)航和標(biāo)簽導(dǎo)航

選項位置是固定的

注意選項個數(shù)

樣式

首先，Material Design中關(guān)于底部導(dǎo)航欄中的圖標(biāo)和文字有如下說明：

1. 當(dāng)某個選項是被選中狀態(tài)，則展示該選項的圖標(biāo)和文字；
2. 如果只有3個選項，則一直展示所有選項的圖標(biāo)和文字；如果有4或5個選項，則被選中的選項展示圖標(biāo)和文字，未被選中的只展示圖標(biāo)（實際中這一條好像很多應(yīng)用都沒有嚴(yán)格遵守這一條，筆者也覺得沒有必要嚴(yán)格遵守）。

其次，關(guān)于顏色，MD比較提倡使用簡單的顏色，避免復(fù)雜，如下圖：

最后，關(guān)于每個選項的文字，需要注意文字不要折行（就是不要有兩行的情況），不要出現(xiàn)標(biāo)題使用“…”來省略的情況，不要為了節(jié)省空間而縮小文字的字號。這幾點國內(nèi)的應(yīng)用都做的很好啦，沒有什么好說的。

行為

當(dāng)用戶選擇點擊某個選項時，則應(yīng)該直接展現(xiàn)相應(yīng)的頁面，或者刷新當(dāng)前的頁面；注意不要在點擊后展示菜單或者彈出框（pop-up)。另外，如果點擊系統(tǒng)返回鍵，不會切換到底部導(dǎo)航欄上一次點擊的頁面。

另外，有以下三點需要注意：

點擊當(dāng)前選項的圖標(biāo)，則頁面返回頂部

點擊底部導(dǎo)航欄中的選項后，應(yīng)該返回該頁面頂部并刷新該選項的頁面（這一點筆者認(rèn)為也不是必要，需要根據(jù)應(yīng)用自身的場景來判斷）

下面這個是錯誤的案例，需要注意不要這樣做：

【錯誤案例】當(dāng)點擊不同選項時，避免時頁面發(fā)生橫向切換

MD中，對各個組件都規(guī)定了它們在垂直方向上的高度。可以看到，底部導(dǎo)航欄的垂直高度還是比較高的，規(guī)范中提到，底部導(dǎo)航欄僅僅比底部浮層、抽屜欄以及鍵盤低一些，如下圖：

MD中各控件垂直高度示意

iOS Human Interface Guidelines

相對而言，蘋果的規(guī)范要簡單的多，大部分都是我們平時用到的狀態(tài)，也比較少用錯。大家只需要注意以下幾點就可以了：

1. 如果底部導(dǎo)航欄中的某個選項暫時不可用，不要把該選項置灰。在不可用而又點擊了的情況下，頁面只要展示這個頁面為什么沒有內(nèi)容就可以了。

2. 避免使用過多的選項。當(dāng)然，如果選項過少也會有問題。一般在iPhone上。

3. 可以使用肩標(biāo)來提示信息數(shù)量，如下圖：

肩標(biāo)示意

需要注意的一點是，底部導(dǎo)航欄和之前介紹過的工具欄，是不能同時出現(xiàn)的。

工具欄示意

以上介紹了MD和iOS設(shè)計規(guī)范中，對底部導(dǎo)航欄的定義。

討論使人認(rèn)識更加深刻。歡迎留言。

#專欄作家#

沐風(fēng)，微信公眾號：“沐風(fēng)與體驗設(shè)計”。人人都是產(chǎn)品經(jīng)理專欄作家，2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團(tuán)隊負(fù)責(zé)人。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計經(jīng)驗，專注設(shè)計領(lǐng)域，歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。