如何做出打動使用者的網頁設計，色彩心理學有解

 

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

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

經由線上網站 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 怎麼做：

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

橘色激發熱情與衝動

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

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

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

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

有時候，橘色也意味著廉價，Forbes 就曾經在文章中提出橘色是否意味著廉價的問題，答案是肯定的，如果你的產品不走高端路線，又想要使用低價策略宣傳，用橘色就對了，看看樂透 Big Lots 即明瞭。

黑色為網站增加奢華質感

根據色彩心理學，越深的色調質感越好，一篇來自 Lifescript 的文章中，描述黑色代表優雅、複雜、力量，這也是許多高端精品設計師或是時尚網站希望表現的成果。那篇文章也描述黑色代表永恆、經典，因此被廣泛運用在精品中，例如 Chanel 的小黑洋裝就是一例。

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

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

鐘錶品牌 Citizen Watch 的網站也是走黑色路線。

就連藍寶堅尼的網站也是一片黑，但跑車烤漆在全黑網站的設計下，仍然閃耀光彩。

所以，高端精品的網站設計中，黑色絕對是個最常被使用來表達品牌質感、精緻獨特性的愛用色之一。

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

在許多測試中，結果發現使用明亮的底色，例如白色，配上鮮豔的紅、綠、橘、黃等色，最能引起注意力；而深色在這方面的成效遠遠輸於明亮色彩。

Women’s Health 網站就使用這樣的策略，他們使用白色做底色，與女性相關的桃紅色作為標語。

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

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

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

別忽略白色

在大多數有關色彩研究的文獻中，我發現有一個顏色被大量忽略，或許是色彩學家無法認定白色到底算不算一種顏色，但不管怎樣，留白是一種藝術，更是一種極佳策略。看看 Google 首頁

白色常被忽略，因為太常被用為基本底色，可是大部分有設計感的網站都會適當的留白，創造出自由感、空間感。

• 結論

網站設計基本上就是顏色運用的戰場，本文的用意就是希望大家檢視自家網站的顏色運用是否正確，並且開始思考然後做出調整。

如果你的網站顏色真的一團糟那就換掉吧，如果你是個高跟鞋設計師，使用橘色的商標，那麼最好趕快跟老闆或是網站設計師討論一下改標，不可否認有時候大家選錯顏色，但是既然現在知道這可能是個錯誤，倒不如大家坐下來談談為上策。

用色彩心理學檢視目前現有的色調運用，若你有個藍色調的網站，那麼或許可以加上一個亮黃色的彈出廣告，很刺眼但是絕對吸引注意力。

若對於網站色調能有更大的調整空間那自然最好，你可以這樣做：

1. 嘗試不同的顏色。試試看綠色、紫色、黃色，嘗試黑色背景，或是白色背景哪個比較好，總而言之，尋找哪種組合對你的網站、瀏覽者最有效。
2. 不要把色彩選擇全部丟給網站工程師決定，當然工程師有他們的專業部分，但是自己的視覺架構自己想！顏色關乎到網站成效與顧客滿意與否，至少在選色的時候，多多為自己的網站發表些意見。
3. 避免視覺超載，過與不及都不好，請記得留白的藝術，我們不想讓瀏覽者看到一個失控的調色盤對吧。

---

（資料來源：entrepreneur；圖片來源：taminator, CC Licensed）

文章出處:

http://buzzorange.com/techorange/2014/07/01/how-to-use-the-psychology-of-color-to-increase-website-conversions/