設(shè)計(jì)不僅僅是為了美觀，更是為了讓用戶高效地操作網(wǎng)站或app。這個過程就像人與人的交流。導(dǎo)航作為“交流”的第一步，直接影響著用戶是否可以找到他們的需要。
為什么底部導(dǎo)航如此重要
Steven Hoober在研究中發(fā)現(xiàn)49%的用戶單手操作手機(jī)，如下圖所示，不同的顏色表示用戶單手操作可以觸及的區(qū)域。綠色區(qū)域表示可以輕易觸及，黃色需要適當(dāng)延展，而紅色區(qū)域代表用戶需要改變握持方式以實(shí)現(xiàn)操作。
單手交互的舒適區(qū)-屏幕底部，通常會展示頻繁使用和層級最高的功能。
Tab Bar
很多app遵守這樣的規(guī)則使用底部導(dǎo)航。Facebook通過一次點(diǎn)觸展示核心功能，以實(shí)現(xiàn)快速功能切換。
3個重要原則
導(dǎo)航的作用是引導(dǎo)用戶到達(dá)想去的地方。底部導(dǎo)航應(yīng)該用來展示重要度相似的高級模塊，而這些模塊需要用戶可以在任意頁面直接點(diǎn)擊進(jìn)入。
好的底部導(dǎo)航需要遵循以下三條原則：
1. 只顯示最重要的頁面
通常底部導(dǎo)航展示三到五個模塊，少于三個模塊推薦使用tab標(biāo)簽欄。
避免超過五個模塊，否則極易誤操作，同時(shí)也會將app復(fù)雜化。如果必須展示超過五個模塊，嘗試在其他位置設(shè)置導(dǎo)航。
避免內(nèi)容滾動
在小屏幕隱藏一部分導(dǎo)航模塊，使用滾動方式展示或許是一個好的設(shè)計(jì)，但是滾動的交互效率低，因?yàn)橛脩舯仨殱L動查看所有模塊。
2. 標(biāo)明現(xiàn)在的位置
不能表示當(dāng)前位置的設(shè)計(jì)是導(dǎo)航的普遍存在的問題。合適的視覺線索可以幫助用戶不借助其他指導(dǎo)，一眼就知道如何從A跳轉(zhuǎn)到B。
Icons
僅僅使用icon表示的底部導(dǎo)航，icon需要能夠表現(xiàn)其內(nèi)容。但是這樣可以讓用戶理解的導(dǎo)航并不多，比如搜索、email和打印。所以僅僅使用icon作為導(dǎo)航并不容易識別。
色彩
在底部導(dǎo)航避免使用不同色彩的icon和標(biāo)簽，可以嘗試使用app的主色調(diào)給當(dāng)前選中的模塊著色。
如果底部導(dǎo)航已經(jīng)上色，那么嘗試給當(dāng)前選中的模塊黑色或白色。
文字標(biāo)簽
文字標(biāo)簽應(yīng)該簡短明確，避免過長的文字標(biāo)簽。每一個模塊應(yīng)該易掃，用戶應(yīng)該能夠理解點(diǎn)擊某模塊頁面會跳轉(zhuǎn)到哪里。
模塊尺寸
每一個模塊的尺寸應(yīng)該易點(diǎn)擊，依據(jù)屏幕尺寸等分每一個模塊的尺寸。安卓關(guān)于尺寸的指導(dǎo)如下圖：
標(biāo)記Tab
在模塊上做標(biāo)記可以表示相關(guān)頁面的新消息。
3. 導(dǎo)航可以自圓其說
好的導(dǎo)航就像無形的手指導(dǎo)用戶完成他們的“旅程”，畢竟如果沒有用戶能找到，即使最酷的功能和最炫的內(nèi)容也是無意義的。
行為
點(diǎn)擊底部導(dǎo)航的模塊應(yīng)該可以直接反饋新頁面或刷新當(dāng)前頁面。
不要在底部導(dǎo)航給用戶提供控制當(dāng)前屏幕或app的元素。如果需要提供控制，嘗試使用工具欄。
保證一致性
在每一個頁面都展示相同的底部導(dǎo)航，保持視覺穩(wěn)定性。某一個模塊不可使用也不要移除這個模塊，否則會使app的UI不穩(wěn)定且不可預(yù)測。確保完整的底部導(dǎo)航，對于不可使用的模塊做相關(guān)解釋說明。例如，在Dropbox的設(shè)計(jì)中，如果用戶沒有離線文件，那么離線文件的模塊會解釋如何獲取離線文件。這叫做空態(tài)。
隱藏
如果頁面采用滾動流的設(shè)計(jì)，用戶滾動頁面的時(shí)候底部導(dǎo)航可以隱藏，當(dāng)新的內(nèi)容加載完成后再顯示。
視覺效果
避免在底部導(dǎo)航使用橫向移動。激活和未激活模塊的轉(zhuǎn)換應(yīng)該使用交叉漸變動畫。
總結(jié)
底部導(dǎo)航
. 可視和結(jié)構(gòu)良好（三到五個模塊且避免滾動）
. 清晰（模塊應(yīng)該易掃，并且足夠大）
. 簡單（確保每一個模塊指示一個明確的頁面，并且保持一致性）
導(dǎo)航是一個app的關(guān)鍵，目標(biāo)是契合用戶的心理模型。時(shí)刻注意不要偏離你的用戶畫像，思考用戶的使用目標(biāo)，使用導(dǎo)航幫助用戶完成目標(biāo)。越易用的產(chǎn)品，使用的用戶也越多。
原文：uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f
歡迎轉(zhuǎn)載，記得標(biāo)明出處哦
掃描下方二維碼關(guān)注Yinteraction
