設計不僅僅是為了美觀，更是為了讓用戶高效地操作網站或app。這個過程就像人與人的交流。導航作為“交流”的第一步，直接影響著用戶是否可以找到他們的需要。

為什么底部導航如此重要

Steven Hoober在研究中發現49%的用戶單手操作手機，如下圖所示，不同的顏色表示用戶單手操作可以觸及的區域。綠色區域表示可以輕易觸及，黃色需要適當延展，而紅色區域代表用戶需要改變握持方式以實現操作。

單手交互的舒適區-屏幕底部，通常會展示頻繁使用和層級最高的功能。

Tab Bar

很多app遵守這樣的規則使用底部導航。Facebook通過一次點觸展示核心功能，以實現快速功能切換。

3個重要原則

導航的作用是引導用戶到達想去的地方。底部導航應該用來展示重要度相似的高級模塊，而這些模塊需要用戶可以在任意頁面直接點擊進入。

好的底部導航需要遵循以下三條原則：

1. 只顯示最重要的頁面

通常底部導航展示三到五個模塊，少于三個模塊推薦使用tab標簽欄。

避免超過五個模塊，否則極易誤操作，同時也會將app復雜化。如果必須展示超過五個模塊，嘗試在其他位置設置導航。

避免內容滾動

在小屏幕隱藏一部分導航模塊，使用滾動方式展示或許是一個好的設計，但是滾動的交互效率低，因為用戶必須滾動查看所有模塊。

2. 標明現在的位置

不能表示當前位置的設計是導航的普遍存在的問題。合適的視覺線索可以幫助用戶不借助其他指導，一眼就知道如何從A跳轉到B。

Icons

僅僅使用icon表示的底部導航，icon需要能夠表現其內容。但是這樣可以讓用戶理解的導航并不多，比如搜索、email和打印。所以僅僅使用icon作為導航并不容易識別。

色彩

在底部導航避免使用不同色彩的icon和標簽，可以嘗試使用app的主色調給當前選中的模塊著色。

如果底部導航已經上色，那么嘗試給當前選中的模塊黑色或白色。

文字標簽

文字標簽應該簡短明確，避免過長的文字標簽。每一個模塊應該易掃，用戶應該能夠理解點擊某模塊頁面會跳轉到哪里。

模塊尺寸

每一個模塊的尺寸應該易點擊，依據屏幕尺寸等分每一個模塊的尺寸。安卓關于尺寸的指導如下圖：

標記Tab

在模塊上做標記可以表示相關頁面的新消息。

3. 導航可以自圓其說

好的導航就像無形的手指導用戶完成他們的“旅程”，畢竟如果沒有用戶能找到，即使最酷的功能和最炫的內容也是無意義的。

行為

點擊底部導航的模塊應該可以直接反饋新頁面或刷新當前頁面。

不要在底部導航給用戶提供控制當前屏幕或app的元素。如果需要提供控制，嘗試使用工具欄。

保證一致性

在每一個頁面都展示相同的底部導航，保持視覺穩定性。某一個模塊不可使用也不要移除這個模塊，否則會使app的UI不穩定且不可預測。確保完整的底部導航，對于不可使用的模塊做相關解釋說明。例如，在Dropbox的設計中，如果用戶沒有離線文件，那么離線文件的模塊會解釋如何獲取離線文件。這叫做空態。

隱藏

如果頁面采用滾動流的設計，用戶滾動頁面的時候底部導航可以隱藏，當新的內容加載完成后再顯示。

視覺效果

避免在底部導航使用橫向移動。激活和未激活模塊的轉換應該使用交叉漸變動畫。

總結

底部導航

. 可視和結構良好（三到五個模塊且避免滾動）

. 清晰（模塊應該易掃，并且足夠大）

. 簡單（確保每一個模塊指示一個明確的頁面，并且保持一致性）

導航是一個app的關鍵，目標是契合用戶的心理模型。時刻注意不要偏離你的用戶畫像，思考用戶的使用目標，使用導航幫助用戶完成目標。越易用的產品，使用的用戶也越多。

原文：uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f

歡迎轉載，記得標明出處哦

掃描下方二維碼關注Yinteraction