標(biāo)簽欄是用戶(hù)進(jìn)入 APP 的第一觸點(diǎn)，絕大多數(shù)以固定在設(shè)備底部的形式、讓用戶(hù)在應(yīng)用中的不同模塊之間快速切換。它作為移動(dòng)應(yīng)用中最常見(jiàn)的元素之一，是 UI 設(shè)計(jì)師們繞不開(kāi)的課題。

一個(gè)好的底部標(biāo)簽欄可傳達(dá)出產(chǎn)品的核心功能、品牌形象及設(shè)計(jì)理念，還能用作判斷應(yīng)用是否精致的標(biāo)準(zhǔn)，用戶(hù)可通過(guò)第一觸點(diǎn)來(lái)感受這個(gè) APP 是粗糙的還是精致的。所以看似簡(jiǎn)單，但要想設(shè)計(jì)出視覺(jué)美觀、反饋清晰的底部標(biāo)簽欄，有很多值得我們深究的地方。

那么標(biāo)簽欄為何存在？背后滿(mǎn)足的需求和場(chǎng)景到底有哪些？能給產(chǎn)品、用戶(hù)帶來(lái)什么價(jià)值？本文將從很多優(yōu)秀產(chǎn)品中，挖掘出值得學(xué)習(xí)和借鑒的設(shè)計(jì)亮點(diǎn)，對(duì)標(biāo)簽欄作出思考及分析，希望能幫到大家。

本期大綱

1. 了解標(biāo)簽欄
2. 標(biāo)簽欄常見(jiàn)設(shè)計(jì)規(guī)范
3. 標(biāo)簽欄組合方式
4. 圖標(biāo)切換樣式
5. 標(biāo)簽欄功能樣式延展
6. 總結(jié)

了解標(biāo)簽欄

1. 為什么要設(shè)計(jì)標(biāo)簽欄？

雖然我們看到如淘寶、京東、美團(tuán)等主流產(chǎn)品都使用了底部標(biāo)簽欄，但并不是所有的產(chǎn)品都需要，部分工具、打車(chē)類(lèi)型的 APP 就沒(méi)有使用標(biāo)簽欄，所以在設(shè)計(jì)一個(gè)產(chǎn)品之前應(yīng)該思考，為什么需要、有沒(méi)有更好的其他方式代替。在這里，我們先了解其作用，然后結(jié)合需求思考與產(chǎn)品的的契合度，最后再?zèng)Q定是否使用它。

傳達(dá)核心功能

底部標(biāo)簽欄一般由 3~5 個(gè)功能（入口）組成一個(gè)完整的產(chǎn)品架構(gòu)，這些功能基本都屬產(chǎn)品的核心，可以幫助用戶(hù)避開(kāi)產(chǎn)品中其他信息的干擾、精準(zhǔn)快速的找到這些功能并使用它。

突出重要功能

即便有些不是產(chǎn)品的核心功能，但用戶(hù)的操作頻率極高、可能是核心功能的前置條件或索引，也會(huì)將入口置于底部標(biāo)簽欄，常見(jiàn)的有掃一掃、搜索、發(fā)布作品等。需要注意的是，這種功能在操作之后大部分都會(huì)進(jìn)行二級(jí)頁(yè)面跳轉(zhuǎn)，與其他標(biāo)簽的等級(jí)權(quán)重并非平行。

多種展示方式

因產(chǎn)品定位不同、受眾用戶(hù)不同，接收信息的方式也有區(qū)別。標(biāo)簽欄能靈活的承載多種視覺(jué)展現(xiàn)方式，以傳達(dá)出不同的產(chǎn)品氣質(zhì)。例如：受眾群體范圍非常廣泛且存在一定的互聯(lián)網(wǎng)文化差異的產(chǎn)品，使用純文字標(biāo)簽；而對(duì)于長(zhǎng)期活躍在互聯(lián)網(wǎng)環(huán)境下年輕化的專(zhuān)業(yè)用戶(hù)，且產(chǎn)品較為輕量，標(biāo)簽欄使用純圖標(biāo)會(huì)顯得更加簡(jiǎn)潔、更有氣質(zhì)。

定位用戶(hù)坐標(biāo)

用戶(hù)可通過(guò)被激活的標(biāo)簽（高亮、顏色變化）清楚自己當(dāng)前所處位置，減少用戶(hù)思考或通過(guò)其他信息解讀而花費(fèi)不必要的時(shí)間。

2. 為什么放在底部?

首先，將標(biāo)簽欄置于底部非常方便用戶(hù)拇指與設(shè)備進(jìn)行交互，基于單手操作的便利性，無(wú)論左、右手，其大拇指都處在設(shè)備底部的自然覆蓋區(qū)域；其次，因用戶(hù)是通過(guò)從上到下、從左到右的"F"型瀏覽順序，設(shè)備底部對(duì)用戶(hù)產(chǎn)生的視覺(jué)注意力相對(duì)較低，置底導(dǎo)航不會(huì)分散其注意力，同時(shí)又方便用戶(hù)隨時(shí)切換至其他感興趣的功能模塊。

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

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

3. 標(biāo)簽欄結(jié)構(gòu)

底部標(biāo)簽欄結(jié)構(gòu)布局相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，主要有以下幾種元素組成：

1 – 用于承載標(biāo)簽欄所有元素的容器；

2 – 激活狀態(tài)下的圖標(biāo)，高亮提示，明確用戶(hù)當(dāng)前所在位置，點(diǎn)擊不會(huì)跳轉(zhuǎn)到其他功能模塊（舵式導(dǎo)航除外）；

3 – 激活狀態(tài)下的標(biāo)簽文本，作用與上述相同；

4 – 未激活狀態(tài)下的圖標(biāo)，相比激活狀態(tài)，視覺(jué)層級(jí)較弱，點(diǎn)擊會(huì)跳轉(zhuǎn)至對(duì)應(yīng)的功能模塊；

5 – 未激活狀態(tài)下的標(biāo)簽文本，作用與上述相同。

標(biāo)簽欄常見(jiàn)的設(shè)計(jì)規(guī)范

1. 標(biāo)簽數(shù)量

為確保底部標(biāo)簽欄表現(xiàn)清晰、反饋及時(shí)，iOS、AndROId 兩大平臺(tái)在設(shè)計(jì)規(guī)范中都對(duì)標(biāo)簽數(shù)量給了相同的建議，將底部標(biāo)簽數(shù)量控制在 3~5 個(gè)之間，低于 3 個(gè)會(huì)過(guò)于占用頁(yè)面底部空間，浪費(fèi)資源，超過(guò) 5 個(gè)會(huì)讓結(jié)構(gòu)變的復(fù)雜，且用戶(hù)在操作中容易發(fā)生誤觸。針對(duì)超出 5 個(gè)之外的標(biāo)簽，Google 建議將以漢堡菜單的形式隱藏、iOS 也將多出的標(biāo)簽隱藏并強(qiáng)制替換成"更多"入口，雖然可以將其視為一種解決方案，但體驗(yàn)極差，一方面用戶(hù)無(wú)法提前感知隱藏的功能入口，極易忽略，另一方面，產(chǎn)品將重要功能隱藏可能會(huì)存在不可預(yù)知的風(fēng)險(xiǎn)。

具體的標(biāo)簽數(shù)量如何決定，這還得根據(jù)產(chǎn)品的框架來(lái)確定，功能結(jié)構(gòu)的劃分會(huì)告訴你標(biāo)簽數(shù)量到底是 3 個(gè)還是 5 個(gè)。比如：功能比較單一的產(chǎn)品，3 個(gè)入口足以滿(mǎn)足需求，對(duì)于結(jié)構(gòu)復(fù)雜且超出 5 個(gè)的，需根據(jù)產(chǎn)品的核心功能、主推業(yè)務(wù)進(jìn)行篩選，最終控制在 5 個(gè)以?xún)?nèi)即可。

2. 標(biāo)簽間隔

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

同等間距：比較少見(jiàn)，一般只有 3 個(gè)標(biāo)簽時(shí)才會(huì)選擇使用這種方式，在標(biāo)簽較少的情況下，相比均分，視覺(jué)上看起來(lái)更為緊湊。

3. 視覺(jué)分割

缺少視覺(jué)分割的標(biāo)簽欄很容易出現(xiàn)錯(cuò)覺(jué)，讓用戶(hù)誤以為這是頁(yè)面底部的內(nèi)容，對(duì)信息的區(qū)分非常不友好，我們可以通過(guò)投影、分割線、背景色、毛玻璃效果對(duì)標(biāo)簽欄作出明確的信息版塊區(qū)分。

標(biāo)簽欄組合方式

1. 圖標(biāo)加文字組合

這是最為常見(jiàn)的組合方式，當(dāng)某種樣式的圖標(biāo)被廣大用戶(hù)熟知、或頻繁使用某個(gè)應(yīng)用時(shí)，引人注目的圖標(biāo)能讓用戶(hù)快速理解，且不受文化、地域的影響快速觸達(dá)目標(biāo)，即便存在某種歧義，配合文字說(shuō)明使其更加標(biāo)準(zhǔn)化，這種圖文組合最為穩(wěn)妥，不容易出錯(cuò)。

2. 純文字

兩大短視頻平臺(tái)「抖音/快手」底部標(biāo)簽欄就是當(dāng)代純文字標(biāo)簽的代表作，另外如小紅書(shū)、百度翻譯、高德地圖…等也采用的這種方式。

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

3. 純圖標(biāo)

一般適用于較為小眾的產(chǎn)品，例如花瓣，所面向的用戶(hù)群體是跨度非常小的年輕化互聯(lián)網(wǎng)專(zhuān)業(yè)人員。純圖標(biāo)樣式較為簡(jiǎn)潔，能在一定程度上提升產(chǎn)品氣質(zhì)，雖然在識(shí)別度有所降低，但對(duì)于這類(lèi)用戶(hù)心智模型的建立已相對(duì)完善，所以用戶(hù)并不完全依賴(lài)通過(guò)閱讀文字才能理解標(biāo)簽含義，更可能是利用位置記憶、圖形化等知識(shí)喚醒固有認(rèn)知來(lái)快速定位。

圖標(biāo)切換樣式

標(biāo)簽欄的圖標(biāo)設(shè)計(jì)這里就不做闡述了，如果不太清楚，請(qǐng)看這篇文章：

1. 圖標(biāo)切換風(fēng)格

眾所周知，底部標(biāo)簽欄圖標(biāo)都有選中與未選中狀態(tài)，其「線性<面性」最為常見(jiàn)，在市場(chǎng)所有應(yīng)用中的使用率接近 50%，主要優(yōu)勢(shì)在于線性圖標(biāo)可無(wú)限延伸，且選中與未選中狀態(tài)非常明顯，便于用戶(hù)快速定位。

不僅如此，產(chǎn)品也會(huì)根據(jù)不同的定位設(shè)計(jì)出不同風(fēng)格的圖標(biāo)，給用戶(hù)傳達(dá)出不同的視覺(jué)感受。雖然樣式繁多、五花八門(mén)，但常見(jiàn)的、實(shí)用的也就那么幾種，主要有：線性<線性、線性<面性、線性<線+面、面性<面性、面性<線+面、線+面<線+面這 6 種。

2. 圖標(biāo)切換交互

直接切換

雖然大家都知道，動(dòng)態(tài)的圖標(biāo)比靜態(tài)更吸引眼球，但對(duì)于嚴(yán)謹(jǐn)性、效率型的產(chǎn)品真的不適合加入任何動(dòng)畫(huà)效果，部分產(chǎn)品為了避免對(duì)用戶(hù)產(chǎn)生影響，甚至直接將圖標(biāo)去掉，如「抖音/快手」。直接切換能給人一種踏實(shí)、穩(wěn)重的感覺(jué)，有效降低無(wú)關(guān)信息的干擾，但并非絕對(duì)，需是產(chǎn)品性質(zhì)而定。

透明過(guò)渡

感知度較弱，相比純靜態(tài)顯得沒(méi)那么生硬，在圖標(biāo)切換過(guò)渡時(shí)更加自然柔和。

縮放

單一的縮放動(dòng)畫(huà)效果干凈利落、一步到位，其穩(wěn)定性與活力感比較平衡，相比上面的直接切換，在聚焦操作區(qū)域的同時(shí)提升標(biāo)簽切換的感知度。

線性生長(zhǎng)

線性生長(zhǎng)類(lèi)動(dòng)效相比縮放，在視覺(jué)表現(xiàn)力上更豐富，通過(guò)不同的表現(xiàn)方式很容易與同類(lèi)競(jìng)品形成差異化，讓產(chǎn)品看起來(lái)非常細(xì)膩，更具備品質(zhì)感。不過(guò)這類(lèi)動(dòng)效耗時(shí)較長(zhǎng)，容易過(guò)度吸引用戶(hù)的注意力，需控制好切換動(dòng)效時(shí)長(zhǎng)。

填充

線性到面性風(fēng)格的轉(zhuǎn)變，以一種自然的節(jié)奏從中心或四角延伸，直接填充圖標(biāo)。部分產(chǎn)品為了提升過(guò)渡時(shí)的趣味性，會(huì)使用多種顏色依次進(jìn)行填充。

抖動(dòng)

抖動(dòng)的圖標(biāo)會(huì)顯得俏皮可愛(ài)，一般動(dòng)效節(jié)奏較快，具備速度感。在設(shè)計(jì)動(dòng)效時(shí)通過(guò)簡(jiǎn)單的 K 幀+回彈表達(dá)式即可完成，利用左右/上下快速位移或旋轉(zhuǎn)來(lái)體現(xiàn)出抖動(dòng)、跳動(dòng)、晃動(dòng)的動(dòng)畫(huà)效果。

標(biāo)簽欄功能樣式延展

好的底部標(biāo)簽欄設(shè)計(jì)不僅在視覺(jué)上表現(xiàn)的出類(lèi)拔萃，其在功能和業(yè)務(wù)上也起到了不可替代的作用，可以是多功能延展、品牌傳播，亦或是活動(dòng)宣傳、產(chǎn)品促銷(xiāo)等，都能做到精準(zhǔn)把控。

1. 裝飾圖標(biāo)

不同風(fēng)格的圖標(biāo)不僅能利用多種表現(xiàn)方式提升整體視覺(jué)體驗(yàn)，還能通過(guò)優(yōu)質(zhì)的觀賞性、趣味性來(lái)留住用戶(hù)，減少用戶(hù)流失。

除此之外，可通過(guò)底部標(biāo)簽欄來(lái)滿(mǎn)足用戶(hù)情感需求和產(chǎn)品商業(yè)需求。比如：受不同的地域/文化影響、行業(yè)類(lèi)型需求，將標(biāo)簽欄圖標(biāo)樣式及色彩設(shè)計(jì)的與其屬性息息相關(guān)，讓用戶(hù)與產(chǎn)品產(chǎn)生共鳴，以滿(mǎn)足情感需求；另外，國(guó)內(nèi)傳統(tǒng)節(jié)日「中秋/國(guó)慶」、國(guó)際促銷(xiāo)「618/雙 11」節(jié)日等，電商類(lèi)產(chǎn)品會(huì)提前換上相關(guān)的裝飾性圖標(biāo)，體現(xiàn)出濃濃的節(jié)日氛圍，并引導(dǎo)用戶(hù)消費(fèi)。

2. 品牌基因融合

在標(biāo)簽欄融入品牌基因不但能傳達(dá)出獨(dú)特的品牌形象與氣質(zhì)，還能讓用戶(hù)與產(chǎn)品產(chǎn)生聯(lián)動(dòng)，留下深刻的記憶。

首先，已選中標(biāo)簽的主體色是傳播品牌形象的方式之一，絕大多數(shù)產(chǎn)品都會(huì)使用主體色，以確保與產(chǎn)品調(diào)性保持高度的一致；

其次，利用品牌 LOGO 替代產(chǎn)品首頁(yè)標(biāo)簽也是很常用的方式，可以在已使用品牌色的基礎(chǔ)上再利用 LOGO 進(jìn)行二次傳播，讓線上線下、APP 內(nèi)外都形成視覺(jué)關(guān)聯(lián)；

除此之外，圖標(biāo)融入品牌元素、品牌名稱(chēng)、吉祥物等，都可以很好的進(jìn)行品牌形象傳播。

3. 一標(biāo)簽、多功能

底部標(biāo)簽欄最主要的作用是滿(mǎn)足用戶(hù)隨時(shí)切換到不同功能下的需求，為了給用戶(hù)提供的更多便利、增強(qiáng)用戶(hù)體驗(yàn)，很多產(chǎn)品讓單個(gè)標(biāo)簽上同時(shí)承載 2~3 個(gè)功能，以滿(mǎn)足不同狀態(tài)下的需求。不過(guò)類(lèi)似這種多功能標(biāo)簽，一部分采用的是隱藏的方式，需要用戶(hù)在長(zhǎng)時(shí)間的使用中慢慢發(fā)掘。

餓了么首頁(yè)標(biāo)簽承載了三個(gè)功能（1.功能切換；2.頁(yè)面上滑會(huì)變成向上箭頭，點(diǎn)擊回到頂部；3.在頂部點(diǎn)擊會(huì)定位到第二屏分類(lèi)），全民 K 歌中間唱歌標(biāo)簽承載了兩個(gè)功能（1.功能切換；2.長(zhǎng)按彈出語(yǔ)音錄入歌名搜索）。

4. 多種傳達(dá)方式

如果產(chǎn)品需要給用戶(hù)更明確、清晰的反饋，不能僅局限于視覺(jué)層面，還能通過(guò)觸覺(jué)、聽(tīng)覺(jué)來(lái)強(qiáng)化用戶(hù)操作之后的反饋感知。有一點(diǎn)需要說(shuō)明的是，聽(tīng)覺(jué)、觸覺(jué)需要合理使用，并不是每個(gè)產(chǎn)品都適合，例如音樂(lè)類(lèi)產(chǎn)品，如果在聽(tīng)歌狀態(tài)下，切換標(biāo)簽時(shí)出現(xiàn)提示音，這時(shí)就成了干擾用戶(hù)的噪音，真的很破壞氣氛。

在淘寶點(diǎn)擊底部標(biāo)簽切換時(shí)，會(huì)伴隨輕盈的水滴提示音，增加聽(tīng)覺(jué)感知；也有少部分產(chǎn)品在標(biāo)簽上增加了觸覺(jué)反饋，點(diǎn)擊時(shí)會(huì)有輕微震動(dòng)，結(jié)合視覺(jué)變化，用戶(hù)的反饋感知?jiǎng)t更加強(qiáng)烈。

5. 自定義圖標(biāo)

標(biāo)簽欄圖標(biāo)自定義現(xiàn)在也比較常見(jiàn)，如果產(chǎn)品需要強(qiáng)化某個(gè)標(biāo)簽，就可以采用這種方式對(duì)用戶(hù)進(jìn)行視覺(jué)引導(dǎo)。淘寶的「逛逛」標(biāo)簽隨時(shí)會(huì)根據(jù)系統(tǒng)推薦直播內(nèi)容變成主播頭像，在操作之后復(fù)原；百度網(wǎng)盤(pán)「我的」標(biāo)簽也會(huì)跟隨用戶(hù)頭像的變化保持一致。

6. 隱藏彩蛋

QQ 在消息圖標(biāo)中隱藏了趣味性的交互變化，雙擊或輕輕拖拽或會(huì)不同的搞怪表情，不過(guò)對(duì)功能沒(méi)有實(shí)際的作用，只能在一定程度上增加用戶(hù)與產(chǎn)品交流互動(dòng)的趣味性。

7. 百寶箱

將釘釘?shù)臉?biāo)簽欄輕輕上滑，就會(huì)出現(xiàn)平時(shí)常用的功能，好似一個(gè)百寶箱。不過(guò)采用這種方式需要有一個(gè)前提，提供的便捷入口必須是常用的、且原本功能入口層級(jí)較深，隱藏至標(biāo)簽欄只為方便用戶(hù)更快觸達(dá)，原來(lái)的入口需繼續(xù)保留，否則，還不如去掉。

總結(jié)

底部標(biāo)簽欄是關(guān)聯(lián)整個(gè)產(chǎn)品架構(gòu)的重要組件，一定要將用戶(hù)想知道的、產(chǎn)品想要表達(dá)的信息準(zhǔn)確無(wú)誤的表現(xiàn)出來(lái)，不能因?yàn)槟硞€(gè)細(xì)節(jié)的缺失讓用戶(hù)產(chǎn)生挫敗感，從而導(dǎo)致用戶(hù)流失。

要設(shè)計(jì)好底部標(biāo)簽欄并不復(fù)雜，但是要考慮的細(xì)節(jié)還是很多，如果只是了解到一些基礎(chǔ)的規(guī)范就著手設(shè)計(jì)，那么這個(gè)標(biāo)簽欄只是一個(gè)承載導(dǎo)航的容器而已。需要做的是確保標(biāo)簽的可觸達(dá)性、一致性、相關(guān)聯(lián)性、可讀性，然后思考產(chǎn)品的特性并以及當(dāng)下媒介結(jié)合使用，讓其發(fā)揮出更大的作用，實(shí)現(xiàn)更高用戶(hù)價(jià)值和商業(yè)價(jià)值。

以上是筆者根據(jù)自身經(jīng)驗(yàn)及整理的部分資料對(duì)底部標(biāo)簽欄進(jìn)行的總結(jié)，其實(shí)在實(shí)際工作中要用到的知識(shí)點(diǎn)并非止于此，不管是從視覺(jué)層面還是功能層面，都還有很多可以探索、深挖的點(diǎn)，需要在實(shí)戰(zhàn)中不斷的思考和學(xué)習(xí)，不斷提升，沒(méi)有最好、只有更好。

作者：能量眼球