不同的顏色往往給我們帶來(lái)不同的情緒與體驗(yàn)。

顏色是可以給人類(lèi)帶來(lái)不同情緒的美麗事物。我們會(huì)用用顏色區(qū)分相似的事物。

然而，在真實(shí)生活中，顏色并不存在。顏色在人腦的視覺(jué)系統(tǒng)中被建立。這意味著，顏色在本質(zhì)上是主觀的，而非客觀的。

在設(shè)計(jì)中，顏色是抓住用戶(hù)注意力的關(guān)鍵因素。 人們?cè)诮佑|一項(xiàng)新事物時(shí)，顏色是最最容易被記住的信息。顏色的設(shè)計(jì)往往和品牌息息相關(guān)。許多時(shí)候，人們是否購(gòu)買(mǎi)一件商品，很大程度上取決于顏色。顏色對(duì)人們心理，有非常重要的影響。

Fact 01 : 對(duì)色彩的喜好，男女有別

男生喜歡的顏色，和女生喜歡的顏色，差別很大。

規(guī)律是：

• 男女最喜歡的都是藍(lán)色（所以很多產(chǎn)品都用藍(lán)色）；都最不喜歡橙色。
• 男的喜歡大膽顏色，女的喜歡柔和顏色。

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）

所以，如果想設(shè)計(jì)一款主要面向女性的產(chǎn)品，可以參考使用女性普遍喜歡的藍(lán)色、紫色、綠色，較少使用女性不喜歡的橙色、褐色、灰色。

（from：Why Is Facebook Blue? The Science Behind Colors In Marketing，by：?LEO WIDRICH，2013.5.6）

如果產(chǎn)品主要面向男性，要考慮男性喜歡藍(lán)色、綠色、黑色，不喜歡褐色、橙色、紫色。

（from：Why Is Facebook Blue? The Science Behind Colors In Marketing，by：?LEO WIDRICH，2013.5.6）

但，不能只根據(jù)用戶(hù)喜好選顏色。更重要的還是用顏色來(lái)提升產(chǎn)品質(zhì)量、使用體驗(yàn)。

Fact 02 : 顏色的選擇，取決于「產(chǎn)品本身特性」或「所提供的服務(wù)」

人們看到一個(gè)產(chǎn)品，往往先被顏色吸引，然后再?zèng)Q定是否買(mǎi)。

（G-shock website. from：Color, psychology and design – UX Planet，by：muditha batagoda，2017.9.18）

G-shock 腕表因其強(qiáng)大的功能和耐用性而聞名。當(dāng)用戶(hù)打開(kāi) G-shock 腕表的網(wǎng)站，就覺(jué)得信任這款腕表所代表的含義。

當(dāng)一個(gè)用戶(hù)使用一款產(chǎn)品時(shí)，這個(gè)產(chǎn)品的顏色同時(shí)也彰顯著用戶(hù)的個(gè)性。

所以 G-shock 用大膽的顏色，吸引喜歡「酷」的用戶(hù)，而不是追求「專(zhuān)業(yè)性能」的用戶(hù)。

Fact 03 : 顏色讓產(chǎn)品有「可識(shí)別性」

產(chǎn)品設(shè)計(jì)不能僅僅是「可理解的」，還要是「易于被發(fā)現(xiàn)的」。

我們的大腦總是喜歡那些能立刻讓我們認(rèn)出的品牌。

為了創(chuàng)造出有吸引力、可識(shí)別的產(chǎn)品，必須選用適合產(chǎn)品業(yè)務(wù)性質(zhì)、個(gè)性、情感的顏色，并與其他競(jìng)品有所不同。

研究表明，顏色是直接商業(yè)競(jìng)爭(zhēng)的關(guān)鍵因素。當(dāng)消費(fèi)者想起一款產(chǎn)品時(shí)，首先想到的是這個(gè)產(chǎn)品獨(dú)特的顏色。比如食品行業(yè)的 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 )

重點(diǎn)是：理解用戶(hù)，聚焦于用戶(hù)對(duì)顏色的反映，而非著眼于顏色本身。

Your color should achieve the goal of what you are trying to give to the customers.

顏色是如何影響設(shè)計(jì)的？

每個(gè)公司的 logo 都選用不同的顏色， 以期引發(fā)用戶(hù)不同的情緒。

（from：Why Is Facebook Blue? The Science Behind Colors In Marketing，by：?LEO WIDRICH，2013.5.6）

Blue

• 應(yīng)用最廣泛；（兩大社交網(wǎng)站 Facebook & Twitter 都雙雙使用藍(lán)色）
• 讓人感到信任、安全、放松。（ trust, safe and relaxation）（信任：所以很多銀行、商務(wù)機(jī)構(gòu)、交通網(wǎng)站用藍(lán)色）

不同的藍(lán)色色調(diào)，帶來(lái)不同情感：

• 淺藍(lán)：冷靜，讓人感覺(jué)恢復(fù)精力。（calm， refreshed）
• 純凈的天藍(lán)色：快樂(lè)，友好。（ 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.”）

一個(gè)小插曲：為什么「超鏈接文字」要用藍(lán)色？

簡(jiǎn)單說(shuō)，因?yàn)樵谧钤缙诘木W(wǎng)站頁(yè)面中，藍(lán)色能呈現(xiàn)最高的對(duì)比度。

（from：Why Is Facebook Blue? The Science Behind Colors In Marketing，by：?LEO WIDRICH，2013.5.6）

Tim Berners-Lee，web 的主要開(kāi)創(chuàng)者，被認(rèn)為是最早用藍(lán)色鏈接的人。

一個(gè)很早期的 web 瀏覽器 Mosaic，用的是丑灰色背景和黑色文字。那時(shí)候，能用的非黑色、最深的文字顏色，就是藍(lán)色。所以，讓超鏈接文字突出顯示，同時(shí)保證可讀性，就用選定了藍(lán)色。

Pink

• 和糖果、甜的東西有關(guān)，經(jīng)常被稱(chēng)作「少女之色」；（candy and sugary items，「Girl’s color」）
• 但不僅僅是女性專(zhuān)用色；
• 代表活潑有趣，愉快，年輕（ playfulness, joy, youth）

（from：Color, psychology and design – UX Planet，by：muditha batagoda，2017.9.18 )

Black

• 代表全力和正式（power， formality）；
• 黑色能帶來(lái)比其他顏色都強(qiáng)的力量感；黑色是光譜中最強(qiáng)烈的顏色，可最快吸引注意力（faster than other colors, even red）；所以多用于正文文字、強(qiáng)調(diào)文字上；
• 用于奢侈品（luxury products）；
• “Everything is cool with black” 。

（from：Color, psychology and design – UX Planet，by：muditha batagoda，2017.9.18 )

Red

• 重要，告知危險(xiǎn)信息;（sense of importance and notifies to us about a danger ）
• 用在需要額外注意的地方；（pay special attention，eg. traffic lights）常用于：清倉(cāng)大甩賣(mài)（clearance sale）
• 多數(shù)時(shí)候用在需要立即注意的地方；（need immediate attention）
• 愛(ài)和激情的象征。（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

• 和環(huán)境、樹(shù)木、植物相關(guān)；（connected to the environment, trees and plants）
• 多數(shù)時(shí)候用在有機(jī)食品、飲料這樣的產(chǎn)品上；（organic food and beverages）
• 飽和度較高的綠色讓人感覺(jué)興奮、有活力（exciting and dynamic），吸引大量注意力。這就是為什么綠色經(jīng)常用于 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

• 充滿(mǎn)活力，比紅色刺激程度輕；（energetic，less stimulating ）；用于 subscribe、buy、sell；
• 美食，健康；（eg. vitamin C）
• 俏皮，樂(lè)觀，便宜，適用于休閑用品，非企業(yè)網(wǎng)站首選；（playful, upbeat，great for casual）

（Orange Telecom ad campaign. from:?Adam Hayes）

（orange?cheap?property：Search?CTA button on Hipmunk site）

我們一般考慮顏色時(shí)都往品牌方面想，較少往「影響用戶(hù)情緒」方向想。

但實(shí)際上，我們可以運(yùn)用顏色勾起用戶(hù)不同情緒，從這個(gè)角度講，顏色同樣是商業(yè)競(jìng)爭(zhēng)中的一枚利器。

Yellow

• 充可以同時(shí)代表幸福和焦慮；（happiness and anxiety）
• 明亮的黃色：精力充沛的，樂(lè)觀的、年輕的；（energetic， upbeat，youthful）
• 明黃+黑色：警告，引起注意（for warning signs，gain a lot of attention）
• 金色：嚴(yán)肅，復(fù)古（more serious，antiquity）

（Gain a lot of attention. Source:?hlvticons）

（Breitling?use yellow color to focus visitor on CTA button “Discover the Model.” ）

一個(gè)實(shí)驗(yàn)

網(wǎng)站 Performable (now?HubSpot) 的設(shè)計(jì)人員想測(cè)試，只改變按鈕的顏色會(huì)不會(huì)改變轉(zhuǎn)換率。頁(yè)面中只有按鈕顏色不同，一個(gè)紅色，一個(gè)綠色。

開(kāi)始大家假設(shè)：

綠色相關(guān)的概念有：自然的、環(huán)保的；聯(lián)想到「綠燈通行」，代表動(dòng)作的「前進(jìn)」；

紅色相關(guān)的概念有：興奮、激情、血、警告，吸引注意力，讓人聯(lián)想「紅燈?！埂?/p>

所以，很顯然，A/B 測(cè)試前，大家認(rèn)為綠色更合適。

（from：Why Is Facebook Blue? The Science Behind Colors In Marketing，by：?LEO WIDRICH，2013.5.6）

然而，結(jié)果怎樣？

結(jié)果讓人頗為驚訝：在頁(yè)面上其他所有元素都一樣的情況下，點(diǎn)紅按鈕的人，比點(diǎn)綠按鈕的人多出21%。所以，造成數(shù)字差異的，就只是按鈕顏色的不同。

如果我沒(méi)讀到過(guò)這個(gè)實(shí)驗(yàn)，只從設(shè)計(jì)角度判斷哪個(gè)顏色更合適，我肯定選綠色。然而這個(gè)實(shí)驗(yàn)讓我意識(shí)到，事實(shí)并非總是如此。

無(wú)論你要做什么改變，先把你的決定當(dāng)成「假設(shè)」，真正測(cè)試之后，再看看真實(shí)的數(shù)據(jù)結(jié)果是否足以支撐你的設(shè)計(jì)想法。

Data always beats opinion, no matter what.—?LEO WIDRICH

只單單改變一個(gè)顏色，就能給結(jié)果帶來(lái)較大變動(dòng)，這是一件有意思的事兒。

另一個(gè)實(shí)驗(yàn)

顏色的影響往往不是獨(dú)立的，而是搭配著共同起作用。

Paras Chopra 想要測(cè)試如何才能讓他的 PDF Producer 有更高的下載量，就做了如下效果用來(lái)測(cè)試：

（from：The Psychology of Color in Marketing and Branding，by：GREGORY CIOTTI，2016.5.17）

猜猜哪一種下載量最高？結(jié)果如下：

（from：The Psychology of Color in Marketing and Branding，by：GREGORY CIOTTI，2016.5.17）

#10 以顯著優(yōu)勢(shì)獲勝。這不是巧合，也許你已經(jīng)注意到，「PDFProducer」文字很小，并且是淺灰色，但動(dòng)作文字「Download for Free」很大，還是紅色，如此造成顯著對(duì)比。

總結(jié)

對(duì)設(shè)計(jì)師來(lái)說(shuō)，沒(méi)有一個(gè)顏色是所有人都喜歡的「最好的顏色」。

Ultimately, the right color for your design is the one that your users think is right.?— by：Nick Babich

我們應(yīng)聚焦于「我們?yōu)檎l(shuí)設(shè)計(jì)」，在設(shè)計(jì)的初期階段，就搜集反饋然后調(diào)整想法。從而利用各項(xiàng)色彩原理，來(lái)提供更好的用戶(hù)體驗(yàn)。

（A / B testing for conversion.from：Create Emotion With Color In UX Design，by：Nick Babich，2016.5.17）

參考文獻(xiàn)：

• 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
• 從原理到方法，比較實(shí)用全面地講解顏色：?How To Use Color In UI Design Wisely to Create A Perfect UI Interface?，by: Trista Iiu, 2017.10.16

概要：

顏色作用：反應(yīng)品牌個(gè)性；提供更好體驗(yàn)；影響購(gòu)買(mǎi)決定。

顏色實(shí)用方法：不同情境下選用合適色調(diào)；注意藍(lán)色的使用；深淺色變化規(guī)律；顏色配比6：3：1；最多3色；選取顏色時(shí)注意考慮性別因素。

總原則：可用性是一切。提供良好、愉悅的體驗(yàn)是關(guān)鍵評(píng)判標(biāo)準(zhǔn)。

最后，工具推薦。

作者：Angelaaa

來(lái)源：知乎專(zhuān)欄：ANN 的設(shè)計(jì)筆記

本文由 @Angelaaa 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于CC0協(xié)議