設(shè)計師們知道設(shè)計不僅僅是好看的外表。設(shè)計還包括用戶如何使用產(chǎn)品，無論是網(wǎng)站還是APP，這就像是一場對話。導(dǎo)航是一個談話。因為如果用戶找不到他們的方法,那么你的網(wǎng)站或應(yīng)用程序有多好并沒有什么意義。
為什么底部導(dǎo)航如此重要?
Steven Hoober在他的移動設(shè)備使用研究中發(fā)現(xiàn)，49%的人依靠一個拇指來完成手機上的事情。在下面的圖中，手機屏幕上出現(xiàn)的圖表是近似的到達圖，其中的顏色表示用戶可以用拇指與屏幕互動的區(qū)域。綠色表示用戶可以輕松到達的區(qū)域;黃色，這是一個需要伸展的區(qū)域;紅色，這是一個需要用戶改變他們手持設(shè)備的方式。
在屏幕底部放置頂級和頻繁使用的動作是很重要的，因為它們可以輕松地用單拇指交互來實現(xiàn)。
標簽欄（Tab bar）
許多應(yīng)用程序都遵循這一規(guī)則，并使用底部導(dǎo)航（也就是標簽欄）來獲取最重要的應(yīng)用程序的功能。Facebook通過一次點擊就可以獲得核心功能的主要功能，允許在功能之間快速切換。
底部導(dǎo)航設(shè)計的3個關(guān)鍵點
導(dǎo)航通常是將用戶帶到他們想去的地方的工具。底部導(dǎo)航應(yīng)該用于類似重要性的頂級目的地。這些目的地需要從應(yīng)用程序的任何一級頁面直接訪問。
好的底部導(dǎo)航設(shè)計遵循3點原則
1.只顯示最重要的目的地
在底部導(dǎo)航中使一般用3到5個頂級目的地。如果有少于三個目的地，可以考慮使用標簽代替。
避免在底部導(dǎo)航中使用超過5個目的地，因為點擊目標將位于彼此太近的地方。在標簽欄放太多的標簽會讓人們很難點擊他們想要的那個。隨著你顯示的每一個額外的標簽，你增加了應(yīng)用程序的復(fù)雜性。
2.明確當前位置
如果不能指出當前的位置，可能是應(yīng)用程序菜單上最常見的錯誤?！拔以谀膬?這是用戶需要回答的最基本的問題之一
用戶應(yīng)該知道如何從A點到B點，這是基于他們的第一眼，沒有來自外界的任何指導(dǎo)。您應(yīng)該使用適當?shù)囊曈X提示（圖標、標簽和顏色），這樣導(dǎo)航就不需要任何解釋。
圖標
因為底部導(dǎo)航動作被呈現(xiàn)為圖標，所以它們應(yīng)該被用于可以與圖標進行適配信息的內(nèi)容。有一個通用的圖標，用戶很熟悉，主要是那些代表搜索、電子郵件、打印等功能的圖標。不幸的是，“通用”圖標很少見。應(yīng)用程序設(shè)計師通常會隱藏那些實際上很難識別的圖標背后的功能。
顏色
避免在底部標簽欄中使用不同顏色的圖標和文本標簽。相反，使用應(yīng)用的主色調(diào)來表示焦點的視圖。
如果底部導(dǎo)航欄是彩色的，那么將當前動作的圖標和文本標簽變成黑色或白色
文本標簽
文本標簽應(yīng)該為導(dǎo)航圖標提供簡短而有意義的定義。避免長文本標簽，因為這些標簽不會被截斷或換行
菜單元素應(yīng)該易于掃描。用戶應(yīng)該能夠理解當他們點擊一個元素時到底發(fā)生了什么。
尺寸大小
使目標足夠大，可以很容易地點擊或點擊。為了計算每個底部導(dǎo)航動作的寬度，將視圖的寬度除以動作的數(shù)量?；蛘?，讓所有的底部導(dǎo)航動作都是最大動作的寬度。Android的指導(dǎo)方針建議在移動設(shè)備的底部導(dǎo)航欄上進行跟蹤。
3.讓導(dǎo)航不言而喻
良好的導(dǎo)航應(yīng)該感覺就像一只看不見的手，指引著用戶的旅程。畢竟，如果人們好不到他，即使是最酷的功能或者最吸引人的內(nèi)容也沒用.
行為
每個底部導(dǎo)航圖標必須指向一個目標目的地，并且可能不會打開菜單或其他彈出窗口。點擊底部導(dǎo)航圖標應(yīng)該直接引導(dǎo)用戶到相關(guān)視圖，或者刷新當前活動的視圖。
不要使用標簽欄為用戶提供對當前屏幕或應(yīng)用模式的元素的控制。如果您需要提供控件，則使用工具欄。
統(tǒng)一
盡可能多地在每個方向上顯示相同的選項卡。最好的方法是在每個方向上提供相同的選項卡，讓用戶有一種視覺上的穩(wěn)定感。當它的功能不可用時，不要刪除選項卡。如果你在某些情況下刪除了一個選項卡，而不是在其他情況下，那么你的應(yīng)用程序的UI就會變得不穩(wěn)定和不可預(yù)測。最好的解決方案是確保所有選項卡都是啟用的，但是解釋為什么標簽的內(nèi)容不可用。例如，如果用戶沒有離線文件，Dropbox應(yīng)用中的離線選項卡會顯示一個屏幕，解釋如何使用這些文件。這一特性稱為空狀態(tài)
隱藏
如果屏幕是一個滾動的feed，當人們滾動瀏覽新內(nèi)容時，標簽欄就會被隱藏起來，并顯示如果他們開始向下拉，試圖回到頂部(md規(guī)范）
同一層避免使用橫向移動在視圖之間轉(zhuǎn)換?；顒雍头腔顒右晥D之間的轉(zhuǎn)換應(yīng)該使用交叉淡出動畫
總結(jié)：
一個好的底部導(dǎo)航應(yīng)該具備3點
1.結(jié)構(gòu)合適（使用3到5個頂級目的地，并避免在底部導(dǎo)航中可滾動的內(nèi)容）。
2.清晰（Bar元素應(yīng)該易于掃描，目標應(yīng)該足夠大，可以很容易地點擊）。
3.簡單（確保每個導(dǎo)航圖標都指向正確的目的地，并在應(yīng)用程序中始終使用所有元素，包括底部導(dǎo)航）。
對于幾乎所有的網(wǎng)站和應(yīng)用來說，幫助用戶導(dǎo)航應(yīng)該是一個高優(yōu)先級的任務(wù)，這一時刻的目標是創(chuàng)建一個自然與用戶的心智模型相一致的交互系統(tǒng)。你是為你的用戶設(shè)計的?？偸强紤]你的用戶角色，考慮他們使用你的應(yīng)用時的目標，并使用你的導(dǎo)航來幫助他們實現(xiàn)這些目標。你的產(chǎn)品越容易使用，他們就越有可能使用它。
三米工作室“TF三缺一與他們的經(jīng)紀人”小組的每周優(yōu)質(zhì)設(shè)計文章漢化計劃11篇--《UX Design for Mobile: Bottom Navigation（移動用戶體驗設(shè)計：底部導(dǎo)航）》。
?Medium英文原文鏈接https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f
