也許是因?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)該是這樣？這對(duì)用戶的情緒和行為帶來了怎樣的影響？我們需要一些研究結(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í)到你的設(shè)計(jì)決策是如何幫助或者阻礙你的用戶的。
　　我們?cè)赨serTesting執(zhí)行和分析過數(shù)十萬個(gè)可用性研究，從中看過了很多有效的（以及不那么有效的）視覺設(shè)計(jì)決策。現(xiàn)在我們想分享一下我們從這些研究中學(xué)到的東西。
　　本文是關(guān)于不同的視覺設(shè)計(jì)元素是如何影響網(wǎng)站、APP或產(chǎn)品中的用戶體驗(yàn)的。我們將會(huì)談到以下內(nèi)容：
　　顏色
　　排版
　　圖標(biāo)
　　和用戶一起測(cè)試你的設(shè)計(jì)
　　你將會(huì)學(xué)到如何做出對(duì)用戶友好的設(shè)計(jì)決策，并且為你的公司帶來最好的結(jié)果。
　　顏色
　　在設(shè)計(jì)師的工具箱中，顏色是最有力的工具之一。
　　你可以使用顏色去影響用戶的情感，吸引他們的注意力，把他們置入適于購物的情緒體驗(yàn)中。顏色同時(shí)也是客戶對(duì)一個(gè)品牌認(rèn)知的主要因素之一。
　　由于可能的顏色組合是無限的，很難去決定哪種顏色會(huì)對(duì)你的網(wǎng)站或應(yīng)用產(chǎn)生最大影響。去測(cè)試所有的顏色是不可能的，但是我們總結(jié)了關(guān)于顏色如何影響用戶的態(tài)度和行為的一些技巧和趨勢(shì)。
　　顏色理論與用戶體驗(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í)，記住把兩種低對(duì)比度的顏色放在一起會(huì)使它們非常難以閱讀（不管它們是互補(bǔ)色還是類似色）。
tMlWezSWh1n3Y1Jjev7X
　　在手機(jī)屏幕上尤其如此，因?yàn)橛脩舾赡茉趹敉饣蛘呙髁恋牡胤绞褂檬謾C(jī)以致屏幕比較刺眼。
　?。ㄗg注：原文描述了他們做的一個(gè)關(guān)于顏色偏好的性別差異的研究，但由于樣本只有50人且差異不大，在此不譯，感興趣的同學(xué)可以查看原文。）
　　顏色帶來的聯(lián)想在不同文化下，對(duì)不同的個(gè)體都不一樣。不同性別經(jīng)常有不同的顏色偏好，年度流行色對(duì)年輕人或者高收入人群都可能更有吸引力。
　　色彩心理學(xué)與關(guān)聯(lián)
　　眾所周知，顏色可以喚起情感，以下是傳統(tǒng)上與顏色關(guān)聯(lián)的情感：
　　紅色：力量，熱情，食欲，愛，危險(xiǎn)
　　橘色：自信，高興，友好
　　黃色：青春，幸福，溫暖，陽光
　　綠色：成長(zhǎng)，金錢，治愈，環(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)色對(duì)于網(wǎng)站和應(yīng)用來說是非常常用的?？匆豢聪旅孢@個(gè)網(wǎng)站主頁：
SMzWDfziZWnv5BwzMRpQ
　　藍(lán)色代表著可信賴，這對(duì)旅游公司來說是一個(gè)好事。但是旅游網(wǎng)站使用藍(lán)色并不是一個(gè)鐵則。
　　維珍美國航空在設(shè)計(jì)網(wǎng)站時(shí)就選擇了反其道而行。
　　當(dāng)它與用戶對(duì)航空網(wǎng)站的期待不同時(shí)，就會(huì)顯得比較突出。選擇一個(gè)意料之外的顏色可以有效地讓用戶體驗(yàn)到高興，并且讓他們記住你的公司。
　　考慮你的目標(biāo)客戶有多傳統(tǒng)。
　　他們對(duì)背離規(guī)范有什么反應(yīng)？
　　這會(huì)令他們感到開心還是迷惑？
　　如果你的配色背離了傳統(tǒng)預(yù)期，你的公司傳達(dá)出了什么信息？
　　顏色與可及性
　　你的網(wǎng)站或應(yīng)用對(duì)有視覺障礙的用戶來說是什么樣子的？
　　大約8%的男性和0.5%的女性患有某種形式的色盲。色盲有多種情況，但紅綠色盲是最常見的。紅綠色盲患者無法區(qū)分紅色，綠色和具有相似值的黃色，尤其是當(dāng)綠色中含有的黃色比藍(lán)色更多時(shí)，比如下面的橄欖色背景色。
r6SHQx6T88mUeeEW79M1
　　同樣的按鈕，左邊是視力正常者看到的，右邊是紅綠色盲看到的
　　如果你在使用低對(duì)比度的顏色，要知道色盲用戶可能根本無法辨認(rèn)文字或者圖片。在寒假這個(gè)問題尤其嚴(yán)重，大量網(wǎng)站充斥著節(jié)日喜慶的紅色和綠色。記住，如果有8%的男性訪客無法看到按鈕上的文字“Buy Now”，那么你可能正在流失掉數(shù)量可觀的轉(zhuǎn)化。
　　如果你不得不使用對(duì)色盲患者來說難以區(qū)分的顏色組合，你仍然可以通過提高顏色之間的對(duì)比度來保證可及性。比如下面這張圖使用了非常暗的紅色和非常亮的綠色，不管是否色盲都很容易看清楚。
　　同樣的按鈕，左邊是視力正常者看到的，右邊是紅綠色盲看到的
　　還有一些關(guān)于可及性的要點(diǎn)：不要忘記那些可能在使用屏幕閱讀器訪問你的網(wǎng)站的用戶。你是否曾經(jīng)在填寫表格的時(shí)候收到一個(gè)錯(cuò)誤信息，比如“標(biāo)紅的字段是必填的”？這對(duì)于那些無法看到紅色字符的人來說是極其糟糕的體驗(yàn)。最好避免在網(wǎng)站或者應(yīng)用中提到顏色，并且提供更加具體的錯(cuò)誤信息，比如“郵件地址是必填的”。
　　可及性測(cè)試工具
　　有一些很棒的工具可以幫助你測(cè)試網(wǎng)站的可及性。
　　下載Color Oracle的色盲模擬器，有Windows，Mac和Linux版本；
　　將你的靜態(tài)圖片上傳到Coblis，可以用九種不同的顏色視角去體驗(yàn)它們；
　　甚至可以邀請(qǐng)色盲患者去測(cè)試網(wǎng)站，看是否有他們難以看清的東西。
　　顏色對(duì)轉(zhuǎn)化率的影響
　　有些優(yōu)化轉(zhuǎn)化率的專家會(huì)聲稱對(duì)按鈕來說最好的顏色是大膽的、吸引眼球的紅色，但也有人說綠色最佳因?yàn)榫G色表示“開始”。
　　有大量的A/B測(cè)試顯示了CTA按鈕（CallToAction）的顏色改變會(huì)對(duì)轉(zhuǎn)化帶來極大的影響。HubSpot在以前仍叫做Performable的時(shí)候分享了這個(gè)著名的測(cè)試：
　　HubSpot的A/B測(cè)試
　　盡管他們?cè)瓉眍A(yù)測(cè)綠色按鈕會(huì)表現(xiàn)得更好，但是紅色按鈕帶來的點(diǎn)擊量高了21%。但是他們?nèi)匀惶嵝炎x者，這個(gè)測(cè)試結(jié)果本身不應(yīng)該使所有人都把按鈕變成紅色?？赡艿慕忉屖撬麄兊挠脩艟褪窍矚g紅色，盡管其他的用戶可能更喜歡綠色?；蛘?，更可能的情況是，這個(gè)紅色按鈕得到了更多注意是因?yàn)樗沁@個(gè)頁面上唯一的紅色物體。
　　壞消息是并不存在一種魔法顏色能在所有網(wǎng)站上都表現(xiàn)最優(yōu)。好消息是有一些經(jīng)驗(yàn)法則可以幫助你有效地使用顏色。
　　經(jīng)驗(yàn)法則
　　對(duì)比是關(guān)鍵
　　這看起來很明顯，但是我們還是要說：如果你希望用戶點(diǎn)擊某處，你要讓它足夠突出。如果你的網(wǎng)站或應(yīng)用使用了很多橘色，用戶可能不會(huì)馬上注意到一個(gè)橘色的按鈕，不管這個(gè)橘色按鈕在其他公司的A/B測(cè)試中表現(xiàn)多好。
　　在我們的研究中，我們讓用戶指出他們?cè)诿總€(gè)網(wǎng)站上首先會(huì)點(diǎn)擊的東西。不出意料，用戶更可能點(diǎn)擊與背景形成強(qiáng)烈對(duì)比的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賬號(hào)。
　　字體
　　文字的主要目的是幫助用戶去做你需要讓他們做的事情——不管是探索產(chǎn)品，學(xué)習(xí)如何玩一個(gè)游戲，還是瀏覽一些令人愉快的故事。
　　遺憾的是，在網(wǎng)站和應(yīng)用排版中有很多相互矛盾的選項(xiàng)，并且沒有一個(gè)適用于所有情況的嚴(yán)格規(guī)則（否則事情也太簡(jiǎn)單了吧）。但是你可以做一些事情，以保證你為網(wǎng)站或應(yīng)用選擇的字體對(duì)你和你的用戶有所幫