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