2019-11-20 ui設計分享達人
導航模式是提高可用性的捷徑。當你查看近年來最成功的交互導航設計時，顯而易見的贏家是那些完美執行基本原則的人。雖然跳出條條框框思考是一個非常好思維方式，但有些規則是你不能打破的。以下是創建出色的移動導航的四個重要原則：
簡單
首先，最重要的是，導航系統必須簡單。良好的導航應該感覺像一只無形的手，引導用戶。一種方法是根據移動用戶最有可能執行的任務來確定移動應用程序的內容和導航的優先級。
可見
正如雅各布·尼爾森（ Jakob Nielsen）所說，識別物體比記憶更容易。這意味著你應該通過使操作和選項可見來最小化用戶的記憶負擔。導航應該始終可用，而不僅僅是在我們預期用戶需要導航的時候。
明確
導航功能必須是不言而喻的。你需要以簡潔明了的方式傳遞信息。在沒有任何外部指導的情況下用戶應該一目了然的知道如何從A點轉到B點。試想一下購物車圖標，它作為一個標簽或查看項目的標識符。用戶無需考慮如何導航才能進行購買；此元素將指導他們執行適當的操作。
一致性
所有視圖的導航系統應相同。不要將導航控件放在不同頁面上的新位置。不要欺騙你的用戶，要始終保持言行一致。你的導航應該使用“最不意外的原則”。導航應該激勵用戶參與并與你所提供的內容互動。
大拇指設計法則
史蒂文·霍伯在對移動設備使用情況的研究中發現，49%的人依靠一個拇指在手機上完成任務。在下面的圖中，手機屏幕上的圖表是近似可達圖，其中顏色表示用戶可以觸及的屏幕區域，并與拇指交互。綠色表示用戶可以輕松到達的區域；黃色表示需要伸展的區域；紅色表示需要用戶改變握住設備的方式的區域。
在設計時，要考慮到你的應用程序將在多種環境中使用；即使是喜歡使用雙手握手機的人也不一定總是使用多個手指，更不用說雙手與你的用戶界面交互了。將最高層級且常用的操作放在屏幕底部非常重要。這樣，通過單手和拇指的交互即可輕松達到目標。
另一個重點是底部導航應該用于具有相同重要性的最高層級目標。是需要從應用程序中的任何位置都可以直接訪問的。
最后，也是很重要的一點，要注意點擊目標區域的大小。Microsoft 建議 你將觸摸目標區域大小設置為9平方毫米或更大（135 ppi顯示器上的48×48像素，縮放比例為1.0倍）。避免使用小于7平方毫米的觸摸目標區域。
觸摸目標區域不應小于44像素到48像素（或11毫米到13毫米），包括填充。
標簽欄
許多應用程序使用標簽欄來顯示應用程序最重要的功能。facebook只需輕觸一下就可以提供核心功能的主要部分，允許在功能之間快速切換。
底部導航設計的三個關鍵因素
導航通常是將用戶帶到他們想要去的地方的工具。對于具有相似重要性的指定目的地，這些目的地需要從應用程序中的任何位置直接訪問。好的底部導航設計應該遵循以下三個原則。
1.僅顯示最重要的目的地
避免在底部導航中使用五個以上的訪問標簽，因為TAP目標之間的距離太近。在標簽欄中放太多標簽會使人們很難點擊他們想要的標簽。而且，隨著每個額外的選項卡顯示，就會增加了應用程序的復雜性。
避免使用五個以上的目的地。
避免滾動內容
對于小屏幕來說，部分隱藏的導航似乎是一個非常好的解決方案，因為你不必擔心有限的屏幕空間，只需將導航選項放入一個可滾動的選項卡即可。但是，可滾動的內容效率較低，因為用戶必須先滾動才能看到所需的選項，因此最好盡可能避免。
該避免在選項卡欄中放置太多項目，以防止用戶滾動，然后才能單擊所需的選項。
2.明確當前位置
應用程序菜單上最常見的一個錯誤是沒有明確用戶的當前位置。“我在哪里？“是用戶遇到的基本問題之一。用戶應該第一眼就知道如何從A點轉到B點，而不需要任何外部引導。你應該適當的使用視覺提示（圖標、標簽和顏色），這樣導航就不需要任何解釋。
圖標
底部導航應該與圖標的內容進行適當的結合。盡管有一些用戶熟悉的通用圖標，但大多數圖標代表的功能包括搜索，電子郵件，打印等。
在適用于Android的先前版本的Bloom.fm應用程序中，很難理解用戶的當前位置。
顏色
避免在底部選項卡欄中使用不同顏色的圖標和文本標簽。相反，遵循這個簡單的規則，用應用程序的主顏色為當前的底部導航（包括圖標和任何顯示的文本標簽）著色。
左：不同顏色的圖標使你的應用看起來像一棵圣誕樹。右：只使用一種原色。
這是iOS的Twitter應用程序中的底部欄菜單。消息視圖處于選中狀態。
如果底部導航欄是彩色的，請確保對當前位置的圖標和文本標簽使用黑色或白色。
左：避免將彩色圖標與彩色底部導航欄配對。右：使用黑色或白色圖標。
文本標簽
文本標簽應為導航圖標提供簡短且有意義的定義。避免使用長文本標簽，因為它們不會截斷或自動換行。
避免換行，截斷和縮小文本標簽。
菜單元素應易于理解。用戶應該能夠理解點擊元素時會發生什么。
目標尺寸
使目標區域足夠大，以使其易于點擊或單擊。要計算每個底部導航動作的寬度，請將視圖的寬度除以動作數量。或者，將所有底部導航動作設置為最大動作的寬度。Android建議移動設備底部導航欄的尺寸如下。
顯示了移動設備上的固定底部導航欄，單位為密度獨立像素（dp）
標簽上的微標
你可以在標簽欄圖標上顯示微標，以表明存在與該視圖或模式相關的新信息。
考慮對標簽欄圖標加微標以保持通俗易懂。
3.使導航不言而喻
良好的導航感覺就像是一只看不見的手，可以引導用戶前進。畢竟，如果人們找不到它，即使是最酷的功能或最引人注目的內容也沒有用。
行為
每個底部導航圖標必須指向目標目的地，并且不應打開菜單或其他彈出窗口。點擊底部的導航圖標可以引導用戶直接進入相關的視圖，或者刷新當前活動的視圖。不要使用標簽欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件。如果需要提供控件，請改用工具欄。
每個底部導航圖標必須通向目標目的地。
上面的控件是工具欄而不是底部導航。
保持一致性
盡可能在各個頁面上顯示相同的選項卡。最好是你能給用戶一種視覺穩定性的感覺。
當選項卡的功能不可用時，不要刪除它。如果在某些情況下刪除了某個選項卡，但在其他情況下沒有，替換使應用程序的UI無法預測。最好的解決方案是確保所有選項卡都已啟用，但要說明為什么選項卡的內容不可用。例如，如果用戶沒有本地文件，則Dropbox應用中的“本地”選項卡將顯示一個頁面，說明如何獲取文件。
Dropbox應用的空狀態頁面
滾動時隱藏標簽欄
如果屏幕是滾動的，則當人們滾動查找新內容時，標簽欄可以隱藏，而當他們開始回到頂部時，標簽欄可以顯示。
標簽導航可以在滾動時動態消失。
視覺愉悅
避免使用橫向運動在視圖之間轉換。活動視圖和非活動視圖之間的過渡應使用淡入淡出動畫。
圖形圖標：創意導航
屏幕尺寸是將你的觀點傳達給用戶的主要挑戰。使用圖形圖標作為菜單元素是解決移動端屏幕空間有限問題的最有效的方法之一。圖標的圖形說明了點擊它后將會進入什么頁面，這種導航模式更加節省屏幕空間。
Google Material Design，浮動操作按鈕
Google Material Design 對這種類型的導航使用術語“浮動擦操作按鈕”。它們的區別在于浮動在UI上方的帶有圓圈的圖標，并具有運動行為。
像Evernote這樣的應用程序通過對最重要的用戶操作使用浮動操作按鈕簡化了操作流程。
Tumblr具有漂亮的圖形圖標以及適當的標簽。當你在應用程序中滑動屏幕時，這些圖標也很方便地消失。
然而，這種模式有一個明顯的缺點-浮動操作按鈕隱藏內容。從用戶體驗的角度來看，不便于用戶頻繁點擊操作
而且，許多研究人員表明，圖標難以記憶，而且效率極低。只有普遍理解的圖標才能被很好的記憶（例如，打印，關閉，播放/暫停，回復等）。這就是為什么使圖標清晰直觀*，并在圖標旁邊引入文本標簽的*重要原因。
導航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應用程序時，要始終考慮用戶角色以及他們的目標。然后，定制導航以幫助他們實現這些目標。為用戶設計。一個產品對他們來說越容易使用，他們使用它的可能性就越大。
轉自：UI中國-Coldrain1
