譯者序：3月15日，谷歌更新了安卓應用設計指導規范，加入了底部加入導航條（Bottom Navigation）。這看起來更像蘋果 iOS，但其實也有一些更直觀的細節設計。下面讓我們來看看底部導航的設計要點吧。
設計師們都知道，設計不僅僅只是好看。設計也是包括如何讓用戶和產品建立友好關系，無論這個產品是網站還是app。它就像是一種對話。導航就是這樣一種對話。因為如果用戶在導航上迷路的話，不管你的網站或app設計得有多好都沒有用。
為什么底部導航很重要？
Steven Hoober在他的移動設備使用的研究中發現，49%的用戶依賴單手持握操作手機。在大屏幕上，當用戶試圖伸到位于設備頂端的控件時，這就越過了大拇指操作的舒服區域了。
把高優先級的和常用的操作放在屏幕底部是很重要的，因為那里是用單手或單指交互可以很舒服地伸到的的地方。
Tab Bar
很多app遵循這個規則，為最重要的app功能使用“底部導航”（又名tab bar）。Facebook在主要的核心功能上“單點”，就可以在功能中快速切換。
Facebook iOS客戶端上的底部tab bar
底部導航設計的三個關鍵點
導航通?？梢哉f是一種運載工具，把用戶帶到他們想去的地方。底部導航應該用于同樣重要的最高級目標。這些目標需要在app任何地方都能夠直接進入。
好的底部導航設計需要遵循以下三個原則：
1. 只顯示最重要的目標
底部導航使用3～5個最高級目標。如果少于3個，考慮使用tab來代替。
底部導航避免使用超過5個的標簽，因為觸摸的位置會與旁邊另一個太接近而容易誤操作。把太多標簽放在tab bar上，會讓用戶想點到他需要的tab變得費勁。隨著tab的增加，你的app的復雜度也會增加。
如果你的頂級導航超過5個目標，那么就在底部導航上通過可變的位置提供不隱藏的目標入口。
避免滾動的內容
在一定程度上，隱藏式導航是一種明顯針對小屏幕的解決方案——你不必擔心屏幕限制，只要把導航選項放進一個可滾動的tab里。但是可滾動的內容是低效的，因為只要你想要看選項你就不得不滾動。
Rookie Cam iOS app“眼不見，心不知”的問題
2. 傳達當前位置
當前位置不明可能是App菜單的一個最常見的錯誤?！拔以谀膬?？”是成功的導航應該回答的一個用戶需要的基本問題。
用戶應該第一眼就知道怎樣從A點到B點，并且不需要外部任何指導。你應該使用恰當的視覺提示（圖標，標簽和顏色）來讓導航不需要任何解釋就能讓用戶明白。
圖標
因為底部導航操作都用圖標顯示，所以適合用于那些可以用圖標表達清楚的內容。有一些用戶都知道的通用圖標，大多數是那些表示功能性的，如搜索，郵件，打印等等。不幸的是，“通用”的圖標很少。app設計師通常要在圖標背后隱藏功能性，實際上很難辨識。
這是Bloom.fm app之前的Android版本，用戶很難理解當前位置
顏色
避免在底部導航使用不同顏色的圖標和文字標簽。使用app的主色來顯示當前聚焦的視圖。
左邊：不同顏色的圖標讓你的app看起來像一棵圣誕樹。 右邊：使用唯一的主色
遵循這一個簡單的規則——當前底部導航的操作（包括圖標和任何文字標簽）顯示app主色。
Twitter iOS app底部菜單：消息視圖是激活的
如果底部導航條是彩色的，那就讓當前的圖標和文字標簽顯示白色或黑色。
左邊：避免彩色圖標搭配彩色背景導航條。右邊：使用黑白的灰度圖標
文字標簽
文字標簽應該給導航圖標提供短而有意義的定義。避免長文字，因為這些標簽不能截短或隱藏。
避免隱藏，截短和縮小文字標簽
菜單元素應該容易瀏覽。當用戶點擊一個元素的時候，他應該能理解發生了什么。
目標尺寸
讓目標足夠大來方便用戶的點擊。為了計算每個底部導航標簽的寬度，把視圖寬度按功能的數目平分。另外，要給所有的底部導航標簽一個最大的寬度。
Android guideline為移動端的底部導航條推薦了的尺寸如下：
移動端固定的底部導航條（單位是DP）來源：Material Design
Tab上的標記
你可以在tab bar圖標上顯示一個標記，來表示相關的視圖或模式有新消息。
考慮tab圖標上的標記不要顯示的太唐突
3. 不言而喻的導航
好的導航應該感覺像是一個無形的手帶領用戶一起走過整個過程。畢竟，即使最酷的功能或最引人注目的內容，如果用戶找不到，那也是沒有用的。
行為
每一個底部導航圖標必須引導到目標位置，不是打開菜單或其他彈窗。輕點一個底部導航圖標應該直接引導用戶到相應的視圖，或是刷新當前激活的視圖。
不要用一個tab bar給用戶一些在當前屏幕或app模式下可執行的控件。 如果你需要提供這種控件，用一個toolbar代替。
iOS Toolbar
追求一致性
盡可能在每個方向都顯示相同的tab。這樣很好，會給用戶帶來一種視覺穩定性。
當功能不可用時，不要移除這個tab。如果你在某些情況下移除了一個tab，這會使你的App的界面不穩定和不可預知。最好的解決方案是確保所有的tab都是可用的，但是當某一個tab內容不可用時，解釋一下為什么。例如，如果用戶沒有離線文件，Dropbox的離線tab就顯示一個解釋屏幕，解釋怎樣添加離線文件。這就叫空狀態。
Dropbox app空狀態頁面
隱藏
如果頁面時一個滾動的信息流，那么tab bar要能在用戶滾動瀏覽新內容的時候進行隱藏，然后在用戶往下拉視圖回到頂部時再顯示出來。
底部導航可以隨著滾動動態地顯示和消失
視覺樂趣
避免視圖間的過場使用橫向的動畫。激活的和未激活的視圖之間的過場應該使用交叉淡入淡出的動畫。
交叉淡入淡出動畫（來源：Material Design）
回顧要點
底部導航應該：
- 明顯可見的，良好的組織結構化的（使用3～5個頂級目標，避免可滾動的內容）
- 清晰的（元素應該易于瀏覽，目標大小應該易于點擊）
- 簡單的（確保每個導航圖標都能引導到正確的目標，底部導航和整個app的所有元素都要保持一致性）
結論
幫助用戶導航應該是每個網站和app最高的優先級。這一點背后的目標就是創造一個可以自然地符合用戶心智模型的交互系統。
你是在為你的用戶設計。一直要考慮到你的用戶persona，考慮他們使用你app時的目標，然后用你的導航去幫助他們實現目標。你的產品對他們來說使用起來越簡單，他們將來才越有可能會使用它。
本文出處：ui.cn
原作者：Nick Babich
本文標簽: 導航, 應用, 手機, 移動設備
