本期黑馬哥將會給大家分享 10 個關于底部標簽欄設計的優(yōu)秀案例，開啟你對底部標簽欄設計的不同認知。

我們在使用移動端產(chǎn)品的時候，為了方便用戶進行功能模塊之間的頻繁切換，采用底部標簽式導航是最常見的設計解決方案。隨著感官體驗的不斷升級，在設計形式上面也是五花八門，今天黑馬哥便借此機會為大家體驗了一些優(yōu)秀的案例，希望這些案例可以帶給你更多幫助。

可滑動交互的自定義設計

最近在體驗阿里云盤 APP 的時候，底部標簽欄的設計給了我不一樣的設計認知。該產(chǎn)品去掉了傳統(tǒng)的圖標+文字形式，而直接以純文本形式設計功能模塊。通常底部標簽欄是設計 3~5 個功能模塊，而阿里云盤的設計采用了左右可滑動的交互形式，方便展示更多功能入口。

·

右側設計了全部功能的入口，點擊之后以圖標+文字的形式展示所有功能模塊，圖標設計也是非常的精致美觀。用戶也可以通過編輯來自定義設置底部導航的排序，方便根據(jù)用戶自己的使用習慣來進行自定義，提高用戶的使用體驗。

·

設計靈感：在功能數(shù)量超過 5 個時，可以考慮左右滑動的交互形式。

上下滾動的切換式設計

微動效運用到圖標設計中已經(jīng)非常普遍，動效的表達相較于靜態(tài)形式來說更能吸引用戶的關注度。開眼 APP 利用上下滾動的動效來設計底部標簽欄，給設計師們提供了另一種設計解決方案。

純圖標展示會增加用戶的理解成本，而通過點擊之后的文字表達可以提高用戶的理解度。通過點擊之后的滾動形式切換文字和圖標，動效非常順暢自然，體驗度非常友好。

·

設計靈感：不一定只關注于圖標本身的動效，圖標與文字之間的滾動效果也是不錯的選擇。

底部拓展設計承載更多功能模塊

對于一些功能模塊較多的產(chǎn)品，設計師會盡可能的開發(fā)每一個常規(guī)的功能，拓展出更多可以進行設計延展的模塊。釘釘 APP 在進行底部標簽欄設計的時候，就將更多功能模塊隱藏在上拉展開欄中，方便用戶進行快捷操作。

充分的對底部標簽欄進行了深度挖掘，利用手勢的變化實現(xiàn)更多功能模塊的切換，提高了用戶的操作體驗。

·

設計靈感：當功能很多的時候，可以考慮底部拓展的形式，提高隱藏功能的曝光度。

方寸之間的操作轉場式設計

由于底部標簽欄位置區(qū)域較小，通常都是直接呈現(xiàn)功能模塊，進行繁瑣交互轉場的較少。而記賬城市 APP 由于新增記錄屬于重點功能，其他功能模塊采用了隱藏式的設計，在這個方寸之間的區(qū)域進行了各功能之間的轉場設計。

點擊左側圖標會轉場到分析報告相關的功能展示中，右側圖標點擊會延展出更多的功能模塊，關閉恢復初始狀態(tài)下的底部導航。在這個操作手勢區(qū)域通過簡單的轉場式設計，提高了隱藏功能的操作便捷度，算是一個不一樣的設計解決方案。

·

設計靈感：充分的利用好方寸之間的操作轉場，來實現(xiàn)多功能之間的切換。

點擊音效提升用戶關注度

除了通過視覺層的設計提高關注度以外，聲音傳遞的吸引力也是較為明顯的，通過點擊觸發(fā)帶來的音效可以有效地吸引用戶的關注度。

寶寶巴士兒歌 APP 的底部標簽欄點擊功能模塊時，會有點擊音效的設計，由于都是小朋友使用的產(chǎn)品，俏皮可愛的設計更能吸引他們的關注。（這里由于是圖片格式，音效的體驗大家可以下載 APP 體驗）

·

設計靈感：音效的使用也是提高用戶關注度的一種形式，只是要考慮用戶使用的場景，不能造成使用干擾。

趣味性的情感化設計融入

情感化的設計能夠拉近產(chǎn)品與用戶之間的親和力，這也是設計師在不斷探索并延展的設計方向。

QQ 作為社交工具而言，如何更加符合年輕化的設計需求，在底部標簽欄圖標的設計上面也是用盡了心思。消息模塊的圖標設計成各種搞怪的表情，在拖拽的時候會切換不同的表情，帶給用戶更加趣味性的體驗，讓人會心一笑。

·

設計靈感：表情化的圖標設計可以提升情感化的融入，也是結合 IP 形象的一種表達。

懸浮層設計突破底部標簽欄常規(guī)表現(xiàn)

設計師都在不斷的探索設計的差異化，敢于創(chuàng)新才能尋求新的可能性。

脈脈 APP 將底部標簽欄的設計采用懸浮層的形式表現(xiàn)，使得界面內(nèi)容呈現(xiàn)的呼吸感更強，也增加了界面結構的空間感。在保持基本設計規(guī)范的前提下進行小小的變化，就能帶來設計的差異表現(xiàn)，也能帶給用戶較為新穎的感官體驗。

·

設計靈感：要敢于突破規(guī)范的束縛，帶來不一樣的設計體驗。

懸浮層設計結合交互動效的雙向運用

交互動效是 UI 設計師在靜態(tài)設計稿中要逐步突破的一種技能，交互動效可以讓我們的設計表達更加直觀，提高產(chǎn)品的互動性和趣味性。

馬蜂窩旅游 APP 在進行底部標簽欄突破的過程中，除了采用新穎的懸浮層設計以外，在上滑瀏覽內(nèi)容時采用隱藏局部功能的處理方式，讓內(nèi)容的輸出面積更大。在下滑或者停頓的過程中恢復默認導航，探知用戶行為習慣并給出不同的交互反饋，帶給用戶更高的操作體驗和互動趣味性。

·

設計靈感：結合動效的創(chuàng)新可以讓靜態(tài)的表達更加直觀，顯示和隱藏的切換可以帶給用戶更多的可視區(qū)域，有利于更多內(nèi)容的呈現(xiàn)。

通過視覺風格強化關注度

大部分產(chǎn)品底部標簽欄都是通過面性圖標和線性圖標來做區(qū)分，也有一些通過顏色深淺對比區(qū)分。視覺風格上面整體屬于較為低調(diào)的處理形式，不會過于突出。會通過動效的形式和圖標質感等來突出，但是通常點擊和默認都是區(qū)分比較明顯的形式。

百度網(wǎng)盤 APP 通過較強的圖標視覺風格把底部標簽欄的視覺感突出，而點擊和默認的圖標設計風格一致，都成為了視覺焦點，通過圖標大小差異來進行點擊狀態(tài)的區(qū)分。如果是突出展示底部導航來說也算是一種解決方案，立體質感的圖標設計風格顯得也非常精致，視覺體驗感很強。

·

設計靈感：圖標的設計除了常規(guī)的線性和面性以外，微質感、立體感、動態(tài)感等形式也是一個突破的方向。

強化圖標設計的品牌基因

將品牌基因融入到圖標設計中來增強品牌感，除了從 LOGO 圖形中進行提煉，也可以從吉祥物中提煉。品牌形象結合到圖標設計中是比較常見的形式，除了直接運用吉祥物造型以外，也可以提煉形象局部特征。

比如飛豬旅行 APP 除了將吉祥物形象作為“首頁”點擊狀態(tài)的圖標使用，也將形象右上角的特征部位提取出來，結合到“首頁”和“我的”兩個功能模塊的默認圖標設計中。

·

設計靈感：從品牌形象入手定義圖標設計基因，可以提高產(chǎn)品設計的品牌感。立足于品牌做設計，這是設計師需要不斷強化和結合的。

小結

底部標簽欄設計可以在圖標設計風格上面做差異化表現(xiàn)；也可以在結構上面突破規(guī)范的束縛；還能在圖標動效、音效、品牌感等方面加強創(chuàng)新。沒有一成不變的規(guī)則，只有不斷突破的創(chuàng)新。

關于底部標簽欄設計的優(yōu)秀案例很多，這里只是列舉了 10 個不同的方向，還有很多別的設計突破的方向之后繼續(xù)為大家補充。希望本期的分享可以帶給大家關于底部標簽欄設計的新認知，我們互相進步。

歡迎關注作者的微信公眾號：「黑馬家族」

·