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