當(dāng)前位置：首頁 > 觀瀾網(wǎng)頁設(shè)計觀瀾網(wǎng)頁設(shè)計

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

日期：2019-03-18 人氣：1212067

導(dǎo)讀：色彩心理學(xué)被廣泛應(yīng)用于設(shè)計的各個方面，這已經(jīng)不是什么秘密了。從色彩用于日常的雜貨，到品牌標(biāo)識和網(wǎng)站設(shè)計的顏色，顏色是傳達特定信息給用戶的一個重要因素。色彩心理學(xué)被廣泛應(yīng)用于設(shè)計的各個方面，這已經(jīng)不是什么秘密了。從色彩用于日常的雜貨，到品牌標(biāo)識和網(wǎng)站設(shè)計的顏色，顏色是傳達特定信息給用戶的一個重要因素。根據(jù)線上網(wǎng)站Kissmetrics（1）網(wǎng)絡(luò)數(shù)據(jù)分析

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

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

科學(xué)告訴我們，顏色可以引起我們消極的負(fù)面感覺。Kissmetrics還表明，對于一個站點來說，訪問者只需花費90秒就可以做出判斷或者意見。進一步來說,“62％—90％的交互是由產(chǎn)品自己的顏色決定的。”

正如《Web UI Design for the Human Eye》（2）這本免費的書中所描述，顏色在給用戶創(chuàng)造強烈的第一印象上扮演了一個不可否認(rèn)的角色。

顏色的含義是什么

對于每個人來說，每種顏色都意味著些什么，盡管這些意義取決于我們個人的喜好和文化背景�？纯聪旅娴纳ǎ梢宰鳛橐粋€顏色含義的快速參考。

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

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

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

（如果想要了解更多關(guān)于簡約設(shè)計，并使用空余時間作一個設(shè)計工具，可以看看這些免費的電子書《The Elegance of Minimalism 》（3）和《 The Zen of White Spacliae in Web Design》（4）。）

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

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

確定顏色主題

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

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

1，三角色彩計劃

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

2，復(fù)合色（互補色）

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

3，近似色

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

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

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

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

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

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

避免一些顏色

棕色在設(shè)計中通常會喚起自然感，但是這個顏色是大多數(shù)男性最不喜歡的顏色，但它確實在某些情況下工作使用，因為用它來表示可靠性。

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

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

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

一些工具來幫助你選擇正確的顏色

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

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

（https://color.adobe.com/zh/create/color-wheel/）

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

（http://paletton.com）

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

（http://www.flatuicolorpicker.com/all）

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

（chrome-extension://knomilfbnhpkmibhmleppnkmcempglag/app.html）

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

（http://www.checkmycolours.com/#）

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

(http://color.hailpixel.

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

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

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

最后注意事項

色彩是設(shè)計的一個重要組成部分，也是整個品牌重要的一部分。所用的顏色所傳達的意義必須喝品牌個性和品牌故事一致。通常情況下，設(shè)計師有時不得不用現(xiàn)有的藝術(shù)作品，如 logo，并且不得不再此基礎(chǔ)上選擇顏色。然而這過程似乎是被完全壓縮了的，但調(diào)色板的實用性也許可以讓你在做的過程中比較容易些。