編者按：底部導航欄幾乎是當前 UI 中用來快速導航的基礎功能組件了，它的適用范圍非常廣泛，取代了很多早期的頂部導航機制，讓 UI 界面更加順手。而在具體的設計項目中，設計要求也相當具體。這篇文章出自資深設計師 Saadia Minhas 之手，她結合自己豐富的工作經驗總結了底部導航設計的完整設計方法。

Saadia Minhs 的更多文章：

這篇文章系統介紹了手機和平板設備底部標簽欄導航設計的的最佳實踐。

首先，你需要了解底部導航標簽欄對移動應用的重要性，之后我會通過展示其中具體元素，來詳細拆解底部導航欄的結構，然后列出底部導航的最佳設計實踐以及一系列可視化的示例。最后一節，我會用使用實際應用示例，來展示幾種底部導航欄的替代方案。

關鍵要點

• 當你的 APP 中有三到五個主要導航選項時，請使用底部標簽欄。
• 底部標簽欄具有固定的布局，并且滾動不是必要的交互。
• 使用圖標和文本標簽作為標簽標題。遵循圖標和標簽對應的標準。
• 使用徽標來快速展示選項內包含的更新內容條目數量。
• 對于沒有可用內容的選項，顯示標準的空狀態。
• 使用漢堡菜單和抽屜式導航，來提供五個以上的選項。

底部標簽導航欄

底部標簽欄是一個常見的 UI 組件，方便用戶通過單擊，導航到 APP 的幾個主要的功能模塊。底部標簽欄用于移動設備和平板設備，可更輕松地導航到 APP 的三到五個頂層視圖。

底部導航欄在桌面端的界面中，不算是常見的元素。由于屏幕尺寸較大，桌面端界面很容易忽略底部導航欄。這使得用戶很難一眼就看到整個屏幕。在移動設備上，底部導航更容易被發現，因為屏幕尺寸要小得多。

為什么底部導航重要？

設計底部導航欄處于對拇指交互更加友好的區域。在移動設備上，底部導航欄更容易用拇指觸及，因此成為更人性化的交互控件。

底部標簽欄設計最佳實踐

以下最佳實踐可幫助你為 APP 設計一個有吸引力且可用的底部標簽欄。

結構說明

布局

根據 Material Design 指南，底部標簽欄包含三到五個標簽或選項。底部標簽欄中僅提供應用的最上層的頁面視圖。

不建議使用少于三個選項的標簽欄。相反，你可以使用標簽控件來顯示這些選項。

無論你顯示三個還是五個標簽，使用整個可用空間來展現所有選項都很重要。在所有選項之間平均地分配空間。

在標簽欄中放置太多標簽并不是一個好主意。

• 這讓用戶很難決定需要點擊哪個標簽。
• 更多的導航選項意味著 APP 的復雜化。
• 它減少了小屏幕上的觸摸面積。
• 此外，它會在小屏幕上顯得混亂。

如果 APP 的頂級導航有超過五個視圖，請通過其他 UI 位置提供對其他視圖的訪問。如果你希望更多選項保持可見，請考慮使用替代選項（請參閱本文的最后一節）。

固定布局

底部標簽欄的布局是固定的。所有可用選項均顯示在欄中。

由于多種原因，不建議使用可滾動的底部欄。

1. 這不是標準模式，因此用戶并不期望滾動底部欄。
2. 這會讓用戶感到沮喪，因為他們需要記住是否已經滾動了該欄，或者他們可能會忘記滾動的方向。

圖標

底部導航欄中的標簽可以標記為圖標或圖標和文本的組合。

如果你只使用圖標，請確保使用更容易識別的標準圖標。不要使用不熟悉的圖標

如果你使用彩色圖標，請不要使用太多顏色。將顏色與 APP 的主題相關聯。

文本標簽

為了便于理解，最好使用文本和圖標。

對于文本標簽，請確保：

使用與選項卡中顯示的內容類型相關的有意義的標簽文本。

使用簡短、簡潔且相關的標簽文本。

不要使用過長的標簽文本，因為小屏幕沒有足夠的空間。

請勿使用超過一行的文本標簽。

不要因為可用空間太小而截斷文本標簽。同時需要注意，盡量使用短標簽。

不要縮小標簽文本的字號，因為與其他標簽相比，它們在導航欄上看起來會很奇怪。

標簽文本的位置

將標簽放在圖標下方或圖標右側。

當移動設備的屏幕布局更改為橫向時，或者你正在使用平板電腦時，標簽會調整到圖標旁邊以利用可用空間。它還有助于在屏幕的垂直方向上節省更多空間。

狀態

選項卡有兩種狀態：活動和非活動狀態

使用清晰的選中狀態樣式，來輕松區分活動和非活動選項卡。否則，用戶在與選項卡交互時會對選項卡的狀態感到困惑。

有不同的方法來顯示活動和非活動狀態下的選項卡。

使用填充和輪廓圖標的圖標狀態組合。活動狀態下選項卡將顯示為填充樣式圖標。

使用背景來凸顯活動狀態選項卡。

將標識活動狀態的符號和導航欄一起使用，使其在 UI 上突出。

徽標（Badge）

標簽可以徽標的形式顯示附加信息。

徽標的存在，讓用戶無需打開標簽頁，即可查看標簽頁內內容的狀態。它有助于告知用戶標簽頁內容有更新。

如果你在選項卡中顯示會實時增加的項目（如及時通訊、電子郵件列表等），請使用徽標顯示該選項卡包含新項目。

使用點徽標有助于顯示選項卡中有新的信息。

此外，你還可以顯示一個計數器徽標，表示選項卡內新項目的數量。

放置順序

按照符合用戶期望的邏輯順序，組織底部標簽欄。將優先級最高的項目放在最左側，并按照相同規則組織其余項目。

記住拇指友好區域，并將最高優先級的項目放在用戶最有可能點擊的位置。

空狀態

可能會出現這樣的情況：選項卡中沒有內容可顯示。如果沒有內容，則顯示選項卡的空狀態。

當沒有可用內容時隱藏或禁用選項，并不是一個好主意，因為它會讓用戶感覺沒有邏輯且毫無頭緒。

禁用選項會使人們很難找到其被禁用的原因以及如何啟用它。

隱藏選項會使用戶感到困惑，因為他們需要了解為什么隱藏這個選項，以及如何才能再次顯示它。

當沒有可用內容時，點擊標簽時顯示空狀態。精心設計的空狀態包括一條消息和一條用戶行動召喚按鈕。

底部標簽欄的替代方案

如果你有更多想要在前端 UI 上顯示的頂級頁面，你可以在 APP 中使用備用解決方案。

在底部導航欄中提供三到四個主要選項，并使用表示「更多」漢堡圖標 作為最后一個選項。單擊此圖標將打開包含所有可用選項的菜單。

Meta Business Suite APP 在底部導航欄的最后一個選項卡中顯示「更多」選項。單擊「更多」會打開底部的抽屜式導航欄，其中包含更多選項。用戶可以從抽屜式導航欄中轉到任何所需的頁面或視圖。

使用漢堡菜單，并在菜單展開時顯示所有選項。否則，選項將保持隱藏狀態。

Food Panda 應用不顯示底部導航欄。相反，左上角有一個漢堡菜單圖標。單擊該圖標會顯示一個導航抽屜，其中包含指向應用所有主頁的鏈接。

結合底部標簽欄和漢堡菜單來使用。

Canva 采用底部標簽欄和漢堡菜單相結合的方式，將所有優先級高的項目顯示在底部欄，其他主要頁面則顯示在菜單中。

好了，這就是本篇所有底部導航控件的知識啦，希望對你有幫助。