怎么設(shè)計出體驗更好的 UI 底部導(dǎo)航欄?
發(fā)布時間:2021-12-17 08:40 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 4044


如何設(shè)計出體驗更好的 UI 底部導(dǎo)航欄?

導(dǎo)航在 UI 界面當(dāng)中是相當(dāng)常見、直接影響用戶體驗的基礎(chǔ)組件。通常底部導(dǎo)航,會用到圖標(biāo)、文本標(biāo)簽等元素,看起來不復(fù)雜,但是想要設(shè)計出效果,在視覺、交互、體驗、邏輯上確保質(zhì)量,還是有很多注意事項的。這篇文章就系統(tǒng)梳理一下 UI 導(dǎo)航欄的設(shè)計。


為什么要設(shè)計導(dǎo)航欄?


  • 用戶可以快速檢索到他們在哪個區(qū)域
  • 允許用戶快速在不同的功能模塊間切換
  • 讓用戶快速了解到不同界面的功能


導(dǎo)航欄的重要性


將導(dǎo)航欄置于底部,很大程度上是基于用戶拇指交互的覆蓋區(qū)域。無論使用左手交互還是右手交互,底部導(dǎo)航欄都處于用戶拇指可以自然覆蓋的區(qū)域,

如何設(shè)計出體驗更好的 UI 底部導(dǎo)航欄?

除了結(jié)合漢堡菜單之外,底部導(dǎo)航還需要橫跨多頁,保持不變。


底部導(dǎo)航欄結(jié)構(gòu)


底部導(dǎo)航欄的基本布局結(jié)構(gòu):

如何設(shè)計出體驗更好的 UI 底部導(dǎo)航欄?

  • 1、承載導(dǎo)航元素的控件容器
  • 2、激活狀態(tài)下的文本標(biāo)簽(可選)
  • 3、非激活狀態(tài)下的文本標(biāo)簽(可選)
  • 4、激活狀態(tài)下的圖標(biāo)
  • 5、非激活狀態(tài)下的圖標(biāo)


導(dǎo)航欄尺寸


雖然圖標(biāo)的形狀會因為設(shè)計的差異而有所不同,但是在圖標(biāo)外觀的現(xiàn)實格式和基礎(chǔ)尺寸上,應(yīng)該保持一致。

激活狀態(tài)下的圖標(biāo)尺寸可能會有所增加,配色和輪廓會微調(diào),以達(dá)到抓人眼球的目的,但是不應(yīng)差異太大。

如何設(shè)計出體驗更好的 UI 底部導(dǎo)航欄?

在具體的設(shè)計上,底部導(dǎo)航欄形成了如今的一套最佳實踐。


1、使用3-5個按鈕


確保底部導(dǎo)航的按鈕控制在3-5個之間。5個按鈕通常會讓導(dǎo)航的空間比較緊湊局促,用戶可能會誤觸,這樣會讓體驗非常差。

如果真的有超過5個導(dǎo)航圖標(biāo)的話,建議參考 Google 的做法,使用漢堡菜單將它們隱藏在其他更加易于訪問的地方。

如何設(shè)計出體驗更好的 UI 底部導(dǎo)航欄?


2、不要使用滾動式的導(dǎo)航欄


這同樣是為了解決導(dǎo)航欄圖標(biāo)過多的問題而誕生的一個思路,但是這個方案其實解決不了問題,因為總會有圖標(biāo)被遮住,這樣帶來的不確定的問題更多!

如何設(shè)計出體驗更好的 UI 底部導(dǎo)航欄?


3、保持視覺和風(fēng)格的一致性


保持圖標(biāo)在設(shè)計上的一致性其實非常重要,這是保證 APP 在設(shè)計上,有著最基本的專業(yè)性。不一致的設(shè)計非常容易被用戶注意到,帶來的用戶體驗的隱患是非常之大的。比如圖標(biāo)的樣式盡量保持一致,風(fēng)格保持統(tǒng)一,等等等等。

如何設(shè)計出體驗更好的 UI 底部導(dǎo)航欄?


4、避免使用多種顏色


作為一個對功能性要求較高的控件,導(dǎo)航欄本身是需要傳遞「觸發(fā)」和「非觸發(fā)」的概念的,而信息的傳達(dá)更多時候是借助色彩和不透明度來呈現(xiàn)的,使用過多的色彩會導(dǎo)致導(dǎo)航欄失去這種基礎(chǔ)的辨識度。

如何設(shè)計出體驗更好的 UI 底部導(dǎo)航欄?


5、文本標(biāo)簽不要截斷或換行


文本標(biāo)簽為導(dǎo)航欄提供了快速且易于理解的信息提示,盡量使用單個詞匯來予以說明才符合它所處的位置,所以,盡量不要讓它被截斷或者換行。

如何設(shè)計出體驗更好的 UI 底部導(dǎo)航欄?


結(jié)語


提供完美的導(dǎo)航設(shè)計并不復(fù)雜,確保導(dǎo)航簡單、清晰,確保一致性的前提下,挑選一套精心制作的圖標(biāo),通常就能很快地出效果。和很多別的設(shè)計不同,導(dǎo)航欄的設(shè)計通常是越簡單明了,越容易出效果。

零基礎(chǔ)教你做UI
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機(jī)械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC