設(shè)計師們都知道設(shè)計的目的不只是為了讓產(chǎn)品看起來好看。無論是網(wǎng)站還是app，如何黏住用戶，同樣是設(shè)計所需要考慮的方面。設(shè)計就像是一次對話，導(dǎo)航也是一次對話。因為如果你的用戶在你的網(wǎng)站或者app迷路的話，設(shè)計得再好也沒有用。
為什么底部導(dǎo)航如此重要？
Steven Hoober在他關(guān)于移動設(shè)備使用的研究中指出，49%的人依賴他們的一個拇指在手機上完成所有操作。下面的圖中，手機屏幕里的圖案依據(jù)顏色的不同分別代表著人們在單手觸摸時的難易程度。綠色代表用戶比較容易觸摸到的區(qū)域；黃色區(qū)域表示需要用戶夠著才能觸摸到；紅色的區(qū)域則需要用戶改變握持設(shè)備的姿勢才可以觸摸到。
圖1 Representation of the comfort of a person’s one-handed reach on a smartphone
把重要及常用的操作放在屏幕下方是很重要的，因為用一只拇指可以很舒服地觸摸到。
Tab Bar
很多app都遵循這個方法，把Bottom Navigation（別名Tab Bar）作為app的最重要特征。例如，F(xiàn)acebook把主要的幾個核心功能放在一個導(dǎo)航，通過一次點擊就能在功能間快速切換。
圖2 Facebook bottom tab bar for iOS
個底部導(dǎo)航設(shè)計的關(guān)鍵點
導(dǎo)航通常帶領(lǐng)用戶去到他們想去的地方。底部導(dǎo)航應(yīng)該用于到達(dá)幾個重要性相近的頂級頁面。這些頁面要求可以從app中的任意位置直接進入。
好的底部導(dǎo)航設(shè)計遵循以下三個原則：
1. 僅展示最重要的功能
圖3 展示最重要的功能
在底部導(dǎo)航中放置三到五個功能。如果超過五個，標(biāo)簽間觸控的區(qū)域會太近，導(dǎo)致用戶難以點擊到自己想要的那個。另外一點，功能太多會讓你的app變得復(fù)雜。
圖4 展示最重要的功能
如果你的導(dǎo)航超過五個功能，請在其他地方提供可以進入的通道而不是把它們都放在底部導(dǎo)航當(dāng)中。
避免可滾動的內(nèi)容
部分隱藏的導(dǎo)航對于小屏來說看起來是個不錯的解決辦法——你不用擔(dān)心有限的屏幕尺寸，只需要將導(dǎo)航中的選項隱藏在可滾動的導(dǎo)航條中。但是這些可滾動查看的內(nèi)容是低效的，因為在你被允許查看自己想要的選項之前，你得滑動導(dǎo)航欄。
圖5 避免可滾動的內(nèi)容
2.告訴用戶現(xiàn)在的位置
未能顯示當(dāng)前位置可能是app菜單中最常見的一個錯誤。“我在哪？”是一次好的導(dǎo)航需要回答用戶的基本問題之一。
在不依靠任何外部的提示的情況下，基于第一眼的認(rèn)知，用戶應(yīng)該知道如何從A點去到B點。你應(yīng)該利用正確的可視化的提示（圖標(biāo)、標(biāo)簽和顏色），這樣導(dǎo)航才不需要任何其他的解釋。
圖標(biāo)
因為底部導(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)之后。
圖6 底部導(dǎ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)。
圖7 使用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和文本）。
圖8 以app的主色來給當(dāng)前在底部導(dǎo)航選中的標(biāo)簽上色
Bottom bar menu in Twitter app for iOS. Messages view is active.
如果底部導(dǎo)航欄已經(jīng)有顏色，那就以黑色或者白色來給icon上色。
與用戶對話，移動應(yīng)用的底部導(dǎo)航如何設(shè)計？
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)簽，因為他們會被縮略或者換行。
圖9 文本標(biāo)簽應(yīng)該為導(dǎo)航的icon提供簡短和有效的定義
Avoid wrapping， truncating and shrinking text labels.
菜單上的元素應(yīng)該能夠很容易被辨識。當(dāng)用戶點擊某一元素時他們應(yīng)能夠精確地了解到發(fā)生什么。
目標(biāo)區(qū)域尺寸
讓目標(biāo)區(qū)域盡可能大，使用戶能夠輕松觸摸或點擊。依據(jù)按鈕總數(shù)決定每個按鈕的寬度。讓每個按鈕的操作區(qū)域盡可能寬。
安卓平臺設(shè)計規(guī)范中對移動端底部導(dǎo)航操作區(qū)域的大小有如下建議：
圖10 安卓平臺設(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)來表示有新信息。
圖11 icon上加角標(biāo)
Consider badging a tab bar icon to communicate unobtrusively.
3.讓導(dǎo)航一目了然
優(yōu)秀的導(dǎo)航應(yīng)該讓用戶感覺是一張無形的手在指引著他們的行程。畢竟，就算是再引人注目的內(nèi)容，如果人們找不到，也是白搭。
行為
每個導(dǎo)航按鈕都應(yīng)該鏈接到目標(biāo)頁面，而不能打開新菜單或者其他彈窗。點擊導(dǎo)航按鈕應(yīng)該引導(dǎo)用戶直接去到相關(guān)內(nèi)容，或者在當(dāng)前內(nèi)容里刷新新內(nèi)容。
圖12 每個導(dǎo)航按鈕都應(yīng)該鏈接到目標(biāo)頁面
不要用標(biāo)簽欄讓用戶操控當(dāng)前頁面當(dāng)中的元素，如果你想提供操作權(quán)限，請用toolbar代替。
圖13 如果你想提供操作權(quán)限，請用toolbar代替
Toolbar for iOS.
力求一致
當(dāng)某一功能不可用時無需移除該功能Tab。因為如果你在某些情況下移除而在另外一些情況下又沒有移除的話，會讓你app的UI變得十分不穩(wěn)定而且不可預(yù)知。最佳的解決辦法是讓所有Tab都存在，在tab內(nèi)容不可用時對其進行解釋。舉個例子，在用戶沒有離線文件的情況下，Dropbox的離線Tab依舊存在，它在屏幕上解釋了如何獲取離線文件。這種叫做空白狀態(tài)。
圖14 屏幕上解釋了如何獲取離線文件
Empty state screen for Dropbox app.
隱藏
如果屏幕使用feed流形式，在人們滑動獲取新內(nèi)容的時候?qū)?dǎo)航隱藏，當(dāng)他們試圖返回上面的時候再將導(dǎo)航展示。
圖15 導(dǎo)航展示
The bottom navigation bar can appear and diSAPpear dynamically upon scrolling.
視覺上的愉悅
在頁面切換時避免使用橫向的移動轉(zhuǎn)換。使用淡入淡出的動畫效果來轉(zhuǎn)換。
圖16 頁面切換時避免使用橫向的移動轉(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)品的一致性）
結(jié)論
幫助用戶導(dǎo)航應(yīng)該引起幾乎所有網(wǎng)站和app的重視。這背后的目的是為了創(chuàng)建一個交互系統(tǒng)很好地契合用戶的心理模型。
你是為你的用戶而設(shè)計的。總是從你用戶的角度去思考，想想他們在使用app時候的目標(biāo)，并且利用好導(dǎo)航讓他們?nèi)崿F(xiàn)這些目標(biāo)。你的產(chǎn)品越簡單，他們越有可能去使用你的產(chǎn)品。
核心關(guān)注：拓步ERP系統(tǒng)平臺是覆蓋了眾多的業(yè)務(wù)領(lǐng)域、行業(yè)應(yīng)用，蘊涵了豐富的ERP管理思想，集成了ERP軟件業(yè)務(wù)管理理念，功能涉及供應(yīng)鏈、成本、制造、CRM、HR等眾多業(yè)務(wù)領(lǐng)域的管理，全面涵蓋了企業(yè)關(guān)注ERP管理系統(tǒng)的核心領(lǐng)域，是眾多中小企業(yè)信息化建設(shè)首選的ERP管理軟件信賴品牌。
轉(zhuǎn)載請注明出處：拓步ERP資訊網(wǎng)http://www.zudvwvb.cn/
本文標(biāo)題：移動應(yīng)用的底部導(dǎo)航如何設(shè)計？
本文網(wǎng)址：http://www.zudvwvb.cn/html/support/11121519740.html
相關(guān)文章
