編輯導讀：標籤欄是移動端應用程序中最常用的UI元素之一，通常會出現在應用程序屏幕的底部，可以讓用戶在應用程序中的不同部分之間快速切換。本文作者從七個方面，對底部標籤欄進行了深入的分析，希望對你有幫助。
一、標籤欄是什麼？
標籤欄也叫Tab Bar，是移動端應用程序中最常用的UI元素之一。標籤欄出現在應用程序屏幕的底部，可以讓用戶在應用程序中的不同部分之間快速切換。標籤欄可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，並且在顯示鍵盤時被隱藏。標籤欄可以包含任意數量的標籤，但是可見標籤的數量根據設備的大小和方向而變化。如果由於水平空間有限而無法顯示某些選項卡，則最終的可見選項卡將變為“更多”選項卡，該選項卡將在單獨屏幕上的列表中顯示其他選項卡。
標籤欄在任何目標頁面中的高度是不變的，iOS 規定它的高度為98px(iOS @2x)。但因為 iPhone X 之後的全面屏手機引入了 Home Bar ，所以在進行界面適配的時候，請務必要加上 Home Bar 自身的68px高度。別讓Home Bar遮擋標籤欄中標籤的展示，這會讓兩個控件發生操作手勢衝突。
二、為什麼標籤欄要放於底部？
史蒂文·霍伯（Steven Hoober）在對移動設備使用情況的研究中發現，人們會根據自己的設備，需求和背景以多種方式觸摸手機，觸摸手機屏幕或按鈕的用戶分三種基本方式：抱著手機的人佔36%、兩隻手使用手機的人佔15%，而49％的人依靠一隻手在手機上完成事情，除此之外75％的用戶僅用一個拇指觸摸屏幕。
在下圖中，出現在手機屏幕上的圖表是近似覆蓋圖，其中的顏色表示用戶的拇指可以接觸到哪些區域以與屏幕交互。綠色表示用戶可以輕鬆到達的區域；黃色，需要伸展的區域；紅色區域，要求用戶改變握持設備的方式。
這意味著：
將常用的“行為”放在屏幕底部很重要，因為只需一鍵式的交互即可輕鬆到達這些“行為”。
三、標籤欄的三大原則
底部標籤欄設計應當遵循三大原則：結構合理、位置清晰、可預測行為。
3.1 結構合理
為了讓標籤欄表現清晰，兩大平臺在規範裡都對標籤數量給出了相同的建議：建議標籤欄內的標籤個數為3個至5個。因為標籤過多會使每一個單元標籤的可觸空間降低，人們在物理上（手指）難以點擊或誤觸，除此之外還會增加應用程序結構的複雜性。
注：如果你因為產品結構非常繁雜，標籤數量想要達到更多，那麼在 iOS 中就會給你強硬處理，iOS 人機交互規範告訴產品設計者們：標籤欄雖然可以包含任意數量的標籤，但可見標籤的數量會根據設備的大小(平板或手機)和方向(豎屏或橫屏)而自適應變化。如果由於水平空間有限而無法顯示某些標籤時，最後的一個可見標籤將被會被系統強行轉換為“更多”選項，需要用戶點擊“更多”選項之後，系統才將在單獨屏幕上的列表中顯示其他被隱藏的標籤。
3.2 位置清晰
“我在哪裡？” 是用戶成功導航所需要回答的一個基本問題，我們應當採用適當的視覺提示讓用戶知道目前所處的位置（選中狀態）。在APP應用中我們常見的處理方式有4種：改變圖標樣式、改變大小、改變顏色、改變展示樣式。它們並不一定是獨立存在的，可以同時作用於一個標籤。
3.3 可預測行為
選取每個底部導航選項都有通向它的目的地，底部導航應當將用戶直接引導到相關頁面，不應該打開菜單或其他窗口。如果在某些情況下可以使用標籤，但在其他情況下則無法使用，則應用程序的界面將變得不穩定且不可預測。我們要確保所有選項卡始終處於啟用狀態，並說明為什麼選項卡內容不可用。例如造作新家APP，當用戶處於未登錄狀態時，就不能查看底部標籤“我的”信息，當我點擊標籤“我的”，就會彈出快捷登陸界面，這樣就能讓用戶明白不能使用的原因是賬號未登陸，從另一層面講也很好的引導了用戶註冊與登陸。
注：不要使用標籤欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件，如果需要提供控件，請使用工具欄。
四、標籤欄的基礎規範
在設計標籤欄前我們首先要了解它的基礎規範，在保證基礎規範合理的情況下再去進行設計。
4.1 圖標視覺大小
為了保證圖標的尺寸大小一致性，我們往往會建立基礎的網格尺寸來進行繪製圖標，下面就以常用的24×24為大家舉例：
網格包含2px出血位。這樣可以確保圖標在導出時將保留其所需的比例和周圍的空白區域，同時還能夠很好的平衡圖標的視覺重心。
最後加入圖標的keyline，keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標集中基本形狀或比例的一致大小。這使創建視覺上的穩定變得更加容易，並有助於在設計相似比例的圖標時有共同的參考準則。
在24尺寸下的keyline構成如下（24尺寸下的出血區域為2）：
當把圖標畫在網格上時可以很好的規範圖標，讓它們從整體的視覺上看著統一規範。
4.2 標籤欄佈局
標籤的數量以及標籤的展示形式決定了標籤的佈局形式，標籤的常見佈局一共有2種：屏幕等分、圖標左右間距相等。
4.2.1 屏幕等分
屏幕等分是最常見的標籤佈局形式，因為不管它存在多少圖標，都可以用它進行屏幕劃分，計算方法也十分簡單，屏幕的寬度除以標籤個數就是每列寬度。採用此等劃分的案例有：懂車帝、今日頭條。
4.2.2 圖標左右間距相等
圖標左右距離相等多用在標籤數量為3個的情況下，計算方法是先去除中間圖標的尺寸，然後再左右平均劃分等距。相對於屏幕等分，圖標左右間距相等劃分更為緊湊。
4.3 標籤欄熱點區域
根據菲茲定律，使用指點設備到達一個目標的時間，與當前設備位置和目標位置的距離（D）和目標大小（S）有關。標籤欄作為向用戶展現產品框架的關鍵控件，熱點區域（可點擊區域範圍）的設定一定要合理。底部圖標尺寸較小，如果將圖標作為熱點區域，那麼可點擊區域就偏小，很可能出現用戶點擊不到的情況，正確的做法是以標籤欄的佈局作為基礎設定，在標籤相鄰的部分劃出一定區域作為不可點擊區域，以免用戶誤操作，參考如下，紅色為可熱點區域，藍色為不可點擊區域：
五、標籤欄的圖標樣式
在產品設計中，不同樣式的圖標會給人不同的感受，隨著APP風格越來越簡潔化，標籤欄圖標風格緊緊地跟著界面的風格而改變。經過長時間的沉澱，標籤欄圖標常見的默認設計樣式一共可分為四類：線性圖標、面性圖標、線性+面性圖標、輕質感圖標。
5.1 線性圖標
線性圖標通過線來塑造輪廓，在圖標設計中使用的線有粗細之分，常用的App圖標設計線的粗細一般有2PX、3PX、4px，不同的線條粗細所帶來的視覺感受也不同，我在“如何讓你的圖標具有說服力”文章中提到過，線條越粗那麼圖標的性格就越活潑、粗曠，線條越細圖標性格就越精緻、商務，圖標使用描邊的粗細可以根據產品的氣質來決定。
選中狀態：當選中狀態為高亮線性圖標時，選中狀態的圖標顏色會與默認狀態的圖標顏色形成較強的反差，但由於線和線的差異性並不強，線性圖標沒有面性圖標更具吸引力（引導性），即使加入了高亮色識別度也不及面性強。airbnb在處理線性圖標選中狀態時就考慮到了這一點，選中狀態下不僅對圖標的顏色做了較大變化，還加大了圖標及文字的描邊粗細，從一定程度上加強了圖標的引導性。（注：線性狀態的圖標選中狀態也可以變為面性圖標或線性+面性圖標）
5.2 面性圖標
面性圖標是通過面來塑造形體的圖標，採用了剪影的設計形式，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感，面性圖標的承載信息相對與線性圖標來說更重，更具有引導性。
選中狀態：面性圖標的選中狀態為高亮面性圖標，顏色可以為純色、也可以為漸變、透明。愛奇藝的選中狀態就採用了高亮面性圖標的展現方式，除了把圖標底色及文字的顏色加深以外，還加入了品牌色，甚至為了讓“會員”標籤更加突出，還單獨對“會員”標籤的顏色進行了修改。
5.3 線性+面性圖標
線面結合圖標相較單一的線性圖標或單一的面性圖標樣式更加豐富、也更富有趣味性。從設計的角度上說，由於元素的多樣化，設計更容易獲得好的效果。相反，如果運用不當會顯得圖標非常雜亂，如何有效的把控好兩者之間的過度是關鍵。
選中狀態：線性圖標的選中狀可以為高亮的線性+面性圖標。懂車帝在處理標籤選中狀態時就把圖標底部加入了高亮黃色圓形塊狀，即保存了線性也添加了面，加深了選中狀態的視覺重量，更加明確的讓用戶感知自己所處的位置。
5.4 輕質感圖標
輕質感圖標層次簡單，用色素雅乾淨，採用輕投影、輕漸變的方法設計，這類圖標具有一定的立體感，能給人輕盈、簡潔、精緻的感覺。輕質感圖標在標籤欄中運用的較少，在特殊情況下才會使用，例如盒馬，就把輕質感圖標用在了首頁標籤與盒馬小鎮標籤，首頁標籤的引入是為了讓用戶加強對品牌形象的認知，而盒馬小鎮標籤的引入則是為了加強圖標的引導性。
5.5 圖標樣式的常用變化（選中與未選中）
在我調研上百種應用程序中，發現主流的APP標籤欄樣式變化大致分為六種：線性-線性、線性-面性、線性-線+面、面性-面性、面性-線+面、線+面-線+面。雖然標籤的樣式變化繁多，但是使用率最多的是“由線性轉面性”標籤。
六、標籤欄的展示形式
標籤欄的不同展示形式會給用戶帶來不同的使用習慣和使用感受，常見的標籤展示形式有四種：圖標+文字、純圖標、純文字、舵式。
6.1 圖標+文字
圖標+文字是最常見的標籤展示形式，為了讓用戶能夠很好的明白圖標的意圖，所以在圖標下方會配有文字提示，這樣就能大大的降低誤讀的可能性。正因為有文字提示，所以沒有必要過於擔心圖標的識別性問題，那麼圖標就可以得到更深的延展，可以做的更有趣，更具有產品氣質，甚至可以代入更深層次的動效。
例如東家·守藝人APP，專門售賣各種手藝人的親手製作的各種藝術品，面向的對象是喜歡傳統文化的人群，在這樣的背景下東家結合宋體的筆畫（筆畫拆分）把圖標設計的更加傳統、古樸，創造出具有東方韻味且極具形式感的圖標設計。
6.2 純圖標
採用純圖標展示形式的產品比較少見，純圖標樣式的最大缺點就是識別性低，沒有文字說明會導致用戶很難找到自己想要去的位置，也不明確自己所處的狀態。所以我們如果要設計純圖標形式，那麼必須要考慮到圖標的識別性問題，間接的捨棄掉圖標更多的延展性，讓圖標變得更規矩。（識別性的提升我之前寫的圖標文章中提到過，主要可以從大眾認知隱喻與真實世界映射兩個方向出發去提升）
使用純圖標樣式的產品特徵：產品單一、領域垂直、小眾化、用戶群體接受度高。即使滿足這些條件下產品使用純圖標標籤，用戶第一次使用往往也是比較迷茫，需要等用戶熟悉後才會得到好轉，所以一定要慎用。除此之外不太建議用於電商、視頻、學習、社交等領域。
對於我們設計師來說使用純圖標樣式的產品中最為熟悉的就是花瓣了，不過當我第一次使用花瓣時也是比較懵的，特別是對於首頁標籤與發現標籤，在首頁頁面裡可以在搜索後選擇分類，而在發現頁可以直接選擇分類但是不能搜索。最開始我不瞭解發現圖標的定義，自己把它認定為了分類圖標，認為用戶可以在裡面進行分類查找想要的圖片，結果我錯了，它僅僅只是具備一級分類，想要精準找到自己想要的圖片，就必須去首頁搜索，這時我才明白這不是分類圖標這是發現圖標。為此我還去查看了花瓣以前的版本，在以前的版本中“發現”這一板塊也是可以進行搜索的，只是現版本取消了搜索功能，所以這真的是讓我有點迷糊，個人認為合成一塊也是不錯，畢竟首頁與發現兩者極為相似。
6.3 純文字（部分含標識）
採用純文字展示形式能夠更直觀的讓用戶進行操作，遵循簡單易用的原則。適合用戶群體跨度較大的產品，多用於直播類、內容類、簡單工具類APP中。缺點也顯而易見，圖標樣式比較單一，沒法加入更多趣味化、具有產品特性的元素到標籤中。
採用純文字展示形式的產品有很多，最熟悉不過的就是抖音，抖音的標籤默認狀態下採用了純文字形式，選中狀態則把文字高亮顯示，並且底部加入了圓角矩形，對於用戶群體跨度較大的產品，這樣的展現形式再好不過了。
6.4 舵式
舵式標籤可以看為底部標籤式導航的一種變體。它在後者的基礎上，突出強調了一個標籤並且放在中間的位置，樣子看起來像攢了一個舵，所以取名為舵式標籤。一般舵式標籤的顏色、大小等視覺表現會被設計得和其他普通標籤有所差異，通過視覺對比的方式吸引用戶關注。舵式標籤通常和產品框架體現無關，大多數應用程序使用舵式標籤是用來承載系統功能。起初是因為社區類APP為了激勵和方便用戶隨時隨地地輸出UGC內容，所以把觸發用戶創作/發佈的功能按鈕放置在標籤欄中。
因為舵式標籤可以很好地承載產品的重要功能，而被許多的應用程序設計所採用，經過越來越多的應用採用舵式標籤，使用的形式也越來越多樣，它現在並不再單一地用於承載產品功能，而是配合營銷場景、付費場景，給產品的變現、拉新賦能。拼多多就把它拉新的主要入口作用到了舵式圖標上，並且為了讓圖標更加顯目，甚至把圖標做成了輕質感的形式體現，同時也通過2像素的線性圖標減弱其他4個標籤的引導性。
七、賦予標籤更多內容
標籤欄不僅是向用戶展現產品框架的關鍵控件，還可以貫穿整個產品的商業價值的體現，它是連接著整個產品最重要的頂層信息。如果想要讓標籤變得更加豐富，想要標籤內容中含有更多的情感需求、 商業需求、運營需求，那麼我們可以重點從這兩個層面考慮：視覺層面、交互層面。
7.1 視覺層面
在視覺層面上我們可以迎合用戶的偏好與期望，通過豐富視覺體驗的方法來增加內容的觀賞性，這樣不僅能夠很好的向用戶傳遞著產品調性還能吸引用戶關注以及引導用戶進行操作。
7.1.1 設計裝飾性圖標
裝飾性圖標僅僅是用來提升整個界面的視覺體驗，通過豐富視覺體驗的方法來增加內容的觀賞性，這樣不僅可以吸引並留住用戶，還可以讓整個用戶體驗更加積極。
7.1.1.1 整體裝飾圖標
整體裝飾性圖標的出現往往是為了滿足情感需求與商業需求，整體裝飾圖標並不是一直存在的，它的特點是季節性與週期性，並且它並不具備任何功能性。
從情感需求出發設計裝飾圖標：例如世界盃火熱進行時，優酷為了滿足用戶的情感需求，就把標籤欄的圖標全部替換為帶有世界盃元素的圖案，讓用戶與其產生情感的共鳴。
從商業需求出發設計裝飾圖標：現在的年貨節，之前的雙十二、雙十一、618等，每到節日促銷活動的時候，很多電商應用都會換上裝飾性圖標，例如一號店，在過年前就把標籤欄圖標全部改為含帶過年氣息的元素，提前來預熱活動，引導用戶消費。
7.1.1.2 單個裝飾性圖標
單個裝飾性圖標的出現大部分都是為了滿足運營需求，運營為了推出某個活動或功能，往往會單獨裝飾某個圖標的設計視覺，以便於提高圖標的引導性，最直接的例子就是我剛才提到過的拼多多。
7.1.2 加入品牌基因
我們可以在標籤中加入更多的品牌基因，讓其與品牌產生聯動性，這一形式是大部分應用程序都在做的，我們可以從這6個層面加入品牌基因：品牌顏色、品牌LOGO、品牌元素、品牌名稱、品牌性格、品牌吉祥物。
7.1.2.1 品牌顏色
色彩是圖標設計中重要的構成元素之一，我們可以直接提取品牌色作為圖標設計視覺元素。例如站酷，站酷的品牌色是黃色，標籤欄的圖標（選中狀態）就提取了品牌的黃色，讓其與品牌調性高度一致。
當然品牌顏色除了可以直接用外，還可以在提取時適當調整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎上做了些許調整，圖標採用黃色透明漸變的處理方式，在與品牌顏色呼應的同時，使得整個圖標更加精緻、有活力。
7.1.2.2 品牌LOGO
提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標一般運用在APP首頁標籤。因為首頁是APP中最重要的頁面，也是進入APP默認的頁面，把首頁圖標替換成品牌LOGO，能反覆加強了用戶對App的LOGO印象，這樣不但使App內外形成了視覺聯繫，同時也二次傳遞了品牌形象。例如大眾點評，它的首頁標籤就用了品牌LOGO，同時也使用了品牌顏色。
7.1.2.3 品牌元素
我們可以在品牌中提取它識別性較強的局部元素作為圖標。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標。
品牌提取的元素並不只是所見到的品牌視覺形象，還可以提取與品牌內容強相關的元素。例如QQ音樂，它並沒有把它的品牌LOGO直接放於其中，而是通過大眾所熟知的音符作為首頁圖標。
7.1.2.4 品牌名稱
如果你的品牌還不為大眾所熟知，那麼為了強化用戶對品牌名稱的認知，可以把品牌名稱直接放入標籤欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標籤內，需要注意的是這類圖標不能單獨出現，因為它本身不具備識別性與引導性，必須配合文字一起出現，這樣才能讓用戶理解標籤的真正功能，我們不能為了設計而設計。
7.1.2.5 品牌性格
圖標風格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標，會讓人記憶猶新。例如：每日故宮，它的圖標就非常具有特色，結合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風。
7.1.2.6 品牌吉祥物
現在大部分品牌都會含帶吉祥物，我們可以在設計圖標時提取吉祥物的外形，把它用於產品的標籤中。例如盒馬，它就把吉祥物做為了底部標籤，不過需要我們注意的是如果吉祥物的風格與我們的圖標風格差別較大，我們就需要對它做風格化的處理，不然看起來就十分突兀。（盒馬對吉祥物做了輕質感的風格化處理）
7.1.3 讓用戶自定義
讓用戶自定義的標籤現在越來越常見，而每個產品對其思考的層面也都有所不同。自定義標籤往往出現在個人中心，它會根據用戶上傳的頭像或用戶的捏臉生成圖標。
7.1.3.1 用戶頭像
目前市面上很多APP都把用戶上傳的頭像作為了個人中心標籤展示，例如我們常用的百度網盤就採用了此方案，當用戶註冊未上傳用戶頭像時，會默認顯示系統標籤，當用戶上傳完後就會顯示用戶頭像，並且如果你是會員，還會把會員標示顯示在標籤的右上方，彰顯會員用戶的尊貴性。
我們可以很明顯的發現百度網盤的底部標籤默認狀態為線性圖標，而個人中心不管默認狀態還是選擇狀態都為面性圖標，所以如果你想要加強個人中心的引導性，那麼可以採取此方案。
7.1.3.2 捏臉
捏臉功能作為SOUL的一大特色，捏臉的虛擬形象賦予了真實人格屬性，加強了社交的傳播性，為此用戶對它的滿意度也是非常高。所以SOUL做了一次大膽的改變，決定把用戶自定義的捏臉放於個人中心標籤中。
SOUl在默認狀態的個人標籤引導性同樣大於其他三個標籤，更能引起用戶的關注。不僅如此，用戶的捏臉放於個人標籤中，還可以進一步引導用戶進行捏臉行為，間接的提升產品的用戶活躍度。（捏臉需要金幣，金幣可以每天登陸領取，也可以進行充值，對於白嫖黨來說當然是每天領取了，而用戶每天的領取行為給產品帶來的收益就是用戶活躍度）
7.2 交互層面
除了對標籤做視覺的提升外，我們還可以對其加入合理的交互效果，一方面可以提升用戶在使用產品過程中的樂趣，另一方面還可以為用戶提供更多便利，從而增強用戶體驗。
7.2.1 標籤功能切換
在不同的狀態下點擊標籤的功能也不一樣，一個標籤可承載2到3個功能，可以滿足不同狀態下的用戶需求。
7.2.1.1 承載2個功能案例
SOUL的廣場標籤（進入選取頁+刷新）
SOUL的廣告標籤承載了2個功能，當你處於其他標籤時，點擊廣場標籤則直接進入到廣場頁面；當你處於廣場頁面中時，再次點擊標籤則會刷新整個頁面。
有貨的發現標籤（進入選取頁+上傳圖片）
有貨的發現標籤也承載了2個功能，在設計上運用的非常巧妙，當你處於其他標籤時，點擊發現標籤則進入到發現頁面；當你在發現頁面時你的發現標籤則變為了上傳圖片標籤，可以點擊上傳圖片。
7.2.1.2 承載3個功能案例
淘寶首頁標籤（進入選取頁+刷新+置頂）
淘寶的首頁標籤同時承載了3個功能，當你處於其他標籤中，點擊首頁標籤則直接進入到首頁頁面；當你在首頁頁面第一屏時，你點擊首頁標籤則會刷新整個頁面；當你滑過3分之1屏時，首頁標籤的功能則變為置頂。所以在不同狀態下首頁標籤也會具備不同的功能，並且每種狀態下的標籤樣式也是不同。
愛奇藝首頁標籤（進入選取頁+到達指定位置+置頂）
愛奇藝的首頁標籤也是同時承載了3個功能，不過它與淘寶有些許不同，愛奇藝並不能刷新頁面，而作為替換的功能是直接到達指定位置“猜你喜歡”。
7.2.2 觸覺與聽覺
我們做的設計不要僅限於視覺所看到的，還要考慮到所觸摸的、所聽到的，我們可以利用觸覺與聽覺去輔助用戶確認自己的選擇，當然我們一定要合理利用，反之則會讓用戶感到十分反感。
7.2.2.1 觸覺
西瓜視頻與今日頭條在點擊標籤欄圖標時手機就會發出輕微的震動，給予了用戶很好的點擊反饋，不過現在市面上大部分APP並沒有採取此方案，所以我對齊進行了一些思考，原因有兩點，第一它們的圖標默認狀態為線性圖標，選擇狀態為面性圖標，沒有做太多的修飾，所以用簡單視覺體現+震動觸覺的方式提示用戶已經來到新的目的地。第二是因為這兩個APP標籤欄的功能跨度較大、內容相對獨立，想用微弱震動作加強提示，所以才採取了此方案。
7.2.2.2 聽覺
SOUL點擊星球標籤時手機就會發出戀愛鈴聲，這樣的交互方式的確比較罕見，對此我去查看了SOUL的產品報告，SOUL主要面對女性用戶，女性用戶約為男性用戶的2.4倍（女人更偏感性），並且它的主要需求是滿足測試、匹配、交友，所以戀愛鈴聲能夠很好的引起用戶的情感共鳴。不過鈴聲有利有弊，當你在特定場景下使用SOUL時，點擊到星球標籤周圍人也都能聽到戀愛鈴聲，實屬尷尬，所以我在特定場景下使用SOUL時都會默默的關掉聲音。SOUL為了規避這樣的尷尬，應用剛打開時來到的是廣場頁面，而不是星球頁面。
7.2.3 標籤動畫
精彩的圖標動畫，對整體的設計具有畫龍點睛的作用，降低標籤切換時的枯燥感，提升操作的愉悅度和期待感。甚至可以通過 tab 的動畫設計給用戶傳達出整個 APP 設計的品牌及理念。標籤動畫往往都比較簡單，主要有：縮放、旋轉、顏色過渡、位移、抖動、填充、線性軌跡、結合容器、元素介質等。接下來我們來看看SOUl、虎牙、汽車之家是怎麼做的。
7.2.3.1 SOUL（彈性縮放+結合容器+線性軌跡）
SOUL的底部標籤欄運用到了彈性動畫、結合容器以及線性軌跡。帶有彈性縮放的標籤反饋，讓整體的設計更加具有趣味性，相比線性縮放也更有視覺衝擊力。圖標的運動規則：先從 0 放大到最大（數值根據實際情況設定），然後再回彈至正常大小。除了彈性動畫外，它還結合了容器的元素對內部進行了顏色的替換以及單線條的軌跡動畫。這樣的處理不僅趣味性十足，還強化了選中當前狀態，整體標籤切換的一致性也較高。
7.2.3.2 虎牙（抖動+趣味表達）
虎牙一直是我比較喜歡的直播平臺，它的底部標籤動畫也是非常值得借鑑，運用到的動畫形式是抖動與趣味表達。抖動是通過圖標的左右、上下快速位移或旋轉形成，整體的動畫效果節奏較快，具有一定的速度感，使整個標籤切換的情緒表達較為俏皮、可愛。除了抖動外還在切換過程中代入了更多小元素的趣味表達，賦予了圖標更多的性格，對我們的設計進行再昇華，從而提高整體設計的質感和趣味。
7.2.3.3 汽車之家（結合容器+細節晃動）
因為用戶群體的不同，汽車之家在標籤動畫的設計上也相對簡單、嚴謹，它的動畫形式主要是結合容器與細節晃動。選中效果由線切換為面，並加入了品牌底色，這樣能夠清晰的給用戶傳達當前頁面。並且為了不使整體的切換效果變得生硬，在切換過程中採用了透明度與彈性縮放，讓其過渡的相對柔和。在細節的處理上也是非常用心，每個圖標都帶有笑臉的形狀，間接的給用戶傳達“笑臉”信息，在選取標籤時內部形狀會輕微晃動。整體來看汽車之家的標籤動效雖然偏向嚴謹，但是在細節上也給予用戶傳達了更多的情感。
八、總結
以上就是我對底部標籤欄的設計與思考，喜歡可以點個小贊，拜了個拜～
本文由 @黑獅力 原創發佈於人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基於 CC0 協議
轉載請超鏈接註明：頭條資訊 » 底部標籤欄的設計與思考
免責聲明
：非本網註明原創的信息，皆為程序自動獲取互聯網，目的在於傳遞更多信息，並不代表本網贊同其觀點和對其真實性負責；如此頁面有侵犯到您的權益，請給站長發送郵件，並提供相關證明(版權證明、身份證正反面、侵權鏈接)，站長將在收到郵件24小時內刪除。