設(shè)計(jì)師們知道設(shè)計(jì)不僅僅是好看的外表落包。設(shè)計(jì)還包括用戶如何使用產(chǎn)品，無論是網(wǎng)站還是APP摊唇，這就像是一場(chǎng)對(duì)話咐蝇。導(dǎo)航是一個(gè)談話。因?yàn)槿绻脩粽也坏剿麄兊姆椒?那么你的網(wǎng)站或應(yīng)用程序有多好并沒有什么意義遏片。
為什么底部導(dǎo)航如此重要?
Steven Hoober在他的移動(dòng)設(shè)備使用研究中發(fā)現(xiàn)嘹害，49%的人依靠一個(gè)拇指來完成手機(jī)上的事情。在下面的圖中吮便，手機(jī)屏幕上出現(xiàn)的圖表是近似的到達(dá)圖笔呀，其中的顏色表示用戶可以用拇指與屏幕互動(dòng)的區(qū)域。綠色表示用戶可以輕松到達(dá)的區(qū)域;黃色髓需，這是一個(gè)需要伸展的區(qū)域;紅色许师，這是一個(gè)需要用戶改變他們手持設(shè)備的方式。
在屏幕底部放置頂級(jí)和頻繁使用的動(dòng)作是很重要的微渠，因?yàn)樗鼈兛梢暂p松地用單拇指交互來實(shí)現(xiàn)。
標(biāo)簽欄（Tab bar）
許多應(yīng)用程序都遵循這一規(guī)則咧擂，并使用底部導(dǎo)航（也就是標(biāo)簽欄）來獲取最重要的應(yīng)用程序的功能逞盆。Facebook通過一次點(diǎn)擊就可以獲得核心功能的主要功能，允許在功能之間快速切換松申。
底部導(dǎo)航設(shè)計(jì)的3個(gè)關(guān)鍵點(diǎn)
導(dǎo)航通常是將用戶帶到他們想去的地方的工具云芦。底部導(dǎo)航應(yīng)該用于類似重要性的頂級(jí)目的地。這些目的地需要從應(yīng)用程序的任何一級(jí)頁面直接訪問贸桶。
好的底部導(dǎo)航設(shè)計(jì)遵循3點(diǎn)原則
1.只顯示最重要的目的地
在底部導(dǎo)航中使一般用3到5個(gè)頂級(jí)目的地舅逸。如果有少于三個(gè)目的地，可以考慮使用標(biāo)簽代替皇筛。
避免在底部導(dǎo)航中使用超過5個(gè)目的地琉历，因?yàn)辄c(diǎn)擊目標(biāo)將位于彼此太近的地方。在標(biāo)簽欄放太多的標(biāo)簽會(huì)讓人們很難點(diǎn)擊他們想要的那個(gè)。隨著你顯示的每一個(gè)額外的標(biāo)簽旗笔，你增加了應(yīng)用程序的復(fù)雜性彪置。
2.明確當(dāng)前位置
如果不能指出當(dāng)前的位置，可能是應(yīng)用程序菜單上最常見的錯(cuò)誤换团∠こ恚“我在哪兒?這是用戶需要回答的最基本的問題之一
用戶應(yīng)該知道如何從A點(diǎn)到B點(diǎn)宫蛆，這是基于他們的第一眼艘包，沒有來自外界的任何指導(dǎo)。您應(yīng)該使用適當(dāng)?shù)囊曈X提示（圖標(biāo)耀盗、標(biāo)簽和顏色）想虎，這樣導(dǎo)航就不需要任何解釋。
圖標(biāo)
因?yàn)榈撞繉?dǎo)航動(dòng)作被呈現(xiàn)為圖標(biāo)叛拷，所以它們應(yīng)該被用于可以與圖標(biāo)進(jìn)行適配信息的內(nèi)容舌厨。有一個(gè)通用的圖標(biāo)，用戶很熟悉忿薇，主要是那些代表搜索裙椭、電子郵件、打印等功能的圖標(biāo)署浩。不幸的是揉燃，“通用”圖標(biāo)很少見。應(yīng)用程序設(shè)計(jì)師通常會(huì)隱藏那些實(shí)際上很難識(shí)別的圖標(biāo)背后的功能筋栋。
顏色
避免在底部標(biāo)簽欄中使用不同顏色的圖標(biāo)和文本標(biāo)簽炊汤。相反，使用應(yīng)用的主色調(diào)來表示焦點(diǎn)的視圖弊攘。
如果底部導(dǎo)航欄是彩色的抢腐，那么將當(dāng)前動(dòng)作的圖標(biāo)和文本標(biāo)簽變成黑色或白色
文本標(biāo)簽
文本標(biāo)簽應(yīng)該為導(dǎo)航圖標(biāo)提供簡(jiǎn)短而有意義的定義。避免長(zhǎng)文本標(biāo)簽襟交，因?yàn)檫@些標(biāo)簽不會(huì)被截?cái)嗷驌Q行
菜單元素應(yīng)該易于掃描迈倍。用戶應(yīng)該能夠理解當(dāng)他們點(diǎn)擊一個(gè)元素時(shí)到底發(fā)生了什么。
尺寸大小
使目標(biāo)足夠大捣域，可以很容易地點(diǎn)擊或點(diǎn)擊啼染。為了計(jì)算每個(gè)底部導(dǎo)航動(dòng)作的寬度，將視圖的寬度除以動(dòng)作的數(shù)量竟宋√嵬辏或者，讓所有的底部導(dǎo)航動(dòng)作都是最大動(dòng)作的寬度丘侠。Android的指導(dǎo)方針建議在移動(dòng)設(shè)備的底部導(dǎo)航欄上進(jìn)行跟蹤徒欣。
3.讓導(dǎo)航不言而喻
良好的導(dǎo)航應(yīng)該感覺就像一只看不見的手，指引著用戶的旅程蜗字。畢竟打肝，如果人們好不到他脂新，即使是最酷的功能或者最吸引人的內(nèi)容也沒用.
行為
每個(gè)底部導(dǎo)航圖標(biāo)必須指向一個(gè)目標(biāo)目的地，并且可能不會(huì)打開菜單或其他彈出窗口粗梭。點(diǎn)擊底部導(dǎo)航圖標(biāo)應(yīng)該直接引導(dǎo)用戶到相關(guān)視圖争便，或者刷新當(dāng)前活動(dòng)的視圖。
不要使用標(biāo)簽欄為用戶提供對(duì)當(dāng)前屏幕或應(yīng)用模式的元素的控制断医。如果您需要提供控件滞乙，則使用工具欄。
統(tǒng)一
盡可能多地在每個(gè)方向上顯示相同的選項(xiàng)卡鉴嗤。最好的方法是在每個(gè)方向上提供相同的選項(xiàng)卡斩启，讓用戶有一種視覺上的穩(wěn)定感。當(dāng)它的功能不可用時(shí)醉锅，不要?jiǎng)h除選項(xiàng)卡兔簇。如果你在某些情況下刪除了一個(gè)選項(xiàng)卡，而不是在其他情況下硬耍，那么你的應(yīng)用程序的UI就會(huì)變得不穩(wěn)定和不可預(yù)測(cè)垄琐。最好的解決方案是確保所有選項(xiàng)卡都是啟用的，但是解釋為什么標(biāo)簽的內(nèi)容不可用经柴。例如狸窘，如果用戶沒有離線文件，Dropbox應(yīng)用中的離線選項(xiàng)卡會(huì)顯示一個(gè)屏幕口锭，解釋如何使用這些文件朦前。這一特性稱為空狀態(tài)
隱藏
如果屏幕是一個(gè)滾動(dòng)的feed，當(dāng)人們滾動(dòng)瀏覽新內(nèi)容時(shí)鹃操，標(biāo)簽欄就會(huì)被隱藏起來韭寸，并顯示如果他們開始向下拉，試圖回到頂部(md規(guī)范）
同一層避免使用橫向移動(dòng)在視圖之間轉(zhuǎn)換荆隘《魉牛活動(dòng)和非活動(dòng)視圖之間的轉(zhuǎn)換應(yīng)該使用交叉淡出動(dòng)畫
總結(jié)：
一個(gè)好的底部導(dǎo)航應(yīng)該具備3點(diǎn)
1.結(jié)構(gòu)合適（使用3到5個(gè)頂級(jí)目的地，并避免在底部導(dǎo)航中可滾動(dòng)的內(nèi)容）椰拒。
2.清晰（Bar元素應(yīng)該易于掃描晶渠，目標(biāo)應(yīng)該足夠大，可以很容易地點(diǎn)擊）燃观。
3.簡(jiǎn)單（確保每個(gè)導(dǎo)航圖標(biāo)都指向正確的目的地褒脯，并在應(yīng)用程序中始終使用所有元素，包括底部導(dǎo)航）缆毁。
對(duì)于幾乎所有的網(wǎng)站和應(yīng)用來說番川，幫助用戶導(dǎo)航應(yīng)該是一個(gè)高優(yōu)先級(jí)的任務(wù)，這一時(shí)刻的目標(biāo)是創(chuàng)建一個(gè)自然與用戶的心智模型相一致的交互系統(tǒng)。你是為你的用戶設(shè)計(jì)的颁督〖模總是考慮你的用戶角色，考慮他們使用你的應(yīng)用時(shí)的目標(biāo)沉御，并使用你的導(dǎo)航來幫助他們實(shí)現(xiàn)這些目標(biāo)屿讽。你的產(chǎn)品越容易使用，他們就越有可能使用它吠裆。
三米工作室“TF三缺一與他們的經(jīng)紀(jì)人”小組的每周優(yōu)質(zhì)設(shè)計(jì)文章漢化計(jì)劃11篇--《UX Design for Mobile: Bottom Navigation（移動(dòng)用戶體驗(yàn)設(shè)計(jì)：底部導(dǎo)航）》伐谈。
Medium英文原文鏈接https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f
