導(dǎo)航在 UI 界面當(dāng)中是相當(dāng)常見、直接影響用戶體驗(yàn)的基礎(chǔ)組件。通常底部導(dǎo)航，會(huì)用到圖標(biāo)、文本標(biāo)簽等元素，看起來不復(fù)雜，但是想要設(shè)計(jì)出效果，在視覺、交互、體驗(yàn)、邏輯上確保質(zhì)量，還是有很多注意事項(xiàng)的。這篇文章就系統(tǒng)梳理一下 UI 導(dǎo)航欄的設(shè)計(jì)。
- 用戶可以快速檢索到他們在哪個(gè)區(qū)域
- 允許用戶快速在不同的功能模塊間切換
- 讓用戶快速了解到不同界面的功能
將導(dǎo)航欄置于底部，很大程度上是基于用戶拇指交互的覆蓋區(qū)域。無論使用左手交互還是右手交互，底部導(dǎo)航欄都處于用戶拇指可以自然覆蓋的區(qū)域，
除了結(jié)合漢堡菜單之外，底部導(dǎo)航還需要橫跨多頁，保持不變。
底部導(dǎo)航欄的基本布局結(jié)構(gòu)：
- 1、承載導(dǎo)航元素的控件容器
- 2、激活狀態(tài)下的文本標(biāo)簽（可選）
- 3、非激活狀態(tài)下的文本標(biāo)簽（可選）
- 4、激活狀態(tài)下的圖標(biāo)
- 5、非激活狀態(tài)下的圖標(biāo)
雖然圖標(biāo)的形狀會(huì)因?yàn)樵O(shè)計(jì)的差異而有所不同，但是在圖標(biāo)外觀的現(xiàn)實(shí)格式和基礎(chǔ)尺寸上，應(yīng)該保持一致。
激活狀態(tài)下的圖標(biāo)尺寸可能會(huì)有所增加，配色和輪廓會(huì)微調(diào)，以達(dá)到抓人眼球的目的，但是不應(yīng)差異太大。
在具體的設(shè)計(jì)上，底部導(dǎo)航欄形成了如今的一套最佳實(shí)踐。
1、使用3-5個(gè)按鈕
確保底部導(dǎo)航的按鈕控制在3-5個(gè)之間。5個(gè)按鈕通常會(huì)讓導(dǎo)航的空間比較緊湊局促，用戶可能會(huì)誤觸，這樣會(huì)讓體驗(yàn)非常差。
如果真的有超過5個(gè)導(dǎo)航圖標(biāo)的話，建議參考 Google 的做法，使用漢堡菜單將它們隱藏在其他更加易于訪問的地方。
這同樣是為了解決導(dǎo)航欄圖標(biāo)過多的問題而誕生的一個(gè)思路，但是這個(gè)方案其實(shí)解決不了問題，因?yàn)榭倳?huì)有圖標(biāo)被遮住，這樣帶來的不確定的問題更多！
保持圖標(biāo)在設(shè)計(jì)上的一致性其實(shí)非常重要，這是保證 APP 在設(shè)計(jì)上，有著最基本的專業(yè)性。不一致的設(shè)計(jì)非常容易被用戶注意到，帶來的用戶體驗(yàn)的隱患是非常之大的。比如圖標(biāo)的樣式盡量保持一致，風(fēng)格保持統(tǒng)一，等等等等。
作為一個(gè)對功能性要求較高的控件，導(dǎo)航欄本身是需要傳遞「觸發(fā)」和「非觸發(fā)」的概念的，而信息的傳達(dá)更多時(shí)候是借助色彩和不透明度來呈現(xiàn)的，使用過多的色彩會(huì)導(dǎo)致導(dǎo)航欄失去這種基礎(chǔ)的辨識度。
文本標(biāo)簽為導(dǎo)航欄提供了快速且易于理解的信息提示，盡量使用單個(gè)詞匯來予以說明才符合它所處的位置，所以，盡量不要讓它被截?cái)嗷蛘邠Q行。
提供完美的導(dǎo)航設(shè)計(jì)并不復(fù)雜，確保導(dǎo)航簡單、清晰，確保一致性的前提下，挑選一套精心制作的圖標(biāo)，通常就能很快地出效果。和很多別的設(shè)計(jì)不同，導(dǎo)航欄的設(shè)計(jì)通常是越簡單明了，越容易出效果。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。