編輯導(dǎo)語：我們在使用產(chǎn)品時，經(jīng)常會用到標(biāo)簽或者標(biāo)題進行查找，這樣可以更快的讓用戶找到預(yù)期目標(biāo)；清晰有效的標(biāo)簽也能一定程度上提高用戶體驗，用細節(jié)提升好感；本文作者分享了關(guān)于線上產(chǎn)品標(biāo)題欄的解構(gòu)與分析，我們一起來了解一下。

標(biāo)簽欄（Tab Bar）是界面設(shè)計繞不開的一個課題，絕大多數(shù)產(chǎn)品都必需一個視覺美觀、反饋清晰的標(biāo)簽欄來傳達品牌形象。

本篇文章將討論與標(biāo)簽欄相關(guān)的設(shè)計細節(jié)，并嘗試分析設(shè)計背后的思考；所有案例均來源于各大線上產(chǎn)品，觀點僅來源于個人粗淺的分析，如果有哪里說得不對的地方，希望大家多多指點。

一、理解標(biāo)簽欄作用

根據(jù)iOS人機交互指南，標(biāo)簽欄（Tab Bar）是用于組織APP結(jié)構(gòu)，以扁平層級，只用于導(dǎo)航的基礎(chǔ)控件。

標(biāo)簽欄不應(yīng)承載任何操作，如果需要執(zhí)行操作，應(yīng)選用工具欄（Tool Bar）；標(biāo)簽數(shù)量一般在3-5個（針對手機，pad端可以適當(dāng)多一些），如果標(biāo)簽太多，最后一個標(biāo)簽可以是“更多”，將更多的標(biāo)簽收納其中。

標(biāo)簽欄的主要作用有以下2點：

1. 定位導(dǎo)航 & 凸顯品牌

1）定位導(dǎo)航

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

2）凸顯品牌

首頁是產(chǎn)品給用戶留下第一印象的關(guān)鍵一步，標(biāo)簽欄中的視覺元素，包括選中標(biāo)簽的顏色、圖標(biāo)形式、組合樣式等等無不體現(xiàn)了產(chǎn)品氣質(zhì)。

二、整理標(biāo)簽欄分類

不同維度下，標(biāo)簽欄可以被分為多種類型；我們不妨從以下5個維度依次對標(biāo)簽欄進行分類，以便觀察研究不同的分類方式下標(biāo)簽欄的不同特點。

1. 位置維度

常見的標(biāo)簽欄一般是吸附于屏幕底部，不隨用戶手勢滑動而發(fā)生位置變化；然而也有一些產(chǎn)品為了切合用戶的使用場景，做了一些位置上的調(diào)整，可能呈現(xiàn)懸浮狀態(tài)或者會隨著用戶手勢改變而發(fā)生位移。

常規(guī)吸底的標(biāo)簽欄：

• 優(yōu)勢：更加符合用戶心智，用戶的認知和操作成本最低。可以隨時方便地切換頁面。
• 劣勢：頁面底部約90pt（劉海機型）高度的部分被遮擋，內(nèi)容層展示效率進行了一定程度的讓渡。

懸浮類的標(biāo)簽欄：

• 優(yōu)勢：屏幕遮擋區(qū)域小，為用戶爭取了更多的視覺空間瀏覽信息。
• 劣勢：用戶第一時間會感到陌生，同時操作成本有所上升。尤其是唯品會案例，左側(cè)三個標(biāo)簽比較擁擠，且在單手握持的情況下，很容易誤操作。

有道詞典和馬蜂窩給出了一個折中兩全的解決方案：根據(jù)用戶的操作手勢推測用戶意圖，決定是否展示/隱藏標(biāo)簽欄。

當(dāng)用戶向上滑動屏幕時，我們認為，用戶的意圖是瀏覽下方更多信息，此時就將標(biāo)簽欄隱藏，直到用戶出現(xiàn)向下滑動屏幕的手勢時，顯示標(biāo)簽欄，給用戶提供便利的跳轉(zhuǎn)操作。

2. 功能維度

標(biāo)簽欄是由多個標(biāo)簽組成，通常情況下，標(biāo)簽的展示形式相同，沒有側(cè)重；然而在一些產(chǎn)品中，為了突出某一核心功能，通常會將該功能對應(yīng)的標(biāo)簽進行視覺上的強調(diào)。

3. 標(biāo)簽組合方式維度

組成標(biāo)簽欄的元素有：文字、圖標(biāo)、底板等…將不同元素排列組合，可以形成許多不同的組合結(jié)果，不同的組合對應(yīng)不同的標(biāo)簽欄樣式。

純文字：

兩大短視頻產(chǎn)品（抖音&快手）以及重工具性的高德地圖，都選用了純文字的樣式；純文字的樣式在視覺上對用戶注意力影響最?。ū娝苤?，圖像比文字天然更具視覺吸引力），用戶可以更加集中地將注意力放在內(nèi)容視圖，專注于信息本身。

視頻流產(chǎn)品需要打造沉浸感，以便用戶能連貫自然地看盡可能多的內(nèi)容。因此收斂標(biāo)簽欄視覺占比十分合理科學(xué)。

同理，對于強工具性的高德地圖來說，用戶的使用場景多集中在戶外，物理環(huán)境混亂復(fù)雜，界面需要最大程度幫助用戶快速聚焦；地圖視圖無疑是用戶視覺的最重要落點，減弱標(biāo)簽欄的視覺表現(xiàn)是一個不錯的設(shè)計思路。

純圖標(biāo)：

相較于國內(nèi)產(chǎn)品，海外產(chǎn)品更常用純圖標(biāo)類型的標(biāo)簽欄。個人理解是，采樣的3款產(chǎn)品（FB、IG、Twitter）都是已經(jīng)高度普及的產(chǎn)品，用戶對產(chǎn)品結(jié)構(gòu)的心智模型已經(jīng)建立完善。

用戶不需要通過閱讀文字才能理解標(biāo)簽的含義，更有可能是通過位置記憶來定位，圖標(biāo)很有可能只是起輔助識別的效果。

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

圖標(biāo)加文字：

最常見的組合形式，最為穩(wěn)妥、不易出錯。

特殊樣式：

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

4. 圖標(biāo)風(fēng)格維度

• 根據(jù)圖標(biāo)的造型將圖標(biāo)分為：線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合圖標(biāo)三大類。
• 根據(jù)圖標(biāo)的視覺風(fēng)格可以分為：扁平、微立體、雙色、毛玻璃效果等等……

線性圖標(biāo)：選中狀圖和未選中狀態(tài)均是線性圖標(biāo)。

• 優(yōu)勢：造型耐看、有質(zhì)感。
• 劣勢：只能用顏色或者透明度進行不同狀態(tài)之間的區(qū)分，選中狀態(tài)與未選中狀態(tài)之間的差異相對較小（尤其在暗色模式下），可能會造成用戶定位當(dāng)前位置時發(fā)生偏差。

面性圖標(biāo)：選中狀態(tài)和未選中狀態(tài)均是面性圖標(biāo)。

• 優(yōu)勢：造型內(nèi)收緊湊、色塊更加容易吸引用戶注意。
• 劣勢：只能用顏色或者透明度進行不同狀態(tài)之間的區(qū)分。

線面結(jié)合圖標(biāo)：選中狀態(tài)是面性、未選中狀態(tài)是線性圖標(biāo)。

不同狀態(tài)之間差異度大，用戶更容易快速定位所在位置；選中和未選中對應(yīng)線性和面性兩套圖標(biāo)，視覺發(fā)揮空間大，是當(dāng)前最被廣泛采用的設(shè)計策略。

5. 運營維度

為了配合節(jié)日、大促、周年慶等活動，標(biāo)簽欄可能會需要特殊設(shè)計。

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

• 優(yōu)勢：頁面整體氛圍一致，氣氛熱烈。
• 劣勢：標(biāo)簽欄的圖標(biāo)識別度非常低，需要靠用戶記憶位置或通過閱讀文字來拾取信息，降低使用效率。

三、細化視覺規(guī)范

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

1. 布局方式 & 分割方式

大多數(shù)情況下，根據(jù)標(biāo)簽個數(shù)將頁面寬度等分即可。對于非通欄的特殊標(biāo)簽欄，標(biāo)簽的寬度不受屏幕寬度影響，居中懸浮于視圖底部；“分割”指的是標(biāo)題欄和上方內(nèi)容視圖的分割。

如何建立分割感？方式有以下3種：

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

越來越多的產(chǎn)品選擇扁平的視覺風(fēng)格，投影風(fēng)格勢頭不再。以微信為標(biāo)志，去掉頭部黑色導(dǎo)航欄，用毛玻璃效果取代；結(jié)合其他巨頭產(chǎn)品的迭代情況，不難看到，當(dāng)前的界面設(shè)計思路是不斷化繁為簡、去偽存真的過程。

降低視覺噪音，讓用戶的注意力更好的聚焦信息本身，減弱不必要的視覺感知同樣是信息爆炸時代下的大勢。

2. 背景

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

3. 圖標(biāo)

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

4. 文字

根據(jù)iOS人機交互指南，界面中的文字不能小于11pt。然而國內(nèi)產(chǎn)品大多數(shù)將標(biāo)題欄字號定為10pt，個人分析是因為同樣字號的漢字視覺效果大于英字。

四、整理交互細節(jié)

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

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

觀察上方幾種點擊反饋方式，結(jié)合直觀感覺和產(chǎn)品屬性：

硬切類：給人穩(wěn)重可靠的感覺。微信、支付寶、釘釘、螞蟻財富、京東金融、天貓等產(chǎn)品均采用無過度動畫的模型；可見該類型適用于重功能的社交類產(chǎn)品、嚴(yán)謹(jǐn)穩(wěn)重的金融類產(chǎn)品，給用戶傳達一種踏實穩(wěn)定的感覺，過多的視覺裝點如無必要，即是累贅。

縮放類：穩(wěn)定感與活力感較為平衡。大多數(shù)線上產(chǎn)品采用這種動畫模型，如qq、淘寶、美團、網(wǎng)易云音樂、今日頭條等。值得討論的是，微信和qq，一個采用了無過度動畫模型一個采用了縮放模型；同樣地，天貓采用了無過度動畫模型而淘寶使用的是縮放模型；可見，在產(chǎn)品功能高度類似的情況下，不同的產(chǎn)品定位和品牌傳達是設(shè)計的重要依據(jù)。

線條生長類：視覺效果較為復(fù)雜華麗，吸引用戶注意，同時動畫耗時較長，使用該模型的代表產(chǎn)品是京東和馬蜂窩；視覺表現(xiàn)上很豐富，容易與同類產(chǎn)品形成差異化，給用戶傳達一種產(chǎn)品細節(jié)滿滿的感覺；然而，是否會對用戶產(chǎn)生一定程度的視覺干擾？個人認為和產(chǎn)品的使用頻率有密切聯(lián)系。

對于以旅行攻略為主打功能的馬蜂窩來說，產(chǎn)品本身被打開的頻率不高，在有限的曝光時間內(nèi)，盡量給用戶留下有記憶點的使用體驗，制造與競品的差異；而京東的標(biāo)簽切換動效，個人認為稍顯復(fù)雜了一些；動畫包括線條生長+充填生長+細節(jié)點綴，如此多的變化組合在一起，難免有過度吸引注意力的情況發(fā)生。

填充生長類：視覺上豐富飽滿，給人熱烈活潑的印象。qq空間和自如都使用了這種表現(xiàn)方式。

填充飛入類：極具動感，樣式新穎。兩款直播類產(chǎn)品，虎牙直播和花椒采用了此種方式。新穎的樣式和情感化的細節(jié)，拉近了產(chǎn)品和用戶的距離，同時也進一步增加了產(chǎn)品的娛樂性。

除了視覺反饋之外，還可以結(jié)合觸覺（振動）和聽覺（提示音）。

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

視覺結(jié)合聽覺的產(chǎn)品有：淘寶。每次點擊標(biāo)簽都伴有輕盈的提示音，提升愉悅感。尚未觀察到將視覺、觸覺、聽覺結(jié)合使用的產(chǎn)品。

iOS自帶的AirDrop功能有類似體驗：發(fā)送端將文件投遞至接收端，發(fā)送端會有視覺和觸覺反饋，接受成功后接收端會有聲音提示，對于用戶來說，實際上的同時受到了3個維度的信息反饋。

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

1）內(nèi)容流頁面

• 點擊對應(yīng)頁面標(biāo)簽=回到頂部或者刷新內(nèi)容（淘寶首頁和微淘）；
• 點擊對應(yīng)頁面標(biāo)簽=直接刷新（抖音首頁的下拉刷新只適用于第一個視頻，之后的下拉手勢是看上一個視頻，點擊標(biāo)簽欄的首頁，可以直接刷新，解決了手勢沖突的問題）。

2）非內(nèi)容流頁面（內(nèi)容固定）

點擊對應(yīng)頁面標(biāo)簽：無反饋（微信讀書的書架頁面）

五、趨勢分析 & 優(yōu)秀案例欣賞

觀察幾款產(chǎn)品的迭代情況，不難發(fā)現(xiàn)，不同產(chǎn)品不約而同都在視覺上做減法。

六、總結(jié)

以上是我個人對標(biāo)簽欄相關(guān)的一些整理和總結(jié)，盡管標(biāo)簽欄作為一個相當(dāng)基礎(chǔ)的控件，其中也不乏非常多的設(shè)計細節(jié)值得深挖。

感謝閱讀，歡迎交流！

本文由 @doo_W 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議