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

2 評論 14830 瀏覽 16 收藏 19 分鐘

笑天涯說:為什么Facebook的主題色是藍色的?為什么淘寶的主題色是橙色的?如何在網(wǎng)頁設(shè)計時,正確地使用色彩?欲知個中緣由和方法,且看本文分解!

作者是位顧問,曾幫多家公司做出適當(dāng)轉(zhuǎn)型,讓其營利上升,來看看他有些什么秘訣。

色彩影響人類心情與思考這件事情是真的,當(dāng)眼睛看到某種顏色時,會將此訊息傳回大腦的下視丘,經(jīng)由一系列的神經(jīng)傳達,刺激甲狀腺分泌賀爾蒙,進而造成情緒、情感或是實際反應(yīng)。

經(jīng)由線上網(wǎng)站 QuickSprout 的研究顯示,顏色可以影響 90% 的產(chǎn)品評價;數(shù)位行銷專家 Neil Patel 指出,85% 購買產(chǎn)品的原因是出自于顏色,而色彩對于網(wǎng)路上各式各樣的網(wǎng)站設(shè)計當(dāng)然也具有一定影響。

跟相親一樣,第一印象很重要;只要抓住色彩使用的箇中奧妙,就等于抓住讀者的心。

什么是色彩心理學(xué)?

在我們開始談色彩攻略之前,先來談?wù)勆市睦韺W(xué),字面上來講就是研究色彩如何影響心理的學(xué)問,有些人因為還沒有大量文獻研究背書,而對色彩心理學(xué)抱持懷疑立場,而我接下來要探討色彩對于人的觀感影響也不是每一項都經(jīng)由科學(xué)證實,但是色彩對于認知行為的影響實在非常巨大,因此仍有探討的必要性存在。

一篇文獻探討中,Satyendra Singh 認為顧客在 90 秒內(nèi)就會決定一項產(chǎn)品的觀感,其中色彩就佔 62%-90% 的決定性因素,色彩心理學(xué)的重要性因此不証自明,產(chǎn)品要成功,選色很重要,領(lǐng)導(dǎo)者、經(jīng)理人、建筑師、主廚、設(shè)計師等等都應(yīng)該正視顏色帶來的影響。

色彩用對地方才能穿透人心

跳到正題,既然顏色這么重要,那要用在哪里才能真正發(fā)揮功效?本文將討論各種網(wǎng)頁上的顏色設(shè)計運用,最主要將著重在網(wǎng)站的主色調(diào)上,包含網(wǎng)頁主圖、標(biāo)題、隔線、背景色、連結(jié)紐以及彈出視窗都在討論范圍內(nèi)。

例如下圖,NinjaJump 在 logo、電話號碼、分類連結(jié)、副標(biāo)題連結(jié)、側(cè)邊連結(jié)都使用綠、黃、紅三色,我們要討論的重點也可以運用到選項欄位、側(cè)邊欄位與色彩策略等等。

色彩學(xué)真的非常精妙,不僅要用對地方,連天時地利人為因素都要加進去考量,才能展現(xiàn)威力。如果要在網(wǎng)頁上賣跳跳床,你絕對不會想到要用黑色,看看NinjaJump?網(wǎng)站。

身為一個賣跳跳床的網(wǎng)站,我們可以預(yù)期的是明亮有活力的配色,紅色、綠色、再加上一點亮澄澄的黃色對孩童與父母而言都是不錯的選擇。若今天的消費主要客群是女性,可能這招就不管用,L’Oreal 的網(wǎng)站就僅使用簡單的黑與白色,加上些許紫色增添層次感。

關(guān)于為何 L’Oreal 使用黑白兩色是正確的,我留到稍后解釋,首先再一次提醒運用色彩要注意:用對地方、用對時間、針對客群、針對目的,我們先來看看以下幾點。

女性不喜歡灰、橘與棕色;她們喜歡藍、紫與綠色。

Patel 利用性別來分類男女對于顏色有何不同的喜好,在一項顏色與性別的研究中,35% 的女性表示她們最喜歡藍色;再來是紫色占 23%、綠色占 14%。33% 的女性表示橘色是她們最不喜歡的顏色,再來是棕色 33% 與灰色 17%。

其他研究也顯示女性較不偏好大地色系,只要看看瞄準(zhǔn)女性做為主要客群的線上購物網(wǎng)站就可證實。

化妝品牌 Milani Cosmetics 專供女性市場,其網(wǎng)站首頁上沒有任何一點橘、棕、灰色。

Woman’s Day 則是把所有女性最愛的顏色 (藍、紫、綠) 都放上網(wǎng)頁設(shè)計了。

還是有人以為女生最愛粉紅色,請容我在這先翻個白眼,事實上只有少數(shù)女性會將粉紅色選為最喜愛的顏色,雖然粉紅色與女性柔若有相關(guān)聯(lián),但使用藍、紫、綠色,反而能夠有效增進女性購物者的造訪率。

男性不喜歡紫、橘、棕色;他們喜歡藍、綠與黑色

如果男性才是網(wǎng)站的主要針對客群,最好別用紫、橘、棕色。藍、綠與黑色在傳統(tǒng)上較常與男性氣息連結(jié)在一起,棕色竟然不在此列倒是讓人有點訝異。

藍色可以增進使用者的信任

藍色事實上是最被普遍使用的顏色,而且很多人喜歡,所以藍色是最溫暖的顏色(喂!)。

只要看看有關(guān)藍色的文獻探討,就可以發(fā)現(xiàn)藍色被認為是信任、和平、秩序、忠誠的象徵;也會讓人有冷靜下來的作用;甚至還可以將藍色直接代表寧靜。

在顏色對于心理影響的調(diào)查中,藍色傳達信任感與寧靜的作用是被證實過的,所以看看 Facebook 就知道,將藍色運用在主頁面上用以傳達核心價值:透明與信任。

如果 Facebook 的例子還不夠明顯,我們再來看看 Paypal,作為一個線上支付平臺,同樣也選擇藍色增進使用者的信任。如果他們用的是紅色或橘色,大概讓人以為是在跳樓大拍賣的機率還會高一點。

許多銀行也大量使用藍色作為視覺主軸,看看網(wǎng)路銀行 CapitalOne.com。

雖然藍色被大量使用,不過千萬切記別將藍色套用在與食物有關(guān)網(wǎng)站上,多半只有節(jié)食的人用藍色來幫助節(jié)食,而且從演化的角度來看,藍色的食物通常都被認為是有毒的,除了藍莓之外,能想到什么藍色食物是無害的嗎?好像沒有。

黃色代表警告

警告標(biāo)志、交通號志、小心地滑等告示通常都是用黃色,因為很顯眼容易引起注意。

關(guān)于黃色,大家的意見比較分歧,有人說黃色代表快樂,Business Insider 就報導(dǎo)使用黃色的品牌,展現(xiàn)出他們的風(fēng)趣與親和力,黃色也代表童心,不過黃色能夠直接刺激大腦的興奮區(qū)塊,大腦很可能只是以高昂的情緒作為反應(yīng),而不代表喜悅。

顏色心理學(xué)與記憶和經(jīng)驗有極高的關(guān)聯(lián),所以說如果某人的開心記憶,是有關(guān)于穿著黃衣的麥當(dāng)勞叔叔,做在黃紅配色的速食餐廳里吃炸得黃澄澄的數(shù)條,那么自然日后他看到黃色就會喚起當(dāng)初的開心回憶。

還有另外一項說法,認為黃色會引起小嬰兒哭泣,讓成人憤怒,到目前為止我并未找到證明此項說法的實證。

還有人說黃色會引起噁心反應(yīng),這到底是為何呢?

如果有鄉(xiāng)民找到證實黃色會引起小嬰兒大哭,或是讓人感到噁心的科學(xué)實證的話,歡迎在下方留言。

如果真像這篇所說,黃色可能引起焦慮的話,那在網(wǎng)頁設(shè)計時,就要將此因素納入考量,不要大量使用,酌量即可。

為環(huán)境或戶外產(chǎn)品選用綠色吧

綠色不用多說了,戶外、環(huán)保、自然、環(huán)境等等議題的萬年愛用色。綠色就是自然,自然就等于綠色,相信沒人會有異議。

除了綠色與戶外活動的直接關(guān)連外,也可以增進創(chuàng)意。綠色效應(yīng)實驗中,綠色顯著的增進受試者的創(chuàng)造力,效果超過其他顏色。

話到這里,如果你的網(wǎng)站是有關(guān)自然、環(huán)境、有機或是戶外活動的話,綠色絕對是上乘之選。做個小結(jié),綠色就是環(huán)保意識的代表色,使用綠色還可以提昇顧客對于此網(wǎng)站的環(huán)保評價,可謂一舉多得。

當(dāng)然綠色與雷斯多夫效應(yīng)( von Restorff effect)結(jié)合的話,效果更能加成。雷斯多夫效應(yīng)就是個人對于大量資訊,最容易記住最特殊的部份。大家記得自由女神就是因為那是一個非常高聳的綠色雕像,而且周邊景物中就他最顯眼。在色彩心理學(xué)中,雷斯多夫效應(yīng)只會發(fā)生在顯眼的目標(biāo)上,所以工程師若想要吸引使用者點擊某個按鈕,就把那個按鈕做得又大又綠吧。

看看?Conrad Feagin?怎么做:

戴爾電腦的加入購物車按鈕也是綠的

橘色激發(fā)熱情與沖動

橘色可以讓人覺得有趣新奇,甚至可以為活動帶來刺激、競爭、以及自信,這大概也是為何許多運動隊伍或是孩童產(chǎn)品會使用橘色做招牌。

看看這些logo、以及使用橘色的運動代表隊, Florida Gators、Clemson Tigers、Boise State Broncos、Syracuse、New York Knicks、New York Mets、San Diego Chargers 都是例子。

Amazon 使用橘色作為限時特價的促銷,讓人忍不住想要馬上購入一臺特價的 Kindle Fire。

橘色代表的主動積極、團結(jié)精神成為一種具象化刺激,因為這個顏色看起來非常鮮艷有活力,但有時候橘色的影響又會顯得太超過。Psych Answers.com就建議,橘色的確可以吸引注意,但是若是使用太過則會造成反效果。

有時候,橘色也意味著廉價,F(xiàn)orbes 就曾經(jīng)在文章中提出橘色是否意味著廉價的問題,答案是肯定的,如果你的產(chǎn)品不走高端路線,又想要使用低價策略宣傳,用橘色就對了,看看樂透 Big Lots 就知道了。

黑色為網(wǎng)站增加奢華質(zhì)感

根據(jù)色彩心理學(xué),越深的色調(diào)質(zhì)感越好,一篇來自 Lifescript 的文章中,描述黑色代表優(yōu)雅、復(fù)雜、力量,這也是許多高端精品設(shè)計師或是時尚網(wǎng)站希望表現(xiàn)的成果。那篇文章也描述黑色代表永恆、經(jīng)典,因此被廣泛運用在精品中,例如 Chanel 的小黑洋裝就是一例。

在 Business Insider 文章中,更加闡述黑色的重要性:黑色是代表奢華的顏色,被正確使用時,可以傳達無限風(fēng)華,以及其完美、不可取代性。

Louis Vuitton 2014 春夏系列的包款廣告就使用深色來呈現(xiàn)品牌獨特性,這同時也是 Marc Jacobs 待在 Louis Vuitton 的最后一季作品。

鐘錶品牌 Citizen Watch 的網(wǎng)站也是走黑色路線。

就連藍寶堅尼的網(wǎng)站也是一片黑,但跑車烤漆在全黑網(wǎng)站的設(shè)計下,仍然閃耀光彩。

所以,高端精品的網(wǎng)站設(shè)計中,黑色絕對是個最常被使用來表達品牌質(zhì)感、精緻獨特性的愛用色之一。

如果想要吸引注意,使用明亮色

在許多測試中,結(jié)果發(fā)現(xiàn)使用明亮的底色,例如白色,配上鮮艷的紅、綠、橘、黃等色,最能引起注意力;而深色在這方面的成效遠遠輸于明亮色彩。

Women’s Health 網(wǎng)站就使用這樣的策略,他們使用白色做底色,與女性相關(guān)的桃紅色作為標(biāo)語。

GreenGeek 則使用黃色作為按鍵顏色。

Green Geek

還有黃色的加入購物車按鈕

有時候最能引起注意力的顏色,反而是那些丑的顏色,ColorMatters.com網(wǎng)站就提到,在心理學(xué)上違反美感的顏色,有時更能吸引人們注意,在這樣的情況下,就可以使用黃色或是橘色。

別忽略白色

在大多數(shù)有關(guān)色彩研究的文獻中,我發(fā)現(xiàn)有一個顏色被大量忽略,或許是色彩學(xué)家無法認定白色到底算不算一種顏色,但不管怎樣,留白是一種藝術(shù),更是一種極佳策略??纯?Google 首頁

白色常被忽略,因為太常被用為基本底色,可是大部分有設(shè)計感的網(wǎng)站都會適當(dāng)?shù)牧舭祝瑒?chuàng)造出自由感、空間感。

結(jié)論

網(wǎng)站設(shè)計基本上就是顏色運用的戰(zhàn)場,本文的用意就是希望大家檢視自家網(wǎng)站的顏色運用是否正確,并且開始思考然后做出調(diào)整。

如果你的網(wǎng)站顏色真的一團糟那就換掉吧,如果你是個高跟鞋設(shè)計師,使用橘色的商標(biāo),那么最好趕快跟老闆或是網(wǎng)站設(shè)計師討論一下改標(biāo),不可否認有時候大家選錯顏色,但是既然現(xiàn)在知道這可能是個錯誤,倒不如大家坐下來談?wù)劄樯喜摺?/p>

用色彩心理學(xué)檢視目前現(xiàn)有的色調(diào)運用,若你有個藍色調(diào)的網(wǎng)站,那么或許可以加上一個亮黃色的彈出廣告,很刺眼但是絕對吸引注意力。

若對于網(wǎng)站色調(diào)能有更大的調(diào)整空間那自然最好,你可以這樣做:

嘗試不同的顏色。試試看綠色、紫色、黃色,嘗試黑色背景,或是白色背景哪個比較好,總而言之,尋找哪種組合對你的網(wǎng)站、瀏覽者最有效。

不要把色彩選擇全部丟給網(wǎng)站工程師決定,當(dāng)然工程師有他們的專業(yè)部分,但是自己的視覺架構(gòu)自己想!顏色關(guān)乎到網(wǎng)站成效與顧客滿意與否,至少在選色的時候,多多為自己的網(wǎng)站發(fā)表些意見。

避免視覺超載,過與不及都不好,請記得留白的藝術(shù),我們不想讓瀏覽者看到一個失控的調(diào)色盤,對吧?

本文轉(zhuǎn)載自:產(chǎn)品中國

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 錯別字 。。。

    來自安徽 回復(fù)