原作者：Nick Babich

英文原文鏈接： "UX Design for Mobile: Bottom Navigation"

中文翻譯：Circle_Dream

設(shè)計師們都知道設(shè)計不僅是做美工，更注重于用戶使用產(chǎn)品的方式，無論是網(wǎng)站還是app均如此。使用產(chǎn)品就像是進行對話。導(dǎo)航就是進行對話，無論你的網(wǎng)站或app做得有多好，如果用戶什么都找不到就沒有任何意義。

為什么底部導(dǎo)航非常重要？

Steven Hoober在他的移動設(shè)備使用研究中發(fā)現(xiàn)49%的人使用一個大拇指來完成手機的操作。在下圖中，手機屏幕上顯示的是大致的可觸達分區(qū)，彩色代表用戶用拇指能夠觸達并與屏幕交互的區(qū)域。綠色代表用戶可以輕易觸達，黃色代表需要拉伸拇指，紅色代表用戶需要換一種拿手機的方式才能夠觸達。

單手操作智能手機舒適觸達區(qū)域圖示。來源：uxmatters

把最高等級和頻繁使用的操作放在屏幕底部非常重要，因為這個區(qū)域可以很舒服的用單手或一個拇指進行交互。

標(biāo)簽欄（Tab Bar）

很多app遵從了這個法則并且將最重要的功能放置于底部導(dǎo)航。Facebook到達最重要的核心功能只需要點擊一次，功能間可以進行快速切換。

Facebook iOS版本的底部標(biāo)簽欄

3個底部導(dǎo)航設(shè)計的關(guān)鍵點

廣義上來說，導(dǎo)航就是帶用戶到他們想去的地方的媒介。底部導(dǎo)航應(yīng)該放的是最高級別的、具有相似重要性的目標(biāo)。這些目標(biāo)需要在APP中的任何地方都可以直接到達。

好的底部導(dǎo)航設(shè)計遵從下面三個規(guī)則：

1. 只放最重要的目標(biāo)

在底部導(dǎo)航放置3-5個最重要的目標(biāo)。如果少于3個，考慮使用標(biāo)簽。

避免在底部導(dǎo)航使用超過5個的目標(biāo)，點擊區(qū)域會過于緊密。放得太多會讓用戶很難點到他們想要的那個。并且每增加一個標(biāo)簽，APP的復(fù)雜程度都會隨之上升。

如果你最高級別的導(dǎo)航確實有5個以上，在其他位置展示底部導(dǎo)航顯示不下的目標(biāo)。

避免滾動內(nèi)容

隱藏部分導(dǎo)航是一個針對小屏幕的粗暴的解決方式——你不用擔(dān)心屏幕大小的限制，只要把所有的導(dǎo)航選項都放到滾動條里就行了。然而滾動內(nèi)容是低效的，你必須要滾動一次才能看到你想要的選項。

iOS菜鳥相機APP的“眼不見，心不想”問題

2. ?表示當(dāng)前位置

沒有標(biāo)識當(dāng)前位置也許是APP菜單中出現(xiàn)最多的錯誤?！拔以谀睦铮俊笔窃趯?dǎo)航過程中用戶最需要被回答的基本問題。

用戶應(yīng)該不用任何說明，瞄一眼就知道怎么從A點到達B點。使用適當(dāng)?shù)囊曈X線索（圖標(biāo)、標(biāo)簽、顏色）讓導(dǎo)航不需要額外的解釋說明。

圖標(biāo)

因為底部導(dǎo)航是用圖標(biāo)表示的，所以需要有合適的圖標(biāo)表達含義。有些圖標(biāo)是用戶能夠理解的共識性圖標(biāo)，比如搜索、email、打印等等。不幸的是，這種共識性圖標(biāo)非常罕見。APP設(shè)計師時常會犯用非常難懂的圖標(biāo)表示功能的錯誤。

Android應(yīng)用Bloom.fm原來的版本。用戶非常難理解當(dāng)前處于什么地方。

我在“圖標(biāo)是絕佳用戶體驗的一部分”文章中重點描述過這個問題。

顏色

避免在底部導(dǎo)航中使用不同顏色的圖標(biāo)和文字標(biāo)簽。應(yīng)使用APP的主題色表示選中狀態(tài)。

左側(cè)：不同顏色的圖標(biāo)讓你的APP看起來像圣誕樹。右側(cè)：使用一種主題色。

遵從一個簡單的原則：底部導(dǎo)航的當(dāng)前選中狀態(tài)（包括圖標(biāo)和文字標(biāo)簽）使用APP的主題色。

Twitter的iOS底部菜單條。'Messages'為當(dāng)前選中頁面。

如果底部導(dǎo)航欄有背景色，選中的圖標(biāo)和文字標(biāo)簽用白色或黑色表示。

左側(cè)：避免在有背景色的底部導(dǎo)航欄中搭配彩色圖標(biāo)。右側(cè)：使用黑白圖標(biāo)。

文字標(biāo)簽

文字標(biāo)簽應(yīng)該能夠簡短且意義明確的定義圖標(biāo)。避免使用會被縮略和截斷的長文字。

避免縮略、截斷、擠壓文字標(biāo)簽。

菜單的元素應(yīng)該容易瀏覽。用戶需要知道他們點擊了一個元素之后具體發(fā)生了什么。

響應(yīng)區(qū)域大小

為了容易觸摸或點擊，響應(yīng)區(qū)域應(yīng)該足夠大。將界面寬度除以功能的數(shù)量來計算每個底部按鍵的寬度。換句話說就是每個底部操作按鍵的寬度都為最大寬度。

Android指導(dǎo)原則建議移動應(yīng)用的底部導(dǎo)航使用下圖的尺寸。

移動應(yīng)用的固定底部導(dǎo)航條。單位為dp。來源：Material Design

標(biāo)簽上的小紅點

你可以在標(biāo)簽上顯示小紅點來表示對應(yīng)頁面或模式中有新信息。

謹(jǐn)慎地考慮在標(biāo)簽欄中使用小紅點。

3. 使導(dǎo)航顯而易見

好的導(dǎo)航應(yīng)該像看不見的手指引著用戶。畢竟即使是最酷炫的功能或者最強有力的內(nèi)容，如果用戶找不到就一點用都沒有。

行為

每個底部導(dǎo)航圖標(biāo)必須對應(yīng)一個固定頁面，不能對應(yīng)一個菜單或者其他彈窗。點擊一個底部導(dǎo)航圖標(biāo)應(yīng)該讓用戶直接到達指定界面或刷新當(dāng)前頁面。

不要用標(biāo)簽欄去控制和操作當(dāng)前頁面的元素及模式。如果你需要控制按鍵，使用工具條。

iOS的工具條

力求前后一致

盡量在任何情況下都使同樣的標(biāo)簽。使用同樣的標(biāo)簽?zāi)軌蜃層脩舾械揭曈X的穩(wěn)定性。

當(dāng)功能無法使用時，不要移除標(biāo)簽。如果一個標(biāo)簽在有些情況下被移除了，在另外一些情況下還在，你的APP UI就會變得不穩(wěn)定且不可預(yù)測。最好的解決方式是保留所有標(biāo)簽，但是解釋為什么標(biāo)簽的內(nèi)容不可用。例如，如果用戶沒有離線文件，Dropbox APP的“離線”標(biāo)簽就顯示了一個解釋如何獲取離線文件的頁面。這個功能叫做“空狀態(tài)（Empty state）”。

Dropbox APP的空狀態(tài)頁面

隱藏

如果頁面是上下滾動獲取內(nèi)容的（scrolling feed），導(dǎo)航欄可以在用戶滾動獲取新內(nèi)容的時候隱藏，在開始下拉試圖返回頂端時恢復(fù)顯示。

底部導(dǎo)航欄可以在滾動中動態(tài)的顯示或隱藏。來源：Imjabreu

視覺愉悅

避免在切換頁面時使用側(cè)向動畫。選中頁面和未選中頁面的切換應(yīng)該使用淡入淡出動畫。

淡入淡出動畫。來源：Material Design?

要點

底部導(dǎo)航應(yīng)該是：

· 可見且結(jié)構(gòu)化的（使用3-5個頂級目標(biāo)，避免使用可滾動內(nèi)容）。

· 清晰的（元素易瀏覽，目標(biāo)大易點擊）。

· 簡潔的（每個圖標(biāo)指向固定頁面，所有元素保持前后一致）。

總結(jié)

幫助用戶導(dǎo)航應(yīng)該是絕大部分網(wǎng)站和APP的最高優(yōu)先級。目標(biāo)是建立一個符合用戶思維模式的自然的交互系統(tǒng)。

你是為你的用戶去做設(shè)計的。時刻把用戶放在心上，考慮他們使用你的APP的目的，讓你的導(dǎo)航幫助他們完成目標(biāo)。你的產(chǎn)品越容易使用，用戶就用的越多。