值得您信賴的網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、整合營銷提供商

網(wǎng)站首頁
關(guān)于我們
項(xiàng)目服務(wù)
案例展示
新聞動(dòng)態(tài)
聯(lián)系我們
顏色、字體、圖表,這些視覺元素是如何影響用戶體驗(yàn)的?

2017-07-21  4089  

返回列表

      也許是因?yàn)槲以谝曈X設(shè)計(jì)上沒有太多經(jīng)驗(yàn),我發(fā)現(xiàn)平常在與視覺設(shè)計(jì)師討論設(shè)計(jì)方案時(shí),我們常常討論的是:“我覺得這樣布局很奇怪”、“我覺得A不太好看”、“這個(gè)地方給我?guī)砹四撤NXXX的感覺”、“這樣顯示會(huì)不會(huì)給用戶帶來某種誤解”……
  不難發(fā)現(xiàn),大多數(shù)時(shí)候我們討論的是一種捉摸不透的“感覺”。視覺設(shè)計(jì)固然需要美感和源于直覺的創(chuàng)造力,但是作為一個(gè)“設(shè)計(jì)”領(lǐng)域,它需要有更多理性的思考。為什么應(yīng)該是這樣?這對用戶的情緒和行為帶來了怎樣的影響?我們需要一些研究結(jié)果和經(jīng)驗(yàn)法則作為參考,知其所以然才能做出好的設(shè)計(jì)。
  以下是原文:
  介紹
  為網(wǎng)站、APP或產(chǎn)品設(shè)計(jì)一個(gè)漂亮的用戶界面需要技能、天賦和靈感的特殊組合。
  但是用戶界面的設(shè)計(jì)不是漂亮就行。它應(yīng)該幫助用戶去做他們需要做的事情。
  為了創(chuàng)造出不但有吸引力,而且能夠服務(wù)于用戶體驗(yàn)的設(shè)計(jì),你需要清楚地認(rèn)識到你的設(shè)計(jì)決策是如何幫助或者阻礙你的用戶的。
  我們在UserTesting執(zhí)行和分析過數(shù)十萬個(gè)可用性研究,從中看過了很多有效的(以及不那么有效的)視覺設(shè)計(jì)決策。現(xiàn)在我們想分享一下我們從這些研究中學(xué)到的東西。
  本文是關(guān)于不同的視覺設(shè)計(jì)元素是如何影響網(wǎng)站、APP或產(chǎn)品中的用戶體驗(yàn)的。我們將會(huì)談到以下內(nèi)容:
  顏色
  排版
  圖標(biāo)
  和用戶一起測試你的設(shè)計(jì)
  你將會(huì)學(xué)到如何做出對用戶友好的設(shè)計(jì)決策,并且為你的公司帶來最好的結(jié)果。
  顏色
  在設(shè)計(jì)師的工具箱中,顏色是最有力的工具之一。
  你可以使用顏色去影響用戶的情感,吸引他們的注意力,把他們置入適于購物的情緒體驗(yàn)中。顏色同時(shí)也是客戶對一個(gè)品牌認(rèn)知的主要因素之一。
  由于可能的顏色組合是無限的,很難去決定哪種顏色會(huì)對你的網(wǎng)站或應(yīng)用產(chǎn)生最大影響。去測試所有的顏色是不可能的,但是我們總結(jié)了關(guān)于顏色如何影響用戶的態(tài)度和行為的一些技巧和趨勢。
  顏色理論與用戶體驗(yàn)
  基礎(chǔ)顏色理論的原理是雕琢用戶體驗(yàn)的一個(gè)重要起點(diǎn)。
  互補(bǔ)色可以用來吸引觀看者的注意力并且創(chuàng)造活力,而類似色可以用來在設(shè)計(jì)中創(chuàng)造協(xié)調(diào)感和一致感??紤]一下在主頁或者主屏幕上你可以如何使用互補(bǔ)或類似的配色方案,去為用戶奠定基調(diào)并且讓用戶進(jìn)入能夠促使他們采取你期望的行為的心態(tài)中去。
PxcgtTp8QKB2OUjT73yQ
  當(dāng)你在文本中使用顏色時(shí),記住把兩種低對比度的顏色放在一起會(huì)使它們非常難以閱讀(不管它們是互補(bǔ)色還是類似色)。
tMlWezSWh1n3Y1Jjev7X
  在手機(jī)屏幕上尤其如此,因?yàn)橛脩舾赡茉趹敉饣蛘呙髁恋牡胤绞褂檬謾C(jī)以致屏幕比較刺眼。
 ?。ㄗg注:原文描述了他們做的一個(gè)關(guān)于顏色偏好的性別差異的研究,但由于樣本只有50人且差異不大,在此不譯,感興趣的同學(xué)可以查看原文。)
  顏色帶來的聯(lián)想在不同文化下,對不同的個(gè)體都不一樣。不同性別經(jīng)常有不同的顏色偏好,年度流行色對年輕人或者高收入人群都可能更有吸引力。
  色彩心理學(xué)與關(guān)聯(lián)
  眾所周知,顏色可以喚起情感,以下是傳統(tǒng)上與顏色關(guān)聯(lián)的情感:
  紅色:力量,熱情,食欲,愛,危險(xiǎn)
  橘色:自信,高興,友好
  黃色:青春,幸福,溫暖,陽光
  綠色:成長,金錢,治愈,環(huán)境,嫉妒
  藍(lán)色:信任,和平,忠誠,陽剛,安全
  紫色:皇室,神秘,靈性,創(chuàng)造
  棕色:戶外,食物,保守,地球
  黑色:正式,奢華,高雅,死亡
  白色:春節(jié),樸素,善良,新鮮
  商標(biāo)與行業(yè)
  很多著名公司在客戶購買之前很久就已經(jīng)用顏色喚起了特定的情緒。
  客戶也會(huì)將顏色和特定的行業(yè)建立聯(lián)系,比如藍(lán)色和科技,綠色和健康,紅色和快餐。當(dāng)有些公司為了匹配客戶期望而選擇用行業(yè)通用色時(shí),有些公司發(fā)現(xiàn)反其道而行之可以快速讓人留下印象。
  舉個(gè)栗子。在旅游業(yè)中,藍(lán)色對于網(wǎng)站和應(yīng)用來說是非常常用的??匆豢聪旅孢@個(gè)網(wǎng)站主頁:
SMzWDfziZWnv5BwzMRpQ
  藍(lán)色代表著可信賴,這對旅游公司來說是一個(gè)好事。但是旅游網(wǎng)站使用藍(lán)色并不是一個(gè)鐵則。
  維珍美國航空在設(shè)計(jì)網(wǎng)站時(shí)就選擇了反其道而行。
  當(dāng)它與用戶對航空網(wǎng)站的期待不同時(shí),就會(huì)顯得比較突出。選擇一個(gè)意料之外的顏色可以有效地讓用戶體驗(yàn)到高興,并且讓他們記住你的公司。
  考慮你的目標(biāo)客戶有多傳統(tǒng)。
  他們對背離規(guī)范有什么反應(yīng)?
  這會(huì)令他們感到開心還是迷惑?
  如果你的配色背離了傳統(tǒng)預(yù)期,你的公司傳達(dá)出了什么信息?
  顏色與可及性
  你的網(wǎng)站或應(yīng)用對有視覺障礙的用戶來說是什么樣子的?
  大約8%的男性和0.5%的女性患有某種形式的色盲。色盲有多種情況,但紅綠色盲是最常見的。紅綠色盲患者無法區(qū)分紅色,綠色和具有相似值的黃色,尤其是當(dāng)綠色中含有的黃色比藍(lán)色更多時(shí),比如下面的橄欖色背景色。
r6SHQx6T88mUeeEW79M1
  同樣的按鈕,左邊是視力正常者看到的,右邊是紅綠色盲看到的
  如果你在使用低對比度的顏色,要知道色盲用戶可能根本無法辨認(rèn)文字或者圖片。在寒假這個(gè)問題尤其嚴(yán)重,大量網(wǎng)站充斥著節(jié)日喜慶的紅色和綠色。記住,如果有8%的男性訪客無法看到按鈕上的文字“Buy Now”,那么你可能正在流失掉數(shù)量可觀的轉(zhuǎn)化。
  如果你不得不使用對色盲患者來說難以區(qū)分的顏色組合,你仍然可以通過提高顏色之間的對比度來保證可及性。比如下面這張圖使用了非常暗的紅色和非常亮的綠色,不管是否色盲都很容易看清楚。
  同樣的按鈕,左邊是視力正常者看到的,右邊是紅綠色盲看到的
  還有一些關(guān)于可及性的要點(diǎn):不要忘記那些可能在使用屏幕閱讀器訪問你的網(wǎng)站的用戶。你是否曾經(jīng)在填寫表格的時(shí)候收到一個(gè)錯(cuò)誤信息,比如“標(biāo)紅的字段是必填的”?這對于那些無法看到紅色字符的人來說是極其糟糕的體驗(yàn)。最好避免在網(wǎng)站或者應(yīng)用中提到顏色,并且提供更加具體的錯(cuò)誤信息,比如“郵件地址是必填的”。
  可及性測試工具
  有一些很棒的工具可以幫助你測試網(wǎng)站的可及性。
  下載Color Oracle的色盲模擬器,有Windows,Mac和Linux版本;
  將你的靜態(tài)圖片上傳到Coblis,可以用九種不同的顏色視角去體驗(yàn)它們;
  甚至可以邀請色盲患者去測試網(wǎng)站,看是否有他們難以看清的東西。
  顏色對轉(zhuǎn)化率的影響
  有些優(yōu)化轉(zhuǎn)化率的專家會(huì)聲稱對按鈕來說最好的顏色是大膽的、吸引眼球的紅色,但也有人說綠色最佳因?yàn)榫G色表示“開始”。
  有大量的A/B測試顯示了CTA按鈕(CallToAction)的顏色改變會(huì)對轉(zhuǎn)化帶來極大的影響。HubSpot在以前仍叫做Performable的時(shí)候分享了這個(gè)著名的測試:
  HubSpot的A/B測試
  盡管他們原來預(yù)測綠色按鈕會(huì)表現(xiàn)得更好,但是紅色按鈕帶來的點(diǎn)擊量高了21%。但是他們?nèi)匀惶嵝炎x者,這個(gè)測試結(jié)果本身不應(yīng)該使所有人都把按鈕變成紅色??赡艿慕忉屖撬麄兊挠脩艟褪窍矚g紅色,盡管其他的用戶可能更喜歡綠色?;蛘撸赡艿那闆r是,這個(gè)紅色按鈕得到了更多注意是因?yàn)樗沁@個(gè)頁面上唯一的紅色物體。
  壞消息是并不存在一種魔法顏色能在所有網(wǎng)站上都表現(xiàn)最優(yōu)。好消息是有一些經(jīng)驗(yàn)法則可以幫助你有效地使用顏色。
  經(jīng)驗(yàn)法則
  對比是關(guān)鍵
  這看起來很明顯,但是我們還是要說:如果你希望用戶點(diǎn)擊某處,你要讓它足夠突出。如果你的網(wǎng)站或應(yīng)用使用了很多橘色,用戶可能不會(huì)馬上注意到一個(gè)橘色的按鈕,不管這個(gè)橘色按鈕在其他公司的A/B測試中表現(xiàn)多好。
  在我們的研究中,我們讓用戶指出他們在每個(gè)網(wǎng)站上首先會(huì)點(diǎn)擊的東西。不出意料,用戶更可能點(diǎn)擊與背景形成強(qiáng)烈對比的CTA按鈕。
  明亮令人難忘
  在上面提到的那個(gè)50人的研究中,我們問的最后一個(gè)問題是用戶訪問的哪個(gè)網(wǎng)站最令人印象深刻。
  50%的用戶選擇了明亮的網(wǎng)站。有趣的是很多選擇深色或者白色網(wǎng)站的用戶是出于一些與設(shè)計(jì)無關(guān)的原因。比如一個(gè)用戶認(rèn)為Dropbox是最印象深刻的因?yàn)樗呀?jīng)有了Dropbox賬號。
  字體
  文字的主要目的是幫助用戶去做你需要讓他們做的事情——不管是探索產(chǎn)品,學(xué)習(xí)如何玩一個(gè)游戲,還是瀏覽一些令人愉快的故事。
  遺憾的是,在網(wǎng)站和應(yīng)用排版中有很多相互矛盾的選項(xiàng),并且沒有一個(gè)適用于所有情況的嚴(yán)格規(guī)則(否則事情也太簡單了吧)。但是你可以做一些事情,以保證你為網(wǎng)站或應(yīng)用選擇的字體對你和你的用戶有所幫