一個優(yōu)秀的用戶體驗設(shè)計需要重點考慮的9個核心原則(轉(zhuǎn))

轉(zhuǎn)自:http://www.chinaz.com/web/2016/0811/564991.shtml
在設(shè)計一個移動端的應(yīng)用程序時,我們應(yīng)該牢記在心的最重要的一件事情就是務(wù)必要確保你的程序是有用且直觀的拨齐。如果這個程序沒有用處鳞陨,那么對用戶來講就沒有任何的實際價值,自然地也就沒有人有任何理由去使用它奏黑。而如果這個程序有用但需要用戶付出大量的學(xué)習(xí)成本炊邦,用戶自然也是不會愿意去投入學(xué)習(xí)的。

優(yōu)秀的界面設(shè)計都能夠克服以上兩個問題:

為了達(dá)到可用性目的熟史,應(yīng)用程序應(yīng)該是以用戶為中心的馁害。用戶之所以安裝你的程序是因為他們需要解決某個緊迫的問題,也就是說蹂匹,你的程序一定是要有實際用途的碘菜。你要仔細(xì)考慮用戶會是如何按著它們的方式嘗試去完成自己的目標(biāo)需求的。

賦予界面足夠的清晰度。為了有效使用他們面對的用戶界面忍啸,人們首先必須意識到這個界面是干嗎用的又該怎么使用它芽死。因此册赛,在考慮界面是否還要清晰時絕不要猶豫。

以下是我認(rèn)為在創(chuàng)建一個優(yōu)秀的用戶體驗設(shè)計時需要重點考慮的9個核心原則:

1. 減少混亂

對于用戶體驗來說,用戶的注意力無疑是一種非常寶貴的資源练链,而你的設(shè)計應(yīng)該合理地分配這一資源。如果你的用戶界面承載了諸如按鈕拔创、圖片况增、文本等諸多雜亂的信息,勢必導(dǎo)致信息過載給用戶帶來壓力翁脆。

yonghutiyan1

有一句出自 Antoine de Saint-Exupéry 得著名的短語眷蚓,即”達(dá)到完美,并不是好得不能再好反番,而是好得一點都不多余沙热。” 類似的罢缸,在移動設(shè)計中篙贸,擺脫掉一切并非絕對必要的信息是非常重要的,因為其減少了混亂祖能,而提升了用戶的理解歉秫。

有一條簡單的經(jīng)驗法則:每一個屏幕應(yīng)該僅保存一個重要的動作。對于你的程序而言养铸,其每一屏都應(yīng)該向那些使用它的用戶提供一個有實際價值的獨立動作雁芙。這使的它易于學(xué)習(xí),易于使用钞螟,易于在必要的時候加入或創(chuàng)建兔甘。相比于一個凌亂的屏幕,100個清晰的屏幕才是更可取的鳞滨。

拿 Uber 來說洞焙,Uber清楚地知道用戶使用他們應(yīng)用程序的目的是叫到一輛車,所以程序中并沒有覆蓋太多信息: 它能夠基于地理數(shù)據(jù)自動定位用戶的所在位置拯啦,唯一需要用戶去做的事情就只是選擇上車位置澡匪。

yonghutiyan2

2、 使導(dǎo)航不言自明

對任何應(yīng)用程序來說褒链,幫助用戶導(dǎo)航前往正確的地方都是相當(dāng)重要的一件事情唁情。優(yōu)秀的導(dǎo)航設(shè)計就好比指導(dǎo)用戶旅程的一只無形的手。畢竟甫匹,如果用戶都發(fā)現(xiàn)不了甸鸟,那么再酷的功能特性或最最吸引人的內(nèi)容也是沒用的惦费。優(yōu)秀的移動導(dǎo)航遵循以下基本原則:

(1)導(dǎo)航必須是連貫的。

首先抢韭,你應(yīng)該使用恰當(dāng)?shù)臉?biāo)識物(正確的視覺隱喻)薪贫,這樣導(dǎo)航元素就不需要額外的解釋說明用戶就能理解,其次刻恭,要確保每個導(dǎo)航元素(如圖表)指向了正確的目的地瞧省。

yonghutiyan3

(2)導(dǎo)航必須保持一致性。

在不同頁面中鳍贾,千萬不要把導(dǎo)航控件移動到不同的位置或者隱藏起來臀突。這樣會很容易使用戶迷失掉的。

(3)導(dǎo)航應(yīng)該傳達(dá)出用戶當(dāng)前的位置贾漏。

無法表明當(dāng)前位置可能是我們在應(yīng)用程序菜單中最常看到的一個問題藕筋∽萆ⅲ“我在哪里?” 是用戶要成功的導(dǎo)航前必須回答的基本問題之一隐圾。

3伍掀、 創(chuàng)建一個跨平臺的無縫體驗

你不應(yīng)該將移動設(shè)計視作是孤立的。對用戶來講暇藏,創(chuàng)建一個在移動端蜜笤、桌面端和平板端無縫結(jié)合的體驗是非常重要的。

yonghutiyan4

以 Apple Music 為例盐碱,你在 Mac 端設(shè)置一個播放列表后會很快在 iPhone 上也看到該列表把兔。 Apple 意識到在跨平臺間保持這種數(shù)據(jù)的同步,創(chuàng)建出良好的無縫結(jié)合的體驗是非常重要的瓮顽。

4县好、設(shè)計對手指操作友好的控件

相比于大的觸控控件,小的自然更難于操作暖混。當(dāng)你在設(shè)計移動端的用戶界面時缕贡,最好是讓你的控件的可觸摸面積足夠大,這樣用戶才容易觸及到拣播。

控件的大最好要控制在7 – 10毫米晾咪,這樣用戶方能夠準(zhǔn)確地使用手指觸及到。贮配;另一方面谍倦,用戶在跟控件產(chǎn)生交互時,控件的邊緣應(yīng)該是可見的牧嫉,能夠以清晰的視覺反饋向用戶傳達(dá)他們確實觸及到控件本身了剂跟。

yonghutiyan5

另外减途,要確保不同的控件間有合適的留白區(qū)域。

5曹洽、文本內(nèi)容應(yīng)足夠清晰

相比于臺式電腦鳍置,智能手機(jī)的屏幕要相對小的多,這就意味著如何把大量的信息裝到這個小屏中不得不說是移動設(shè)計的一大挑戰(zhàn)送淆。您可能有一個挺吸引人的想法税产,即把所有信息都進(jìn)行尺寸上的壓縮也照樣能顯示很多的內(nèi)容。但無論如何偷崩,你應(yīng)該杜絕這種想法辟拷。

針對移動端的一條經(jīng)驗法則:文本大小應(yīng)該至少在11pt左右,好讓用戶在不用放大的情況也能夠清晰的瀏覽阐斜。

yonghutiyan6

通過增加行高或字符間距都能夠提高易讀性衫冻,合適的大量的留白可以使一些最亂的界面也能夠看上去簡潔不少。

yonghutiyan7

6谒出、 保持界面元素清晰可見

應(yīng)該使用顏色和對比度來幫助用戶查看和解讀你的內(nèi)容隅俘。選擇出能夠支撐你的程序可用性的主色調(diào)、次要色和強(qiáng)調(diào)色笤喳,確保不同的界面元素間有足夠的色彩對比度以使那些視力不佳的用戶也能瀏覽使用你的程序为居。

對于使用有背景的文本來說,要保證文本的顏色和其背景色間有足夠的對比度杀狡,好讓文本部分清晰易讀蒙畴。W3C 中針對正文文本和圖像文本的對比度給出以下的推薦比值:

  • 小號文本跟其背景色的對比度應(yīng)至少為4.5:1。
  • 大號文本(14 pt bold/18 pt regular及以上)跟其背景色的對比度至少為3:1呜象。
yonghutiyan8

使用足夠的對比度在手機(jī)上顯得尤其重要:因為用戶可能在戶外使用是膳凝,陽光的照耀會降低其對比效果。

yonghutiyan9

圖標(biāo)和其他關(guān)鍵的元素同樣應(yīng)該遵循上述的對比度推薦值董朝。

yonghutiyan10

7鸠项、基于手指的觸控點設(shè)計控件的布局和位置

Steven Hoover 在他的“用戶究竟如何使用移動設(shè)備”的研究中發(fā)現(xiàn),49%的人習(xí)慣于使用單個拇指來完成所有操作子姜。在下圖中祟绊,屏幕中不同顏色的區(qū)域表明用戶拇指能夠觸及的 難度等級,其中哥捕,綠色區(qū)域表示很容易觸及的范圍牧抽,黃色則表示拇指要伸展開來才能夠到,而要觸達(dá)紅色區(qū)域則要求用戶改變設(shè)備的手持方式遥赚。

yonghutiyan11

將頂級菜單扬舒,高頻使用的控件和公有的動作放在綠色區(qū)域是非常重要的,因為單拇指能夠很舒適的跟它們產(chǎn)生交互凫佛。

yonghutiyan12

另一方面讲坎,把那些具有否定意義的動作(比如刪除或清除)放在手指不容易觸及到的紅色區(qū)域孕惜,因為我們不希望用戶意外的跟它們產(chǎn)生作用。

8晨炕、減少對打字輸入的需要

在手機(jī)上打字輸入是一個緩慢而易于出錯的過程衫画,因此最好要盡量減少移動應(yīng)用程序中所需的輸入。

盡量移除那些不必要的輸入域瓮栗,保持表單簡短削罩。

yonghutiyan13

在合適的地方,使用自動補(bǔ)全的功能或填入用戶個性化數(shù)據(jù)费奸,這樣用戶就只需要輸入最少的信息弥激。

yonghutiyan14

9、測試你的設(shè)計效果

若把你的設(shè)計方在一個大屏的電腦屏幕上看愿阐,其效果往往非常不錯微服,然而,一旦放在一個實際的手機(jī)屏幕上測試缨历,其效果甚至不及前者的一半职辨。 即使是那些設(shè)計最為用心的用戶界面,放在真實世界中也難免會包含一些不可見的缺陷戈二,這就是為何我們要讓真實用戶在多樣的移動設(shè)備上測試我們程序的原因。要 把你的應(yīng)用程序當(dāng)做一個不斷進(jìn)化的實體喳资,使用分析得來的數(shù)據(jù)結(jié)果及用戶的反饋信息不斷的提升你的用戶體驗設(shè)計觉吭。

結(jié)論

就如同任何其他設(shè)計元素一樣,本文提到的諸多準(zhǔn)則可能只是我們在開始可以參考的一部分仆邓。你要嘗試將這些準(zhǔn)則跟自己的想法融合過濾鲜滩,找出那些最好的最適合自己的設(shè)計思路。一定要記住节值,設(shè)計不僅僅是面向設(shè)計人員——設(shè)計是面向用戶徙硅,是為用戶而設(shè)計的。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末搞疗,一起剝皮案震驚了整個濱河市嗓蘑,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌匿乃,老刑警劉巖桩皿,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異幢炸,居然都是意外死亡泄隔,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進(jìn)店門宛徊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來佛嬉,“玉大人逻澳,你說我怎么就攤上這事∨唬” “怎么了斜做?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長缰揪。 經(jīng)常有香客問我陨享,道長,這世上最難降的妖魔是什么钝腺? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任抛姑,我火速辦了婚禮,結(jié)果婚禮上艳狐,老公的妹妹穿的比我還像新娘定硝。我一直安慰自己,他們只是感情好毫目,可當(dāng)我...
    茶點故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布蔬啡。 她就那樣靜靜地躺著,像睡著了一般镀虐。 火紅的嫁衣襯著肌膚如雪箱蟆。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天刮便,我揣著相機(jī)與錄音空猜,去河邊找鬼。 笑死恨旱,一個胖子當(dāng)著我的面吹牛辈毯,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播搜贤,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼谆沃,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了仪芒?” 一聲冷哼從身側(cè)響起唁影,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎掂名,沒想到半個月后夭咬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡铆隘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年卓舵,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片膀钠。...
    茶點故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡掏湾,死狀恐怖裹虫,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情融击,我是刑警寧澤筑公,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站尊浪,受9級特大地震影響匣屡,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜拇涤,卻給世界環(huán)境...
    茶點故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一捣作、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧鹅士,春花似錦券躁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至趾痘,卻和暖如春慢哈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背永票。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工岸军, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人瓦侮。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像佣谐,于是被迫代替她去往敵國和親肚吏。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,689評論 2 354

推薦閱讀更多精彩內(nèi)容