網頁設計中的色彩心理學

2020-12-05 網際網路那點事

作者 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. 避免視覺超載,過與不及都不好,請記得留白的藝術,我們不想讓瀏覽者看到一個失控的調色盤對吧。
來源:http://www.techug.com/psychology-of-color-to-increase-website-conversions



相關焦點

  • 色彩心理學 黑色心理學
    碩博心理撰稿人:劉剛大家好,這裡是碩博心理,我是劉老師,我們接著來學習和色彩心理學有關的知識。今天我們要來講的是色彩心理學中的黑色心理學。想到黑色你會想到些什麼?是天黑、烏鴉、還是煤炭?又或者會想到一些不那麼美好的詞語,比如黑暗和骯髒?想到黑色,不知道怎麼的,感覺就變得安靜起來。一般在色彩的世界裡認為,黑天鵝絨是世界上最深的顏色。
  • 色彩心理學:藍色心理學(下)
    碩博心理撰稿人:劉剛大家好,這裡是碩博心理,我是劉老師,我們接著來學習和色彩心理學有關的知識。今天我們要來講的是色彩心理學中的藍色心理學。藍色在這則典故中就被渲染成帶有絕望情愛的浪漫色彩。在現代電影中,美國好萊塢曾於1940年拍攝過一部黑白愛情電影,原片名叫做滑鐵盧橋,這座真的橋呢,建於英國的倫敦。
  • 花瓣網上五個必看的網頁專題設計畫板
    一年一度的電商促銷高潮即將到來,去年天貓的雙11還歷歷在目,電商大戰在即,而UI設計師也是這場大戰中不可或缺的主力軍,各種讓人眼花繚亂的網頁專題設計可也是抓住網友眼球的重要利器哦,下面分享幾個花瓣網上設計師自己整理的專題設計類畫板,作為UI設計師的你可千萬不要錯過哦!
  • 關於閱讀型網頁設計,這幾點你要注意
    網際網路的高速發展使得我們每天花在網頁上的時間越來越多,網頁設計的重要性不言而喻。本文作者以閱讀型網頁設計為例,談談哪幾點是需要特別注意的,希望對你有幫助。
  • 國外30個精彩的插畫網頁設計實例
    站長之家(CHINAZ.com)10月28日編譯:在網頁設計中使用插畫設計已經越來越流行了,各種形狀和大小的插畫也已層出不窮,將插畫和網頁設計結合在一起,可以為網頁設計增加趣味性,但要使插畫與網站信息風格相一致還需要設計者們不斷探索鑽研,這裡便收集了國外30個精彩的插畫網頁設計實例
  • UI設計中色彩搭配使用技巧
    成熟的UI設計師在色彩搭配上可以激發情緒反應,吸引用戶關注。那麼要想成為一名出色的UI設計師在顏色搭配以及對色彩時刻的保持高度敏感。下面胡老師就跟大家聊聊顏色特徵以UI設計中色彩的使用技巧。
  • 學平面設計一般會遇到哪些問題?怎麼避免?
    1、了解平面設計 都說知己知彼,百戰不殆,作為一個新手從零開始學平面設計,首先要弄明白的是平面設計是什麼。 2、掌握軟體操作 平面設計主要涉及到的軟體,包括PS、CDR、AI。軟體是設計中最基礎的,要掌握好。
  • 有故事的網頁設計——Flash網站奇妙之旅
    當瀏覽網頁時,總有那麼一類網站華麗而富有趣味性。在瀏覽信息的同時,足夠讓我們眼前一亮。它們在充分融入動畫、視頻、遊戲、甚至是與眾不同的交互操作而使網站效果令人驚奇,這些基於flash設計的網站,讓網頁從平面變身立體,從靜態變得有故事有情節。 如果將fash技術用於個人作品集製作或者企業推廣時,網頁設計便成為了一種有故事有情節的藝術,它們是那樣富有活力而創意獨特。
  • 網頁中這10種字體的運用方式,不會讓人覺得Low
    對於設計師而言,在日常的平面和 UI設計中,給字體增加特效一直都是一件惱人的事情。客戶提出的浮雕特效或者大陰影的需求,但是直接按照要求來設計可能會毀掉整個設計。更多時候,你需要的是一些相對優雅但是又足夠吸引人的字體效果,讓整個設計項目的走向更加合理。字體特效非常多,有目的地選取合理的特效是讓它們發揮效果的訣竅所在。
  • 室內設計中色彩配色方法及注意事項
    室內色彩除了對視覺環境產生影響外,還直接影響到人們的情緒和心理。科學的用色有利於工作,有助於健康。二種色以上的組合叫配色,若配色給人以愉快感就調和,相反,配色給人以不愉快的感覺就是不調和。可是,人的感覺會有相當的差別,因為色彩的性質是很複雜的。
  • 用設計實例看心理學如何發揮作用
    本文介紹五種心理學理論及其設計應用,希望能夠幫助你對設計中如何使用心理學有一個新的認識。一、雙重編碼理論(Dual-Coding Theory)雙重編碼理論是由加拿大心理學家佩維奧在20世紀60年代末、70年代初提出的知識認知表徵理論。
  • 心理學:通過色彩便能了解一個人的性格,看看你喜歡哪個顏色?
    心理學中,紅色表示快樂、熱情,它會使人情緒熱烈、飽滿,激發愛的情感等;黃色表示快樂、明亮,會使人變得興高採烈,充滿喜悅之情;綠色表示和平,使人的心理充滿安定、恬靜、溫和之感;藍色給人以安定、平靜、涼爽、舒適之感,使得人們心胸開朗;灰色會讓人感到壓抑、空虛;黑色使人感到莊嚴、沮喪和悲哀
  • 超讚icon圖標光影色彩設計分享
    UI設計 Weixin ID mobileui
  • 平面設計色彩搭配有哪些技巧
    本文由:「學設計上兔課網」原創,圖片素材來自網絡,僅供學習分享 平面設計色彩搭配有哪些技巧?顏色在平面設計中是一種非常重要的元素,而且顏色不會單獨存在。
  • UI設計基礎-卡片化設計篇
    Hello Everybody~今天給大家帶來的文章是網頁設計中的卡片設計,將針對網頁設計中的卡片作出分析,作為網頁設計師,您如何使用卡片?設計卡時,應注意什麼?下面就讓我們一起來看看吧!「我要一張卡片」,這是客戶在與我談論需求時在上一期中所說的第一個需求點。毫無疑問,卡片化類型對於PC和行動電話都非常適用。
  • 關於扁平化設計,你還需要知道這些
    扁平化設計的主要原則色彩我們先從色彩開始吧:對色域的大膽運用是扁平化設計的標誌之一。Windows 8首先使用了具有明亮色彩的分層。使用色彩和大小都不同的元素能便捷地創建分層。過去,設計中色彩的主要目的是提升程序的使用效率,但事實證明它在創造審美效果上也同樣出色。
  • 中企動力提醒你!Google對只有PC版本的網頁將不再收錄
    NEWS谷歌在站長世界(webmaster)舉辦的2020 PubCon大會上表示:「2021年3月份起,只有PC版本的網頁內容將被完全忽略,所有內容必須對移動端可用,包括文字、數據、圖片、視頻等。」谷歌不收錄只有pc埠的網站01其實早在2018年8月,谷歌就明確建議網頁製作時使用響應式技術,並給出6點理由:1.頁面唯一性,PC/移動統一管理2.響應式網頁更利於Google對頁面索引屬性的創建3.相同內容,PC和移動無需單獨維護4.降低可能影響移動端頁面表現的風險5.減少加載時間,提升用戶體驗
  • 在網頁中插入在線QQ客服
    在網頁中插入在線QQ客服,讓瀏覽網頁的訪客可以通過QQ進行諮詢、交談。用百度搜索「QQ在線狀態」,打開網站後,使用要用作在線客服的QQ號碼登錄如圖:在「請選擇組件樣式」中選擇自己喜歡的外觀填寫提示語,如圖:在「複製這段代碼並將其粘貼到您的網頁上」下面的文本框中會自動生成對應的代碼點擊「複製代碼」按鈕,複製代碼把代碼粘貼到自己的網頁當中在瀏覽器中打開自己的網頁,點擊 QQ圖標 ,就可以直接進行聊天了。
  • 發揮心理學在健康中國建設中的作用
    原標題:發揮心理學在健康中國建設中的作用   習近平總書記在全國衛生與健康大會上強調,要「將健康融入所有政策」。在這一精神指導下,服務健康中國建設成為所有學科共同承擔的時代使命,心理學也應積極拓展參與健康中國建設的著力點與關注面,更為全面有效地助推健康中國戰略的實施。
  • 「您要找的網頁不存在」,舶來品「404 錯誤」簡史
    編者註:「404 錯誤」是一個網頁錯誤代碼,代表該網頁不存在。這是現在人人都知道的常識,但是關於它的歷史來源,卻充滿著神秘色彩。有人說,以前整個網際網路的伺服器都裝在歐洲某地一個叫做 404 的房間裡,如果你要訪問網絡內容,就得向這個房間提交請求,如果找不到就會提示你「404 not found」。