2019-11-20 ui設(shè)計(jì)分享達(dá)人
導(dǎo)航模式是提高可用性的捷徑。當(dāng)你查看近年來(lái)最成功的交互導(dǎo)航設(shè)計(jì)時(shí)，顯而易見(jiàn)的贏家是那些完美執(zhí)行基本原則的人。雖然跳出條條框框思考是一個(gè)非常好思維方式，但有些規(guī)則是你不能打破的。以下是創(chuàng)建出色的移動(dòng)導(dǎo)航的四個(gè)重要原則：
簡(jiǎn)單
首先，最重要的是，導(dǎo)航系統(tǒng)必須簡(jiǎn)單。良好的導(dǎo)航應(yīng)該感覺(jué)像一只無(wú)形的手，引導(dǎo)用戶。一種方法是根據(jù)移動(dòng)用戶最有可能執(zhí)行的任務(wù)來(lái)確定移動(dòng)應(yīng)用程序的內(nèi)容和導(dǎo)航的優(yōu)先級(jí)。
可見(jiàn)
正如雅各布·尼爾森（ Jakob Nielsen）所說(shuō)，識(shí)別物體比記憶更容易。這意味著你應(yīng)該通過(guò)使操作和選項(xiàng)可見(jiàn)來(lái)最小化用戶的記憶負(fù)擔(dān)。導(dǎo)航應(yīng)該始終可用，而不僅僅是在我們預(yù)期用戶需要導(dǎo)航的時(shí)候。
明確
導(dǎo)航功能必須是不言而喻的。你需要以簡(jiǎn)潔明了的方式傳遞信息。在沒(méi)有任何外部指導(dǎo)的情況下用戶應(yīng)該一目了然的知道如何從A點(diǎn)轉(zhuǎn)到B點(diǎn)。試想一下購(gòu)物車(chē)圖標(biāo)，它作為一個(gè)標(biāo)簽或查看項(xiàng)目的標(biāo)識(shí)符。用戶無(wú)需考慮如何導(dǎo)航才能進(jìn)行購(gòu)買(mǎi)；此元素將指導(dǎo)他們執(zhí)行適當(dāng)?shù)牟僮鳌?
一致性
所有視圖的導(dǎo)航系統(tǒng)應(yīng)相同。不要將導(dǎo)航控件放在不同頁(yè)面上的新位置。不要欺騙你的用戶，要始終保持言行一致。你的導(dǎo)航應(yīng)該使用“最不意外的原則”。導(dǎo)航應(yīng)該激勵(lì)用戶參與并與你所提供的內(nèi)容互動(dòng)。
大拇指設(shè)計(jì)法則
史蒂文·霍伯在對(duì)移動(dòng)設(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è)手指，更不用說(shuō)雙手與你的用戶界面交互了。將最高層級(jí)且常用的操作放在屏幕底部非常重要。這樣，通過(guò)單手和拇指的交互即可輕松達(dá)到目標(biāo)。
另一個(gè)重點(diǎn)是底部導(dǎo)航應(yīng)該用于具有相同重要性的最高層級(jí)目標(biāo)。是需要從應(yīng)用程序中的任何位置都可以直接訪問(wèn)的。
最后，也是很重要的一點(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)簽欄來(lái)顯示應(yīng)用程序最重要的功能。facebook只需輕觸一下就可以提供核心功能的主要部分，允許在功能之間快速切換。
底部導(dǎo)航設(shè)計(jì)的三個(gè)關(guān)鍵因素
導(dǎo)航通常是將用戶帶到他們想要去的地方的工具。對(duì)于具有相似重要性的指定目的地，這些目的地需要從應(yīng)用程序中的任何位置直接訪問(wèn)。好的底部導(dǎo)航設(shè)計(jì)應(yīng)該遵循以下三個(gè)原則。
1.僅顯示最重要的目的地
避免在底部導(dǎo)航中使用五個(gè)以上的訪問(wèn)標(biāo)簽，因?yàn)門(mén)AP目標(biāo)之間的距離太近。在標(biāo)簽欄中放太多標(biāo)簽會(huì)使人們很難點(diǎn)擊他們想要的標(biāo)簽。而且，隨著每個(gè)額外的選項(xiàng)卡顯示，就會(huì)增加了應(yīng)用程序的復(fù)雜性。
避免使用五個(gè)以上的目的地。
避免滾動(dòng)內(nèi)容
對(duì)于小屏幕來(lái)說(shuō)，部分隱藏的導(dǎo)航似乎是一個(gè)非常好的解決方案，因?yàn)槟悴槐負(fù)?dān)心有限的屏幕空間，只需將導(dǎo)航選項(xiàng)放入一個(gè)可滾動(dòng)的選項(xiàng)卡即可。但是，可滾動(dòng)的內(nèi)容效率較低，因?yàn)橛脩舯仨毾葷L動(dòng)才能看到所需的選項(xiàng)，因此最好盡可能避免。
該避免在選項(xiàng)卡欄中放置太多項(xiàng)目，以防止用戶滾動(dòng)，然后才能單擊所需的選項(xiàng)。
2.明確當(dāng)前位置
應(yīng)用程序菜單上最常見(jiàn)的一個(gè)錯(cuò)誤是沒(méi)有明確用戶的當(dāng)前位置?！拔以谀睦?？“是用戶遇到的基本問(wèn)題之一。用戶應(yīng)該第一眼就知道如何從A點(diǎn)轉(zhuǎn)到B點(diǎn)，而不需要任何外部引導(dǎo)。你應(yīng)該適當(dāng)?shù)氖褂靡曈X(jué)提示（圖標(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è)簡(jiǎn)單的規(guī)則，用應(yīng)用程序的主顏色為當(dāng)前的底部導(dǎo)航（包括圖標(biāo)和任何顯示的文本標(biāo)簽）著色。
左：不同顏色的圖標(biāo)使你的應(yīng)用看起來(lái)像一棵圣誕樹(shù)。右：只使用一種原色。
這是iOS的Twitter應(yīng)用程序中的底部欄菜單。消息視圖處于選中狀態(tài)。
如果底部導(dǎo)航欄是彩色的，請(qǐng)確保對(duì)當(dāng)前位置的圖標(biāo)和文本標(biāo)簽使用黑色或白色。
左：避免將彩色圖標(biāo)與彩色底部導(dǎo)航欄配對(duì)。右：使用黑色或白色圖標(biāo)。
文本標(biāo)簽
文本標(biāo)簽應(yīng)為導(dǎo)航圖標(biāo)提供簡(jiǎn)短且有意義的定義。避免使用長(zhǎng)文本標(biāo)簽，因?yàn)樗鼈儾粫?huì)截?cái)嗷蜃詣?dòng)換行。
避免換行，截?cái)嗪涂s小文本標(biāo)簽。
菜單元素應(yīng)易于理解。用戶應(yīng)該能夠理解點(diǎn)擊元素時(shí)會(huì)發(fā)生什么。
目標(biāo)尺寸
使目標(biāo)區(qū)域足夠大，以使其易于點(diǎn)擊或單擊。要計(jì)算每個(gè)底部導(dǎo)航動(dòng)作的寬度，請(qǐng)將視圖的寬度除以動(dòng)作數(shù)量?；蛘?，將所有底部導(dǎo)航動(dòng)作設(shè)置為最大動(dòng)作的寬度。Android建議移動(dòng)設(shè)備底部導(dǎo)航欄的尺寸如下。
顯示了移動(dòng)設(shè)備上的固定底部導(dǎo)航欄，單位為密度獨(dú)立像素（dp）
標(biāo)簽上的微標(biāo)
你可以在標(biāo)簽欄圖標(biāo)上顯示微標(biāo)，以表明存在與該視圖或模式相關(guān)的新信息。
考慮對(duì)標(biāo)簽欄圖標(biāo)加微標(biāo)以保持通俗易懂。
3.使導(dǎo)航不言而喻
良好的導(dǎo)航感覺(jué)就像是一只看不見(jiàn)的手，可以引導(dǎo)用戶前進(jìn)。畢竟，如果人們找不到它，即使是最酷的功能或最引人注目的內(nèi)容也沒(méi)有用。
行為
每個(gè)底部導(dǎo)航圖標(biāo)必須指向目標(biāo)目的地，并且不應(yīng)打開(kāi)菜單或其他彈出窗口。點(diǎn)擊底部的導(dǎo)航圖標(biāo)可以引導(dǎo)用戶直接進(jìn)入相關(guān)的視圖，或者刷新當(dāng)前活動(dòng)的視圖。不要使用標(biāo)簽欄為用戶提供對(duì)當(dāng)前屏幕或應(yīng)用程序模式下的元素起作用的控件。如果需要提供控件，請(qǐng)改用工具欄。
每個(gè)底部導(dǎo)航圖標(biāo)必須通向目標(biāo)目的地。
上面的控件是工具欄而不是底部導(dǎo)航。
保持一致性
盡可能在各個(gè)頁(yè)面上顯示相同的選項(xiàng)卡。最好是你能給用戶一種視覺(jué)穩(wěn)定性的感覺(jué)。
當(dāng)選項(xiàng)卡的功能不可用時(shí)，不要?jiǎng)h除它。如果在某些情況下刪除了某個(gè)選項(xiàng)卡，但在其他情況下沒(méi)有，替換使應(yīng)用程序的UI無(wú)法預(yù)測(cè)。最好的解決方案是確保所有選項(xiàng)卡都已啟用，但要說(shuō)明為什么選項(xiàng)卡的內(nèi)容不可用。例如，如果用戶沒(méi)有本地文件，則Dropbox應(yīng)用中的“本地”選項(xiàng)卡將顯示一個(gè)頁(yè)面，說(shuō)明如何獲取文件。
Dropbox應(yīng)用的空狀態(tài)頁(yè)面
滾動(dòng)時(shí)隱藏標(biāo)簽欄
如果屏幕是滾動(dòng)的，則當(dāng)人們滾動(dòng)查找新內(nèi)容時(shí)，標(biāo)簽欄可以隱藏，而當(dāng)他們開(kāi)始回到頂部時(shí)，標(biāo)簽欄可以顯示。
標(biāo)簽導(dǎo)航可以在滾動(dòng)時(shí)動(dòng)態(tài)消失。
視覺(jué)愉悅
避免使用橫向運(yùn)動(dòng)在視圖之間轉(zhuǎn)換?；顒?dòng)視圖和非活動(dòng)視圖之間的過(guò)渡應(yīng)使用淡入淡出動(dòng)畫(huà)。
圖形圖標(biāo)：創(chuàng)意導(dǎo)航
屏幕尺寸是將你的觀點(diǎn)傳達(dá)給用戶的主要挑戰(zhàn)。使用圖形圖標(biāo)作為菜單元素是解決移動(dòng)端屏幕空間有限問(wèn)題的最有效的方法之一。圖標(biāo)的圖形說(shuō)明了點(diǎn)擊它后將會(huì)進(jìn)入什么頁(yè)面，這種導(dǎo)航模式更加節(jié)省屏幕空間。
Google Material Design，浮動(dòng)操作按鈕
Google Material Design 對(duì)這種類(lèi)型的導(dǎo)航使用術(shù)語(yǔ)“浮動(dòng)擦操作按鈕”。它們的區(qū)別在于浮動(dòng)在UI上方的帶有圓圈的圖標(biāo)，并具有運(yùn)動(dòng)行為。
像Evernote這樣的應(yīng)用程序通過(guò)對(duì)最重要的用戶操作使用浮動(dòng)操作按鈕簡(jiǎn)化了操作流程。
Tumblr具有漂亮的圖形圖標(biāo)以及適當(dāng)?shù)臉?biāo)簽。當(dāng)你在應(yīng)用程序中滑動(dòng)屏幕時(shí)，這些圖標(biāo)也很方便地消失。
然而，這種模式有一個(gè)明顯的缺點(diǎn)-浮動(dòng)操作按鈕隱藏內(nèi)容。從用戶體驗(yàn)的角度來(lái)看，不便于用戶頻繁點(diǎn)擊操作
而且，許多研究人員表明，圖標(biāo)難以記憶，而且效率極低。只有普遍理解的圖標(biāo)才能被很好的記憶（例如，打印，關(guān)閉，播放/暫停，回復(fù)等）。這就是為什么使圖標(biāo)清晰直觀*，并在圖標(biāo)旁邊引入文本標(biāo)簽的*重要原因。
導(dǎo)航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應(yīng)用程序時(shí)，要始終考慮用戶角色以及他們的目標(biāo)。然后，定制導(dǎo)航以幫助他們實(shí)現(xiàn)這些目標(biāo)。為用戶設(shè)計(jì)。一個(gè)產(chǎn)品對(duì)他們來(lái)說(shuō)越容易使用，他們使用它的可能性就越大。
轉(zhuǎn)自：UI中國(guó)-Coldrain1
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com
