起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識關于線上產品標簽欄（Tab Bar）的解構和分析
編輯導語：我們在使用產品時，經常會用到標簽或者標題進行查找，這樣可以更快的讓用戶找到預期目標；清晰有效的標簽也能一定程度上提高用戶體驗，用細節提升好感；本文作者分享了關于線上產品標題欄的解構與分析，我們一起來了解一下。
標簽欄（Tab Bar）是界面設計繞不開的一個課題，絕大多數產品都必需一個視覺美觀、反饋清晰的標簽欄來傳達品牌形象。
本篇文章將討論與標簽欄相關的設計細節，并嘗試分析設計背后的思考；所有案例均來源于各大線上產品，觀點僅來源于個人粗淺的分析，如果有哪里說得不對的地方，希望大家多多指點。
一、理解標簽欄作用
根據iOS人機交互指南，標簽欄（Tab Bar）是用于組織APP結構，以扁平層級，只用于導航的基礎控件。
標簽欄不應承載任何操作，如果需要執行操作，應選用工具欄（Tool Bar）；標簽數量一般在3-5個（針對手機，pad端可以適當多一些），如果標簽太多，最后一個標簽可以是“更多”，將更多的標簽收納其中。
標簽欄的主要作用有以下2點：
1. 定位導航 & 凸顯品牌
1）定位導航
一般情況下，標簽欄常駐于各一級頁面底部。選中標簽明確提示用戶當前所處位置，當用戶想要前往其他一級頁面時，只需切換底部標簽即可。
2）凸顯品牌
首頁是產品給用戶留下第一印象的關鍵一步，標簽欄中的視覺元素，包括選中標簽的顏色、圖標形式、組合樣式等等無不體現了產品氣質。
二、整理標簽欄分類
不同維度下，標簽欄可以被分為多種類型；我們不妨從以下5個維度依次對標簽欄進行分類，以便觀察研究不同的分類方式下標簽欄的不同特點。
1. 位置維度
常見的標簽欄一般是吸附于屏幕底部，不隨用戶手勢滑動而發生位置變化；然而也有一些產品為了切合用戶的使用場景，做了一些位置上的調整，可能呈現懸浮狀態或者會隨著用戶手勢改變而發生位移。
常規吸底的標簽欄：
- 優勢：更加符合用戶心智，用戶的認知和操作成本最低?？梢噪S時方便地切換頁面。
- 劣勢：頁面底部約90pt（劉海機型）高度的部分被遮擋，內容層展示效率進行了一定程度的讓渡。
懸浮類的標簽欄：
- 優勢：屏幕遮擋區域小，為用戶爭取了更多的視覺空間瀏覽信息。
- 劣勢：用戶第一時間會感到陌生，同時操作成本有所上升。尤其是唯品會案例，左側三個標簽比較擁擠，且在單手握持的情況下，很容易誤操作。
有道詞典和馬蜂窩給出了一個折中兩全的解決方案：根據用戶的操作手勢推測用戶意圖，決定是否展示/隱藏標簽欄。
當用戶向上滑動屏幕時，我們認為，用戶的意圖是瀏覽下方更多信息，此時就將標簽欄隱藏，直到用戶出現向下滑動屏幕的手勢時，顯示標簽欄，給用戶提供便利的跳轉操作。
2. 功能維度
標簽欄是由多個標簽組成，通常情況下，標簽的展示形式相同，沒有側重；然而在一些產品中，為了突出某一核心功能，通常會將該功能對應的標簽進行視覺上的強調。
3. 標簽組合方式維度
組成標簽欄的元素有：文字、圖標、底板等…將不同元素排列組合，可以形成許多不同的組合結果，不同的組合對應不同的標簽欄樣式。
純文字：
兩大短視頻產品（抖音&快手）以及重工具性的高德地圖，都選用了純文字的樣式；純文字的樣式在視覺上對用戶注意力影響最?。ū娝苤?，圖像比文字天然更具視覺吸引力），用戶可以更加集中地將注意力放在內容視圖，專注于信息本身。
視頻流產品需要打造沉浸感，以便用戶能連貫自然地看盡可能多的內容。因此收斂標簽欄視覺占比十分合理科學。
同理，對于強工具性的高德地圖來說，用戶的使用場景多集中在戶外，物理環境混亂復雜，界面需要最大程度幫助用戶快速聚焦；地圖視圖無疑是用戶視覺的最重要落點，減弱標簽欄的視覺表現是一個不錯的設計思路。
純圖標：
相較于國內產品，海外產品更常用純圖標類型的標簽欄。個人理解是，采樣的3款產品（FB、IG、Twitter）都是已經高度普及的產品，用戶對產品結構的心智模型已經建立完善。
用戶不需要通過閱讀文字才能理解標簽的含義，更有可能是通過位置記憶來定位，圖標很有可能只是起輔助識別的效果。
繼承上文思路，同樣是普及性很高的產品，為什么國內的國民產品如微信、支付寶并沒有去掉標簽欄文字呢？原因可能和目標用戶群體的年齡分布情況有關，上文中使用純圖標的海外產品涵蓋的用戶群體相對更年輕，而國內的國民產品幾乎達到了全年齡段的覆蓋；去掉文字對表意的影響相對不可控，對于相當數量的中老年用戶來說，單憑圖標來理解含義比較困難。
圖標加文字：
最常見的組合形式，最為穩妥、不易出錯。
特殊樣式：
視覺傳遞服務于功能表達，對于需要強調的功能，自然要使用更加高調醒目的視覺形式加以凸顯。某些情況下，單獨凸顯一個強勢功能即可，如轉轉的發布功能；而另外的情況下，要凸顯的不是某一具體功能，而是選中的狀態，幫助用戶更好定位（如美團外賣）。
4. 圖標風格維度
- 根據圖標的造型將圖標分為：線性圖標、面性圖標、線面結合圖標三大類。
- 根據圖標的視覺風格可以分為：扁平、微立體、雙色、毛玻璃效果等等……
線性圖標：選中狀圖和未選中狀態均是線性圖標。
- 優勢：造型耐看、有質感。
- 劣勢：只能用顏色或者透明度進行不同狀態之間的區分，選中狀態與未選中狀態之間的差異相對較?。ㄓ绕湓诎瞪Ｊ较拢赡軙斐捎脩舳ㄎ划斍拔恢脮r發生偏差。
面性圖標：選中狀態和未選中狀態均是面性圖標。
- 優勢：造型內收緊湊、色塊更加容易吸引用戶注意。
- 劣勢：只能用顏色或者透明度進行不同狀態之間的區分。
線面結合圖標：選中狀態是面性、未選中狀態是線性圖標。
不同狀態之間差異度大，用戶更容易快速定位所在位置；選中和未選中對應線性和面性兩套圖標，視覺發揮空間大，是當前最被廣泛采用的設計策略。
5. 運營維度
為了配合節日、大促、周年慶等活動，標簽欄可能會需要特殊設計。
為了烘托專題氣氛，需要對標簽欄做或多或少的修改。當專題氣氛需要很濃烈時，如大促、春節等，標簽欄圖標在造型上會和平時有很大區別。
- 優勢：頁面整體氛圍一致，氣氛熱烈。
- 劣勢：標簽欄的圖標識別度非常低，需要靠用戶記憶位置或通過閱讀文字來拾取信息，降低使用效率。
三、細化視覺規范
上面從整體的角度對標簽欄進行了分類，接下來將從4個細節的角度對標簽欄進行拆解。
1. 布局方式 & 分割方式
大多數情況下，根據標簽個數將頁面寬度等分即可。對于非通欄的特殊標簽欄，標簽的寬度不受屏幕寬度影響，居中懸浮于視圖底部；“分割”指的是標題欄和上方內容視圖的分割。
如何建立分割感？方式有以下3種：
- 層級分割：使用投影
- 線分割：使用分割線
- 顏色分割：使用顏色
越來越多的產品選擇扁平的視覺風格，投影風格勢頭不再。以微信為標志，去掉頭部黑色導航欄，用毛玻璃效果取代；結合其他巨頭產品的迭代情況，不難看到，當前的界面設計思路是不斷化繁為簡、去偽存真的過程。
降低視覺噪音，讓用戶的注意力更好的聚焦信息本身，減弱不必要的視覺感知同樣是信息爆炸時代下的大勢。
2. 背景
將從顏色、造型、尺寸的角度進行分析比較。
3. 圖標
以下只討論部分標題欄中的圖標細節，關于圖標的繪制細節太多，適合單獨開辟一個新話題。此處不加以展開。
4. 文字
根據iOS人機交互指南，界面中的文字不能小于11pt。然而國內產品大多數將標題欄字號定為10pt，個人分析是因為同樣字號的漢字視覺效果大于英字。
四、整理交互細節
用戶向系統發出操作指令，系統給出反饋，反饋信息被用戶接收到，就完成了一次完整的交互。
我們著重來討論幾種常見的標簽點擊反饋形式。
觀察上方幾種點擊反饋方式，結合直觀感覺和產品屬性：
硬切類：給人穩重可靠的感覺。微信、支付寶、釘釘、螞蟻財富、京東金融、天貓等產品均采用無過度動畫的模型；可見該類型適用于重功能的社交類產品、嚴謹穩重的金融類產品，給用戶傳達一種踏實穩定的感覺，過多的視覺裝點如無必要，即是累贅。
縮放類：穩定感與活力感較為平衡。大多數線上產品采用這種動畫模型，如qq、淘寶、美團、網易云音樂、今日頭條等。值得討論的是，微信和qq，一個采用了無過度動畫模型一個采用了縮放模型；同樣地，天貓采用了無過度動畫模型而淘寶使用的是縮放模型；可見，在產品功能高度類似的情況下，不同的產品定位和品牌傳達是設計的重要依據。
線條生長類：視覺效果較為復雜華麗，吸引用戶注意，同時動畫耗時較長，使用該模型的代表產品是京東和馬蜂窩；視覺表現上很豐富，容易與同類產品形成差異化，給用戶傳達一種產品細節滿滿的感覺；然而，是否會對用戶產生一定程度的視覺干擾？個人認為和產品的使用頻率有密切聯系。
對于以旅行攻略為主打功能的馬蜂窩來說，產品本身被打開的頻率不高，在有限的曝光時間內，盡量給用戶留下有記憶點的使用體驗，制造與競品的差異；而京東的標簽切換動效，個人認為稍顯復雜了一些；動畫包括線條生長+充填生長+細節點綴，如此多的變化組合在一起，難免有過度吸引注意力的情況發生。
填充生長類：視覺上豐富飽滿，給人熱烈活潑的印象。qq空間和自如都使用了這種表現方式。
填充飛入類：極具動感，樣式新穎。兩款直播類產品，虎牙直播和花椒采用了此種方式。新穎的樣式和情感化的細節，拉近了產品和用戶的距離，同時也進一步增加了產品的娛樂性。
除了視覺反饋之外，還可以結合觸覺（振動）和聽覺（提示音）。
視覺結合觸覺的產品有：百度網盤、淘票票等，觸覺的加入更加明確了反饋，使得點擊感知更加強烈和具象。
視覺結合聽覺的產品有：淘寶。每次點擊標簽都伴有輕盈的提示音，提升愉悅感。尚未觀察到將視覺、觸覺、聽覺結合使用的產品。
iOS自帶的AirDrop功能有類似體驗：發送端將文件投遞至接收端，發送端會有視覺和觸覺反饋，接受成功后接收端會有聲音提示，對于用戶來說，實際上的同時受到了3個維度的信息反饋。
上面我們討論的是從標簽a切換到標簽b的反饋情況。那么在已經選中標簽a的情況下再次點擊標簽a，反饋情況又是如何？我們不妨分類討論：
1）內容流頁面
- 點擊對應頁面標簽=回到頂部或者刷新內容（淘寶首頁和微淘）；
- 點擊對應頁面標簽=直接刷新（抖音首頁的下拉刷新只適用于第一個視頻，之后的下拉手勢是看上一個視頻，點擊標簽欄的首頁，可以直接刷新，解決了手勢沖突的問題）。
2）非內容流頁面（內容固定）
點擊對應頁面標簽：無反饋（微信讀書的書架頁面）
五、趨勢分析 & 優秀案例欣賞
觀察幾款產品的迭代情況，不難發現，不同產品不約而同都在視覺上做減法。
六、總結
以上是我個人對標簽欄相關的一些整理和總結，盡管標簽欄作為一個相當基礎的控件，其中也不乏非常多的設計細節值得深挖。
感謝閱讀，歡迎交流！
本文由 @doo_W 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
- 目前還沒評論，等你發揮！
