導(dǎo)航模式是提高可用性的捷徑。當(dāng)你查看近年來最成功的交互導(dǎo)航設(shè)計(jì)時(shí)，顯而易見的贏家是那些完美執(zhí)行基本原則的人。雖然跳出條條框框思考是一個(gè)非常好思維方式，但有些規(guī)則是你不能打破的。以下是創(chuàng)建出色的移動導(dǎo)航的四個(gè)重要原則：

簡單

首先，最重要的是，導(dǎo)航系統(tǒng)必須簡單。良好的導(dǎo)航應(yīng)該感覺像一只無形的手，引導(dǎo)用戶。一種方法是根據(jù)移動用戶最有可能執(zhí)行的任務(wù)來確定移動應(yīng)用程序的內(nèi)容和導(dǎo)航的優(yōu)先級。

可見

正如雅各布·尼爾森（ Jakob Nielsen）所說，識別物體比記憶更容易。這意味著你應(yīng)該通過使操作和選項(xiàng)可見來最小化用戶的記憶負(fù)擔(dān)。導(dǎo)航應(yīng)該始終可用，而不僅僅是在我們預(yù)期用戶需要導(dǎo)航的時(shí)候。

明確

導(dǎo)航功能必須是不言而喻的。你需要以簡潔明了的方式傳遞信息。在沒有任何外部指導(dǎo)的情況下用戶應(yīng)該一目了然的知道如何從A點(diǎn)轉(zhuǎn)到B點(diǎn)。試想一下購物車圖標(biāo)，它作為一個(gè)標(biāo)簽或查看項(xiàng)目的標(biāo)識符。用戶無需考慮如何導(dǎo)航才能進(jìn)行購買；此元素將指導(dǎo)他們執(zhí)行適當(dāng)?shù)牟僮鳌?

一致性

所有視圖的導(dǎo)航系統(tǒng)應(yīng)相同。不要將導(dǎo)航控件放在不同頁面上的新位置。不要欺騙你的用戶，要始終保持言行一致。你的導(dǎo)航應(yīng)該使用“最不意外的原則”。導(dǎo)航應(yīng)該激勵(lì)用戶參與并與你所提供的內(nèi)容互動。

大拇指設(shè)計(jì)法則

史蒂文·霍伯在對移動設(shè)備使用情況的研究中發(fā)現(xiàn)，49%的人依靠一個(gè)拇指在手機(jī)上完成任務(wù)。在下面的圖中，手機(jī)屏幕上的圖表是近似可達(dá)圖，其中顏色表示用戶可以觸及的屏幕區(qū)域，并與拇指交互。綠色表示用戶可以輕松到達(dá)的區(qū)域；黃色表示需要伸展的區(qū)域；紅色表示需要用戶改變握住設(shè)備的方式的區(qū)域。

在設(shè)計(jì)時(shí)，要考慮到你的應(yīng)用程序?qū)⒃诙喾N環(huán)境中使用；即使是喜歡使用雙手握手機(jī)的人也不一定總是使用多個(gè)手指，更不用說雙手與你的用戶界面交互了。將最高層級且常用的操作放在屏幕底部非常重要。這樣，通過單手和拇指的交互即可輕松達(dá)到目標(biāo)。

另一個(gè)重點(diǎn)是底部導(dǎo)航應(yīng)該用于具有相同重要性的最高層級目標(biāo)。是需要從應(yīng)用程序中的任何位置都可以直接訪問的。

最后，也是很重要的一點(diǎn)，要注意點(diǎn)擊目標(biāo)區(qū)域的大小。Microsoft 建議 你將觸摸目標(biāo)區(qū)域大小設(shè)置為9平方毫米或更大（135 ppi顯示器上的48×48像素，縮放比例為1.0倍）。避免使用小于7平方毫米的觸摸目標(biāo)區(qū)域。

觸摸目標(biāo)區(qū)域不應(yīng)小于44像素到48像素（或11毫米到13毫米），包括填充。

標(biāo)簽欄

許多應(yīng)用程序使用標(biāo)簽欄來顯示應(yīng)用程序最重要的功能。facebook只需輕觸一下就可以提供核心功能的主要部分，允許在功能之間快速切換。

底部導(dǎo)航設(shè)計(jì)的三個(gè)關(guān)鍵因素

導(dǎo)航通常是將用戶帶到他們想要去的地方的工具。對于具有相似重要性的指定目的地，這些目的地需要從應(yīng)用程序中的任何位置直接訪問。好的底部導(dǎo)航設(shè)計(jì)應(yīng)該遵循以下三個(gè)原則。

1.僅顯示最重要的目的地

避免在底部導(dǎo)航中使用五個(gè)以上的訪問標(biāo)簽，因?yàn)門AP目標(biāo)之間的距離太近。在標(biāo)簽欄中放太多標(biāo)簽會使人們很難點(diǎn)擊他們想要的標(biāo)簽。而且，隨著每個(gè)額外的選項(xiàng)卡顯示，就會增加了應(yīng)用程序的復(fù)雜性。

避免使用五個(gè)以上的目的地。

避免滾動內(nèi)容

對于小屏幕來說，部分隱藏的導(dǎo)航似乎是一個(gè)非常好的解決方案，因?yàn)槟悴槐負(fù)?dān)心有限的屏幕空間，只需將導(dǎo)航選項(xiàng)放入一個(gè)可滾動的選項(xiàng)卡即可。但是，可滾動的內(nèi)容效率較低，因?yàn)橛脩舯仨毾葷L動才能看到所需的選項(xiàng)，因此最好盡可能避免。

該避免在選項(xiàng)卡欄中放置太多項(xiàng)目，以防止用戶滾動，然后才能單擊所需的選項(xiàng)。

2.明確當(dāng)前位置

應(yīng)用程序菜單上最常見的一個(gè)錯(cuò)誤是沒有明確用戶的當(dāng)前位置。“我在哪里？“是用戶遇到的基本問題之一。用戶應(yīng)該第一眼就知道如何從A點(diǎn)轉(zhuǎn)到B點(diǎn)，而不需要任何外部引導(dǎo)。你應(yīng)該適當(dāng)?shù)氖褂靡曈X提示（圖標(biāo)、標(biāo)簽和顏色），這樣導(dǎo)航就不需要任何解釋。

圖標(biāo)

底部導(dǎo)航應(yīng)該與圖標(biāo)的內(nèi)容進(jìn)行適當(dāng)?shù)慕Y(jié)合。盡管有一些用戶熟悉的通用圖標(biāo)，但大多數(shù)圖標(biāo)代表的功能包括搜索，電子郵件，打印等。

在適用于Android的先前版本的Bloom.fm應(yīng)用程序中，很難理解用戶的當(dāng)前位置。

顏色

避免在底部選項(xiàng)卡欄中使用不同顏色的圖標(biāo)和文本標(biāo)簽。相反，遵循這個(gè)簡單的規(guī)則，用應(yīng)用程序的主顏色為當(dāng)前的底部導(dǎo)航（包括圖標(biāo)和任何顯示的文本標(biāo)簽）著色。

左：不同顏色的圖標(biāo)使你的應(yīng)用看起來像一棵圣誕樹。右：只使用一種原色。

這是iOS的Twitter應(yīng)用程序中的底部欄菜單。消息視圖處于選中狀態(tài)。

如果底部導(dǎo)航欄是彩色的，請確保對當(dāng)前位置的圖標(biāo)和文本標(biāo)簽使用黑色或白色。

左：避免將彩色圖標(biāo)與彩色底部導(dǎo)航欄配對。右：使用黑色或白色圖標(biāo)。

文本標(biāo)簽

文本標(biāo)簽應(yīng)為導(dǎo)航圖標(biāo)提供簡短且有意義的定義。避免使用長文本標(biāo)簽，因?yàn)樗鼈儾粫財(cái)嗷蜃詣訐Q行。

避免換行，截?cái)嗪涂s小文本標(biāo)簽。

菜單元素應(yīng)易于理解。用戶應(yīng)該能夠理解點(diǎn)擊元素時(shí)會發(fā)生什么。

目標(biāo)尺寸

使目標(biāo)區(qū)域足夠大，以使其易于點(diǎn)擊或單擊。要計(jì)算每個(gè)底部導(dǎo)航動作的寬度，請將視圖的寬度除以動作數(shù)量?；蛘撸瑢⑺械撞繉?dǎo)航動作設(shè)置為最大動作的寬度。Android建議移動設(shè)備底部導(dǎo)航欄的尺寸如下。

顯示了移動設(shè)備上的固定底部導(dǎo)航欄，單位為密度獨(dú)立像素（dp）

標(biāo)簽上的微標(biāo)

你可以在標(biāo)簽欄圖標(biāo)上顯示微標(biāo)，以表明存在與該視圖或模式相關(guān)的新信息。

考慮對標(biāo)簽欄圖標(biāo)加微標(biāo)以保持通俗易懂。

3.使導(dǎo)航不言而喻

良好的導(dǎo)航感覺就像是一只看不見的手，可以引導(dǎo)用戶前進(jìn)。畢竟，如果人們找不到它，即使是最酷的功能或最引人注目的內(nèi)容也沒有用。

行為

每個(gè)底部導(dǎo)航圖標(biāo)必須指向目標(biāo)目的地，并且不應(yīng)打開菜單或其他彈出窗口。點(diǎn)擊底部的導(dǎo)航圖標(biāo)可以引導(dǎo)用戶直接進(jìn)入相關(guān)的視圖，或者刷新當(dāng)前活動的視圖。不要使用標(biāo)簽欄為用戶提供對當(dāng)前屏幕或應(yīng)用程序模式下的元素起作用的控件。如果需要提供控件，請改用工具欄。

每個(gè)底部導(dǎo)航圖標(biāo)必須通向目標(biāo)目的地。

上面的控件是工具欄而不是底部導(dǎo)航。

保持一致性

盡可能在各個(gè)頁面上顯示相同的選項(xiàng)卡。最好是你能給用戶一種視覺穩(wěn)定性的感覺。

當(dāng)選項(xiàng)卡的功能不可用時(shí)，不要?jiǎng)h除它。如果在某些情況下刪除了某個(gè)選項(xiàng)卡，但在其他情況下沒有，替換使應(yīng)用程序的UI無法預(yù)測。最好的解決方案是確保所有選項(xiàng)卡都已啟用，但要說明為什么選項(xiàng)卡的內(nèi)容不可用。例如，如果用戶沒有本地文件，則Dropbox應(yīng)用中的“本地”選項(xiàng)卡將顯示一個(gè)頁面，說明如何獲取文件。

Dropbox應(yīng)用的空狀態(tài)頁面

滾動時(shí)隱藏標(biāo)簽欄

如果屏幕是滾動的，則當(dāng)人們滾動查找新內(nèi)容時(shí)，標(biāo)簽欄可以隱藏，而當(dāng)他們開始回到頂部時(shí)，標(biāo)簽欄可以顯示。

標(biāo)簽導(dǎo)航可以在滾動時(shí)動態(tài)消失。

視覺愉悅

避免使用橫向運(yùn)動在視圖之間轉(zhuǎn)換?；顒右晥D和非活動視圖之間的過渡應(yīng)使用淡入淡出動畫。

圖形圖標(biāo)：創(chuàng)意導(dǎo)航

屏幕尺寸是將你的觀點(diǎn)傳達(dá)給用戶的主要挑戰(zhàn)。使用圖形圖標(biāo)作為菜單元素是解決移動端屏幕空間有限問題的最有效的方法之一。圖標(biāo)的圖形說明了點(diǎn)擊它后將會進(jìn)入什么頁面，這種導(dǎo)航模式更加節(jié)省屏幕空間。

Google Material Design，浮動操作按鈕

Google Material Design 對這種類型的導(dǎo)航使用術(shù)語“浮動擦操作按鈕”。它們的區(qū)別在于浮動在UI上方的帶有圓圈的圖標(biāo)，并具有運(yùn)動行為。

像Evernote這樣的應(yīng)用程序通過對最重要的用戶操作使用浮動操作按鈕簡化了操作流程。

Tumblr具有漂亮的圖形圖標(biāo)以及適當(dāng)?shù)臉?biāo)簽。當(dāng)你在應(yīng)用程序中滑動屏幕時(shí)，這些圖標(biāo)也很方便地消失。

然而，這種模式有一個(gè)明顯的缺點(diǎn)-浮動操作按鈕隱藏內(nèi)容。從用戶體驗(yàn)的角度來看，不便于用戶頻繁點(diǎn)擊操作

而且，許多研究人員表明，圖標(biāo)難以記憶，而且效率極低。只有普遍理解的圖標(biāo)才能被很好的記憶（例如，打印，關(guān)閉，播放/暫停，回復(fù)等）。這就是為什么使圖標(biāo)清晰直觀*，并在圖標(biāo)旁邊引入文本標(biāo)簽的*重要原因。

結(jié)論

導(dǎo)航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應(yīng)用程序時(shí)，要始終考慮用戶角色以及他們的目標(biāo)。然后，定制導(dǎo)航以幫助他們實(shí)現(xiàn)這些目標(biāo)。為用戶設(shè)計(jì)。一個(gè)產(chǎn)品對他們來說越容易使用，他們使用它的可能性就越大。

wen'z