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