互聯(lián)網(wǎng)設計的色彩心理學(xué)心得發(fā)布者：本站     時(shí)間：2022-01-19 14:01:16

為什么Facebook是藍色的——從最初到最新的版本，幾經(jīng)設計更迭，始終不變的主色調都是藍色?

答案其實(shí)很簡(jiǎn)單，根據《紐約客》的一次采訪(fǎng)，Facebook的創(chuàng )始人馬克·扎克伯格其實(shí)是一個(gè)紅綠色盲，他只能分辨出藍色：“藍色對我來(lái)說(shuō)是色彩最豐富的顏色?！?br />
淺談互聯(lián)網(wǎng)設計的色彩心理學(xué)心得,PS教程,

* Facebook最初始的設計界面，那時(shí)候它還叫做thefacebook.com。當時(shí)，想要在上面開(kāi)個(gè)賬戶(hù)必須有一個(gè)以.edu(哈佛大學(xué))結尾的郵箱才行。

無(wú)心插柳也好，有意栽培也好，色彩往往能夠體現互聯(lián)網(wǎng)品牌的創(chuàng )始人的審美和喜好，而設計師對于色彩的挑選和取舍，也是完成作品中的必備環(huán)節。

Youtube設計師Marc Hemeon就曾收集了18組流行網(wǎng)站或產(chǎn)品的按鈕設計色彩，用來(lái)評估和調研色彩對于用戶(hù)心理的影響：

淺談互聯(lián)網(wǎng)設計的色彩心理學(xué)心得,PS教程,

對應網(wǎng)站或產(chǎn)品的謎底如下：

1、Google

2、Twitter

3、Facebook

4、Microsoft

5、Pinterest

6、Yahoo

7、Instagram

8、Flickr

9、Spotify

10、Rdio

11、Svbtle

12、Medium

13、Basecamp

14、Square

15、Amazon

16、Quora

17、LinkedIn

18、Path

大部分網(wǎng)站或產(chǎn)品的按鈕色彩都不會(huì )超過(guò)3種，指向“動(dòng)作”的按鈕應當統一為同一種顏色，比如Google的“搜索”按鈕是藍色，而Twitter的“注冊”按鈕則是明亮的黃色。

社交分享工具Buffer的聯(lián)合創(chuàng )始人Leo Widrich在博客上補充了關(guān)于色彩的一些觀(guān)點(diǎn)，摘錄部分內容如下。

色彩能夠幫助品牌極為簡(jiǎn)易的建立用戶(hù)認知：

淺談互聯(lián)網(wǎng)設計的色彩心理學(xué)心得,PS教程,

灰色：象征冷靜、中立;(蘋(píng)果、維基百科、紐約時(shí)報……)

綠色：象征健康、生命;(BP石油、食品超市whole foods、星巴克……)

藍色：象征可靠、力量;(戴爾、大眾汽車(chē)、IBM……)

紫色：象征智慧、想象;(雅虎、T-Mobile、科幻主題電視臺Syfy……)

紅色：象征血氣、年輕;(可口可樂(lè )、樂(lè )高、肯德基……)

橙色：象征歡樂(lè )、信任;(芬達、亞馬遜、火狐……)

黃色：象征溫暖、透明;(百思買(mǎi)、法拉利、麥當勞……)

站在消費者角度，色彩也能夠在理解和決策階段起到一定的影響作用：

淺談互聯(lián)網(wǎng)設計的色彩心理學(xué)心得,PS教程,

黃色：吸引注意力的購物窗口;

紅色：刺激心血的緊迫感，常出現在清倉場(chǎng)景;

藍色：多用于銀行和商業(yè)機構里，強調安全;

綠色：讓人聯(lián)想到富裕和輕松，緩解壓力;(支付寶的信用卡還款按鈕選擇了綠色作為主色調，能夠理解原因了吧)

橙色：呼叫意味濃厚，用于創(chuàng )建下訂、購買(mǎi)、出售的行動(dòng);

粉色：服務(wù)于女性和年輕女孩的浪漫色調;

黑色：奢侈品的最佳匹配;

紫色：給人舒緩&平靜的感受，常被美容及抗衰老產(chǎn)品使用;

男性和女性對于色彩的喜好度有所偏差：

企業(yè)分析服務(wù)公司KISSmetrics的調查報告顯示(這份報告主要用于建議App產(chǎn)品的創(chuàng )業(yè)者在產(chǎn)品設計上的策略)——

女性喜愛(ài)的色彩：藍色、紫色和綠色;

女性討厭的色彩：橙色、棕色和灰色;

淺談互聯(lián)網(wǎng)設計的色彩心理學(xué)心得,PS教程,

男性喜愛(ài)的色彩：藍色、綠色和黑色;

男性喜愛(ài)的色彩：褐色、橙色和紫色;

淺談互聯(lián)網(wǎng)設計的色彩心理學(xué)心得,PS教程,

色彩能夠決定轉化率的差距：

美國數字營(yíng)銷(xiāo)公司Hubspot曾經(jīng)做過(guò)一場(chǎng)A/B Testing，用于測試不同顏色對于用戶(hù)點(diǎn)擊轉化造成的差異——

淺談互聯(lián)網(wǎng)設計的色彩心理學(xué)心得,PS教程,

左右兩個(gè)測試顏面在內容上完全一直，唯一不同的是按鈕的顏色，在超過(guò)2000人次的樣本測試中，最終紅色方案的點(diǎn)擊率超過(guò)綠色方案的點(diǎn)擊率足足21%。

而在測試之前，大部分的研究員都猜測綠色方案會(huì )獲得更高的點(diǎn)擊，因為就直覺(jué)而言，綠色代表著(zhù)通行、準許通過(guò)的意思，而紅色則更傾向于警告、阻止意味。

最后，為什么Html語(yǔ)言里超鏈接的默認顏色是藍色的?

因為藍色是從灰色底色中脫穎而出的最佳色調。

淺談互聯(lián)網(wǎng)設計的色彩心理學(xué)心得,PS教程,

這個(gè)決定是由Tim Berners-Lee——萬(wàn)維網(wǎng)的發(fā)明者做出的。在他那個(gè)年代，互聯(lián)網(wǎng)的第一代瀏覽器Mosaic顯示的網(wǎng)頁(yè)底色通常都是灰底黑字，為了讓超文本鏈接能夠更方便識別，Tim Berners-Lee將超鏈接定義為藍色并帶有下劃線(xiàn)的文字。