六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

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

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)簽的*重要原因。


結(jié)論

導(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


分享本文至:

日歷

鏈接

個(gè)人資料

存檔