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

這篇文章系統(tǒng)介紹了手機和平板設(shè)備底部標(biāo)簽欄導(dǎo)航設(shè)計的的最佳實踐。

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

關(guān)鍵要點

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

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

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

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

為什么底部導(dǎo)航重要？

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

底部標(biāo)簽欄設(shè)計最佳實踐

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

結(jié)構(gòu)說明

布局

根據(jù) Material Design 指南，底部標(biāo)簽欄包含三到五個標(biāo)簽或選項。底部標(biāo)簽欄中僅提供應(yīng)用的最上層的頁面視圖。

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

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

在標(biāo)簽欄中放置太多標(biāo)簽并不是一個好主意。

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

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

固定布局

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

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

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

圖標(biāo)

底部導(dǎo)航欄中的標(biāo)簽可以標(biāo)記為圖標(biāo)或圖標(biāo)和文本的組合。

如果你只使用圖標(biāo)，請確保使用更容易識別的標(biāo)準(zhǔn)圖標(biāo)。不要使用不熟悉的圖標(biāo)

如果你使用彩色圖標(biāo)，請不要使用太多顏色。將顏色與 APP 的主題相關(guān)聯(lián)。

文本標(biāo)簽

為了便于理解，最好使用文本和圖標(biāo)。

對于文本標(biāo)簽，請確保：

使用與選項卡中顯示的內(nèi)容類型相關(guān)的有意義的標(biāo)簽文本。

使用簡短、簡潔且相關(guān)的標(biāo)簽文本。

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

請勿使用超過一行的文本標(biāo)簽。

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

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

標(biāo)簽文本的位置

將標(biāo)簽放在圖標(biāo)下方或圖標(biāo)右側(cè)。

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

狀態(tài)

選項卡有兩種狀態(tài)：活動和非活動狀態(tài)

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

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

使用填充和輪廓圖標(biāo)的圖標(biāo)狀態(tài)組合?；顒訝顟B(tài)下選項卡將顯示為填充樣式圖標(biāo)。

使用背景來凸顯活動狀態(tài)選項卡。

將標(biāo)識活動狀態(tài)的符號和導(dǎo)航欄一起使用，使其在 UI 上突出。

徽標(biāo)（Badge）

標(biāo)簽可以徽標(biāo)的形式顯示附加信息。

徽標(biāo)的存在，讓用戶無需打開標(biāo)簽頁，即可查看標(biāo)簽頁內(nèi)內(nèi)容的狀態(tài)。它有助于告知用戶標(biāo)簽頁內(nèi)容有更新。

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

使用點徽標(biāo)有助于顯示選項卡中有新的信息。

此外，你還可以顯示一個計數(shù)器徽標(biāo)，表示選項卡內(nèi)新項目的數(shù)量。

放置順序

按照符合用戶期望的邏輯順序，組織底部標(biāo)簽欄。將優(yōu)先級最高的項目放在最左側(cè)，并按照相同規(guī)則組織其余項目。

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

空狀態(tài)

可能會出現(xiàn)這樣的情況：選項卡中沒有內(nèi)容可顯示。如果沒有內(nèi)容，則顯示選項卡的空狀態(tài)。

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

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

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

當(dāng)沒有可用內(nèi)容時，點擊標(biāo)簽時顯示空狀態(tài)。精心設(shè)計的空狀態(tài)包括一條消息和一條用戶行動召喚按鈕。

底部標(biāo)簽欄的替代方案

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

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

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

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

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

結(jié)合底部標(biāo)簽欄和漢堡菜單來使用。

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

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

陳子木