根據Kissmetrics 的說(shuō)法，當我們看到一個(gè)色彩的時(shí)候，信息會(huì )傳遞到大腦的下丘腦的某個(gè)區域中。接下來(lái)，信號會(huì )進(jìn)一步傳遞到腦垂體，然后到甲狀腺腺體。這也就意味著(zhù)，色彩會(huì )刺激大腦和腺體分泌激素，引發(fā)出我們的情緒反應，并影響我們的行為。

科學(xué)研究表明，色彩會(huì )影響情緒，會(huì )招致正面的情緒，也能帶來(lái)負面的影響，有的時(shí)候帶來(lái)的情緒與實(shí)際要的并不匹配。Kissmetrics 接著(zhù)補充道，網(wǎng)站的訪(fǎng)客通常只需要大概90秒就能針對一個(gè)網(wǎng)站作出判斷和選擇，而在者其中，有62%~90%的因素是取決于某個(gè)產(chǎn)品的色彩。

在UXPin的免費電子書(shū)Web Design for the Human Eye 中我們曾說(shuō)過(guò)，某個(gè)事物在給人第一印象的時(shí)候，色彩扮演著(zhù)無(wú)可爭議的重要角色。

色彩意味著(zhù)什么

每種色彩對于每個(gè)人而言都有著(zhù)特定的含義，但是它的具體含義通常取決于他們所處的文化背景、個(gè)人經(jīng)歷和喜好。

簡(jiǎn)單說(shuō)明這一點(diǎn)，我們不妨看看下面的色卡。

事實(shí)上，色彩心理學(xué)在設計領(lǐng)域并不是一個(gè)精確的學(xué)科，個(gè)體差異非常明顯。社會(huì )因素，個(gè)人認知，甚至性別也會(huì )對色彩感知產(chǎn)生影響。進(jìn)一步的研究發(fā)現，產(chǎn)生影響的并不總是色彩本身，使用這些色彩的品牌與用戶(hù)之間的關(guān)系也會(huì )影響用戶(hù)對于色彩的感知。

所以，如果你的設計是針對女性的，那么紫色會(huì )是一個(gè)相當不錯的選擇，因為紫色在女性受眾中普遍受歡迎，但是對于多數男性而言，紫色并不太受歡迎。在下方的圖片中，紫色被運用在巴黎歐萊雅的網(wǎng)頁(yè)中，效果非常不錯。主體使用的黑白配色，黑色的頁(yè)頭頁(yè)腳看起來(lái)非常優(yōu)雅，紫色點(diǎn)綴其中，整體感非常不錯。實(shí)際上他們的產(chǎn)品并不便宜，但是給人感覺(jué)比較高端。

另外，使用白色的文本，讓人感覺(jué)平靜又足夠現代，紫色則被賦予了奢華、優(yōu)雅、女性化的含義。所有的這些都能夠在這個(gè)網(wǎng)站里查到。

下圖是女性健康雜志的頁(yè)面，上面的Banner使用了粉紅色，導航設計更為大膽，除此以外網(wǎng)站其他的地方用色倒并不豐富。不得不說(shuō)這樣的選擇非常有趣。

首先，對于女性類(lèi)的網(wǎng)站而言，粉紅色本身還是比較老套的，但是作為一個(gè)女性健康類(lèi)的網(wǎng)站，這樣的配色和主體并不算是特別搭。

當我們繼續探索網(wǎng)站其他的部分，比如當你打開(kāi)減肥頁(yè)面的時(shí)候，導航欄上相應的位置會(huì )變成粉色以示標識。

色彩會(huì )影響用戶(hù)的心情和感受，盡管這個(gè)頁(yè)面的第一張圖片是隨機滾動(dòng)播放的，但是想想看，整個(gè)減肥相關(guān)的頁(yè)面幾乎被粉色淹沒(méi)了，適得其反。

配色方案

通常當你準備設計一個(gè)網(wǎng)站的時(shí)候，不會(huì )只使用一種色彩吧？你需要考慮整個(gè)網(wǎng)站的整體配色方案，單個(gè)色彩的選取，以及不同色彩之間的搭配。接下來(lái)，你還需要考慮不同色彩對于用戶(hù)的影響，搭配色與主色調之間的協(xié)調，等等等等。

這樣一來(lái)，就需要設計師對于色彩的混合搭配使用有更深入的考量了。下面三個(gè)基本的配色技巧，可以幫你搞定這一問(wèn)題。

#1: 三色搭配

這是最基本的方法，也是最平衡的配色思路，使用互補的鮮艷色彩。在色輪上選取相互間隔120度角的三種色彩，分別來(lái)作為背景、內容和導航的色彩。

#2: 組合配色（拆分互補）

這種配色方案相對而言比較有難度，你需要通過(guò)一定的測試和探索才能獲取。如果搭配好了，效果非常驚艷。如圖所示，這種配色方案是選取色輪上相鄰的兩對對比色。

#3: 近似配色

這種配色的核心是選取連續的相鄰互補色，如果你想借此來(lái)取悅用戶(hù)的話(huà)，在選取的時(shí)候一定要謹慎小心。這種配色方式能夠突出色彩的活力，但是因為相輔相成，色彩和效果對比不會(huì )那么強烈，但是會(huì )更加夸張。

所以，當你開(kāi)始考慮色彩的心理學(xué)屬性的時(shí)候，盡量將整個(gè)配色方案作為整體來(lái)進(jìn)行衡量，而不是單獨為某個(gè)部分選取一個(gè)色彩，以期它能與其他部分協(xié)調工作。

看看下面的頁(yè)面，想想看，它會(huì )向用戶(hù)傳達怎樣的信息呢？

1、背景色——深色的背景讓整個(gè)頁(yè)面看起來(lái)經(jīng)典、精益求精、沉穩、正式且足夠“企業(yè)化”。當你設計一個(gè)網(wǎng)站的是，“精益求精”的感覺(jué)總能給人良好的觀(guān)感。正式和企業(yè)化的屬性，則通常能讓訪(fǎng)客不會(huì )以玩樂(lè )的心態(tài)來(lái)看待這個(gè)網(wǎng)站，且能夠帶來(lái)一定的信任感。

2、按鈕色—— 設計師在這個(gè)CTA按鈕（行為召喚按鈕）上使用了強對比的紅色，醒目且非常吸引用戶(hù)去點(diǎn)擊。相對而言，白色邊緣的幽靈按鈕在優(yōu)先級上明顯低于紅色的CTA按鈕。按鈕用色在整體配色中符合邏輯，位置清晰。

3、文本色——白色的文本與黑色的底色形成明顯的對比，從整體配色方案上來(lái)看也非常搭調。另外和文字搭配的線(xiàn)條圖標也采用了同樣的白色，在色彩上采用了高度一致的方案，露頭的文本暗示用戶(hù)需要向下滾動(dòng)。

總體上來(lái)說(shuō)，整套設計方案還不錯，中規中矩的黑白配，加上紅色之后，就顯得活潑起來(lái)了。由于紅色的使用相當之可知，稍加點(diǎn)綴，不會(huì )顯得過(guò)猶不及，這一切讓整個(gè)配色脫穎而出。

需要規避的用色

棕色通常能給人以自然的感覺(jué)，但是這種色彩通常都不為男性所喜。但是在有的場(chǎng)合，棕色能讓人產(chǎn)生可靠和安全的感覺(jué)，這個(gè)時(shí)候使用還是挺不錯的。

作為一家著(zhù)名的物流公司，UPS使用棕色能給用戶(hù)一種強烈的可被依賴(lài)的感覺(jué)。

但是作為懷俄明州大學(xué)橄欖球隊的隊服的用色，這套配色方案被評為史上最差的設計方案。最有趣的地方在于，這套棕色的隊服大家一致認為它非常的耐用，但是與此同時(shí)也 非常的難看。男性對于色彩的認知在這一設計上體現得淋漓盡致。

在女性用戶(hù)這邊，橙色也是相對不那么受歡迎的色彩，所以，如果你的客戶(hù)是女性的話(huà)，盡量避免這一點(diǎn)。

當然，這些規則大都是一些指引性的條目，它們通常都有上下文和使用場(chǎng)景，色彩只有和諧搭配起來(lái)才會(huì )看起來(lái)漂亮而合用。

配色和取色工具

用現成的配色方案和調色板其實(shí)理所當然的事情，你并不需要為網(wǎng)頁(yè)設計或者UI設計方案單獨創(chuàng )造色輪。

Adobe Color CC – Adobe出品的配色工具，之前被稱(chēng)為Kuler。

Paletton – 這是一套為初學(xué)者準備的取色工具。

Flat UI Color Picker – 這是一套扁平化配色工具

Mudcube Color Sphere – 內置了一系列色彩主題，相應的配色都包含了相應的HEX代碼。

Check My Colours – 這個(gè)工具是用來(lái)堅持前景和背景的色彩組合的，它能提供正確的對比度檢測，確保色盲用戶(hù)也能正常分辨色彩。

Color – 這個(gè)工具允許你用鼠標在屏幕上取色，設置飽和度，并且提供相應的HEX代碼。

案例分析

網(wǎng)絡(luò )上有成千上網(wǎng)的網(wǎng)站，其中有許多不錯的站點(diǎn)，但是絕大部分和優(yōu)秀無(wú)關(guān)。不過(guò)下方的網(wǎng)站，正是優(yōu)秀的那波中的一員，它曾榮獲Awwwards 的每日最佳網(wǎng)站的頭銜。

網(wǎng)站的背景色使用的是淺灰，同其中電動(dòng)車(chē)的配色同系。整個(gè)頁(yè)面設計簡(jiǎn)單，超大的字體和小巧的車(chē)體形成對比，傳達出電動(dòng)車(chē)小巧靈活的特性。作為中性色 的灰色，讓頁(yè)面中其他的色彩更加鮮艷也更加顯眼，對比明顯，也賦予了頁(yè)面以活力。同時(shí)，灰色的主色調，也強調了產(chǎn)品和品牌沉穩大氣的一面。

巨大的Go，配色開(kāi)朗活潑，漸變和鮮亮充分展現了設計的現代性。很重要的一點(diǎn)是，藍色是男性和女性都非常喜歡的色彩，這一點(diǎn)使得網(wǎng)站是不針對性別進(jìn)行區別的�；疑�還帶有克制和環(huán)保的特性，結合電動(dòng)車(chē)小巧的設計，整個(gè)設計還在暗示產(chǎn)品的環(huán)保和安全的特性。

總體而言，這個(gè)頁(yè)面的生活感和現代感和當代都市人的狀態(tài)契合度非常高。

最后的注意事項

色彩是產(chǎn)品設計的重要部分，同時(shí)也是品牌設計中至關(guān)重要的一環(huán)。所以，在設計網(wǎng)站或者UI的時(shí)候，色彩傳達的意義必須同品牌契合，將品牌故事和意義 融入到設計到中來(lái)。通常情況下，設計師會(huì )直接從品牌的LOGO或者品牌設計指南來(lái)取色，盡管這樣會(huì )有局限，但是這確實(shí)可以讓事情變得更簡(jiǎn)單。

　　大同市宏微信息技術(shù)有限公司主要從事技術(shù)開(kāi)發(fā)、技術(shù)服務(wù)、技術(shù)轉讓?zhuān)浑娔X圖文設計、制作；網(wǎng)站網(wǎng)頁(yè)設計、維護；廣告設計、制作及發(fā)布；公司主要技術(shù)人員在大同制作網(wǎng)站、大同建站、大同做網(wǎng)站、大同網(wǎng)站建設、大同網(wǎng)站制作、大同網(wǎng)頁(yè)設計、大同網(wǎng)絡(luò )開(kāi)發(fā)、大同網(wǎng)站優(yōu)化等方面有多年豐富的從業(yè)經(jīng)驗。