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

簡單

首先，最重要的是，導(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)該通過使操作和選項可見來最小化用戶的記憶負(fù)擔(dān)。導(dǎo)航應(yīng)該始終可用，而不僅僅是在我們預(yù)期用戶需要導(dǎo)航的時候。

明確

導(dǎo)航功能必須是不言而喻的。你需要以簡潔明了的方式傳遞信息。在沒有任何外部指導(dǎo)的情況下用戶應(yīng)該一目了然的知道如何從A點轉(zhuǎn)到B點。試想一下購物車圖標(biāo)，它作為一個標(biāo)簽或查看項目的標(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)該激勵用戶參與并與你所提供的內(nèi)容互動。

大拇指設(shè)計法則

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

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

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

最后，也是很重要的一點，要注意點擊目標(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è)計的三個關(guān)鍵因素

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

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

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

避免使用五個以上的目的地。

避免滾動內(nèi)容

對于小屏幕來說，部分隱藏的導(dǎo)航似乎是一個非常好的解決方案，因為你不必?fù)?dān)心有限的屏幕空間，只需將導(dǎo)航選項放入一個可滾動的選項卡即可。但是，可滾動的內(nèi)容效率較低，因為用戶必須先滾動才能看到所需的選項，因此最好盡可能避免。

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

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

應(yīng)用程序菜單上最常見的一個錯誤是沒有明確用戶的當(dāng)前位置。“我在哪里？“是用戶遇到的基本問題之一。用戶應(yīng)該第一眼就知道如何從A點轉(zhuǎn)到B點，而不需要任何外部引導(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)前位置。

顏色

避免在底部選項卡欄中使用不同顏色的圖標(biāo)和文本標(biāo)簽。相反，遵循這個簡單的規(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)簽，因為它們不會截斷或自動換行。

避免換行，截斷和縮小文本標(biāo)簽。

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

目標(biāo)尺寸

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

顯示了移動設(shè)備上的固定底部導(dǎo)航欄，單位為密度獨立像素（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)容也沒有用。

行為

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

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

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

保持一致性

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

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

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

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

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

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

視覺愉悅

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

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

屏幕尺寸是將你的觀點傳達(dá)給用戶的主要挑戰(zhàn)。使用圖形圖標(biāo)作為菜單元素是解決移動端屏幕空間有限問題的最有效的方法之一。圖標(biāo)的圖形說明了點擊它后將會進(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)用程序中滑動屏幕時，這些圖標(biāo)也很方便地消失。

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

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

結(jié)論

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

轉(zhuǎn)自：UI中國-Coldrain1