福利片第一页,美国XAXWAS9977777,青草99久久九九久久久久

底部導(dǎo)航設(shè)計的黃金法則

2019-11-20 ui設(shè)計分享達人

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

明確

導(dǎo)航功能必須是不言而喻的。你需要以簡潔明了的方式傳遞信息。在沒有任何外部指導(dǎo)的情況下用戶應(yīng)該一目了然的知道如何從A點轉(zhuǎn)到B點。試想一下購物車圖標，它作為一個標簽或查看項目的標識符。用戶無需考慮如何導(dǎo)航才能進行購買；此元素將指導(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%的人依靠一個拇指在手機上完成任務(wù)。在下面的圖中，手機屏幕上的圖表是近似可達圖，其中顏色表示用戶可以觸及的屏幕區(qū)域，并與拇指交互。綠色表示用戶可以輕松到達的區(qū)域；黃色表示需要伸展的區(qū)域；紅色表示需要用戶改變握住設(shè)備的方式的區(qū)域。

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

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

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

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

標簽欄

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

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

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

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

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

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

避免滾動內(nèi)容

對于小屏幕來說，部分隱藏的導(dǎo)航似乎是一個非常好的解決方案，因為你不必擔(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提示（圖標、標簽和顏色），這樣導(dǎo)航就不需要任何解釋。

圖標

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

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

顏色

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

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

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

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

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

文本標簽

文本標簽應(yīng)為導(dǎo)航圖標提供簡短且有意義的定義。避免使用長文本標簽，因為它們不會截斷或自動換行。

避免換行，截斷和縮小文本標簽。

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

目標尺寸

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

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

標簽上的微標

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

考慮對標簽欄圖標加微標以保持通俗易懂。

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

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

行為

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

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

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

保持一致性

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

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