10 個底部標簽欄設計技巧

1、今天給大家分享 10 個關(guān)于底部標簽欄設計的優(yōu)秀案例，開啟你對底部標簽欄設計的不同認知。我們在使用移動端產(chǎn)品的時候，為了方便用戶進行功能模塊之間的頻繁切換，采用底部標簽式導航是最常見的設計解決方案。隨著感官體驗的不斷升級，在設計形式上面也是五花八門，今天便借此機會為大家體驗了一些優(yōu)秀的案例，希望這些案例可以帶給你更多幫助。一 可滑動交互的自定義設計最近在體驗阿里云盤 APP 的時候，底部標簽欄的設計給了我不一樣的設計認知。該產(chǎn)品去掉了傳統(tǒng)的圖標+文字形式，而直接以純文本形式設計功能模塊。通常底部標簽欄是設計 35 個功能模塊，而阿里云盤的設計采用了左右可滑動的交互形式，方便展示更多功能入口。右

2、側(cè)設計了全部功能的入口，點擊之后以圖標+文字的形式展示所有功能模塊，圖標設計也是非常的精致美觀。用戶也可以通過編輯來自定義設置底部導航的排序，方便根據(jù)用戶自己的使用習慣來進行自定義，提高用戶的使用體驗。設計靈感：在功能數(shù)量超過 5 個時，可以考慮左右滑動的交互形式。二 上下滾動的切換式設計微動效運用到圖標設計中已經(jīng)非常普遍，動效的表達相較于靜態(tài)形式來說更能吸引用戶的關(guān)注度。開眼 APP 利用上下滾動的動效來設計底部標簽欄，給設計師們提供了另一種設計解決方案。純圖標展示會增加用戶的理解成本，而通過點擊之后的文字表達可以提高用戶的理解度。通過點擊之后的滾動形式切換文字和圖標，動效非常順暢自然，體驗

3、度非常友好。設計靈感：不一定只關(guān)注于圖標本身的動效，圖標與文字之間的滾動效果也是不錯的選擇。三 底部拓展設計承載更多功能模塊對于一些功能模塊較多的產(chǎn)品，設計師會盡可能的開發(fā)每一個常規(guī)的功能，拓展出更多可以進行設計延展的模塊。釘釘 APP 在進行底部標簽欄設計的時候，就將更多功能模塊隱藏在上拉展開欄中，方便用戶進行快捷操作。充分的對底部標簽欄進行了深度挖掘，利用手勢的變化實現(xiàn)更多功能模塊的切換，提高了用戶的操作體驗。設計靈感：當功能很多的時候，可以考慮底部拓展的形式，提高隱藏功能的曝光度。四 方寸之間的操作轉(zhuǎn)場式設計由于底部標簽欄位置區(qū)域較小，通常都是直接呈現(xiàn)功能模塊，進行繁瑣交互轉(zhuǎn)場的較少。而

4、記賬城市 APP 由于新增記錄屬于重點功能，其他功能模塊采用了隱藏式的設計，在這個方寸之間的區(qū)域進行了各功能之間的轉(zhuǎn)場設計。點擊左側(cè)圖標會轉(zhuǎn)場到分析報告相關(guān)的功能展示中，右側(cè)圖標點擊會延展出更多的功能模塊，關(guān)閉恢復初始狀態(tài)下的底部導航。在這個操作手勢區(qū)域通過簡單的轉(zhuǎn)場式設計，提高了隱藏功能的操作便捷度，算是一個不一樣的設計解決方案。設計靈感：充分的利用好方寸之間的操作轉(zhuǎn)場，來實現(xiàn)多功能之間的切換。五 點擊音效提升用戶關(guān)注度除了通過視覺層的設計提高關(guān)注度以外，聲音傳遞的吸引力也是較為明顯的，通過點擊觸發(fā)帶來的音效可以有效地吸引用戶的關(guān)注度。寶寶巴士兒歌 APP 的底部標簽欄點擊功能模塊時，會有點

5、擊音效的設計，由于都是小朋友使用的產(chǎn)品，俏皮可愛的設計更能吸引他們的關(guān)注。（這里由于是圖片格式，音效的體驗大家可以下載 APP 體驗）設計靈感：音效的使用也是提高用戶關(guān)注度的一種形式，只是要考慮用戶使用的場景，不能造成使用干擾。六 趣味性的情感化設計融入情感化的設計能夠拉近產(chǎn)品與用戶之間的親和力，這也是設計師在不斷探索并延展的設計方向。QQ 作為社交工具而言，如何更加符合年輕化的設計需求，在底部標簽欄圖標的設計上面也是用盡了心思。消息模塊的圖標設計成各種搞怪的表情，在拖拽的時候會切換不同的表情，帶給用戶更加趣味性的體驗，讓人會心一笑。設計靈感：表情化的圖標設計可以提升情感化的融入，也是結(jié)合 I

6、P 形象的一種表達。七 懸浮層設計突破底部標簽欄常規(guī)表現(xiàn)設計師都在不斷的探索設計的差異化，敢于創(chuàng)新才能尋求新的可能性。脈脈 APP 將底部標簽欄的設計采用懸浮層的形式表現(xiàn)，使得界面內(nèi)容呈現(xiàn)的呼吸感更強，也增加了界面結(jié)構(gòu)的空間感。在保持基本設計規(guī)范的前提下進行小小的變化，就能帶來設計的差異表現(xiàn)，也能帶給用戶較為新穎的感官體驗。設計靈感：要敢于突破規(guī)范的束縛，帶來不一樣的設計體驗。八 懸浮層設計結(jié)合交互動效的雙向運用交互動效是 UI 設計師在靜態(tài)設計稿中要逐步突破的一種技能，交互動效可以讓我們的設計表達更加直觀，提高產(chǎn)品的互動性和趣味性。馬蜂窩旅游 APP 在進行底部標簽欄突破的過程中，除了采用新

7、穎的懸浮層設計以外，在上滑瀏覽內(nèi)容時采用隱藏局部功能的處理方式，讓內(nèi)容的輸出面積更大。在下滑或者停頓的過程中恢復默認導航，探知用戶行為習慣并給出不同的交互反饋，帶給用戶更高的操作體驗和互動趣味性。設計靈感：結(jié)合動效的創(chuàng)新可以讓靜態(tài)的表達更加直觀，顯示和隱藏的切換可以帶給用戶更多的可視區(qū)域，有利于更多內(nèi)容的呈現(xiàn)。九 通過視覺風格強化關(guān)注度大部分產(chǎn)品底部標簽欄都是通過面性圖標和線性圖標來做區(qū)分，也有一些通過顏色深淺對比區(qū)分。視覺風格上面整體屬于較為低調(diào)的處理形式，不會過于突出。會通過動效的形式和圖標質(zhì)感等來突出，但是通常點擊和默認都是區(qū)分比較明顯的形式。百度網(wǎng)盤 APP 通過較強的圖標視覺風格把底部標簽欄的視覺感突出，而點擊和默認的圖標設計風格一致，都成為了視覺焦點，通過圖標大小差異來進行點擊狀態(tài)的區(qū)分。如果是突出展示底部導航來說也算是一種解決方案，立體質(zhì)感的圖標設計風格顯得也非常精致，視覺體驗感很強。設計靈感：圖標的設計除了常規(guī)的線性和面性以外，微質(zhì)感、立體感、動態(tài)感等形式也是一個突破的方向。十強化圖標設計的品牌基因?qū)⑵放苹蛉谌氲綀D標設計中來增強品牌感，除了從 LOGO 圖形中進行提煉，也可以從吉祥物中提煉。品牌形象結(jié)合到圖標設計中是比較常見的形式，除了直接運用吉祥物造型以外，也可以提煉形象局部特征。比如飛豬旅行 APP 除了將