本期黑馬哥將會給大家分享 10 個關于底部標簽欄設計的優秀案例，開啟你對底部標簽欄設計的不同認知。
我們在使用移動端產品的時候，為了方便用戶進行功能模塊之間的頻繁切換，采用底部標簽式導航是最常見的設計解決方案。隨著感官體驗的不斷升級，在設計形式上面也是五花八門，今天黑馬哥便借此機會為大家體驗了一些優秀的案例，希望這些案例可以帶給你更多幫助。
最近在體驗阿里云盤 APP 的時候，底部標簽欄的設計給了我不一樣的設計認知。該產品去掉了傳統的圖標+文字形式，而直接以純文本形式設計功能模塊。通常底部標簽欄是設計 3~5 個功能模塊，而阿里云盤的設計采用了左右可滑動的交互形式，方便展示更多功能入口。
右側設計了全部功能的入口，點擊之后以圖標+文字的形式展示所有功能模塊，圖標設計也是非常的精致美觀。用戶也可以通過編輯來自定義設置底部導航的排序，方便根據用戶自己的使用習慣來進行自定義，提高用戶的使用體驗。
設計靈感：在功能數量超過 5 個時，可以考慮左右滑動的交互形式。
微動效運用到圖標設計中已經非常普遍，動效的表達相較于靜態形式來說更能吸引用戶的關注度。開眼 APP 利用上下滾動的動效來設計底部標簽欄，給設計師們提供了另一種設計解決方案。
純圖標展示會增加用戶的理解成本，而通過點擊之后的文字表達可以提高用戶的理解度。通過點擊之后的滾動形式切換文字和圖標，動效非常順暢自然，體驗度非常友好。
設計靈感：不一定只關注于圖標本身的動效，圖標與文字之間的滾動效果也是不錯的選擇。
對于一些功能模塊較多的產品，設計師會盡可能的開發每一個常規的功能，拓展出更多可以進行設計延展的模塊。釘釘 APP 在進行底部標簽欄設計的時候，就將更多功能模塊隱藏在上拉展開欄中，方便用戶進行快捷操作。
充分的對底部標簽欄進行了深度挖掘，利用手勢的變化實現更多功能模塊的切換，提高了用戶的操作體驗。
設計靈感：當功能很多的時候，可以考慮底部拓展的形式，提高隱藏功能的曝光度。
由于底部標簽欄位置區域較小，通常都是直接呈現功能模塊，進行繁瑣交互轉場的較少。而記賬城市 APP 由于新增記錄屬于重點功能，其他功能模塊采用了隱藏式的設計，在這個方寸之間的區域進行了各功能之間的轉場設計。
點擊左側圖標會轉場到分析報告相關的功能展示中，右側圖標點擊會延展出更多的功能模塊，關閉恢復初始狀態下的底部導航。在這個操作手勢區域通過簡單的轉場式設計，提高了隱藏功能的操作便捷度，算是一個不一樣的設計解決方案。
設計靈感：充分的利用好方寸之間的操作轉場，來實現多功能之間的切換。
除了通過視覺層的設計提高關注度以外，聲音傳遞的吸引力也是較為明顯的，通過點擊觸發帶來的音效可以有效地吸引用戶的關注度。
寶寶巴士兒歌 APP 的底部標簽欄點擊功能模塊時，會有點擊音效的設計，由于都是小朋友使用的產品，俏皮可愛的設計更能吸引他們的關注。（這里由于是圖片格式，音效的體驗大家可以下載 APP 體驗）
設計靈感：音效的使用也是提高用戶關注度的一種形式，只是要考慮用戶使用的場景，不能造成使用干擾。
情感化的設計能夠拉近產品與用戶之間的親和力，這也是設計師在不斷探索并延展的設計方向。
QQ 作為社交工具而言，如何更加符合年輕化的設計需求，在底部標簽欄圖標的設計上面也是用盡了心思。消息模塊的圖標設計成各種搞怪的表情，在拖拽的時候會切換不同的表情，帶給用戶更加趣味性的體驗，讓人會心一笑。
設計靈感：表情化的圖標設計可以提升情感化的融入，也是結合 IP 形象的一種表達。
設計師都在不斷的探索設計的差異化，敢于創新才能尋求新的可能性。
脈脈 APP 將底部標簽欄的設計采用懸浮層的形式表現，使得界面內容呈現的呼吸感更強，也增加了界面結構的空間感。在保持基本設計規范的前提下進行小小的變化，就能帶來設計的差異表現，也能帶給用戶較為新穎的感官體驗。
設計靈感：要敢于突破規范的束縛，帶來不一樣的設計體驗。
交互動效是 UI 設計師在靜態設計稿中要逐步突破的一種技能，交互動效可以讓我們的設計表達更加直觀，提高產品的互動性和趣味性。
馬蜂窩旅游 APP 在進行底部標簽欄突破的過程中，除了采用新穎的懸浮層設計以外，在上滑瀏覽內容時采用隱藏局部功能的處理方式，讓內容的輸出面積更大。在下滑或者停頓的過程中恢復默認導航，探知用戶行為習慣并給出不同的交互反饋，帶給用戶更高的操作體驗和互動趣味性。
設計靈感：結合動效的創新可以讓靜態的表達更加直觀，顯示和隱藏的切換可以帶給用戶更多的可視區域，有利于更多內容的呈現。
大部分產品底部標簽欄都是通過面性圖標和線性圖標來做區分，也有一些通過顏色深淺對比區分。視覺風格上面整體屬于較為低調的處理形式，不會過于突出。會通過動效的形式和圖標質感等來突出，但是通常點擊和默認都是區分比較明顯的形式。
百度網盤 APP 通過較強的圖標視覺風格把底部標簽欄的視覺感突出，而點擊和默認的圖標設計風格一致，都成為了視覺焦點，通過圖標大小差異來進行點擊狀態的區分。如果是突出展示底部導航來說也算是一種解決方案，立體質感的圖標設計風格顯得也非常精致，視覺體驗感很強。
設計靈感：圖標的設計除了常規的線性和面性以外，微質感、立體感、動態感等形式也是一個突破的方向。
將品牌基因融入到圖標設計中來增強品牌感，除了從 LOGO 圖形中進行提煉，也可以從吉祥物中提煉。品牌形象結合到圖標設計中是比較常見的形式，除了直接運用吉祥物造型以外，也可以提煉形象局部特征。
比如飛豬旅行 APP 除了將吉祥物形象作為“首頁”點擊狀態的圖標使用，也將形象右上角的特征部位提取出來，結合到“首頁”和“我的”兩個功能模塊的默認圖標設計中。
設計靈感：從品牌形象入手定義圖標設計基因，可以提高產品設計的品牌感。立足于品牌做設計，這是設計師需要不斷強化和結合的。
底部標簽欄設計可以在圖標設計風格上面做差異化表現；也可以在結構上面突破規范的束縛；還能在圖標動效、音效、品牌感等方面加強創新。沒有一成不變的規則，只有不斷突破的創新。
關于底部標簽欄設計的優秀案例很多，這里只是列舉了 10 個不同的方向，還有很多別的設計突破的方向之后繼續為大家補充。希望本期的分享可以帶給大家關于底部標簽欄設計的新認知，我們互相進步。
歡迎關注作者的微信公眾號：「黑馬家族」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 態好