色彩心理學(xué)對(duì)網(wǎng)頁(yè)設(shè)計(jì)的影響力

　　色彩心理學(xué)被廣泛應(yīng)用于設(shè)計(jì)的各個(gè)方面，這已經(jīng)不是什么秘密了。從色彩用于日常的雜貨，到品牌標(biāo)識(shí)和網(wǎng)站設(shè)計(jì)的顏色，顏色是傳達(dá)特定信息給用戶的一個(gè)重要因素。

　　圖片來(lái)源：Dropbox

　　根據(jù)網(wǎng)站Kissmetrics網(wǎng)絡(luò)數(shù)據(jù)分析結(jié)果表明,當(dāng)我們觀察顏色的時(shí)候, 我們的眼睛會(huì)將消息發(fā)送到我們大腦中被稱作下丘腦的這個(gè)區(qū)域。然后這將進(jìn)一步的信號(hào)傳輸?shù)侥X垂體，最后到甲狀腺腺體。然而這個(gè)信號(hào)激素的釋放會(huì)導(dǎo)致我們情緒和情感的波動(dòng)，并且最終導(dǎo)致我們的行為結(jié)果。

　　科學(xué)告訴我們，顏色可以引起我們消極的負(fù)面感覺(jué)。Kissmetrics還表明，對(duì)于一個(gè)站點(diǎn)來(lái)說(shuō)，訪問(wèn)者只需花費(fèi)90秒就可以做出判斷或者意見(jiàn)。進(jìn)一步來(lái)說(shuō),“62%—90%的交互是由產(chǎn)品自己的顏色決定的?！?/p>

　　正如《Web UI Design for the Human Eye》(提取密碼88ce)這本免費(fèi)的書(shū)中所描述，顏色在給用戶創(chuàng)造強(qiáng)烈的第一印象上扮演了一個(gè)不可否認(rèn)的角色。

　　顏色的含義是什么

　　對(duì)于每個(gè)人來(lái)說(shuō)，每種顏色都意味著些什么，盡管這些意義取決于我們個(gè)人的喜好和文化背景?？纯聪旅娴纳?，可以作為一個(gè)顏色含義的快速參考。

　　圖片來(lái)源：UXpin

　　設(shè)計(jì)中的色彩心理學(xué)不是一門精準(zhǔn)的科學(xué)，并且研究表明，色彩心理受個(gè)人認(rèn)知影響。社會(huì)因素中如社會(huì)性別也對(duì)顏色如何被感知有影響。進(jìn)一步研究表明，不僅是顏色自身含義的影響，也是關(guān)于在使用中如何讓用戶恰當(dāng)?shù)母兄接迷谄放粕系念伾x。

　　圖片來(lái)源： Kissmetrics

　　所以，如果你是給女性設(shè)計(jì)的，那么紫色是一個(gè)不錯(cuò)的選擇，因?yàn)橐话銇?lái)說(shuō)它是普遍女性喜歡的顏色，但是男性是不喜歡的(當(dāng)然通常情況下是這樣)。在下圖中，對(duì)巴黎歐萊雅來(lái)說(shuō)是一個(gè)很好的效果 。正如你所看到的那樣，頁(yè)眉和頁(yè)腳都是黑色的，它表明了地位感和優(yōu)雅感，讓你總體感覺(jué)到該產(chǎn)品并不便宜，而是高端產(chǎn)品。

　　圖片來(lái)源： Kissmetrics

　　此外，文字用白色的，表示著現(xiàn)代和平靜感，然而選定的紫色代表著奢華的，優(yōu)雅和女人味——所有這些都清晰的適合于一個(gè)網(wǎng)站，例如就這個(gè)網(wǎng)站。

　　(如果想要了解更多關(guān)于簡(jiǎn)約設(shè)計(jì)，并使用空余時(shí)間作一個(gè)設(shè)計(jì)工具，可以看看這些免費(fèi)的電子書(shū)《The Elegance of Minimalism 》(提取密碼：wgka)和《 The Zen of White Spacliae in Web Design》(提取密碼：amqn)

　　在下圖中，在婦女健康雜志網(wǎng)站上面的橫幅是粉紅色的，但其他地方避免使用顏色，反而是用圖像和粗的導(dǎo)航。這個(gè)有趣的設(shè)計(jì)選擇對(duì)網(wǎng)站起到了反作用。

　　首先，當(dāng)一個(gè)網(wǎng)站的目標(biāo)是針對(duì)婦女的時(shí)候，粉紅色是一個(gè)非常老套的顏色， 并且粉色吸引的是愛(ài)吃甜食的人群，因此對(duì)于網(wǎng)頁(yè)消息要傳達(dá)的是女性的健康這一目的就沒(méi)有了。

　　圖片來(lái)源：女性健康雜志

　　當(dāng)我們進(jìn)入到網(wǎng)頁(yè)的次層級(jí)中，那么標(biāo)題的顏色理所應(yīng)當(dāng)使用在每一個(gè)頁(yè)面上。當(dāng)你快速瀏覽減肥標(biāo)簽下的頁(yè)面。如下圖。

　　如你所見(jiàn)，這個(gè)頁(yè)面更是粉紅色，這一點(diǎn)可能會(huì)給觀眾帶來(lái)適得其反的感受。不管怎樣，我們剛剛在滑塊上看到的那張圖，如果你還保留著這張圖那么請(qǐng)改掉它。

　　確定顏色主題

　　你創(chuàng)建一個(gè)網(wǎng)站，這個(gè)網(wǎng)站只有一種顏色這是不可能的，除非你打算用純單色。所以你應(yīng)該考慮整體的配色方案和使用的每個(gè)色彩，以及它們的統(tǒng)一性。另外還要考慮顏色對(duì)用戶的影響，以及如何讓你正在使用的主色和輔助色相匹配。

　　考慮到這一點(diǎn),你應(yīng)該會(huì)關(guān)心怎樣混搭顏色能匹配并且能夠幫你解決網(wǎng)站顏色問(wèn)題。那么你可以了解下面三個(gè)顏色混合的基本方法。

　　1三角色彩計(jì)劃

　　這是一個(gè)基本的，并且穩(wěn)定平衡的方法。原理是使用了色彩的活力和互補(bǔ)特性。使用這個(gè)12項(xiàng)色環(huán)，你可以選擇任何三種顏色，這三種顏色的位置關(guān)系是彼此是120度的距離，依次作為背景，內(nèi)容和導(dǎo)航的顏色。

　　圖片來(lái)自: Ray Trygstad.維基百科

　　2復(fù)合色(互補(bǔ)色)

　　第二種方法有一點(diǎn)難并且你可能為了證明它是恰當(dāng)合適的顏色不得不去做些實(shí)驗(yàn)，如果實(shí)驗(yàn)做得好，它會(huì)是非常有效的。這個(gè)概念用了四種顏色，即兩組對(duì)比色(色環(huán)上相鄰兩個(gè)顏色的180度補(bǔ)色)

　　圖片來(lái)自: Ray Trygstad.維基百科

　　3近似色

　　這個(gè)方法僅側(cè)重于互補(bǔ)色，當(dāng)決定你想要的計(jì)劃要去傳達(dá)給用戶的時(shí)候，你可以考慮這個(gè)方法。它強(qiáng)調(diào)了選擇顏色的活力，當(dāng)這些色彩被夸大后就可能太多了。

　　圖片來(lái)自: Ray Trygstad.維基百科

　　因此考慮色彩心理學(xué)時(shí)，重要的是你應(yīng)該把所有色彩作為一個(gè)整體去考慮，它們?cè)谝黄鹪趺垂ぷ?，而不是只選一個(gè)顏色，還有希望顏色要與其它的內(nèi)容如背景，文本等這些按鈕起到作用。

　　看看下面的這張圖片，并且考慮下它向用戶傳達(dá)了什么內(nèi)容。

　　圖片來(lái)自Codementor

　　1背景顏色——黑色的背景展現(xiàn)了網(wǎng)站的優(yōu)質(zhì)，精細(xì)，正式和統(tǒng)一的企業(yè)形象。顯然，當(dāng)考慮網(wǎng)站提供輔導(dǎo)的時(shí)候，你應(yīng)該會(huì)想傳達(dá)卓越，精益求精這些東西。網(wǎng)站的形式上表明，當(dāng)和學(xué)習(xí)相關(guān)的這些企業(yè)社團(tuán)表明用戶可能不是作為一種愛(ài)號(hào)學(xué)習(xí)代碼，而是作為他們未來(lái)職業(yè)生涯中的一種技能來(lái)學(xué)習(xí)的。

　　2按鈕的顏色——該網(wǎng)站使用了紅色的按鈕作為交易按鈕。和黑色的背景形成了鮮明的對(duì)比，鼓勵(lì)更多用戶去注冊(cè)。對(duì)于不太重要的按鈕則使用白色描邊，與整體方案一致。

　　3文本顏色——對(duì)于文本，白色規(guī)定了所有重要的對(duì)比度，同時(shí)和整體顏色方案相匹配。白色的線性圖標(biāo)(白色半透明的按鈕)被放在了下面來(lái)鼓勵(lì)用戶在必要的時(shí)候向下滾動(dòng)來(lái)獲取更多內(nèi)容。

　　總體來(lái)說(shuō)，設(shè)計(jì)工作做得很好——我們都知道黑色和白色搭配在一起能夠協(xié)調(diào)，在這種情況下，這個(gè)網(wǎng)站感覺(jué)優(yōu)雅和相對(duì)正式。紅色，如果使用過(guò)度，可能會(huì)使網(wǎng)站的取意遠(yuǎn)離整個(gè)信息的傳達(dá)，所以它在使用時(shí)非常的謹(jǐn)慎，只是為了突出并讓它清楚的表達(dá)所需的動(dòng)作是去注冊(cè)這個(gè)功能的目的就好了。

　　避免一些顏色

　　棕色在設(shè)計(jì)中通常會(huì)喚起自然感，但是這個(gè)顏色是大多數(shù)男性最不喜歡的顏色，但它確實(shí)在某些情況下工作使用，因?yàn)橛盟鼇?lái)表示可靠性。

　　圖片來(lái)自: Color Matters

　　因此對(duì)ups來(lái)說(shuō)棕褐色作品是當(dāng)它的公司想要傳達(dá)它可以依靠的強(qiáng)烈信息時(shí)候，棕色也可以使用。但是，作為一個(gè)運(yùn)動(dòng)套件，它被形容為有史以來(lái)最差的大學(xué)橄欖球,感謝圖中顯示的這張示例圖片，這屬于美國(guó)懷俄明大學(xué)隊(duì)的。有趣的是，棕褐色也被認(rèn)是推動(dòng)“強(qiáng)度，耐用性”，所以當(dāng)配上這樣的積極運(yùn)動(dòng)你會(huì)想到它會(huì)起到這樣的作用，但它不會(huì)在這種情況下發(fā)生因?yàn)檎Ｇ闆r下男性不喜歡棕色。

　　當(dāng)談到女性的時(shí)候，橙似乎是最不喜歡的顏色，所以記住這一點(diǎn)，如果你設(shè)計(jì)的主要人群是女性用戶群，不要用橙色。

　　當(dāng)然，請(qǐng)記住，這些只是指導(dǎo)原則(他們總是依賴于文本內(nèi)容)，其實(shí)更重要的是所有的顏色相得益彰，創(chuàng)造和諧。

　　一些工具來(lái)幫助你選擇正確的顏色

　　當(dāng)然，你可以使用現(xiàn)成的調(diào)色板，你的選擇色彩的時(shí)候來(lái)幫助你。當(dāng)涉及到網(wǎng)頁(yè)UI設(shè)計(jì)，你不需要重新發(fā)明色輪。下面一些顏色色卡資料分享給大家。

　　1Adobe Color CC –為所有adobe用戶值得信賴的供應(yīng)商

　　2Paletton –簡(jiǎn)單顏色拾色器，適合初學(xué)者

　　3Flat UI Color Picker – 用于創(chuàng)建豐富多彩的扁平設(shè)計(jì)

　　4Mudcube Color Sphere – 提供主題選擇和十六進(jìn)制數(shù)字

　　5Check My Colours –用于檢查前景和背景的顏色組合，并且它具有正確的對(duì)比度，供人用色盲。

　　6Color – 允許你通在屏幕滑動(dòng)鼠標(biāo)選色，設(shè)置飽和度，然后你可以得到十六位進(jìn)制代碼。

　　通過(guò)實(shí)例學(xué)習(xí)

　　有成千上萬(wàn)的網(wǎng)站在那里用顏色帶來(lái)很大的影響，以及大量不這樣做的網(wǎng)站。下面的圖片awwwards站點(diǎn)靠色彩區(qū)分，而且我們很容易明白為什么這么做。

　　圖片來(lái)自: AWWWards

　　背景是均勻的淺灰色它與自行車的灰色搭配起來(lái)很好看。簡(jiǎn)單的設(shè)計(jì)，用大字體是非常有影響力的，并立即傳達(dá)出這個(gè)含義：它是一個(gè)快速的小自行車，會(huì)讓你愛(ài)上騎行。利用灰色讓其他顏色凸顯出來(lái)的特質(zhì)，并且灰色是一個(gè)中性色，當(dāng)它變亮變輕，照亮了頁(yè)面并讓頁(yè)面活躍了起來(lái)?；疑步o我們一種穩(wěn)定感(對(duì)于一個(gè)偉大的自行車廣告)，同時(shí)營(yíng)造安靜和沉穩(wěn)的感覺(jué)。

　　在圖片中字“GO”使用的顏色鮮亮活潑，體現(xiàn)了活力和現(xiàn)代的設(shè)計(jì)感。主要是藍(lán)色調(diào)，因?yàn)檫@個(gè)顏色男性和女性都會(huì)喜歡，它可以確保頁(yè)面沒(méi)有性別區(qū)分。少量的加入綠色，暗示了環(huán)保的含義，這樣做法很聰明，因?yàn)樽孕熊嚭推嚤绕饋?lái)更好，不會(huì)污染空氣。眾所周知這一點(diǎn)對(duì)于宣傳來(lái)說(shuō)是很有力量的。

　　總體而言，這個(gè)頁(yè)面告訴你踏板車是多么的完美，并且它會(huì)是現(xiàn)代都市人的生活方式之一。

　　最后注意事項(xiàng)

　　色彩是設(shè)計(jì)的一個(gè)重要組成部分，也是整個(gè)品牌重要的一部分。所用的顏色所傳達(dá)的意義必須喝品牌個(gè)性和品牌故事一致。通常情況下，設(shè)計(jì)師有時(shí)不得不用現(xiàn)有的藝術(shù)作品，如 logo，并且不得不再此基礎(chǔ)上選擇顏色。然而這過(guò)程似乎是被完全壓縮了的，但調(diào)色板的實(shí)用性也許可以讓你在做的過(guò)程中比較容易些。要了解更多關(guān)于視覺(jué)設(shè)計(jì)如何給用戶上最強(qiáng)的第一印象，看看這個(gè)免費(fèi)書(shū)《 Web UI Design for the Human Eye》。這是我們分析了33個(gè)公司，包括Tumblr, Etsy, Google, Facebook, Twitter, Medium, Intercom,和Bose。

　　原文作者：Jerry Cao 2015/6/12

　　原創(chuàng)翻譯: 章魚(yú)學(xué)院——Halona

　　原文鏈接: http://designmodo.com.zcool.cn/color-psychology-web-design/