編者按：設計 UI 底部導航欄可以說是絕大多數 UI 項目當中必然會遭遇的設計內容，而這篇來自設計師 Vikalp Kaushik 的文章詳細梳理了底部導航欄的最佳實踐：

導航在 UI 界面當中是相當常見、直接影響用戶體驗的基礎組件。通常底部導航，會用到圖標、文本標簽等元素，看起來不復雜，但是想要設計出效果，在視覺、交互、體驗、邏輯上確保質量，還是有很多注意事項的。這篇文章就系統梳理一下 UI 導航欄的設計。

為什么要設計導航欄？

• 用戶可以快速檢索到他們在哪個區域
• 允許用戶快速在不同的功能模塊間切換
• 讓用戶快速了解到不同界面的功能

導航欄的重要性

將導航欄置于底部，很大程度上是基于用戶拇指交互的覆蓋區域。無論使用左手交互還是右手交互，底部導航欄都處于用戶拇指可以自然覆蓋的區域，

除了結合漢堡菜單之外，底部導航還需要橫跨多頁，保持不變。

底部導航欄結構

底部導航欄的基本布局結構：

• 1、承載導航元素的控件容器
• 2、激活狀態下的文本標簽（可選）
• 3、非激活狀態下的文本標簽（可選）
• 4、激活狀態下的圖標
• 5、非激活狀態下的圖標

導航欄尺寸

雖然圖標的形狀會因為設計的差異而有所不同，但是在圖標外觀的現實格式和基礎尺寸上，應該保持一致。

激活狀態下的圖標尺寸可能會有所增加，配色和輪廓會微調，以達到抓人眼球的目的，但是不應差異太大。

在具體的設計上，底部導航欄形成了如今的一套最佳實踐。

1、使用3-5個按鈕

確保底部導航的按鈕控制在3-5個之間。5個按鈕通常會讓導航的空間比較緊湊局促，用戶可能會誤觸，這樣會讓體驗非常差。

如果真的有超過5個導航圖標的話，建議參考 Google 的做法，使用漢堡菜單將它們隱藏在其他更加易于訪問的地方。

2、不要使用滾動式的導航欄

這同樣是為了解決導航欄圖標過多的問題而誕生的一個思路，但是這個方案其實解決不了問題，因為總會有圖標被遮住，這樣帶來的不確定的問題更多！

3、保持視覺和風格的一致性

保持圖標在設計上的一致性其實非常重要，這是保證 APP 在設計上，有著最基本的專業性。不一致的設計非常容易被用戶注意到，帶來的用戶體驗的隱患是非常之大的。比如圖標的樣式盡量保持一致，風格保持統一，等等等等。

4、避免使用多種顏色

作為一個對功能性要求較高的控件，導航欄本身是需要傳遞「觸發」和「非觸發」的概念的，而信息的傳達更多時候是借助色彩和不透明度來呈現的，使用過多的色彩會導致導航欄失去這種基礎的辨識度。

5、文本標簽不要截斷或換行

文本標簽為導航欄提供了快速且易于理解的信息提示，盡量使用單個詞匯來予以說明才符合它所處的位置，所以，盡量不要讓它被截斷或者換行。

結語

提供完美的導航設計并不復雜，確保導航簡單、清晰，確保一致性的前提下，挑選一套精心制作的圖標，通常就能很快地出效果。和很多別的設計不同，導航欄的設計通常是越簡單明了，越容易出效果。

另外，這篇導航欄設計的文章能夠幫你進一步搞定導航欄的設計：