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

往期回顧：

1. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之提示框+警告框
2. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之簡(jiǎn)易菜單+彈框
3. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之底部浮層
4. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之按鈕
5. 高手幫你學(xué)規(guī)范！IOS和ANDROID規(guī)范解析之標(biāo)簽導(dǎo)航和分段控件

Google Material Design Guideline

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

用法

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

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

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

△ ?抽屜導(dǎo)航

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

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

△ ?選項(xiàng)位置是固定的

△ ?注意選項(xiàng)個(gè)數(shù)

樣式

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

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

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

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

行為

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

另外，有以下三點(diǎn)需要注意：

△ ?點(diǎn)擊當(dāng)前選項(xiàng)的圖標(biāo)，則頁(yè)面返回頂部

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

下面這個(gè)是錯(cuò)誤的案例，需要注意不要這樣做：

△ ?【錯(cuò)誤案例】當(dāng)點(diǎn)擊不同選項(xiàng)時(shí)，避免時(shí)頁(yè)面發(fā)生橫向切換

MD中，對(duì)各個(gè)組件都規(guī)定了它們?cè)诖怪狈较蛏系母叨取？梢钥吹剑撞繉?dǎo)航欄的垂直高度還是比較高的，規(guī)范中提到，底部導(dǎo)航欄僅僅比底部浮層、抽屜欄以及鍵盤低一些，如下圖：

△ ?MD中各控件垂直高度示意

iOS Human Interface Guidelines

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

• 如果底部導(dǎo)航欄中的某個(gè)選項(xiàng)暫時(shí)不可用，不要把該選項(xiàng)置灰。在不可用而又點(diǎn)擊了的情況下，頁(yè)面只要展示這個(gè)頁(yè)面為什么沒有內(nèi)容就可以了。
• 避免使用過多的選項(xiàng)。當(dāng)然，如果選項(xiàng)過少也會(huì)有問題。一般在iPhone上，3到5個(gè)選項(xiàng)比較合適。在iPad上可以適量增加。
• 可以使用肩標(biāo)來提示信息數(shù)量，如下圖：

△ ?肩標(biāo)示意

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

△ ?工具欄示意

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

最近把這個(gè)系列的專題都做成了音頻+幻燈片形式的分享，同時(shí)整理了交互方面對(duì)實(shí)戰(zhàn)很有幫助的一些知識(shí)點(diǎn)，在千聊上跟大家分享，希望可以幫助大家提高交互技能。分享是一個(gè)系列，總共包含6次主題分享：

1. 場(chǎng)景思維的運(yùn)用
2. 心理模型和流程設(shè)計(jì)（一）
3. 流程設(shè)計(jì)（二）
4. 流程設(shè)計(jì)（三）
5. 正確使用iOS和Material Design控件
6. 方案測(cè)試和驗(yàn)證

千聊分享的形式，是PPT + 語(yǔ)音，通過PPT展示重點(diǎn)內(nèi)容，結(jié)合語(yǔ)音講解，效果較好，感興趣的朋友可以通過鏈接報(bào)名（價(jià)格是66元，包含6次分享）：https://m.qlchat.com/live/channel/channelPage/850000134259058.htm

作者系列文章：

1. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之提示框+警告框
2. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之簡(jiǎn)易菜單+彈框
3. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之底部浮層
4. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之按鈕

歡迎關(guān)注作者微信公眾號(hào)：新設(shè)計(jì)青年

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com