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