5000字干貨！從5個方面幫你完整了解標簽欄設計

前言

標簽欄是用戶進入 APP 的第一觸點，絕大多數以固定在設備底部的形式、讓用戶在應用中的不同模塊之間快速切換。它作為移動應用中最常見的元素之一，是 UI 設計師們繞不開的課題。

一個好的底部標簽欄可傳達出產品的核心功能、品牌形象及設計理念，還能用作判斷應用是否精致的標準，用戶可通過第一觸點來感受這個 APP 是粗糙的還是精致的。所以看似簡單，但要想設計出視覺美觀、反饋清晰的底部標簽欄，有很多值得我們深究的地方。

那么標簽欄為何存在？背后滿足的需求和場景到底有哪些？能給產品、用戶帶來什么價值？本文將從很多優秀產品中，挖掘出值得學習和借鑒的設計亮點，對標簽欄作出思考及分析，希望能幫到大家。

本期大綱

1. 了解標簽欄
2. 標簽欄常見設計規范
3. 標簽欄組合方式
4. 圖標切換樣式
5. 標簽欄功能樣式延展
6. 總結

了解標簽欄

1. 為什么要設計標簽欄？

雖然我們看到如淘寶、京東、美團等主流產品都使用了底部標簽欄，但并不是所有的產品都需要，部分工具、打車類型的 APP 就沒有使用標簽欄，所以在設計一個產品之前應該思考，為什么需要、有沒有更好的其他方式代替。在這里，我們先了解其作用，然后結合需求思考與產品的的契合度，最后再決定是否使用它。

傳達核心功能

底部標簽欄一般由 3~5 個功能（入口）組成一個完整的產品架構，這些功能基本都屬產品的核心，可以幫助用戶避開產品中其他信息的干擾、精準快速的找到這些功能并使用它。

突出重要功能

即便有些不是產品的核心功能，但用戶的操作頻率極高、可能是核心功能的前置條件或索引，也會將入口置于底部標簽欄，常見的有掃一掃、搜索、發布作品等。需要注意的是，這種功能在操作之后大部分都會進行二級頁面跳轉，與其他標簽的等級權重并非平行。

多種展示方式

因產品定位不同、受眾用戶不同，接收信息的方式也有區別。標簽欄能靈活的承載多種視覺展現方式，以傳達出不同的產品氣質。例如：受眾群體范圍非常廣泛且存在一定的互聯網文化差異的產品，使用純文字標簽；而對于長期活躍在互聯網環境下年輕化的專業用戶，且產品較為輕量，標簽欄使用純圖標會顯得更加簡潔、更有氣質。

定位用戶坐標

用戶可通過被激活的標簽（高亮、顏色變化）清楚自己當前所處位置，減少用戶思考或通過其他信息解讀而花費不必要的時間。

2. 為什么放在底部?

首先，將標簽欄置于底部非常方便用戶拇指與設備進行交互，基于單手操作的便利性，無論左、右手，其大拇指都處在設備底部的自然覆蓋區域；其次，因用戶是通過從上到下、從左到右的“F”型瀏覽順序，設備底部對用戶產生的視覺注意力相對較低，置底導航不會分散其注意力，同時又方便用戶隨時切換至其他感興趣的功能模塊。

根據史蒂文·霍伯（Steven Hoober）在對移動設備使用情況的研究結論中表明：抱著手機的人占 36%、兩只手使用手機的人占 15%，而 49％的人依靠一只手在手機上完成事情，也就是說，僅用大拇指操作手機的用戶可能高達 75%，這足以說明將 Tab 欄置于底部體驗會更好，很大程度上提高用戶的操作效率及頻次。

綠色代表可以輕松到達的區域；黃色代表需要延伸的區域；紅色表示難以到達，需用戶改變手持方式。

3. 標簽欄結構

底部標簽欄結構布局相對來說比較簡單，主要有以下幾種元素組成：

1 - 用于承載標簽欄所有元素的容器；

2 - 激活狀態下的圖標，高亮提示，明確用戶當前所在位置，點擊不會跳轉到其他功能模塊（舵式導航除外）；

3 - 激活狀態下的標簽文本，作用與上述相同；

4 - 未激活狀態下的圖標，相比激活狀態，視覺層級較弱，點擊會跳轉至對應的功能模塊；

5 - 未激活狀態下的標簽文本，作用與上述相同。

標簽欄常見的設計規范

1. 標簽數量

為確保底部標簽欄表現清晰、反饋及時，iOS、Android 兩大平臺在設計規范中都對標簽數量給了相同的建議，將底部標簽數量控制在 3~5 個之間，低于 3 個會過于占用頁面底部空間，浪費資源，超過 5 個會讓結構變的復雜，且用戶在操作中容易發生誤觸。針對超出 5 個之外的標簽，Google 建議將以漢堡菜單的形式隱藏、iOS 也將多出的標簽隱藏并強制替換成“更多”入口，雖然可以將其視為一種解決方案，但體驗極差，一方面用戶無法提前感知隱藏的功能入口，極易忽略，另一方面，產品將重要功能隱藏可能會存在不可預知的風險。

具體的標簽數量如何決定，這還得根據產品的框架來確定，功能結構的劃分會告訴你標簽數量到底是 3 個還是 5 個。比如：功能比較單一的產品，3 個入口足以滿足需求，對于結構復雜且超出 5 個的，需根據產品的核心功能、主推業務進行篩選，最終控制在 5 個以內即可。

2. 標簽間隔

屏幕均分：這是在設計中使用最多的一種方式，不管標簽有幾個，都可以利用整個標簽欄的寬度進行平均分布。例如：以 iOS 二倍圖設計稿 750px 的寬度為基準，如果存在 5 個標簽，那么每個標簽就應該在 150px 寬度的區域內左右居中、并依次均勻排布在整個底部標簽欄中。

同等間距：比較少見，一般只有 3 個標簽時才會選擇使用這種方式，在標簽較少的情況下，相比均分，視覺上看起來更為緊湊。

3. 視覺分割

缺少視覺分割的標簽欄很容易出現錯覺，讓用戶誤以為這是頁面底部的內容，對信息的區分非常不友好，我們可以通過投影、分割線、背景色、毛玻璃效果對標簽欄作出明確的信息版塊區分。

標簽欄組合方式

1. 圖標加文字組合

這是最為常見的組合方式，當某種樣式的圖標被廣大用戶熟知、或頻繁使用某個應用時，引人注目的圖標能讓用戶快速理解，且不受文化、地域的影響快速觸達目標，即便存在某種歧義，配合文字說明使其更加標準化，這種圖文組合最為穩妥，不容易出錯。

2. 純文字

兩大短視頻平臺「抖音/快手」底部標簽欄就是當代純文字標簽的代表作，另外如小紅書、百度翻譯、高德地圖...等也采用的這種方式。

純文字標簽遵循簡單易用的原則，方便直觀的進行操作，對用戶的影響力較小，讓用戶更專注于信息本身，例如需用戶高度聚焦界面內容的高德地圖，去圖標化降低標簽欄注意力是一種不錯的表現方式。不過這種標簽樣式單一，對于信息延展會受到一定局限，如品牌傳播、節日宣傳促銷等，所以純文字標簽不能亂用、濫用，比較適合用戶群體跨度較大的產品。

3. 純圖標

一般適用于較為小眾的產品，例如花瓣，所面向的用戶群體是跨度非常小的年輕化互聯網專業人員。純圖標樣式較為簡潔，能在一定程度上提升產品氣質，雖然在識別度有所降低，但對于這類用戶心智模型的建立已相對完善，所以用戶并不完全依賴通過閱讀文字才能理解標簽含義，更可能是利用位置記憶、圖形化等知識喚醒固有認知來快速定位。

圖標切換樣式

標簽欄的圖標設計這里就不做闡述了，如果不太清楚，請看這篇文章：

1. 圖標切換風格

眾所周知，底部標簽欄圖標都有選中與未選中狀態，其「線性<面性」最為常見，在市場所有應用中的使用率接近 50%，主要優勢在于線性圖標可無限延伸，且選中與未選中狀態非常明顯，便于用戶快速定位。

不僅如此，產品也會根據不同的定位設計出不同風格的圖標，給用戶傳達出不同的視覺感受。雖然樣式繁多、五花八門，但常見的、實用的也就那么幾種，主要有：線性<線性、線性<面性、線性<線+面、面性<面性、面性<線+面、線+面<線+面這 6 種。

2. 圖標切換交互

直接切換

雖然大家都知道，動態的圖標比靜態更吸引眼球，但對于嚴謹性、效率型的產品真的不適合加入任何動畫效果，部分產品為了避免對用戶產生影響，甚至直接將圖標去掉，如「抖音/快手」。直接切換能給人一種踏實、穩重的感覺，有效降低無關信息的干擾，但并非絕對，需是產品性質而定。

透明過渡

感知度較弱，相比純靜態顯得沒那么生硬，在圖標切換過渡時更加自然柔和。

縮放

單一的縮放動畫效果干凈利落、一步到位，其穩定性與活力感比較平衡，相比上面的直接切換，在聚焦操作區域的同時提升標簽切換的感知度。

線性生長

線性生長類動效相比縮放，在視覺表現力上更豐富，通過不同的表現方式很容易與同類競品形成差異化，讓產品看起來非常細膩，更具備品質感。不過這類動效耗時較長，容易過度吸引用戶的注意力，需控制好切換動效時長。

填充

線性到面性風格的轉變，以一種自然的節奏從中心或四角延伸，直接填充圖標。部分產品為了提升過渡時的趣味性，會使用多種顏色依次進行填充。

抖動

抖動的圖標會顯得俏皮可愛，一般動效節奏較快，具備速度感。在設計動效時通過簡單的 K 幀+回彈表達式即可完成，利用左右/上下快速位移或旋轉來體現出抖動、跳動、晃動的動畫效果。

標簽欄功能樣式延展

好的底部標簽欄設計不僅在視覺上表現的出類拔萃，其在功能和業務上也起到了不可替代的作用，可以是多功能延展、品牌傳播，亦或是活動宣傳、產品促銷等，都能做到精準把控。

1. 裝飾圖標

不同風格的圖標不僅能利用多種表現方式提升整體視覺體驗，還能通過優質的觀賞性、趣味性來留住用戶，減少用戶流失。

除此之外，可通過底部標簽欄來滿足用戶情感需求和產品商業需求。比如：受不同的地域/文化影響、行業類型需求，將標簽欄圖標樣式及色彩設計的與其屬性息息相關，讓用戶與產品產生共鳴，以滿足情感需求；另外，國內傳統節日「中秋/國慶」、國際促銷「618/雙 11」節日等，電商類產品會提前換上相關的裝飾性圖標，體現出濃濃的節日氛圍，并引導用戶消費。

2. 品牌基因融合

在標簽欄融入品牌基因不但能傳達出獨特的品牌形象與氣質，還能讓用戶與產品產生聯動，留下深刻的記憶。

首先，已選中標簽的主體色是傳播品牌形象的方式之一，絕大多數產品都會使用主體色，以確保與產品調性保持高度的一致；

其次，利用品牌 LOGO 替代產品首頁標簽也是很常用的方式，可以在已使用品牌色的基礎上再利用 LOGO 進行二次傳播，讓線上線下、APP 內外都形成視覺關聯；

除此之外，圖標融入品牌元素、品牌名稱、吉祥物等，都可以很好的進行品牌形象傳播。

3. 一標簽、多功能

底部標簽欄最主要的作用是滿足用戶隨時切換到不同功能下的需求，為了給用戶提供的更多便利、增強用戶體驗，很多產品讓單個標簽上同時承載 2~3 個功能，以滿足不同狀態下的需求。不過類似這種多功能標簽，一部分采用的是隱藏的方式，需要用戶在長時間的使用中慢慢發掘。

餓了么首頁標簽承載了三個功能（1.功能切換；2.頁面上滑會變成向上箭頭，點擊回到頂部；3.在頂部點擊會定位到第二屏分類），全民 K 歌中間唱歌標簽承載了兩個功能（1.功能切換；2.長按彈出語音錄入歌名搜索）。

4. 多種傳達方式

如果產品需要給用戶更明確、清晰的反饋，不能僅局限于視覺層面，還能通過觸覺、聽覺來強化用戶操作之后的反饋感知。有一點需要說明的是，聽覺、觸覺需要合理使用，并不是每個產品都適合，例如音樂類產品，如果在聽歌狀態下，切換標簽時出現提示音，這時就成了干擾用戶的噪音，真的很破壞氣氛。

在淘寶點擊底部標簽切換時，會伴隨輕盈的水滴提示音，增加聽覺感知；也有少部分產品在標簽上增加了觸覺反饋，點擊時會有輕微震動，結合視覺變化，用戶的反饋感知則更加強烈。

5. 自定義圖標

標簽欄圖標自定義現在也比較常見，如果產品需要強化某個標簽，就可以采用這種方式對用戶進行視覺引導。淘寶的「逛逛」標簽隨時會根據系統推薦直播內容變成主播頭像，在操作之后復原；百度網盤「我的」標簽也會跟隨用戶頭像的變化保持一致。

6. 隱藏彩蛋

QQ 在消息圖標中隱藏了趣味性的交互變化，雙擊或輕輕拖拽或會不同的搞怪表情，不過對功能沒有實際的作用，只能在一定程度上增加用戶與產品交流互動的趣味性。

7. 百寶箱

將釘釘的標簽欄輕輕上滑，就會出現平時常用的功能，好似一個百寶箱。不過采用這種方式需要有一個前提，提供的便捷入口必須是常用的、且原本功能入口層級較深，隱藏至標簽欄只為方便用戶更快觸達，原來的入口需繼續保留，否則，還不如去掉。

總結

底部標簽欄是關聯整個產品架構的重要組件，一定要將用戶想知道的、產品想要表達的信息準確無誤的表現出來，不能因為某個細節的缺失讓用戶產生挫敗感，從而導致用戶流失。

要設計好底部標簽欄并不復雜，但是要考慮的細節還是很多，如果只是了解到一些基礎的規范就著手設計，那么這個標簽欄只是一個承載導航的容器而已。需要做的是確保標簽的可觸達性、一致性、相關聯性、可讀性，然后思考產品的特性并以及當下媒介結合使用，讓其發揮出更大的作用，實現更高用戶價值和商業價值。

以上是筆者根據自身經驗及整理的部分資料對底部標簽欄進行的總結，其實在實際工作中要用到的知識點并非止于此，不管是從視覺層面還是功能層面，都還有很多可以探索、深挖的點，需要在實戰中不斷的思考和學習，不斷提升，沒有最好、只有更好。

下篇再見！

歡迎關注作者微信公眾號：「能量眼球」