標簽欄（Tab Bar）是界面設計繞不開的一個課題，絕大多數產品都必需一個視覺美觀、反饋清晰的標簽欄來傳達品牌形象。本篇文章將討論與標簽欄相關的設計細節，并嘗試分析設計背后的思考。所有案例均來源于各大線上產品，觀點僅來源于個人粗淺的分析，如果有哪里說得不對的地方，希望大家多多指點。

理解標簽欄作用

根據 iOS 人機交互指南，標簽欄（Tab Bar）是用于組織 APP 結構，以扁平層級，只用于導航的基礎控件。標簽欄不應承載任何操作，如果需要執行操作，應選用工具欄（Tool Bar）。標簽數量一般在 3-5 個（針對手機，pad 端可以適當多一些），如果標簽太多，最后一個標簽可以是“更多”，將更多的標簽收納其中。

標簽欄的主要作用有以下 2 點：定位導航 & 凸顯品牌

1. 定位導航

一般情況下，標簽欄常駐于各一級頁面底部。選中標簽明確提示用戶當前所處位置，當用戶想要前往其他一級頁面時，只需切換底部標簽即可。

2. 凸顯品牌

首頁是產品給用戶留下第一印象的關鍵一步。標簽欄中的視覺元素，包括選中標簽的顏色、圖標形式、組合樣式等等無不體現了產品氣質。

整理標簽欄分類

不同維度下，標簽欄可以被分為多種類型。

我們不妨從以下 5 個維度依次對標簽欄進行分類，以便觀察研究不同的分類方式下標簽欄的不同特點。

1. 位置維度

常見的標簽欄一般是吸附于屏幕底部，不隨用戶手勢滑動而發生位置變化。

然而也有一些產品為了切合用戶的使用場景，做了一些位置上的調整，可能呈現懸浮狀態或者會隨著用戶手勢改變而發生位移。

「常規吸底的標簽欄」

優勢：更加符合用戶心智，用戶的認知和操作成本最低。可以隨時方便地切換頁面。

劣勢：頁面底部約 90pt（劉海機型）高度的部分被遮擋，內容層展示效率進行了一定程度的讓渡。

「懸浮類的標簽欄」

優勢：屏幕遮擋區域小，為用戶爭取了更多的視覺空間瀏覽信息。

劣勢：用戶第一時間會感到陌生，同時操作成本有所上升。尤其是唯品會案例，左側三個標簽比較擁擠，且在單手握持的情況下，很容易誤操作。

有道詞典和馬蜂窩給出了一個折中兩全的解決方案。

根據用戶的操作手勢推測用戶意圖，決定是否展示/隱藏標簽欄。當用戶向上滑動屏幕時，我們認為，用戶的意圖是瀏覽下方更多信息，此時就將標簽欄隱藏，直到用戶出現向下滑動屏幕的手勢時，顯示標簽欄，給用戶提供便利的跳轉操作。

2. 功能維度

標簽欄是由多個標簽組成，通常情況下，標簽的展示形式相同，沒有側重。

然而在一些產品中，為了突出某一核心功能，通常會將該功能對應的標簽進行視覺上的強調。

「舵式標簽欄」

如果要突出標簽欄中的某一個標簽，通常會把該標簽放在中間最為顯眼的位置，同時與其他標簽建立對比。對比的形式多種多樣，面積對比、顏色對比（主色 vs 消色）、圖標質感對比（扁平 vs 微擬物）、輔助元素（添加文字說明）等等…

最常使用舵式導航的產品類型一般是 UGC 產品，鼓勵用戶盡可能多地生產內容。

3. 標簽組合方式維度

組成標簽欄的元素有：文字、圖標、底板等…

將不同元素排列組合，可以形成許多不同的組合結果，不同的組合對應不同的標簽欄樣式。

「純文字」

兩大短視頻產品（抖音&快手）以及重工具性的高德地圖，都選用了純文字的樣式。

純文字的樣式在視覺上對用戶注意力影響最小（眾所周知，圖像比文字天然更具視覺吸引力），用戶可以更加集中地將注意力放在內容視圖，專注于信息本身。

視頻流產品需要打造沉浸感，以便用戶能連貫自然地看盡可能多的內容。因此收斂標簽欄視覺占比十分合理科學。同理，對于強工具性的高德地圖來說，用戶的使用場景多集中在戶外，物理環境混亂復雜，界面需要最大程度幫助用戶快速聚焦。地圖視圖無疑是用戶視覺的最重要落點，減弱標簽欄的視覺表現是一個不錯的設計思路。

「純圖標」

相較于國內產品，海外產品更常用純圖標類型的標簽欄。

個人理解是，采樣的 3 款產品（FB、IG、Twitter）都是已經高度普及的產品，用戶對產品結構的心智模型已經建立完善。用戶不需要通過閱讀文字才能理解標簽的含義，更有可能是通過位置記憶來定位，圖標很有可能只是起輔助識別的效果。

繼承上文思路，同樣是普及性很高的產品，為什么國內的國民產品如微信、支付寶并沒有去掉標簽欄文字呢？原因可能和目標用戶群體的年齡分布情況有關。上文中使用純圖標的海外產品涵蓋的用戶群體相對更年輕，而國內的國民產品幾乎達到了全年齡段的覆蓋。去掉文字對表意的影響相對不可控，對于相當數量的中老年用戶來說，單憑圖標來理解含義比較困難。

「圖標加文字」

最常見的組合形式，最為穩妥、不易出錯。

「特殊樣式」

視覺傳遞服務于功能表達，對于需要強調的功能，自然要使用更加高調醒目的視覺形式加以凸顯。某些情況下，單獨凸顯一個強勢功能即可，如轉轉的發布功能。而另外的情況下，要凸顯的不是某一具體功能，而是選中的狀態，幫助用戶更好定位（如美團外賣）。

4. 圖標風格維度

根據圖標的造型將圖標分為：線性圖標、面性圖標、線面結合圖標三大類。

根據圖標的視覺風格可以分為：扁平、微立體、雙色、毛玻璃效果等等……

「線性圖標」

選中狀態和未選中狀態均是線性圖標。

優勢：造型耐看、有質感。

劣勢：只能用顏色或者透明度進行不同狀態之間的區分，選中狀態與未選中狀態之間的差異相對較小（尤其在暗色模式下），可能會造成用戶定位當前位置時發生偏差。

「面性圖標」

選中狀態和未選中狀態均是面性圖標。

優勢：造型內收緊湊、色塊更加容易吸引用戶注意。

劣勢：只能用顏色或者透明度進行不同狀態之間的區分。

「線面結合圖標」

選中狀態是面性、未選中狀態是線性圖標。

不同狀態之間差異度大，用戶更容易快速定位所在位置。選中和未選中對應線性和面性兩套圖標，視覺發揮空間大。是當前最被廣泛采用的設計策略。

5. 運營維度

為了配合節日、大促、周年慶等活動，標簽欄可能會需要特殊設計。

為了烘托專題氣氛，需要對標簽欄做或多或少的修改。當專題氣氛需要很濃烈時，如大促、春節等，標簽欄圖標在造型上會和平時有很大區別。

優勢：頁面整體氛圍一致，氣氛熱烈。

劣勢：標簽欄的圖標識別度非常低，需要靠用戶記憶位置或通過閱讀文字來拾取信息，降低使用效率。

細化視覺規范

上面從整體的角度對標簽欄進行了分類，接下來將從 4 個細節的角度對標簽欄進行拆解。

1. 布局方式 & 分割方式

大多數情況下，根據標簽個數將頁面寬度等分即可。對于非通欄的特殊標簽欄，標簽的寬度不受屏幕寬度影響，居中懸浮于視圖底部。

“分割”指的是標題欄和上方內容視圖的分割。如何建立分割感？方式有以下 3 種：

• 層級分割：使用投影
• 線分割：使用分割線
• 顏色分割：使用顏色

越來越多的產品選擇扁平的視覺風格，投影風格勢頭不再。

以微信為標志，去掉頭部黑色導航欄，用毛玻璃效果取代，結合其他巨頭產品的迭代情況，不難看到，當前的界面設計思路是不斷化繁為簡、去偽存真的過程。降低視覺噪音，讓用戶的注意力更好的聚焦信息本身。

減弱不必要的視覺感知同樣是信息爆炸時代下的大勢。

2. 背景

將從顏色、造型、尺寸的角度進行分析比較。

3. 圖標

以下只討論部分標題欄中的圖標細節，關于圖標的繪制細節太多，適合單獨開辟一個新話題。此處不加以展開。

4. 文字

根據 iOS 人機交互指南，界面中的文字不能小于 11pt。

然而國內產品大多數將標題欄字號定為 10pt。個人分析是因為同樣字號的漢字視覺效果大于英字。

整理交互細節

用戶向系統發出操作指令，系統給出反饋，反饋信息被用戶接收到，就完成了一次完整的交互。

我們著重來討論幾種常見的標簽點擊反饋形式。

觀察上方幾種點擊反饋方式，結合直觀感覺和產品屬性：

「硬切類」：

給人穩重可靠的感覺。

微信、支付寶、釘釘、螞蟻財富、京東金融、天貓等產品均采用無過渡動畫的模型。可見該類型適用于重功能的社交類產品、嚴謹穩重的金融類產品，給用戶傳達一種踏實穩定的感覺，過多的視覺裝點如無必要，即是累贅。

「縮放類」：

穩定感與活力感較為平衡。

大多數線上產品采用這種動畫模型，如 qq、淘寶、美團、網易云音樂、今日頭條等。值得討論的是，微信和 qq，一個采用了無過渡動畫模型一個采用了縮放模型。同樣地，天貓采用了無過渡動畫模型而淘寶使用的是縮放模型。可見，在產品功能高度類似的情況下，不同的產品定位和品牌傳達是設計的重要依據。

「線條生長類」：

視覺效果較為復雜華麗，吸引用戶注意，同時動畫耗時較長。

使用該模型的代表產品是京東和馬蜂窩。視覺表現上很豐富，容易與同類產品形成差異化，給用戶傳達一種產品細節滿滿的感覺。然而，是否會對用戶產生一定程度的視覺干擾？個人認為和產品的使用頻率有密切聯系。對于以旅行攻略為主打功能的馬蜂窩來說，產品本身被打開的頻率不高，在有限的曝光時間內，盡量給用戶留下有記憶點的使用體驗，制造與競品的差異。而京東的標簽切換動效，個人認為稍顯復雜了一些。動畫包括線條生長+充填生長+細節點綴，如此多的變化組合在一起，難免有過度吸引注意力的情況發生。

「填充生長類」：

視覺上豐富飽滿，給人熱烈活潑的印象。

qq 空間和自如都使用了這種表現方式。

「填充飛入類」：

極具動感，樣式新穎。

兩款直播類產品，虎牙直播和花椒采用了此種方式。新穎的樣式和情感化的細節，拉近了產品和用戶的距離，同時也進一步增加了產品的娛樂性。除了視覺反饋之外，還可以結合觸覺（振動）和聽覺（提示音）。

視覺結合觸覺的產品有：百度網盤、淘票票等。觸覺的加入更加明確了反饋，使得點擊感知更加強烈和具象。

視覺結合聽覺的產品有：淘寶。每次點擊標簽都伴有輕盈的提示音，提升愉悅感。

尚未觀察到將視覺、觸覺、聽覺結合使用的產品。iOS 自帶的 AirDrop 功能有類似體驗：發送端將文件投遞至接收端，發送端會有視覺和觸覺反饋，接受成功后接收端會有聲音提示，對于用戶來說，實際上同時受到了 3 個維度的信息反饋。

上面我們討論的是從標簽 a 切換到標簽 b 的反饋情況。那么在已經選中標簽 a 的情況下再次點擊標簽 a，反饋情況又是如何？我們不妨分類討論：

內容流頁面：

點擊對應頁面標簽=回到頂部或者刷新內容（淘寶首頁和微淘）

點擊對應頁面標簽=直接刷新（抖音首頁的下拉刷新只適用于第一個視頻，之后的下拉手勢是看上一個視頻，點擊標簽欄的首頁，可以直接刷新，解決了手勢沖突的問題）

非內容流頁面（內容固定）

點擊對應頁面標簽：無反饋（微信讀書的書架頁面）

趨勢分析 & 優秀案例欣賞

觀察幾款產品的迭代情況，不難發現，不同產品不約而同都在視覺上做減法。

總結

以上是我個人對標簽欄相關的一些整理和總結。盡管標簽欄作為一個相當基礎的控件，其中也不乏非常多的設計細節值得深挖。

歡迎關注作者微信公眾號：Change Design