標(biāo)簽欄（Tab Bar）是界面設(shè)計(jì)繞不開(kāi)的一個(gè)課題，絕大多數(shù)產(chǎn)品都必需一個(gè)視覺(jué)美觀、反饋清晰的標(biāo)簽欄來(lái)傳達(dá)品牌形象。本篇文章將討論與標(biāo)簽欄相關(guān)的設(shè)計(jì)細(xì)節(jié)，并嘗試分析設(shè)計(jì)背后的思考。所有案例均來(lái)源于各大線上產(chǎn)品，觀點(diǎn)僅來(lái)源于個(gè)人粗淺的分析，如果有哪里說(shuō)得不對(duì)的地方，希望大家多多指點(diǎn)。

·

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

根據(jù) iOS 人機(jī)交互指南，標(biāo)簽欄（Tab Bar）是用于組織 APP 結(jié)構(gòu)，以扁平層級(jí)，只用于導(dǎo)航的基礎(chǔ)控件。標(biāo)簽欄不應(yīng)承載任何操作，如果需要執(zhí)行操作，應(yīng)選用工具欄（Tool Bar）。標(biāo)簽數(shù)量一般在 3-5 個(gè)（針對(duì)手機(jī)，pad 端可以適當(dāng)多一些），如果標(biāo)簽太多，最后一個(gè)標(biāo)簽可以是“更多”，將更多的標(biāo)簽收納其中。

標(biāo)簽欄的主要作用有以下 2 點(diǎn)：定位導(dǎo)航 & 凸顯品牌

·

1. 定位導(dǎo)航

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

·

2. 凸顯品牌

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

·

整理標(biāo)簽欄分類(lèi)

不同維度下，標(biāo)簽欄可以被分為多種類(lèi)型。

我們不妨從以下 5 個(gè)維度依次對(duì)標(biāo)簽欄進(jìn)行分類(lèi)，以便觀察研究不同的分類(lèi)方式下標(biāo)簽欄的不同特點(diǎn)。

·

1. 位置維度

常見(jiàn)的標(biāo)簽欄一般是吸附于屏幕底部，不隨用戶(hù)手勢(shì)滑動(dòng)而發(fā)生位置變化。

然而也有一些產(chǎn)品為了切合用戶(hù)的使用場(chǎng)景，做了一些位置上的調(diào)整，可能呈現(xiàn)懸浮狀態(tài)或者會(huì)隨著用戶(hù)手勢(shì)改變而發(fā)生位移。

·

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

優(yōu)勢(shì)：更加符合用戶(hù)心智，用戶(hù)的認(rèn)知和操作成本最低。可以隨時(shí)方便地切換頁(yè)面。

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

「懸浮類(lèi)的標(biāo)簽欄」

優(yōu)勢(shì)：屏幕遮擋區(qū)域小，為用戶(hù)爭(zhēng)取了更多的視覺(jué)空間瀏覽信息。

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

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

根據(jù)用戶(hù)的操作手勢(shì)推測(cè)用戶(hù)意圖，決定是否展示/隱藏標(biāo)簽欄。當(dāng)用戶(hù)向上滑動(dòng)屏幕時(shí)，我們認(rèn)為，用戶(hù)的意圖是瀏覽下方更多信息，此時(shí)就將標(biāo)簽欄隱藏，直到用戶(hù)出現(xiàn)向下滑動(dòng)屏幕的手勢(shì)時(shí)，顯示標(biāo)簽欄，給用戶(hù)提供便利的跳轉(zhuǎn)操作。

·

2. 功能維度

標(biāo)簽欄是由多個(gè)標(biāo)簽組成，通常情況下，標(biāo)簽的展示形式相同，沒(méi)有側(cè)重。

然而在一些產(chǎn)品中，為了突出某一核心功能，通常會(huì)將該功能對(duì)應(yīng)的標(biāo)簽進(jìn)行視覺(jué)上的強(qiáng)調(diào)。

·

·

「舵式標(biāo)簽欄」

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

最常使用舵式導(dǎo)航的產(chǎn)品類(lèi)型一般是 UGC 產(chǎn)品，鼓勵(lì)用戶(hù)盡可能多地生產(chǎn)內(nèi)容。

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

組成標(biāo)簽欄的元素有：文字、圖標(biāo)、底板等…

將不同元素排列組合，可以形成許多不同的組合結(jié)果，不同的組合對(duì)應(yīng)不同的標(biāo)簽欄樣式。

·

·

·

·

「純文字」

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

純文字的樣式在視覺(jué)上對(duì)用戶(hù)注意力影響最?。ū娝苤?，圖像比文字天然更具視覺(jué)吸引力），用戶(hù)可以更加集中地將注意力放在內(nèi)容視圖，專(zhuān)注于信息本身。

視頻流產(chǎn)品需要打造沉浸感，以便用戶(hù)能連貫自然地看盡可能多的內(nèi)容。因此收斂標(biāo)簽欄視覺(jué)占比十分合理科學(xué)。同理，對(duì)于強(qiáng)工具性的高德地圖來(lái)說(shuō)，用戶(hù)的使用場(chǎng)景多集中在戶(hù)外，物理環(huán)境混亂復(fù)雜，界面需要最大程度幫助用戶(hù)快速聚焦。地圖視圖無(wú)疑是用戶(hù)視覺(jué)的最重要落點(diǎn)，減弱標(biāo)簽欄的視覺(jué)表現(xiàn)是一個(gè)不錯(cuò)的設(shè)計(jì)思路。

「純圖標(biāo)」

相較于國(guó)內(nèi)產(chǎn)品，海外產(chǎn)品更常用純圖標(biāo)類(lèi)型的標(biāo)簽欄。

個(gè)人理解是，采樣的 3 款產(chǎn)品（FB、IG、Twitter）都是已經(jīng)高度普及的產(chǎn)品，用戶(hù)對(duì)產(chǎn)品結(jié)構(gòu)的心智模型已經(jīng)建立完善。用戶(hù)不需要通過(guò)閱讀文字才能理解標(biāo)簽的含義，更有可能是通過(guò)位置記憶來(lái)定位，圖標(biāo)很有可能只是起輔助識(shí)別的效果。

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

「圖標(biāo)加文字」

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

「特殊樣式」

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

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

根據(jù)圖標(biāo)的造型將圖標(biāo)分為：線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合圖標(biāo)三大類(lèi)。

根據(jù)圖標(biāo)的視覺(jué)風(fēng)格可以分為：扁平、微立體、雙色、毛玻璃效果等等……

·

「線性圖標(biāo)」

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

優(yōu)勢(shì)：造型耐看、有質(zhì)感。

劣勢(shì)：只能用顏色或者透明度進(jìn)行不同狀態(tài)之間的區(qū)分，選中狀態(tài)與未選中狀態(tài)之間的差異相對(duì)較?。ㄓ绕湓诎瞪Ｊ较拢赡軙?huì)造成用戶(hù)定位當(dāng)前位置時(shí)發(fā)生偏差。

·

「面性圖標(biāo)」

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

優(yōu)勢(shì)：造型內(nèi)收緊湊、色塊更加容易吸引用戶(hù)注意。

劣勢(shì)：只能用顏色或者透明度進(jìn)行不同狀態(tài)之間的區(qū)分。

·

「線面結(jié)合圖標(biāo)」

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

不同狀態(tài)之間差異度大，用戶(hù)更容易快速定位所在位置。選中和未選中對(duì)應(yīng)線性和面性?xún)商讏D標(biāo)，視覺(jué)發(fā)揮空間大。是當(dāng)前最被廣泛采用的設(shè)計(jì)策略。

·

5. 運(yùn)營(yíng)維度

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

·

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

優(yōu)勢(shì)：頁(yè)面整體氛圍一致，氣氛熱烈。

劣勢(shì)：標(biāo)簽欄的圖標(biāo)識(shí)別度非常低，需要靠用戶(hù)記憶位置或通過(guò)閱讀文字來(lái)拾取信息，降低使用效率。

細(xì)化視覺(jué)規(guī)范

上面從整體的角度對(duì)標(biāo)簽欄進(jìn)行了分類(lèi)，接下來(lái)將從 4 個(gè)細(xì)節(jié)的角度對(duì)標(biāo)簽欄進(jìn)行拆解。

·

1. 布局方式 & 分割方式

大多數(shù)情況下，根據(jù)標(biāo)簽個(gè)數(shù)將頁(yè)面寬度等分即可。對(duì)于非通欄的特殊標(biāo)簽欄，標(biāo)簽的寬度不受屏幕寬度影響，居中懸浮于視圖底部。

“分割”指的是標(biāo)題欄和上方內(nèi)容視圖的分割。如何建立分割感？方式有以下 3 種：

• 層級(jí)分割：使用投影
• 線分割：使用分割線
• 顏色分割：使用顏色

·

·

越來(lái)越多的產(chǎn)品選擇扁平的視覺(jué)風(fēng)格，投影風(fēng)格勢(shì)頭不再。

以微信為標(biāo)志，去掉頭部黑色導(dǎo)航欄，用毛玻璃效果取代，結(jié)合其他巨頭產(chǎn)品的迭代情況，不難看到，當(dāng)前的界面設(shè)計(jì)思路是不斷化繁為簡(jiǎn)、去偽存真的過(guò)程。降低視覺(jué)噪音，讓用戶(hù)的注意力更好的聚焦信息本身。

減弱不必要的視覺(jué)感知同樣是信息爆炸時(shí)代下的大勢(shì)。

2. 背景

將從顏色、造型、尺寸的角度進(jìn)行分析比較。

·

3. 圖標(biāo)

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

·

4. 文字

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

然而國(guó)內(nèi)產(chǎn)品大多數(shù)將標(biāo)題欄字號(hào)定為 10pt。個(gè)人分析是因?yàn)橥瑯幼痔?hào)的漢字視覺(jué)效果大于英字。

整理交互細(xì)節(jié)

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

·

我們著重來(lái)討論幾種常見(jiàn)的標(biāo)簽點(diǎn)擊反饋形式。

·

·

·

·

·

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

「硬切類(lèi)」：

給人穩(wěn)重可靠的感覺(jué)。

微信、支付寶、釘釘、螞蟻財(cái)富、京東金融、天貓等產(chǎn)品均采用無(wú)過(guò)渡動(dòng)畫(huà)的模型?？梢?jiàn)該類(lèi)型適用于重功能的社交類(lèi)產(chǎn)品、嚴(yán)謹(jǐn)穩(wěn)重的金融類(lèi)產(chǎn)品，給用戶(hù)傳達(dá)一種踏實(shí)穩(wěn)定的感覺(jué)，過(guò)多的視覺(jué)裝點(diǎn)如無(wú)必要，即是累贅。

「縮放類(lèi)」：

穩(wěn)定感與活力感較為平衡。

大多數(shù)線上產(chǎn)品采用這種動(dòng)畫(huà)模型，如 qq、淘寶、美團(tuán)、網(wǎng)易云音樂(lè)、今日頭條等。值得討論的是，微信和 qq，一個(gè)采用了無(wú)過(guò)渡動(dòng)畫(huà)模型一個(gè)采用了縮放模型。同樣地，天貓采用了無(wú)過(guò)渡動(dòng)畫(huà)模型而淘寶使用的是縮放模型?？梢?jiàn)，在產(chǎn)品功能高度類(lèi)似的情況下，不同的產(chǎn)品定位和品牌傳達(dá)是設(shè)計(jì)的重要依據(jù)。

「線條生長(zhǎng)類(lèi)」：

視覺(jué)效果較為復(fù)雜華麗，吸引用戶(hù)注意，同時(shí)動(dòng)畫(huà)耗時(shí)較長(zhǎng)。

使用該模型的代表產(chǎn)品是京東和馬蜂窩。視覺(jué)表現(xiàn)上很豐富，容易與同類(lèi)產(chǎn)品形成差異化，給用戶(hù)傳達(dá)一種產(chǎn)品細(xì)節(jié)滿滿的感覺(jué)。然而，是否會(huì)對(duì)用戶(hù)產(chǎn)生一定程度的視覺(jué)干擾？個(gè)人認(rèn)為和產(chǎn)品的使用頻率有密切聯(lián)系。對(duì)于以旅行攻略為主打功能的馬蜂窩來(lái)說(shuō)，產(chǎn)品本身被打開(kāi)的頻率不高，在有限的曝光時(shí)間內(nèi)，盡量給用戶(hù)留下有記憶點(diǎn)的使用體驗(yàn)，制造與競(jìng)品的差異。而京東的標(biāo)簽切換動(dòng)效，個(gè)人認(rèn)為稍顯復(fù)雜了一些。動(dòng)畫(huà)包括線條生長(zhǎng)+充填生長(zhǎng)+細(xì)節(jié)點(diǎn)綴，如此多的變化組合在一起，難免有過(guò)度吸引注意力的情況發(fā)生。

「填充生長(zhǎng)類(lèi)」：

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

qq 空間和自如都使用了這種表現(xiàn)方式。

「填充飛入類(lèi)」：

極具動(dòng)感，樣式新穎。

兩款直播類(lèi)產(chǎn)品，虎牙直播和花椒采用了此種方式。新穎的樣式和情感化的細(xì)節(jié)，拉近了產(chǎn)品和用戶(hù)的距離，同時(shí)也進(jìn)一步增加了產(chǎn)品的娛樂(lè)性。除了視覺(jué)反饋之外，還可以結(jié)合觸覺(jué)（振動(dòng)）和聽(tīng)覺(jué)（提示音）。

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

視覺(jué)結(jié)合聽(tīng)覺(jué)的產(chǎn)品有：淘寶。每次點(diǎn)擊標(biāo)簽都伴有輕盈的提示音，提升愉悅感。

尚未觀察到將視覺(jué)、觸覺(jué)、聽(tīng)覺(jué)結(jié)合使用的產(chǎn)品。iOS 自帶的 AirDrop 功能有類(lèi)似體驗(yàn)：發(fā)送端將文件投遞至接收端，發(fā)送端會(huì)有視覺(jué)和觸覺(jué)反饋，接受成功后接收端會(huì)有聲音提示，對(duì)于用戶(hù)來(lái)說(shuō)，實(shí)際上同時(shí)受到了 3 個(gè)維度的信息反饋。

·

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

內(nèi)容流頁(yè)面：

點(diǎn)擊對(duì)應(yīng)頁(yè)面標(biāo)簽=回到頂部或者刷新內(nèi)容（淘寶首頁(yè)和微淘）

點(diǎn)擊對(duì)應(yīng)頁(yè)面標(biāo)簽=直接刷新（抖音首頁(yè)的下拉刷新只適用于第一個(gè)視頻，之后的下拉手勢(shì)是看上一個(gè)視頻，點(diǎn)擊標(biāo)簽欄的首頁(yè)，可以直接刷新，解決了手勢(shì)沖突的問(wèn)題）

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

點(diǎn)擊對(duì)應(yīng)頁(yè)面標(biāo)簽：無(wú)反饋（微信讀書(shū)的書(shū)架頁(yè)面）

·

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

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

·

·

總結(jié)

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

歡迎關(guān)注作者微信公眾號(hào)：Change Design

·