色彩心理學(xué)在網頁設計中的應用

　　一、顔色心理學(xué)

　　在設計的各個方面(miàn)都(dōu)被廣泛使用，這(zhè)已不是什麼(me)秘密。從日常中使用的顔色，到品牌标識和網站設計，顔色是可以向(xiàng)用戶傳達特定消息的重要元素。

　　

　　當我們觀察一種(zhǒng)顔色時(shí)，我們的眼睛會(huì)向(xiàng)大腦中稱爲下丘腦的區域發(fā)送信息。反過(guò)來，這(zhè)會(huì)向(xiàng)腦下垂體發(fā)送更多信号，然後(hòu)再向(xiàng)甲狀腺發(fā)出信号。然後(hòu)，這(zhè)表明激素的釋放會(huì)導緻我們的情緒，以及我們的行爲發(fā)生波動。

　　科學(xué)告訴我們，顔色會(huì)喚起(qǐ)情緒，導緻消極，積極或不匹配的情緒。Kissmetrics接著(zhe)說(shuō)，網站訪問者隻需90秒即可形成(chéng)判斷或意見。除此之外，“62-90％的相互作用僅取決于産品的顔色。”

　　正如免費電子書Web Eye for Human Eye所描述的那樣，色彩在爲用戶創造強烈的第一印象方面(miàn)起(qǐ)著(zhe)不可否認的作用。

　　二、顔色意味著(zhe)什麼(me)

　　每種(zhǒng)顔色對(duì)每個人都(dōu)意味著(zhe)什麼(me)，盡管這(zhè)意味著(zhe)我們的個人喜好(hǎo)和文化背景。

　　如需快速參考，請查看下面(miàn)的顔色表。

　　通過(guò)動畫網站和網絡演示給您的觀衆留下深刻印象。使用幻燈片，我們不會(huì)讓您從空白的闆岩開(kāi)始。您所要做的就(jiù)是選擇您最喜歡的元素并將(jiāng)它們組合起(qǐ)來。每張幻燈片都(dōu)經(jīng)過(guò)精心設計，以滿足三個關鍵标準：美學(xué)，功能(néng)和可用性。通過(guò)這(zhè)種(zhǒng)方式，您可以無縫地協同工作，同時(shí)增強内容的影響力。

　　創建一個網站

　　

　　設計中的色彩心理學(xué)不是一門精确的科學(xué)，研究表明它受個人感知的影響。性别等社會(huì)因素也會(huì)對(duì)顔色的感知産生影響。進(jìn)一步的研究發(fā)現，産生影響的顔色本身并不總是如此，用戶對(duì)所使用的顔色的使用感覺是多麼(me)合适。

　　

　　因此，如果你是爲女性設計，那麼(me)紫色是一個相當不錯的選擇，因爲它受到女性的普遍喜愛，但是男性卻不喜歡（當然，一般來說(shuō)）。在下圖中，這(zhè)對(duì)L'Oreal Paris來說(shuō)效果很好(hǎo)。正如您所看到的，頁眉和頁腳是黑色的，這(zhè)表示類和優雅，因此您可以獲得産品不便宜但高端的整體感覺。

　　

　　此外，白色用于文本，表示現代性和平靜感，而紫色被選擇表示奢華，優雅和女性氣質 - 所有這(zhè)些都(dōu)明顯适合這(zhè)樣的網站。

　　在下面(miàn)的圖片中，對(duì)于女性健康雜志，頂部的橫幅是粉紅色的，但是該網站相對(duì)缺乏顔色，而是依賴于圖像和粗體導航。這(zhè)是一個有趣的選擇，可以對(duì)網站起(qǐ)作用。

　　首先，粉紅色是一種(zhǒng)非常刻闆的顔色，當一個網站針對(duì)女性時(shí)使用它，并且它吸引甜食，所以該網站的信息，因爲這(zhè)是關于女性的健康，可能(néng)會(huì)因此而丢失。

　　

　　一旦我們進(jìn)一步鑽研網站，标題顔色當然會(huì)在每個頁面(miàn)上使用，但快速訪問減肥部分將(jiāng)返回以下内容。

　　

　　正如您所看到的，此頁面(miàn)更加粉紅色，這(zhè)可能(néng)會(huì)對(duì)觀衆起(qǐ)反作用。但是，我們碰巧看到的第一個圖像位于滑塊上，當您保留在頁面(miàn)上時(shí)，這(zhè)确實會(huì)發(fā)生變化。

　　三、确定配色方案

　　你不太可能(néng)創建一個隻有一種(zhǒng)顔色的網站（除非你純粹是單色），所以你應該考慮整體配色方案和每種(zhǒng)顔色，以及它們如何協同工作。還(hái)要考慮對(duì)用戶的影響以及次要顔色如何與您正在使用的主要顔色相匹配。

　　考慮到這(zhè)一點，在將(jiāng)顔色混合在一起(qǐ)時(shí)應注意并爲此提供幫助，您可以通過(guò)三種(zhǒng)基本的混色方法來指導。

　　1、三重奏

　　這(zhè)是最基本和平衡的方法，它使用色彩活力和互補。使用12步色輪，您可以選擇任意三種(zhǒng)顔色，這(zhè)些顔色彼此相隔120度，用于背景，内容和導航。

　　

　　2、化合物（分裂互補）

　　第二種(zhǒng)方法有點困難，你可能(néng)需要進(jìn)行試驗以使其正确，但如果做得好(hǎo)就(jiù)可以非常有效。這(zhè)個概念使用四種(zhǒng)顔色 - 兩(liǎng)對(duì)對(duì)比（靠近色輪）和兩(liǎng)對(duì)互補對(duì)（在色輪上）。

　　

　　3、類比

　　此方法僅關注補色，在決定您希望方案對(duì)用戶說(shuō)什麼(me)時(shí)應該注意。因爲它突出了所選顔色的活力，所以它可能(néng)太多，因爲顔色基本上是誇張的。

　　

　　因此，在考慮顔色的心理時(shí)，重要的是要將(jiāng)所有顔色作爲一個整體考慮，以及它們如何協同工作，而不是僅選擇一個顔色，并希望它能(néng)與其他顔色一起(qǐ)工作，如背景，文本和按鈕。請查看下面(miàn)的頁面(miàn)，并考慮它對(duì)用戶說(shuō)的内容。

　　

　　　　黑色背景表示階級，卓越，形式和“企業”。顯然，在考慮提供指導的網站時(shí)，您希望傳達卓越性。形式化表明它與學(xué)習有關，而“公司”則表明用戶可能(néng)不會(huì)學(xué)習編碼作爲業餘愛好(hǎo)，而是作爲他們在職業生涯中可以采取的東西。

　　按鈕顔色該網站使用紅色按鈕顯示CTA按鈕，這(zhè)些按鈕在黑色背景下清晰突出，以鼓勵注冊。黑色與白色邊框一起(qǐ)用于不太重要的按鈕，與整體方案保持一緻。

　　文字顔色對(duì)于文本，白色提供了所有重要的對(duì)比度，同時(shí)仍然匹配顔色方案。白色（和白色幽靈按鈕）中的圖标放置在折疊處，以鼓勵用戶向(xiàng)下滾動以獲取更多信息（如有必要）。

　　總的來說(shuō)，設計非常有效 - 我們都(dōu)知道(dào)黑白相處得很好(hǎo)，在這(zhè)種(zhǒng)情況下，網站感覺優雅和相對(duì)正式。紅色，如果過(guò)度使用，可能(néng)會(huì)從整體消息中獲取意義，因此爲了脫穎而出并明确表示所需操作是注冊服務而非常謹慎地使用它。

　　四、要避免的顔色

　　布朗一般在設計中喚起(qǐ)自然的感覺，是男人最不喜歡的顔色，但它在某些情況下确實有效，因爲它表示可靠性。

　　

　　因此棕色适用于UPS，因爲它是一家希望傳達可依賴的強烈信息的公司。

　　然而，作爲一個運動套件，由于圖像中顯示的條帶屬于懷俄明州學(xué)院團隊，它被描述爲大學(xué)橄榄球史上最糟糕的。有趣的是，棕色也被認爲可以促進(jìn)“堅固性”，所以你會(huì)認爲它與這(zhè)種(zhǒng)激進(jìn)的運動搭配起(qǐ)來會(huì)起(qǐ)作用，但在這(zhè)種(zhǒng)情況下它并不是因爲男人通常不喜歡棕色。

　　對(duì)于女性來說(shuō)，橙色似乎是最不喜歡的顔色，所以如果你是爲一個主要的女性用戶群設計，請記住這(zhè)一點。

　　當然，請記住這(zhè)些隻是指導方針（它們總是取決于背景），所有顔色相互補充并創造和諧更爲重要。

　　五、幫助您選擇正确顔色的工具

　　您當然可以使用現成(chéng)的調色闆來幫助您做出選擇。在Web UI設計方面(miàn)，您無需重新發(fā)明色輪。

　　Adobe Color CC

　　所有Adobe用戶的可信賴提供商。

　　Paletton

　　适合初學(xué)者的簡單顔色選擇器。

　　平面(miàn)UI顔色選擇器

　　用于創建彩色平面(miàn)設計

　　Mudcube Color Sphere

　　提供各種(zhǒng)主題并提供十六進(jìn)制數字。

　　檢查我的顔色- 用于檢查前景色和背景色組合，并且它具有正确的對(duì)比度，供有色盲的人使用。

　　顔色- 允許您通過(guò)在屏幕上移動鼠标來選擇顔色，設置飽和度然後(hòu)獲取HEX代碼。

　　六、通過(guò)實例學(xué)習

　　有成(chéng)千上萬的網站使用顔色效果很好(hǎo)，而很多網站都(dōu)沒(méi)有。然而，下面(miàn)的圖片赢得了每日網站的顔色區分，很容易理解爲什麼(me)。

　　

　　背景是均勻的淺灰色，與自行車的灰色很好(hǎo)地匹配。簡單的設計，大字體非常有效，并立即傳達出它是一個你喜歡騎的快速小自行車的感覺。

　　使用灰色可以使其他顔色脫穎而出，因爲它是一種(zhǒng)中性色，随著(zhe)它變亮，它會(huì)照亮頁面(miàn)并使其活躍。格雷也給人一種(zhǒng)穩定感（非常适合自行車廣告），同時(shí)營造出一種(zhǒng)平靜和鎮定的感覺。

　　“Go”一詞中使用的顔色明亮活潑，爲設計增添了活力感和現代感。它主要是藍色的，因爲這(zhè)是男性和女性都(dōu)喜歡的顔色，它确保頁面(miàn)不是針對(duì)性别的。綠色增加了很少，這(zhè)表明了一種(zhǒng)環境責任感。這(zhè)本身就(jiù)非常聰明，因爲這(zhè)種(zhǒng)尺寸的自行車當然不會(huì)消耗汽油，對(duì)于環境而言比汽車更好(hǎo) - 這(zhè)當然是我們已經(jīng)知道(dào)的事(shì)情，但是加強信息是件好(hǎo)事(shì)。

　　總的來說(shuō)，該頁面(miàn)讓您了解滑闆車如何成(chéng)爲現代城市生活的完美之選。

　　七、最後(hòu)的考慮因素

　　顔色是設計的重要組成(chéng)部分，但它也是整個品牌的重要方面(miàn)。所使用的顔色傳達的感覺必須與品牌個性相匹配，并增加整體品牌故事(shì)和意義。

　　通常，設計師可能(néng)必須使用現有的藝術品，例如徽标，并且必須基于此選擇顔色。雖然這(zhè)可以看作非常緊湊，但是可以使用調色闆來使這(zhè)個過(guò)程變得更加容易。