設(shè)計不僅僅是為了美觀祟霍，更是為了讓用戶高效地操作網(wǎng)站或app速缨。這個過程就像人與人的交流锌妻。導(dǎo)航作為“交流”的第一步，直接影響著用戶是否可以找到他們的需要旬牲。
為什么底部導(dǎo)航如此重要
Steven Hoober在研究中發(fā)現(xiàn)49%的用戶單手操作手機仿粹，如下圖所示，不同的顏色表示用戶單手操作可以觸及的區(qū)域引谜。綠色區(qū)域表示可以輕易觸及牍陌，黃色需要適當(dāng)延展，而紅色區(qū)域代表用戶需要改變握持方式以實現(xiàn)操作员咽。
單手交互的舒適區(qū)-屏幕底部，通常會展示頻繁使用和層級最高的功能贮预。
Tab Bar
很多app遵守這樣的規(guī)則使用底部導(dǎo)航贝室。Facebook通過一次點觸展示核心功能契讲，以實現(xiàn)快速功能切換。
3個重要原則
導(dǎo)航的作用是引導(dǎo)用戶到達想去的地方滑频。底部導(dǎo)航應(yīng)該用來展示重要度相似的高級模塊捡偏，而這些模塊需要用戶可以在任意頁面直接點擊進入。
好的底部導(dǎo)航需要遵循以下三條原則：
1. 只顯示最重要的頁面
通常底部導(dǎo)航展示三到五個模塊峡迷，少于三個模塊推薦使用tab標簽欄银伟。
避免超過五個模塊，否則極易誤操作绘搞，同時也會將app復(fù)雜化彤避。如果必須展示超過五個模塊，嘗試在其他位置設(shè)置導(dǎo)航夯辖。
避免內(nèi)容滾動
在小屏幕隱藏一部分導(dǎo)航模塊琉预，使用滾動方式展示或許是一個好的設(shè)計，但是滾動的交互效率低蒿褂，因為用戶必須滾動查看所有模塊圆米。
2. 標明現(xiàn)在的位置
不能表示當(dāng)前位置的設(shè)計是導(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和標簽，可以嘗試使用app的主色調(diào)給當(dāng)前選中的模塊著色崎场。
如果底部導(dǎo)航已經(jīng)上色佩耳，那么嘗試給當(dāng)前選中的模塊黑色或白色。
文字標簽
文字標簽應(yīng)該簡短明確谭跨，避免過長的文字標簽华糖。每一個模塊應(yīng)該易掃，用戶應(yīng)該能夠理解點擊某模塊頁面會跳轉(zhuǎn)到哪里设拟。
模塊尺寸
每一個模塊的尺寸應(yīng)該易點擊置济，依據(jù)屏幕尺寸等分每一個模塊的尺寸。安卓關(guān)于尺寸的指導(dǎo)如下圖：
標記Tab
在模塊上做標記可以表示相關(guān)頁面的新消息谆扎。
3. 導(dǎo)航可以自圓其說
好的導(dǎo)航就像無形的手指導(dǎo)用戶完成他們的“旅程”挂捅，畢竟如果沒有用戶能找到，即使最酷的功能和最炫的內(nèi)容也是無意義的堂湖。
行為
點擊底部導(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è)計中，如果用戶沒有離線文件琉朽，那么離線文件的模塊會解釋如何獲取離線文件毒租。這叫做空態(tài)。
隱藏
如果頁面采用滾動流的設(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)鍵灾梦，目標是契合用戶的心理模型。時刻注意不要偏離你的用戶畫像妓笙，思考用戶的使用目標若河，使用導(dǎo)航幫助用戶完成目標。越易用的產(chǎn)品寞宫，使用的用戶也越多萧福。
原文：uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f
歡迎轉(zhuǎn)載，記得標明出處哦
掃描下方二維碼關(guān)注Yinteraction
