萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 網頁設計中的色彩心理學

網頁設計中的色彩心理學

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

網頁設計中的色彩心理學 三聯

  作者是位顧問,曾幫多家公司做出適當轉型,讓其營利上升,來看看他有些什麼秘訣。

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

  經由線上網站 QuickSprout 的研究顯示,顏色可以影響 90% 的產品評價;數位行銷專家 Neil Patel 指出,85% 購買產品的原因是出自於顏色,而色彩對於網路上各式各樣的網站設計當然也具有一定影響。

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

  什麼是色彩心理學?

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

  在一篇文獻探討中,Satyendra Singh 認為顧客在 90 秒內就會決定一項產品的觀感,其中色彩就佔 62%-90% 的決定性因素,色彩心理學的重要性因此不証自明,產品要成功,選色很重要,領導者、經理人、建築師、主廚、設計師等等都應該正視顏色帶來的影響。

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

  跳到正題,既然顏色這麼重要,那要用在哪裡才能真正發揮功效?本文將討論各種網頁上的顏色設計運用,最主要將著重在網站的主色調上,包含網頁主圖、標題、隔線、背景色、連結紐以及彈出視窗都在討論范圍內。

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

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

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

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

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

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

  其他研究也顯示女性較不偏好大地色系,只要看看瞄准女性做為主要客群的線上購物網站就可證實。

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

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

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

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

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

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

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

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

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

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

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

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

  黃色代表警告

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

  關於黃色,大家的意見比較分歧,有人說黃色代表快樂,Business Insider 就報導使用黃色的品牌,展現出他們的風趣與親和力,黃色也代表童心,不過黃色能夠直接刺激大腦的興奮區塊,大腦很可能只是以高昂的情緒作為反應,而不代表喜悅。

  顏色心理學與記憶和經驗有極高的關聯,所以說如果某人的開心記憶,是有關於穿著黃衣的麥當勞叔叔,做在黃紅配色的速食餐廳裡吃炸得黃澄澄的數條,那麼自然日後他看到黃色就會喚起當初的開心回憶。

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

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

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

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

  為環境或戶外產品選用綠色吧

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

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

  話到這裡,如果你的網站是有關自然、環境、有機或是戶外活動的話,綠色絕對是上乘之選。做個小結,綠色就是環保意識的代表色,使用綠色還可以提昇顧客對於此網站的環保評價,可謂一舉多得。

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

  看看?Conrad Feagin?怎麼做:

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

copyright © 萬盛學電腦網 all rights reserved