色彩背后的心理學:談談色彩在產品設計中的應用
不同的顏色往往給我們帶來不同的情緒與體驗。
顏色是可以給人類帶來不同情緒的美麗事物。我們會用用顏色區分相似的事物。
然而,在真實生活中,顏色并不存在。顏色在人腦的視覺系統中被建立。這意味著,顏色在本質上是主觀的,而非客觀的。
在設計中,顏色是抓住用戶注意力的關鍵因素。 人們在接觸一項新事物時,顏色是最最容易被記住的信息。顏色的設計往往和品牌息息相關。許多時候,人們是否購買一件商品,很大程度上取決于顏色。顏色對人們心理,有非常重要的影響。
Fact 01 : 對色彩的喜好,男女有別
男生喜歡的顏色,和女生喜歡的顏色,差別很大。
規律是:
- 男女最喜歡的都是藍色(所以很多產品都用藍色);都最不喜歡橙色。
- 男的喜歡大膽顏色,女的喜歡柔和顏色。
Men’s and women’s favorite colors
(from:The Psychology of Color in Marketing and Branding,by:GREGORY CIOTTI,2016.5.17)
Men’s and women’s least favorite colors
(from:The Psychology of Color in Marketing and Branding,by:GREGORY CIOTTI,2016.5.17)
所以,如果想設計一款主要面向女性的產品,可以參考使用女性普遍喜歡的藍色、紫色、綠色,較少使用女性不喜歡的橙色、褐色、灰色。
(from:Why Is Facebook Blue? The Science Behind Colors In Marketing,by:?LEO WIDRICH,2013.5.6)
如果產品主要面向男性,要考慮男性喜歡藍色、綠色、黑色,不喜歡褐色、橙色、紫色。
(from:Why Is Facebook Blue? The Science Behind Colors In Marketing,by:?LEO WIDRICH,2013.5.6)
但,不能只根據用戶喜好選顏色。更重要的還是用顏色來提升產品質量、使用體驗。
Fact 02 : 顏色的選擇,取決于「產品本身特性」或「所提供的服務」
人們看到一個產品,往往先被顏色吸引,然后再決定是否買。
(G-shock website. from:Color, psychology and design – UX Planet,by:muditha batagoda,2017.9.18)
G-shock 腕表因其強大的功能和耐用性而聞名。當用戶打開 G-shock 腕表的網站,就覺得信任這款腕表所代表的含義。
當一個用戶使用一款產品時,這個產品的顏色同時也彰顯著用戶的個性。
所以 G-shock 用大膽的顏色,吸引喜歡「酷」的用戶,而不是追求「專業性能」的用戶。
Fact 03 : 顏色讓產品有「可識別性」
產品設計不能僅僅是「可理解的」,還要是「易于被發現的」。
我們的大腦總是喜歡那些能立刻讓我們認出的品牌。
為了創造出有吸引力、可識別的產品,必須選用適合產品業務性質、個性、情感的顏色,并與其他競品有所不同。
研究表明,顏色是直接商業競爭的關鍵因素。當消費者想起一款產品時,首先想到的是這個產品獨特的顏色。比如食品行業的 KFC, Mcdonalds, Starbucks。
(How KFC used colors in the application. from:Color, psychology and design – UX Planet,by:muditha batagoda,2017.9.18)
(How mcdonalds used colors in the application. from:Color, psychology and design – UX Planet,by:muditha batagoda,2017.9.18 )
(How starbucks used colors in the application. from:Color, psychology and design – UX Planet,by:muditha batagoda,2017.9.18 )
重點是:理解用戶,聚焦于用戶對顏色的反映,而非著眼于顏色本身。
Your color should achieve the goal of what you are trying to give to the customers.
顏色是如何影響設計的?
每個公司的 logo 都選用不同的顏色, 以期引發用戶不同的情緒。
(from:Why Is Facebook Blue? The Science Behind Colors In Marketing,by:?LEO WIDRICH,2013.5.6)
Blue
- 應用最廣泛;(兩大社交網站 Facebook & Twitter 都雙雙使用藍色)
- 讓人感到信任、安全、放松。( trust, safe and relaxation)(信任:所以很多銀行、商務機構、交通網站用藍色)
不同的藍色色調,帶來不同情感:
- 淺藍:冷靜,讓人感覺恢復精力。(calm, refreshed)
- 純凈的天藍色:快樂,友好。( happiness,friendliness towards the user)
(from:Color, psychology and design – UX Planet,by:muditha batagoda,2017.9.18 )
(Blue represents reliability, which is a good thing for travel companies. from:The Most Important Color In UI Design,by: Nick Babich,2017.7.29)
(Blue evokes a sense of balance as well as calm intelligence. That’s why the vast majority of financial services firms use blue.
(Blue is Facebook’s dominant color, because Mark Zuckerberg is colorblind. As he said, “blue is the richest color for me?—?I can see all of blue.”)
一個小插曲:為什么「超鏈接文字」要用藍色?
簡單說,因為在最早期的網站頁面中,藍色能呈現最高的對比度。
(from:Why Is Facebook Blue? The Science Behind Colors In Marketing,by:?LEO WIDRICH,2013.5.6)
Tim Berners-Lee,web 的主要開創者,被認為是最早用藍色鏈接的人。
一個很早期的 web 瀏覽器 Mosaic,用的是丑灰色背景和黑色文字。那時候,能用的非黑色、最深的文字顏色,就是藍色。所以,讓超鏈接文字突出顯示,同時保證可讀性,就用選定了藍色。
Pink
- 和糖果、甜的東西有關,經常被稱作「少女之色」;(candy and sugary items,「Girl’s color」)
- 但不僅僅是女性專用色;
- 代表活潑有趣,愉快,年輕( playfulness, joy, youth)
(from:Color, psychology and design – UX Planet,by:muditha batagoda,2017.9.18 )
Black
- 代表全力和正式(power, formality);
- 黑色能帶來比其他顏色都強的力量感;黑色是光譜中最強烈的顏色,可最快吸引注意力(faster than other colors, even red);所以多用于正文文字、強調文字上;
- 用于奢侈品(luxury products);
- “Everything is cool with black” 。
(from:Color, psychology and design – UX Planet,by:muditha batagoda,2017.9.18 )
Red
- 重要,告知危險信息;(sense of importance and notifies to us about a danger )
- 用在需要額外注意的地方;(pay special attention,eg. traffic lights)常用于:清倉大甩賣(clearance sale)
- 多數時候用在需要立即注意的地方;(need immediate attention)
- 愛和激情的象征。(a symbol of love and passion)
(from:Create Emotion With Color In UX Design,by:Nick Babich,2016.5.17)
(from:Color, psychology and design – UX Planet,by:muditha batagoda,2017.9.18 )
Green
- 和環境、樹木、植物相關;(connected to the environment, trees and plants)
- 多數時候用在有機食品、飲料這樣的產品上;(organic food and beverages)
- 飽和度較高的綠色讓人感覺興奮、有活力(exciting and dynamic),吸引大量注意力。這就是為什么綠色經常用于 CTA buttons。(call-to-action buttons)。
(Organic Food uses a lot of green color in site design.)
(Combined with blue, green further perpetuates cleanliness.)
(The green 「Sigh Up」 button. )
Orange
- 充滿活力,比紅色刺激程度輕;(energetic,less stimulating );用于 subscribe、buy、sell;
- 美食,健康;(eg. vitamin C)
- 俏皮,樂觀,便宜,適用于休閑用品,非企業網站首選;(playful, upbeat,great for casual)
(Orange Telecom ad campaign. from:?Adam Hayes)
(orange?cheap?property:Search?CTA button on Hipmunk site)
我們一般考慮顏色時都往品牌方面想,較少往「影響用戶情緒」方向想。
但實際上,我們可以運用顏色勾起用戶不同情緒,從這個角度講,顏色同樣是商業競爭中的一枚利器。
Yellow
- 充可以同時代表幸福和焦慮;(happiness and anxiety)
- 明亮的黃色:精力充沛的,樂觀的、年輕的;(energetic, upbeat,youthful)
- 明黃+黑色:警告,引起注意(for warning signs,gain a lot of attention)
- 金色:嚴肅,復古(more serious,antiquity)
(Gain a lot of attention. Source:?hlvticons)
(Breitling?use yellow color to focus visitor on CTA button “Discover the Model.” )
一個實驗
網站 Performable (now?HubSpot) 的設計人員想測試,只改變按鈕的顏色會不會改變轉換率。頁面中只有按鈕顏色不同,一個紅色,一個綠色。
開始大家假設:
綠色相關的概念有:自然的、環保的;聯想到「綠燈通行」,代表動作的「前進」;
紅色相關的概念有:興奮、激情、血、警告,吸引注意力,讓人聯想「紅燈?!埂?/p>
所以,很顯然,A/B 測試前,大家認為綠色更合適。
(from:Why Is Facebook Blue? The Science Behind Colors In Marketing,by:?LEO WIDRICH,2013.5.6)
然而,結果怎樣?
結果讓人頗為驚訝:在頁面上其他所有元素都一樣的情況下,點紅按鈕的人,比點綠按鈕的人多出21%。所以,造成數字差異的,就只是按鈕顏色的不同。
如果我沒讀到過這個實驗,只從設計角度判斷哪個顏色更合適,我肯定選綠色。然而這個實驗讓我意識到,事實并非總是如此。
無論你要做什么改變,先把你的決定當成「假設」,真正測試之后,再看看真實的數據結果是否足以支撐你的設計想法。
Data always beats opinion, no matter what.—?LEO WIDRICH
只單單改變一個顏色,就能給結果帶來較大變動,這是一件有意思的事兒。
另一個實驗
顏色的影響往往不是獨立的,而是搭配著共同起作用。
Paras Chopra 想要測試如何才能讓他的 PDF Producer 有更高的下載量,就做了如下效果用來測試:
(from:The Psychology of Color in Marketing and Branding,by:GREGORY CIOTTI,2016.5.17)
猜猜哪一種下載量最高?結果如下:
(from:The Psychology of Color in Marketing and Branding,by:GREGORY CIOTTI,2016.5.17)
#10 以顯著優勢獲勝。這不是巧合,也許你已經注意到,「PDFProducer」文字很小,并且是淺灰色,但動作文字「Download for Free」很大,還是紅色,如此造成顯著對比。
總結
對設計師來說,沒有一個顏色是所有人都喜歡的「最好的顏色」。
Ultimately, the right color for your design is the one that your users think is right.?— by:Nick Babich
我們應聚焦于「我們為誰設計」,在設計的初期階段,就搜集反饋然后調整想法。從而利用各項色彩原理,來提供更好的用戶體驗。
(A / B testing for conversion.from:Create Emotion With Color In UX Design,by:Nick Babich,2016.5.17)
參考文獻:
- Color, psychology and design – UX Planet,by:muditha batagoda,2017.9.18
- Create Emotion With Color In UX Design,by:Nick Babich,2016.5.17
- The Psychology of Color in Marketing and Branding,by:GREGORY CIOTTI,2016.5.17
- Why Is Facebook Blue? The Science Behind Colors In Marketing,by:?LEO WIDRICH,2013.5.6
- The Most Important Color In UI Design,by: Nick Babich,2017.7.29
- 從原理到方法,比較實用全面地講解顏色:?How To Use Color In UI Design Wisely to Create A Perfect UI Interface?,by: Trista Iiu, 2017.10.16
概要:
顏色作用:反應品牌個性;提供更好體驗;影響購買決定。
顏色實用方法:不同情境下選用合適色調;注意藍色的使用;深淺色變化規律;顏色配比6:3:1;最多3色;選取顏色時注意考慮性別因素。
總原則:可用性是一切。提供良好、愉悅的體驗是關鍵評判標準。
最后,工具推薦。
作者:Angelaaa
來源:知乎專欄:ANN 的設計筆記
本文由 @Angelaaa 授權發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自PEXELS,基于CC0協議
很有感觸,謝謝~