在開始之前，請大家先思考下面兩個問題～

問題1：你的產(chǎn)品真的需要Tab Bar嗎？

好像并不是。雖然淘寶、微信、微博、美團等大多數(shù)主流的產(chǎn)品都在使用Tab Bar，但這并不意味著所有產(chǎn)品都需要它。

問題2：為什么產(chǎn)品要有Tab Bar？

答案是為了易于使用，意味著通過Tab Bar這種簡單的設計可以輕松幫助用戶導航到頁面。

#1顯示最重要的信息

導航欄應該只包含最有用的信息，不能添加過多無用的標簽使導航欄混亂。許多App在導航欄上添加搜索功能，因為這有助于用戶更快地導航和檢索內容。

#2擴展導航的功能

主流App更喜歡在底部導航欄中使用4-5個標簽，這樣能保持導航欄的整潔，還避免了標簽過多導致用戶難以精確點擊選項的情況。

#3容納多種標簽形式

多數(shù)App底部導航欄會使用「圖標+文字」的標簽形式，這樣能清楚地告知用戶點擊標簽之后的結果。

有時候我們也會看到有些產(chǎn)品的導航欄只有圖標沒有文字，但這種形式并不會影響我們的操作，因為當導航欄的標簽使用了用戶特別熟悉的形狀和內涵，完全可以省略文字。

▲ 宜家App的導航欄使用了大眾都很熟悉的圖標，所以即使不加文字，我們也能清楚地知道這3個圖標分別代表了主頁、分類、我的。

▲ 相對于宜家，Youtube的導航欄就顯得有點復雜，因為Youtube的圖標含義用戶可能并不是很熟悉，加上文字說明很有必要。

#4文字標簽應該簡短

文字標簽應該簡短而清晰，準確的文字說明能對用戶使用正確導航起到關鍵作用。

▲ TikTok導航所有的文字標簽都簡短，并且中間的添加圖標還隱藏掉了文字，以此來引吸引用戶的注意力。

#5避免隱藏導航欄

Tab Bar通常包含了最重要的導航信息，應該始終向用戶展示，避免在用戶滾動頁面的情況下被隱藏掉。

▲ Pinterest導航欄的設計是個例。當滾動頁面時，底部的導航欄會隱藏，這么設計的原因可能是為了防止導航欄遮擋圖像，保證用戶看到更多的圖像內容。

#6傳達位置

Tab Bar幫助用戶輕松導航，但如果用戶不知道自己的位置，將會影響他們?yōu)g覽和使用產(chǎn)品的體驗。

▲ 多鄰國App通過改變導航圖標的樣式來讓用戶清晰的知道自己所有的板塊。

▲ Headspace在底部導航欄加上了線條裝飾，每次切換選項，線條都會跟著一起切換，確保告知用戶確切的位置。

#7從反饋中學習并不斷改進

反饋是關鍵，如果想改善產(chǎn)品的導航欄設計，就要考慮并測試用戶最喜歡哪個導航選項，不使用哪個導航，需要四個還是五個選項等等。

#8在導航欄中顯示更新

Tab Bar不僅僅起到導航的作用，很多時候還能通過狀態(tài)變化告知用戶更多的信息。

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網(wǎng)》從TikTok、Youtube、Pinterest等主流海外產(chǎn)品中，學習如何設計底部導航欄

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。

藍藍設計( www.tuitetiyu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務