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

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

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

關(guān)鍵要點(diǎn)

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

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

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

底部導(dǎo)航欄在桌面端的界面中，不算是常見的元素。由于屏幕尺寸較大，桌面端界面很容易忽略底部導(dǎo)航欄。這使得用戶很難一眼就看到整個(gè)屏幕。在移動設(shè)備上，底部導(dǎo)航更容易被發(fā)現(xiàn)，因?yàn)槠聊怀叽缫〉枚唷?/p>

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

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

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

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

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

布局

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

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

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

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

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

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

固定布局

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

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

1. 這不是標(biāo)準(zhǔn)模式，因此用戶并不期望滾動底部欄。
2. 這會讓用戶感到沮喪，因?yàn)樗麄冃枰涀∈欠褚呀?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)簽，請確保：

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

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

不要使用過長的標(biāo)簽文本，因?yàn)樾∑聊粵]有足夠的空間。

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

不要因?yàn)榭捎每臻g太小而截?cái)辔谋緲?biāo)簽。同時(shí)需要注意，盡量使用短標(biāo)簽。

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

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

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

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

狀態(tài)

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

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

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

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

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

將標(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)容有更新。

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

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

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

放置順序

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

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

空狀態(tài)

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

當(dāng)沒有可用內(nèi)容時(shí)隱藏或禁用選項(xiàng)，并不是一個(gè)好主意，因?yàn)樗鼤層脩舾杏X沒有邏輯且毫無頭緒。

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

隱藏選項(xiàng)會使用戶感到困惑，因?yàn)樗麄冃枰私鉃槭裁措[藏這個(gè)選項(xiàng)，以及如何才能再次顯示它。

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

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

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

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

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

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

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

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

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

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

陳子木