起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識標(biāo)簽欄篇 | 全方位滿足用戶體驗和商業(yè)需求
編輯導(dǎo)語：標(biāo)簽欄是移動應(yīng)用中最常見的元素之一，一般是以固定在設(shè)備底部的形式，讓用戶在應(yīng)用中的不同模塊之間快速切換。那么要怎么才能設(shè)計出好的底部標(biāo)簽欄呢？一起來看看吧。
標(biāo)簽欄是用戶進(jìn)入APP的第一觸點，絕大多數(shù)以固定在設(shè)備底部的形式，讓用戶在應(yīng)用中的不同模塊之間快速切換。它作為移動應(yīng)用中最常見的元素之一，是UI設(shè)計師們繞不開的課題。
一個好的底部標(biāo)簽欄可傳達(dá)出產(chǎn)品的核心功能、品牌形象及設(shè)計理念，還能用作判斷應(yīng)用是否精致的標(biāo)準(zhǔn)，用戶可通過第一觸點來感受這個APP是粗糙的還是精致的。所以看似簡單，但要想設(shè)計出視覺美觀、反饋清晰的底部標(biāo)簽欄，有很多值得我們深究的地方。
那么標(biāo)簽欄為何存在？背后滿足的需求和場景到底有哪些？能給產(chǎn)品、用戶帶來什么價值？本文將從很多優(yōu)秀產(chǎn)品中，挖掘出值得學(xué)習(xí)和借鑒的設(shè)計亮點，對標(biāo)簽欄作出思考及分析，希望能幫到大家。
一、了解標(biāo)簽欄
1. 為什么要設(shè)計標(biāo)簽欄
雖然我們看到如淘寶、京東、美團(tuán)等主流產(chǎn)品都使用了底部標(biāo)簽欄，但并不是所有的產(chǎn)品都需要，部分工具、打車類型的APP就沒有使用標(biāo)簽欄。所以在設(shè)計一個產(chǎn)品之前應(yīng)該思考，為什么需要、有沒有更好的其他方式代替。
在這里，我們先了解其作用，然后結(jié)合需求思考與產(chǎn)品的的契合度，最后再決定是否使用它。
1）傳達(dá)核心功能
底部標(biāo)簽欄一般由3~5個功能（入口）組成一個完整的產(chǎn)品架構(gòu)，這些功能基本都屬產(chǎn)品的核心，可以幫助用戶避開產(chǎn)品中其他信息的干擾、精準(zhǔn)快速地找到這些功能并使用它。
2）突出重要功能
即便有些不是產(chǎn)品的核心功能，但用戶的操作頻率極高，可能是核心功能的前置條件或索引，也會將入口置于底部標(biāo)簽欄。
常見的有掃一掃、搜索、發(fā)布作品等，需要注意的是，這種功能在操作之后大部分都會進(jìn)行二級頁面跳轉(zhuǎn)，與其他標(biāo)簽的等級權(quán)重并非平行。
3）多種展示方式
因產(chǎn)品定位不同、受眾用戶不同，接收信息的方式也有區(qū)別。
標(biāo)簽欄能靈活地承載多種視覺展現(xiàn)方式，以傳達(dá)出不同的產(chǎn)品氣質(zhì)。例如：受眾群體范圍非常廣泛且存在一定的互聯(lián)網(wǎng)文化差異的產(chǎn)品，使用純文字標(biāo)簽。
而對于長期活躍在互聯(lián)網(wǎng)環(huán)境下年輕化的專業(yè)用戶，且產(chǎn)品較為輕量，標(biāo)簽欄使用純圖標(biāo)會顯得更加簡潔、更有氣質(zhì)。
4）定位用戶坐標(biāo)
用戶可通過被激活的標(biāo)簽（高亮、顏色變化）清楚自己當(dāng)前所處位置，減少用戶思考或通過其他信息解讀而花費不必要的時間。
2. 為什么放在底部
首先，將標(biāo)簽欄置于底部非常方便用戶拇指與設(shè)備進(jìn)行交互，基于單手操作的便利性，無論左、右手，其大拇指都處在設(shè)備底部的自然覆蓋區(qū)域。
其次，因用戶是通過從上到下、從左到右的“F”型瀏覽順序，設(shè)備底部對用戶產(chǎn)生的視覺注意力相對較低，置底導(dǎo)航不會分散其注意力，同時又方便用戶隨時切換至其他感興趣的功能模塊。
根據(jù)史蒂文·霍伯（Steven Hoober）在對移動設(shè)備使用情況的研究結(jié)論中表明：抱著手機(jī)的人占36%、兩只手使用手機(jī)的人占15%，而49％的人依靠一只手在手機(jī)上完成事情，也就是說，僅用大拇指操作手機(jī)的用戶可能高達(dá)75%，這足以說明將Tab欄置于底部體驗會更好，很大程度上提高用戶的操作效率及頻次。
△ 綠色代表可以輕松到達(dá)的區(qū)域；黃色代表需要延伸的區(qū)域；紅色表示難以到達(dá)，需用戶改變手持方式
3. 標(biāo)簽欄結(jié)構(gòu)
底部標(biāo)簽欄結(jié)構(gòu)布局相對來說比較簡單，主要有以下幾種元素組成：
- 用于承載標(biāo)簽欄所有元素的容器
- 激活狀態(tài)下的圖標(biāo)，高亮提示，明確用戶當(dāng)前所在位置，點擊不會跳轉(zhuǎn)到其他功能模塊（舵式導(dǎo)航除外）
- 激活狀態(tài)下的標(biāo)簽文本，作用與上述相同
- 未激活狀態(tài)下的圖標(biāo)，相比激活狀態(tài)，視覺層級較弱，點擊會跳轉(zhuǎn)至對應(yīng)的功能模塊
- 未激活狀態(tài)下的標(biāo)簽文本，作用與上述相同
二、標(biāo)簽欄常見的設(shè)計規(guī)范
1. 標(biāo)簽數(shù)量
為確保底部標(biāo)簽欄表現(xiàn)清晰、反饋及時，iOS、Android兩大平臺在設(shè)計規(guī)范中都對標(biāo)簽數(shù)量給了相同的建議，將底部標(biāo)簽數(shù)量控制在3~5個之間。
低于3個會過于占用頁面底部空間，浪費資源，超過5個會讓結(jié)構(gòu)變的復(fù)雜，且用戶在操作中容易發(fā)生誤觸。
針對超出5個之外的標(biāo)簽，Google建議將以漢堡菜單的形式隱藏、iOS也將多出的標(biāo)簽隱藏并強(qiáng)制替換成“更多”入口，雖然可以將其視為一種解決方案，但體驗極差。一方面用戶無法提前感知隱藏的功能入口，極易忽略，另一方面，產(chǎn)品將重要功能隱藏可能會存在不可預(yù)知的風(fēng)險。
具體的標(biāo)簽數(shù)量如何決定，這還得根據(jù)產(chǎn)品的框架來確定，功能結(jié)構(gòu)的劃分會告訴你標(biāo)簽數(shù)量到底是3個還是5個。比如：功能比較單一的產(chǎn)品，3個入口足以滿足需求，對于結(jié)構(gòu)復(fù)雜且超出5個的，需根據(jù)產(chǎn)品的核心功能、主推業(yè)務(wù)進(jìn)行篩選，最終控制在5個以內(nèi)即可。
2. 標(biāo)簽間隔
1）屏幕均分
這是在設(shè)計中使用最多的一種方式，不管標(biāo)簽有幾個，都可以利用整個標(biāo)簽欄的寬度進(jìn)行平均分布。例如：以iOS二倍圖設(shè)計稿750px的寬度為基準(zhǔn)，如果存在5個標(biāo)簽，那么每個標(biāo)簽就應(yīng)該在150px寬度的區(qū)域內(nèi)左右居中、并依次均勻排布在整個底部標(biāo)簽欄中。
2）同等間距
比較少見，一般只有3個標(biāo)簽時才會選擇使用這種方式，在標(biāo)簽較少的情況下，相比均分，視覺上看起來更為緊湊。
3. 視覺分割
缺少視覺分割的標(biāo)簽欄很容易出現(xiàn)錯覺，讓用戶誤以為這是頁面底部的內(nèi)容，對信息的區(qū)分非常不友好，我們可以通過投影、分割線、背景色、毛玻璃效果對標(biāo)簽欄作出明確的信息版塊區(qū)分。
三、標(biāo)簽欄組合方式
1. 圖標(biāo)加文字組合
這是最為常見的組合方式，當(dāng)某種樣式的圖標(biāo)被廣大用戶熟知、或頻繁使用某個應(yīng)用時，引人注目的圖標(biāo)能讓用戶快速理解，且不受文化、地域的影響快速觸達(dá)目標(biāo)，即便存在某種歧義。配合文字說明使其更加標(biāo)準(zhǔn)化，這種圖文組合最為穩(wěn)妥，不容易出錯。
2. 純文字
兩大短視頻平臺「抖音/快手」底部標(biāo)簽欄就是當(dāng)代純文字標(biāo)簽的代表作，另外如小紅書、百度翻譯、高德地圖等也采用的這種方式。
純文字標(biāo)簽遵循簡單易用的原則，方便直觀的進(jìn)行操作，對用戶的影響力較小，讓用戶更專注于信息本身，例如需用戶高度聚焦界面內(nèi)容的高德地圖，去圖標(biāo)化降低標(biāo)簽欄注意力是一種不錯的表現(xiàn)方式。
不過這種標(biāo)簽樣式單一，對于信息延展會受到一定局限，如品牌傳播、節(jié)日宣傳促銷等，所以純文字標(biāo)簽不能亂用、濫用，比較適合用戶群體跨度較大的產(chǎn)品。
3. 純圖標(biāo)
一般適用于較為小眾的產(chǎn)品，例如花瓣，所面向的用戶群體是跨度非常小的年輕化互聯(lián)網(wǎng)專業(yè)人員。
純圖標(biāo)樣式較為簡潔，能在一定程度上提升產(chǎn)品氣質(zhì)，雖然在識別度有所降低，但對于這類用戶心智模型的建立已相對完善，所以用戶并不完全依賴通過閱讀文字才能理解標(biāo)簽含義，更可能是利用位置記憶、圖形化等知識喚醒固有認(rèn)知來快速定位。
四、圖標(biāo)切換樣式
標(biāo)簽欄的圖標(biāo)設(shè)計這里就不做闡述了，如果不太清楚，請看《圖標(biāo)篇 | 圖標(biāo)設(shè)計必備的基礎(chǔ)知識！》這篇文章。
1. 圖標(biāo)切換風(fēng)格
眾所周知，底部標(biāo)簽欄圖標(biāo)都有選中與未選中狀態(tài)，其「線性<面性」最為常見，在市場所有應(yīng)用中的使用率接近50%，主要優(yōu)勢在于線性圖標(biāo)可無限延伸，且選中與未選中狀態(tài)非常明顯，便于用戶快速定位。
不僅如此，產(chǎn)品也會根據(jù)不同的定位設(shè)計出不同風(fēng)格的圖標(biāo)，給用戶傳達(dá)出不同的視覺感受。雖然樣式繁多、五花八門，但常見的、實用的也就那么幾種，主要有以下這6種：
- 線性<線性
- 線性<面性
- 線性<線+面
- 面性<面性
- 面性<線+面
- 線+面<線+面
2. 圖標(biāo)切換交互
1）直接切換
雖然大家都知道，動態(tài)的圖標(biāo)比靜態(tài)更吸引眼球，但對于嚴(yán)謹(jǐn)性、效率型的產(chǎn)品真的不適合加入任何動畫效果，部分產(chǎn)品為了避免對用戶產(chǎn)生影響，甚至直接將圖標(biāo)去掉，如「抖音/快手」。
直接切換能給人一種踏實、穩(wěn)重的感覺，有效降低無關(guān)信息的干擾，但并非絕對，需是產(chǎn)品性質(zhì)而定。
2）透明過渡
感知度較弱，相比純靜態(tài)顯得沒那么生硬，在圖標(biāo)切換過渡時更加自然柔和。
3）縮放
單一的縮放動畫效果干凈利落、一步到位，其穩(wěn)定性與活力感比較平衡，相比上面的直接切換，在聚焦操作區(qū)域的同時提升標(biāo)簽切換的感知度。
4）線性生長
線性生長類動效相比縮放，在視覺表現(xiàn)力上更豐富，通過不同的表現(xiàn)方式很容易與同類競品形成差異化，讓產(chǎn)品看起來非常細(xì)膩，更具備品質(zhì)感。不過這類動效耗時較長，容易過度吸引用戶的注意力，需控制好切換動效時長。
5）填充
線性到面性風(fēng)格的轉(zhuǎn)變，以一種自然的節(jié)奏從中心或四角延伸，直接填充圖標(biāo)。部分產(chǎn)品為了提升過渡時的趣味性，會使用多種顏色依次進(jìn)行填充。
6）抖動
抖動的圖標(biāo)會顯得俏皮可愛，一般動效節(jié)奏較快，具備速度感。在設(shè)計動效時通過簡單的K幀+回彈表達(dá)式即可完成，利用左右/上下快速位移或旋轉(zhuǎn)來體現(xiàn)出抖動、跳動、晃動的動畫效果。
五、標(biāo)簽欄功能樣式延展
好的底部標(biāo)簽欄設(shè)計不僅在視覺上表現(xiàn)的出類拔萃，其在功能和業(yè)務(wù)上也起到了不可替代的作用，可以是多功能延展、品牌傳播，亦或是活動宣傳、產(chǎn)品促銷等，都能做到精準(zhǔn)把控。
1. 裝飾圖標(biāo)
不同風(fēng)格的圖標(biāo)不僅能利用多種表現(xiàn)方式提升整體視覺體驗，還能通過優(yōu)質(zhì)的觀賞性、趣味性來留住用戶，減少用戶流失。
除此之外，可通過底部標(biāo)簽欄來滿足用戶情感需求和產(chǎn)品商業(yè)需求。
比如：受不同的地域/文化影響、行業(yè)類型需求，將標(biāo)簽欄圖標(biāo)樣式及色彩設(shè)計的與其屬性息息相關(guān)，讓用戶與產(chǎn)品產(chǎn)生共鳴，以滿足情感需求。另外，國內(nèi)傳統(tǒng)節(jié)日「中秋/國慶」、國際促銷「618/雙11」節(jié)日等，電商類產(chǎn)品會提前換上相關(guān)的裝飾性圖標(biāo)，體現(xiàn)出濃濃的節(jié)日氛圍，并引導(dǎo)用戶消費。
2. 品牌基因融合
在標(biāo)簽欄融入品牌基因不但能傳達(dá)出獨特的品牌形象與氣質(zhì)，還能讓用戶與產(chǎn)品產(chǎn)生聯(lián)動，留下深刻的記憶。
首先，已選中標(biāo)簽的主體色是傳播品牌形象的方式之一，絕大多數(shù)產(chǎn)品都會使用主體色，以確保與產(chǎn)品調(diào)性保持高度的一致。
其次，利用品牌LOGO替代產(chǎn)品首頁標(biāo)簽也是很常用的方式，可以在已使用品牌色的基礎(chǔ)上再利用LOGO進(jìn)行二次傳播，讓線上線下、APP內(nèi)外都形成視覺關(guān)聯(lián)。
除此之外，圖標(biāo)融入品牌元素、品牌名稱、吉祥物等，都可以很好的進(jìn)行品牌形象傳播。
3. 一標(biāo)簽、多功能
底部標(biāo)簽欄最主要的作用是滿足用戶隨時切換到不同功能下的需求，為了給用戶提供的更多便利、增強(qiáng)用戶體驗，很多產(chǎn)品讓單個標(biāo)簽上同時承載2~3個功能，以滿足不同狀態(tài)下的需求。
不過類似這種多功能標(biāo)簽，一部分采用的是隱藏的方式，需要用戶在長時間的使用中慢慢發(fā)掘。
餓了么首頁標(biāo)簽承載了三個功能：
- 功能切換
- 頁面上滑會變成向上箭頭，點擊回到頂部
- 在頂部點擊會定位到第二屏分類
全民K歌中間唱歌標(biāo)簽承載了兩個功能：
- 功能切換
- 長按彈出語音錄入歌名搜索
4. 多種傳達(dá)方式
如果產(chǎn)品需要給用戶更明確、清晰的反饋，不能僅局限于視覺層面，還能通過觸覺、聽覺來強(qiáng)化用戶操作之后的反饋感知。
有一點需要說明的是，聽覺、觸覺需要合理使用，并不是每個產(chǎn)品都適合，例如音樂類產(chǎn)品，如果在聽歌狀態(tài)下，切換標(biāo)簽時出現(xiàn)提示音，這時就成了干擾用戶的噪音，真的很破壞氣氛。
在淘寶點擊底部標(biāo)簽切換時，會伴隨輕盈的水滴提示音，增加聽覺感知。也有少部分產(chǎn)品在標(biāo)簽上增加了觸覺反饋，點擊時會有輕微震動，結(jié)合視覺變化，用戶的反饋感知則更加強(qiáng)烈。
5. 自定義圖標(biāo)
標(biāo)簽欄圖標(biāo)自定義現(xiàn)在也比較常見，如果產(chǎn)品需要強(qiáng)化某個標(biāo)簽，就可以采用這種方式對用戶進(jìn)行視覺引導(dǎo)。淘寶的「逛逛」標(biāo)簽隨時會根據(jù)系統(tǒng)推薦直播內(nèi)容變成主播頭像，在操作之后復(fù)原，百度網(wǎng)盤「我的」標(biāo)簽也會跟隨用戶頭像的變化保持一致。
6. 隱藏彩蛋
QQ在消息圖標(biāo)中隱藏了趣味性的交互變化，雙擊或輕輕拖拽或會不同的搞怪表情，不過對功能沒有實際的作用，只能在一定程度上增加用戶與產(chǎn)品交流互動的趣味性。
7. 百寶箱
將釘釘?shù)臉?biāo)簽欄輕輕上滑，就會出現(xiàn)平時常用的功能，好似一個百寶箱。不過采用這種方式需要有一個前提，提供的便捷入口必須是常用的、且原本功能入口層級較深，隱藏至標(biāo)簽欄只為方便用戶更快觸達(dá)，原來的入口需繼續(xù)保留，否則，還不如去掉。
六、總結(jié)
底部標(biāo)簽欄是關(guān)聯(lián)整個產(chǎn)品架構(gòu)的重要組件，一定要將用戶想知道的、產(chǎn)品想要表達(dá)的信息準(zhǔn)確無誤的表現(xiàn)出來，不能因為某個細(xì)節(jié)的缺失讓用戶產(chǎn)生挫敗感，從而導(dǎo)致用戶流失。
要設(shè)計好底部標(biāo)簽欄并不復(fù)雜，但是要考慮的細(xì)節(jié)還是很多，如果只是了解到一些基礎(chǔ)的規(guī)范就著手設(shè)計，那么這個標(biāo)簽欄只是一個承載導(dǎo)航的容器而已。
需要做的是確保標(biāo)簽的可觸達(dá)性、一致性、相關(guān)聯(lián)性、可讀性，然后思考產(chǎn)品的特性并以及當(dāng)下媒介結(jié)合使用，讓其發(fā)揮出更大的作用，實現(xiàn)更高用戶價值和商業(yè)價值。
以上是筆者根據(jù)自身經(jīng)驗及整理的部分資料對底部標(biāo)簽欄進(jìn)行的總結(jié)，其實在實際工作中要用到的知識點并非止于此，不管是從視覺層面還是功能層面，都還有很多可以探索、深挖的點，需要在實戰(zhàn)中不斷的思考和學(xué)習(xí)，不斷提升，沒有最好、只有更好。
下篇再見！
#專欄作家#
大漠飛鷹；公眾號：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘，利用設(shè)計的手段為受眾用戶帶來更好的體驗，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于 CC0 協(xié)議
- 目前還沒評論，等你發(fā)揮！
