2025-3-7 杰睿
作為 UI 設計師來說，掌握產(chǎn)品設計中的每個組成要素是非常必要的，所謂精細化的設計就是把控好每一個細節(jié)的深入。隨著大屏手機的普及，在人機交互的探索上面設計師追求著更多提高用戶體驗的設計方式，不過萬變不離其宗，用戶體驗沉淀下來的行為習慣依然影響著我們的設計。
就拿導航設計來深入探索，隨著產(chǎn)品設計的不斷推進，很多新穎的設計呈現(xiàn)帶給用戶更多的操作體驗。本文就以移動端底部標簽欄導航為案例分析，和大家一起探索一下底部標簽欄導航設計的千奇百態(tài)。
分享目錄
一、關于底部標簽導航
二、UI 設計注意事項
三、UI 表現(xiàn)層類別分析
四、移動端線上案例分析
五、總結(jié)
一、關于底部標簽導航
移動端導航欄設計相當于自身的骨架，是支撐產(chǎn)品中功能交互和內(nèi)容傳播的血肉。導航系統(tǒng)指引著用戶的操作軌跡，引導用戶抵達目的地和進行相關的操作，將零散的內(nèi)容和功能進行組織形成結(jié)構化的可視軌跡。導航的存在因此顯得格外重要，也是梳理功能結(jié)構需要重點確定的內(nèi)容，以此來形成整個產(chǎn)品的脈絡。
移動端導航欄比較常見的有：底部標簽欄導航、舵式導航、頂部標簽(Tab)導航、宮格式導航、輪播（平鋪）式導航、懸浮 icon 導航、列表式導航欄、抽屜式導航、下拉導航/菜單導航等等。我們比較常見的產(chǎn)品中采用底部標簽欄導航的居多，便于用戶進行頻繁的操作，這也是本文接下來重點和大家探索的話題方向。
在移動端產(chǎn)品中底部標簽欄導航是最常用的導航模式，常作為一級目錄的導航，位于產(chǎn)品界面底部。根據(jù)用戶對于界面的操作熱區(qū)來看，底部是用戶可以輕松點擊的區(qū)域，無論用戶單手還是雙手操作都十分便利。
在底部標簽欄導航的基礎上進行拓展欄設計也是比較常見的形式，也就是舵式導航。突出中間的功能強化用戶的關注度，引導用戶使用更多延展功能。底部標簽欄導航和底部（舵式）拓展欄都屬于底部導航的范圍，本文將會重點以此類型為主進行梳理。
二、UI 設計注意事項
底部標簽欄導航非常直觀的告訴用戶當前的位置，也便于用戶進行同一層級間的不同模塊切換。由于具有很強的包容性，不會與其他功能模塊形成干擾，也能與多種導航模式進行組合使用。
底部標簽欄導航在模塊的選擇上面通常是 3-5 個，比較常見的為 5 個，3 個模塊相對比較松散，運用案例不是很多，除非業(yè)務功能較少。在設計表現(xiàn)形式上面有：icon + 文字、純 icon、純文字形式，比較主流的還是 icon + 文字的形式，可以降低用戶的理解成本和記憶負擔，提高用戶的操作體驗。
底部（舵式）拓展欄是為了突出中間功能設計，吸引用戶關注度，提高更多隱藏功能的使用概率。這種導航模式較為常見，比如轉(zhuǎn)轉(zhuǎn)、抖音、馬蜂窩旅游、閑魚等等均有使用。可以提高導航欄設計的趣味性和特征性，引導用戶操作更多功能和貢獻更多內(nèi)容。不過這樣的設計由于關注度被吸引，進而影響其它一級模塊的關注度，由于隱藏的功能增加了用戶的記憶負擔和操作負擔，利弊權衡需要產(chǎn)品設計師進行評估。
在進行設計的過程中，功能模塊的確定需要起到牽引的重要作用，鏈接起整個產(chǎn)品的功能脈絡；設計表現(xiàn)上面需要區(qū)分默認和點擊狀態(tài)，可以跳出規(guī)范的束縛，但是需要在不影響其它業(yè)務模塊的前提下進行。
三、UI 表現(xiàn)層類別分析
底部標簽欄導航在 UI 表現(xiàn)層方面也是千奇百態(tài)，除了常規(guī)的置底形式，設計師也發(fā)散了更多新穎的表現(xiàn)。突破現(xiàn)有規(guī)范的束縛，不被固有化思維所限制，才能不斷的進行設計創(chuàng)新。
3.1 最穩(wěn)定的常規(guī)設計形式
底部標簽欄導航最常見的設計形式依然是置于底部的常規(guī)形式，通常是 3-5 個功能模塊為主，其中 5 個功能模塊是較為常見的。形成差異化的是在圖標設計上面進行發(fā)揮，難度較大的設計是結(jié)合品牌基因或者特征性元素表達，也有一些是純文字的設計形式。
除了圖標上面進行發(fā)揮以外，也有一些會在背景上面進行裝飾，體現(xiàn)產(chǎn)品差異化。不過最常見的依然還是單色為主，或者根據(jù)模塊的需求在切換的過程中選擇使用不同的背景體現(xiàn)。雖然是最常規(guī)的導航模式，但是設計師依然可以在布局形式、圖標風格、配色關系、背景裝飾等方面進行發(fā)揮。
3.2 動靜結(jié)合的微動效表現(xiàn)
微動效在產(chǎn)品設計中的運用逐漸變得頻繁，相較于靜態(tài)的表現(xiàn)更能引起用戶的關注度，也能帶來趣味性和互動性。在底部標簽欄導航中的圖標設計上面，默認的采用靜態(tài)展示，而點擊狀態(tài)以動效的形式進行演變過度也是非常常見的設計處理。
在進行動效設計的時候，可以采用整個圖標位移形成動效，這是最簡單的動效表現(xiàn)，通常是上下彈跳位移。比較復雜的是圖標本身的結(jié)構動效，這也是圖標動效轉(zhuǎn)換比較連貫的形式。
3.3 突出規(guī)范框架的束縛表現(xiàn)
雖然大部分產(chǎn)品設計都會優(yōu)先采用官方的設計規(guī)范，但是為了突出設計的差異化，也會進行一些突出規(guī)范框架的設計。在保持原有不變的導航設計中，我們可以針對局部功能模塊進行突出表現(xiàn)（比如舵式導航），也可以將點擊狀態(tài)進行突出表現(xiàn)。
3.4 懸浮層增強空間感
一些產(chǎn)品為了增強界面結(jié)構的空間感，針對底部標簽欄導航設計采用懸浮層的設計來進行表現(xiàn)，使得界面的通透性和呼吸感更強。這種設計形式依然保留了原本的結(jié)構，只是預留了左右和底部的間距，也有一些產(chǎn)品結(jié)合交互動效的形式表達，滑動過程中采用隱藏部分功能，增加瀏覽過程的內(nèi)容輸出面積。
3.5 底部拓展/隱藏式設計
隨著一些工具型產(chǎn)品的使用，功能模塊變得復雜而繁多，也有將更多功能隱藏在底部標簽欄里面，上拉交互時顯示。這種設計形式將底部標簽欄進行了深度的開發(fā)利用，但是功能隱藏比較深，曝光度受到了一定的影響，不適合較為重要的功能模塊設計。
3.6 小結(jié)
底部標簽欄導航在 UI 表現(xiàn)層方面還有更多可以給予設計師發(fā)揮的空間，設計沒有固定不變的形式，在于不斷的發(fā)現(xiàn)、總結(jié)和創(chuàng)新。期待大家發(fā)現(xiàn)更多設計解決方案和進行更多設計創(chuàng)新，下面將會為大家梳理線上的優(yōu)秀案例，讓我們可以站在巨人的肩膀上不斷超越。
四、移動端線上案例分析
移動端底部標簽欄導航設計在眾多產(chǎn)品中浮現(xiàn)出很多優(yōu)秀的案例，對于線上案例的分析將有助于我們進行落地性的思考，新穎的設計不再是飛機稿，而是可以實現(xiàn)的創(chuàng)意。創(chuàng)新是建立在不斷的發(fā)現(xiàn)、總結(jié)、分析和改變，希望這些案例可以帶給你點滴靈感。
4.1 背景結(jié)合特定節(jié)日增強氛圍
在大部分情況下底部標簽欄導航的背景為單色的居多，不干擾信息的傳遞而保障用戶的瀏覽體驗。也有在特定節(jié)日結(jié)合氛圍營造對背景進行簡單的裝飾，可以在節(jié)假日或者特殊時期引起用戶的共勉，增強產(chǎn)品的情感化設計。
比如寶寶巴士兒歌 APP 的底部標簽欄導航設計，在之前的一些版本迭代過程中，結(jié)合特定氛圍營造進行背景設計，也是一種非常不錯的設計表達形式。由于屬于兒童類產(chǎn)品，點擊功能模塊切換的過程中還伴隨著音樂，視聽體驗的結(jié)合使得操作體驗備受關注。
4.2 強化消息提示的關注度
系統(tǒng)通知或者消息提示往往都會被用戶所忽略，盡管很多產(chǎn)品都會將消息作為單獨的功能模塊來設計，但是依然擺脫不了被忽略的問題。微信讀書將通知和私信等消息提示結(jié)合在個人中心的設計中，以氣泡彈出的形式展示在圖標紅點提示上方。以此來吸引用戶的關注度，增加消息閱讀率。
4.3 特異設計引導功能模塊關注度
在底部標簽欄導航的多個功能模塊中，為了突出或者引導使用某個功能時，會采用特異構成的設計做法，在原本的設計規(guī)范上面突出表現(xiàn)個例，以此來引起用戶的關注度。比如騰訊動漫在第一次進入 APP 時，圈子的圖標設計會特意突出，點擊之后恢復原樣，以此吸引用戶對該欄目的關注，增強功能模塊的使用率。
4.4 圖標設計的年輕化趨勢
隨著 95 后成為互聯(lián)網(wǎng)原住民，產(chǎn)品設計逐漸趨向于“年輕化”的探索和挖掘。優(yōu)酷 V9.0 升級后設計風格更年輕化，底部標簽欄圖標設計采用低純度、高明度的多色漸變，結(jié)合微動效使得風格更加青春活潑，符合年輕一代的審美需求。年輕化的設計不僅提高感官體驗，也拉近了產(chǎn)品與用戶之間的親和力。
4.5 趣味性的情感化設計融入
情感化的設計能夠拉近產(chǎn)品與用戶之間的親和力，這也是設計師在不斷探索并延展的設計方向。QQ 作為社交工具而言，如何更加符合年輕化的設計需求，在底部標簽欄圖標的設計上面也是用盡了心思。消息模塊的圖標設計成各種搞怪的表情，在拖拽的時候會切換不同的表情，帶給用戶更加趣味性的體驗，讓人會心一笑。
4.6 首頁圖標強化品牌曝光
為了強化產(chǎn)品品牌的曝光度，在進行底部標簽欄圖標設計的時候，會將首頁圖標的點擊狀態(tài)切換為品牌 LOGO 的形式，以此來增加品牌的曝光度。設計上面的選擇有 LOGO 圖形、吉祥物、應用圖標、品牌局部圖形等，會根據(jù)品牌 LOGO 的造型靈活選擇。
4.7 舵式導航轉(zhuǎn)一轉(zhuǎn)增強關注度
底部（舵式）拓展欄導航是突出中間功能模塊設計來強化關注度，除了靜態(tài)的表達以外，結(jié)合微動效更能起到強化突出的作用。轉(zhuǎn)轉(zhuǎn)結(jié)合吉祥物和微動效運用在舵式導航的設計中，不僅提高用戶的關注度，情感化的設計還能增強產(chǎn)品的親和力。
4.8 結(jié)合營銷內(nèi)容多層共用
產(chǎn)品中的營銷結(jié)合是最為常見的，產(chǎn)品設計師也在不斷地思考更多可結(jié)合的功能模塊，舵式導航的區(qū)域被充分利用是最為便利的。芒果 TV 將營銷內(nèi)容與會員模塊圖標進行結(jié)合，在保持原有功能操作的基礎上強化營銷活動的曝光度，鼓勵更多用戶參與活動。
4.9 微動效結(jié)合多層功能運用
微動效運用到底部標簽欄導航圖標動效中較為常見，可以帶給用戶趣味性的點擊體驗。對于一些首頁采用瀑布流設計的產(chǎn)品，也會在用戶上滑瀏覽內(nèi)容到一定量的時候?qū)⑹醉撟兓癁?ldquo;置頂”的操作，方便用戶快速置頂。比如愛奇藝 APP 將品牌色強化在圖標的設計中，結(jié)合微動效的變化帶給用戶趣味性和強化品牌記憶，在首頁圖標和置頂圖標切換的過程中也采用了微動效的形式，過度更加自然流暢，也能更加醒目的提示用戶。
4.10 微動效結(jié)合突出框架的束縛
一些尋求突破的產(chǎn)品，在設計的時候也嘗試了突出規(guī)范框架的束縛表現(xiàn)，點擊狀態(tài)會突出局部來強化。結(jié)合動效的變化形成自然過度，突出的設計更能引起用戶的關注度，明確自己當前所處的位置。這樣的表現(xiàn)形式不僅可以形成設計差異化，也能讓用戶操作路徑更加明顯，比如愛奇藝早期版本、美團外賣等產(chǎn)品。
4.11 懸浮層設計突破底部標簽欄常規(guī)表現(xiàn)
設計師都在不斷的探索設計的差異化，敢于創(chuàng)新才能尋求新的可能性。脈脈在最近的迭代中將底部標簽欄的設計采用懸浮層的形式表現(xiàn)，使得界面內(nèi)容呈現(xiàn)的呼吸感更強，也增加了界面結(jié)構的空間感。在保持基本設計規(guī)范的前提下進行小小的變化，就能帶來設計的差異表現(xiàn)，也能帶給用戶較為新穎的感官體驗。
4.12 懸浮層設計結(jié)合交互動效的雙向運用
交互動效是 UI 設計師在靜態(tài)設計稿中要逐步突破的一種技能，交互動效可以讓我們的設計表達更加直觀，提高產(chǎn)品的互動性和趣味性。馬蜂窩旅游在進行底部標簽欄突破的過程中，除了采用新穎的懸浮層設計以外，在上滑瀏覽內(nèi)容時采用隱藏局部功能的處理方式，讓內(nèi)容的輸出面積更大。在下滑或者停頓的過程中恢復默認導航，探知用戶行為習慣并給出不同的交互反饋，帶給用戶更高的操作體驗和互動趣味性。
4.13 底部拓展設計承載更多功能模塊
對于一些功能模塊較多的產(chǎn)品，產(chǎn)品設計師會盡可能的開發(fā)每一個常規(guī)的功能，拓展出更多可以進行設計延展的模塊。釘釘 APP 在進行底部標簽欄設計的時候，就將更多功能模塊隱藏在上拉展開欄中，方便用戶進行快捷操作。充分的對底部標簽欄進行了深度挖掘，利用手勢的變化實現(xiàn)更多功能模塊的切換，提高了用戶的操作體驗。
關于移動端底部標簽欄導航設計還有很多非常不錯的線上案例，這里就不一一列舉啦！優(yōu)秀的案例總結(jié)能夠帶給我們更多的靈感參考，基于優(yōu)秀之上我們才能設計出更新穎的作品，希望以此拋磚引玉，期待大家發(fā)現(xiàn)更多好玩的設計。
五、總結(jié)
對于 UI 設計師來說，產(chǎn)品體驗是一種習慣的養(yǎng)成，結(jié)合體驗的日記化摘錄形成設計思路的總結(jié)。總結(jié)是為了形成最終可供靈感借鑒的經(jīng)驗，基于優(yōu)秀的案例分析才能形成更多的設計解決方案。
本文以移動端底部標簽欄導航設計的經(jīng)驗分析為大家進行梳理，任何的設計表達都不是不變的規(guī)律，掌握的是這種設計分析和總結(jié)的思路，以此反推出更多的設計總結(jié)。希望本文的思路作為拋磚引玉，帶給你更多的思路。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。