1
雷鋒網(wǎng)按：本文由知乎@Darin翻譯自《UX Design for Mobile: Bottom Navigation》，作者Nick Babich。
設計師們都知道設計的目的不只是為了讓產品看起來好看。無論是網(wǎng)站還是app，如何黏住用戶，同樣是設計所需要考慮的方面。設計就像是一次對話，導航也是一次對話。因為如果你的用戶在你的網(wǎng)站或者app迷路的話，設計得再好也沒有用。
Steven Hoober在他關于移動設備使用的研究中指出，49%的人依賴他們的一個拇指在手機上完成所有操作。下面的圖中，手機屏幕里的圖案依據(jù)顏色的不同分別代表著人們在單手觸摸時的難易程度。綠色代表用戶比較容易觸摸到的區(qū)域；黃色區(qū)域表示需要用戶夠著才能觸摸到；紅色的區(qū)域則需要用戶改變握持設備的姿勢才可以觸摸到。
Representation of the comfort of a person's one-handed reach on a smartphone.
Image Source:uxmatters
把重要及常用的操作放在屏幕下方是很重要的，因為用一只拇指可以很舒服地觸摸到。
很多app都遵循這個方法，把Bottom Navigation（別名Tab Bar）作為app的最重要特征。例如，F(xiàn)acebook把主要的幾個核心功能放在一個導航，通過一次點擊就能在功能間快速切換。
Facebook bottom tab bar for iOS.
導航通常帶領用戶去到他們想去的地方。底部導航應該用于到達幾個重要性相近的頂級頁面。這些頁面要求可以從app中的任意位置直接進入。
好的底部導航設計遵循以下三個原則：
在底部導航中放置三到五個功能。如果超過五個，標簽間觸控的區(qū)域會太近，導致用戶難以點擊到自己想要的那個。另外一點，功能太多會讓你的app變得復雜。
如果你的導航超過五個功能，請在其他地方提供可以進入的通道而不是把它們都放在底部導航當中。
避免可滾動的內容
部分隱藏的導航對于小屏來說看起來是個不錯的解決辦法——你不用擔心有限的屏幕尺寸，只需要將導航中的選項隱藏在可滾動的導航條中。但是這些可滾動查看的內容是低效的，因為在你被允許查看自己想要的選項之前，你得滑動導航欄。
未能顯示當前位置可能是app菜單中最常見的一個錯誤?！拔以谀?？”是一次好的導航需要回答用戶的基本問題之一。
在不依靠任何外部的提示的情況下，基于第一眼的認知，用戶應該知道如何從A點去到B點。你應該利用正確的可視化的提示（圖標、標簽和顏色），這樣導航才不需要任何其他的解釋。
圖標
因為底部導航上的功能是以圖標呈現(xiàn)的，所以圖標所代表的含義要能恰當?shù)姆磻@個功能。有一類統(tǒng)一的圖標用戶十分了解，這類圖標通常代表搜索、郵件、打印等功能。但不幸這類“通用”的圖標比較少。app設計師經常把功能藏在很難辨認其含義的圖標之后。
Previous version of Bloom.fm app for Android. It's really hard to understand current location for users.
顏色
避免在底部導航欄里使用多種顏色的icon和文本標簽。要使用app的主色調來表示選中的狀態(tài)。
L:Different colored icons makes your app look like a christmas tree.
R:Use only one primary color insead.
遵循一個簡單的原則，以app的主色來給當前在底部導航選中的標簽上色（包括icon和文本）。
Bottom bar menu in Twitter app for iOS. Messages view is active.
如果底部導航欄已經有顏色，那就以黑色或者白色來給icon上色。
L:Avoid pairing colored icons with a colored bottom navigation bar.
R:Use black or white iconography.
文本標簽
文本標簽應該為導航的icon提供簡短和有效的定義。避免長標簽，因為他們會被縮略或者換行。
Avoid wrapping, truncating and shrinking text labels.
菜單上的元素應該能夠很容易被辨識。當用戶點擊某一元素時他們應能夠精確地了解到發(fā)生什么。
目標區(qū)域尺寸
讓目標區(qū)域盡可能大，使用戶能夠輕松觸摸或點擊。依據(jù)按鈕總數(shù)決定每個按鈕的寬度。讓每個按鈕的操作區(qū)域盡可能寬。
安卓平臺設計規(guī)范中對移動端底部導航操作區(qū)域的大小有如下建議：
Fixed bottom navigation bar on mobile. Units in density-independent pixels (dp).
Source: Material Design.
Tab上的角標
你可以在icon上加角標來表示有新信息。
Consider badging a tab bar icon to communicate unobtrusively.
優(yōu)秀的導航應該讓用戶感覺是一張無形的手在指引著他們的行程。畢竟，就算是再引人注目的內容，如果人們找不到，也是白搭。
行為
每個導航按鈕都應該鏈接到目標頁面，而不能打開新菜單或者其他彈窗。點擊導航按鈕應該引導用戶直接去到相關內容，或者在當前內容里刷新新內容。
不要用標簽欄讓用戶操控當前頁面當中的元素，如果你想提供操作權限，請用toolbar代替。
Toolbar for iOS.
力求一致
當某一功能不可用時無需移除該功能Tab。因為如果你在某些情況下移除而在另外一些情況下又沒有移除的話，會讓你app的UI變得十分不穩(wěn)定而且不可預知。最佳的解決辦法是讓所有Tab都存在，在tab內容不可用時對其進行解釋。舉個例子，在用戶沒有離線文件的情況下，dropbox的離線Tab依舊存在，它在屏幕上解釋了如何獲取離線文件。這種叫做空白狀態(tài)。
Empty state screen for Dropbox app.
隱藏
如果屏幕使用feed流形式，在人們滑動獲取新內容的時候將導航隱藏，當他們試圖返回上面的時候再將導航展示。
The bottom navigation bar can appear and disappear dynamically upon scrolling.
視覺上的愉悅
在頁面切換時避免使用橫向的移動轉換。使用淡入淡出的動畫效果來轉換。
Cross-fade animation. Source: Material Design.
底部導航應該：
可視并且結構良好（用三到五個標簽而且要避免可滑動的內容）
清晰（導航中的元素應該很容易辨識并且有足夠大的空間保證不會誤觸）
簡單（確保每個導航icon去到正確的頁面，保證你的產品的一致性）
幫助用戶導航應該引起幾乎所有網(wǎng)站和app的重視。這背后的目的是為了創(chuàng)建一個交互系統(tǒng)很好地契合用戶的心理模型。
你是為你的用戶而設計的。總是從你用戶的角度去思考，想想他們在使用app時候的目標，并且利用好導航讓他們去實現(xiàn)這些目標。你的產品越簡單，他們越有可能去使用你的產品。
雷峰網(wǎng)原創(chuàng)文章，未經授權禁止轉載。詳情見轉載須知。
