標(biāo)簽欄（Tab Bar）是界面設(shè)計繞不開的一個課題，絕大多數(shù)產(chǎn)品都必需一個視覺美觀、反饋清晰的標(biāo)簽欄來傳達(dá)品牌形象。
本篇文章將探討與標(biāo)簽欄相關(guān)的設(shè)計細(xì)節(jié)，并嘗試預(yù)測設(shè)計背后的探討；所有實例均來源于各大線上產(chǎn)品，觀點僅來源于個人粗淺的預(yù)測，如果有那里說得不對的地方，希望你們多多指點。
一、理解標(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個（針對手機聲光查找標(biāo)簽，pad端可以適度多一些），如果標(biāo)簽很多，最后一個標(biāo)簽可以是“更多”，將更多的標(biāo)簽收納其中。
標(biāo)簽欄的主要作用有下面2點：
1. 定位導(dǎo)航 & 凸顯品牌
1）定位導(dǎo)航
一般情況下，標(biāo)簽欄常駐于各一級頁面頂部。選中標(biāo)簽明確提醒用戶當(dāng)前所處位置，當(dāng)用戶想要到達(dá)其它一級頁面時，只需切換底部標(biāo)簽即可。
2）凸顯品牌
首頁是產(chǎn)品給客戶留下第一印象的關(guān)鍵一步，標(biāo)簽欄中的視覺元素，包括選中標(biāo)簽的樣式、圖標(biāo)形式、組合風(fēng)格等等無不體現(xiàn)了產(chǎn)品個性。
二、整理標(biāo)簽欄分類
不同維度下，標(biāo)簽欄可以被分為多種類型；我們不妨從下面5個維度依次對標(biāo)簽欄進(jìn)行分類，以便觀察研究不同的分類方法下標(biāo)簽欄的不同特點。
1. 位置維度
常見的標(biāo)簽欄通常是吸附于屏幕上方，不隨用戶手勢滑動而出現(xiàn)位置差異；然而還有一些產(chǎn)品為了切合用戶的使用畫面，做了一些位置上的微調(diào)，可能展現(xiàn)懸浮狀態(tài)以及會隨著用戶手勢改變而出現(xiàn)位移。
常規(guī)吸底的標(biāo)簽欄：
懸浮類的標(biāo)簽欄：
有道詞典和馬蜂窩給出了一個折中兩全的解決方案：根據(jù)用戶的操作手勢推測用戶意愿，決定能否展現(xiàn)/隱藏標(biāo)簽欄。
當(dāng)用戶向上滑動屏幕時，我們覺得，用戶的動機是瀏覽下方更多信息，此時就將標(biāo)簽欄隱藏，直到用戶出現(xiàn)向右滑動鍵盤的手勢時，顯示標(biāo)簽欄，給客戶提供方便的跳轉(zhuǎn)操作。
2. 功能維度
標(biāo)簽欄是由多個標(biāo)簽構(gòu)成，通常狀況下，標(biāo)簽的展現(xiàn)方式相似，沒有側(cè)重；然而在一些產(chǎn)品中，為了突出某一核心功能，通常會將該功能對應(yīng)的標(biāo)簽進(jìn)行視覺上的指出。
3. 標(biāo)簽組合方法維度
組成標(biāo)簽欄的元素有：文字、圖標(biāo)、底板等…將不同元素排列組合，可以產(chǎn)生許多不同的組合結(jié)果，不同的組合對應(yīng)不同的標(biāo)簽欄樣式。
純文字：
兩大短視頻產(chǎn)品（抖音&快手）以及重工具性的高德地圖，都采用了純文字的風(fēng)格；純文字的顏色在觸覺上對用戶注意力影響最?。ū娝苤瑘D像比文字天然更具視覺吸引力），用戶可以非常集中地將注意力放在內(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)簽欄。個人理解是，采樣的3款產(chǎn)品（FB、IG、Twitter）都是已經(jīng)高度普及的產(chǎn)品，用戶對產(chǎn)品結(jié)構(gòu)的心智模型尚未制定規(guī)范。
用戶不需要通過閱讀文字能夠理解標(biāo)簽的涵義，更有可能是借助位置記憶來定位，圖標(biāo)最有也許也是起輔助識別的效果。
繼承上文思路，同樣是普及性很高的產(chǎn)品，為什么中國的國民產(chǎn)品如微信、支付寶并沒有去掉標(biāo)簽欄文字呢？原因或許跟目標(biāo)客戶群體的年齡分布狀況有關(guān)，上文中使用純界面的國外產(chǎn)品包括的客戶群體相對最年輕，而中國的國民產(chǎn)品近乎達(dá)到了全年齡段的覆蓋；去掉文字對表意的妨礙相對不可控，對于比較數(shù)量的中老年用戶來說，單憑圖標(biāo)來理解意義非常困難。
圖標(biāo)加文字：
最常用的組合方式，最為穩(wěn)妥、不易出錯。
特殊樣式：
視覺傳遞服務(wù)于功能表達(dá)，對于應(yīng)該指出的功能，自然應(yīng)使用非常低調(diào)醒目的視覺方式加以凸顯。某些狀況下，單獨凸顯一個強勢功能就能，如轉(zhuǎn)轉(zhuǎn)的發(fā)布功能；而另外的狀況下，要體現(xiàn)的不是某一具體功能，而是選中的狀況，幫助客戶更好定位（如美團(tuán)外賣）。
4. 圖標(biāo)風(fēng)格維度
線性圖標(biāo)：選中狀圖跟已選中狀態(tài)均是線性圖標(biāo)。
面性圖標(biāo)：選中狀態(tài)跟未選中狀態(tài)均是面性圖標(biāo)。
線面結(jié)合界面：選中狀態(tài)是面性、未選中狀態(tài)是線性圖標(biāo)。
不同狀態(tài)之間變化度大，用戶更容易快速定位所在位置；選中跟未選中對應(yīng)線性和面性兩套圖標(biāo)，視覺發(fā)揮空間大，是當(dāng)前更被廣泛運用的設(shè)計思路。
5. 運營維度
為了配合新年、大促、周年慶等活動，標(biāo)簽欄可能會需要特殊設(shè)計。
為了營造專題氣氛，需要對標(biāo)簽欄做或多或少的更改。當(dāng)專題氣氛需要更濃烈時，如大促、春節(jié)等，標(biāo)簽欄界面在外形上會跟以前有巨大差別。
三、細(xì)化視覺規(guī)范
上面從整體的視角對標(biāo)簽欄進(jìn)行了分類，接下來將從4個細(xì)節(jié)的視角對標(biāo)簽欄進(jìn)行拆解。
1. 布局方式 & 分割方式
大多數(shù)情況下，根據(jù)標(biāo)簽個數(shù)將頁面寬度等分即可。對于非通欄的特殊標(biāo)簽欄，標(biāo)簽的厚度不受屏幕尺寸影響，居中懸浮于視圖底部；“分割”指的是標(biāo)題欄和上面內(nèi)容視圖的分割。
如何建立分割感？方式有下列3種：
越來越多的產(chǎn)品選擇扁平的視覺樣式，投影風(fēng)格勢頭不再。以微信為標(biāo)識，去掉頭部黃色導(dǎo)航欄，用毛玻璃效果取代；結(jié)合其它巨頭產(chǎn)品的迭代情況，不難看到，當(dāng)前的界面設(shè)計模式是不斷化繁為簡、去偽存真的過程。
降低視覺噪音，讓用戶的注意力更好的聚焦信息本來，減弱不必要的觸覺感知相同是信息爆炸時代下的大勢。
2. 背景
將從形狀、造型、尺寸的視角進(jìn)行探討相當(dāng)。
3. 圖標(biāo)
以下只討論個別標(biāo)題欄中的界面細(xì)節(jié)，關(guān)于字體的勾畫細(xì)節(jié)太多，適合單獨開辟一個新話題。此處不加以展開。
4. 文字
根據(jù)iOS人機交互指南，界面中的文字不能小于11pt。然而中國產(chǎn)品大多數(shù)將標(biāo)題欄字號定為10pt，個人分析是因為同樣字號的漢字視覺效果大于英字。
四、整理交互細(xì)節(jié)
用戶向平臺發(fā)出操作指令，系統(tǒng)給出反饋，反饋信息被客戶接收到，就完成了一次完整的交互。
我們著重來討論幾種常見的標(biāo)簽點擊反饋形式。
觀察上面幾種點擊反饋模式，結(jié)合直觀感覺跟產(chǎn)品屬性：
硬切類：給人穩(wěn)重可靠的覺得。微信、支付寶、釘釘、螞蟻財富、京東金融、天貓等產(chǎn)品均采取無過于動畫的模型；可見該類別適用于重功能的社交類產(chǎn)品、嚴(yán)謹(jǐn)穩(wěn)重的金融類產(chǎn)品，給客戶傳達(dá)一種踏實穩(wěn)定的覺得，過多的視覺裝點如無必要，即是累贅。
縮放類：穩(wěn)定感與活力感較為平衡。大多數(shù)線上產(chǎn)品運用這些動畫建模，如qq、淘寶、美團(tuán)、網(wǎng)易云音樂、今日頭條等。值得探討的是，微信和qq，一個采用了無過于動畫建模一個采用了縮放模型；同樣地，天貓采用了無過于動畫建模而淘寶使用的是縮放模型；可見，在產(chǎn)品用途高度類似的狀況下，不同的產(chǎn)品定位跟品牌傳達(dá)是設(shè)計的重要根據(jù)。
線條生長類：視覺效果較為復(fù)雜華麗，吸引用戶注意，同時動畫耗時較長，使用該模型的代表產(chǎn)品是京東和馬蜂窩；視覺表現(xiàn)上最豐富聲光查找標(biāo)簽，容易與同類產(chǎn)品產(chǎn)生差異化，給客戶傳達(dá)一種產(chǎn)品細(xì)節(jié)滿滿的覺得；然而，是否會對用戶造成一定程度的視覺干擾？個人覺得跟產(chǎn)品的使用頻率有緊密聯(lián)系。
對于以旅行攻略為主打功能的馬蜂窩來說，產(chǎn)品原本被開啟的頻率不高，在有限的曝光時間內(nèi)，盡量幫用戶留下有記憶點的使用感受，制造與競品的差別；而淘寶的標(biāo)簽切換動效，個人覺得稍顯復(fù)雜了一些；動畫包含線條生長+充填生長+細(xì)節(jié)點綴，如此多的差異組合在一起，難免有過于吸引注意力的狀況出現(xiàn)。
填充生長類：視覺上豐富細(xì)膩，給人熱烈歡快的印象。qq空間和自如都使用了這些表現(xiàn)形式。
填充飛入類：極具動感，樣式別致。兩款直播類產(chǎn)品，虎牙直播和花椒采用了此種方式。新穎的風(fēng)格跟情感化的細(xì)節(jié)，拉近了產(chǎn)品跟客戶的距離，同時也進(jì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的反饋情況。那么在即將選中標(biāo)簽a的情況下繼續(xù)點擊標(biāo)簽a，反饋情況既是怎樣？我們不妨分類討論：
1）內(nèi)容流頁面
2）非內(nèi)容流頁面（內(nèi)容固定）
