網路色彩心理學——為什麼Facebook是藍色而Yahoo是紫色的?

您曾好奇為何 Facebook 是藍色,而 Yahoo 是紫色的嗎?色彩搭配在網站設計上扮演舉足輕重的角色,因為色彩不僅有自己的象徵意義,也對應到觀者的心理狀態,各種品牌傳達不同意圖,在色彩選擇上就大異其趣。
評論
評論

本文轉載自虎嗅網 〈  產品和設計看過來:互聯網的色彩心理學  〉。

為什麼 Facebook 是藍色的——從最初到最新的版本,幾經設計更迭,始終不變的主色調都是藍色?

答案其實很簡單,根據《紐約客》的一次採訪,Facebook 創辦人 Mark Zuckerberg 其實是一個紅綠色盲,他只能分辨出藍色:「藍色對我來說是色彩最豐富的顏色。」

上圖為 Facebook 最初始的設計界面,那時候它還叫做 thefacebook.com。當時,想要在上面開個帳號必須有一個以 .edu(哈佛大學)結尾的電子信箱才行。

無心插柳也好,有意栽培也好,色彩往往能夠體現網路品牌的創辦人的審美和喜好,而設計師對於色彩的挑選和取捨,也是完成作品中的必備環節。

YouTube 設計師 Marc Hemeon 就曾 收集了 18 組流行網站或產品的按鈕設計色彩 ,用來評估和調查色彩對於使用者心理的影響:

對應網站或產品的謎底如下:

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

大部分網站或產品的按鈕色彩都不會超過 3 種,指向「動作」的按鈕應當統一為同一種顏色,比如 Google 的「搜尋」按鈕是藍色,而 Twitter 的「註冊」按鈕則是明亮的黃色。

社群分享工具 Buffer 的共同創辦人 Leo Widrich 在 Blog 上補充了關於色彩的一些觀點,摘錄部分內容如下:

色彩能夠幫助品牌極為簡易的建立用戶認知:

灰色:象徵冷靜、中立;(蘋果、維基百科、紐約時報……)
綠色:象徵健康、生命;(BP 石油、食品超市 whole foods、星巴克……)
藍色:象徵可靠、力量;(戴爾、大眾汽車、IBM……)
紫色:象徵智慧、想像;(Yahoo、T-Mobile、科幻主題電視台 Syfy……)
紅色:象徵血氣、年輕;(可口可樂、樂高、肯德基……)
橙色:象徵歡樂、信任;(芬達、亞馬遜、Firefox……)
黃色:象徵溫暖、透明;(百思買、法拉利、麥當勞……)

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

黃色:吸引注意力的購物窗口;
紅色:刺激心血的緊迫感,常出現在清倉場景;
藍色:多用於銀行和商業機構裡,強調安全;
綠色:讓人聯想到富裕和輕鬆,緩解壓力;(支付寶的信用卡還款按鈕選擇了綠色作為主色調,能夠理解原因了吧)
橙色:呼叫意味濃厚,用於創建下訂、購買、出售的行動;
粉色:服務於女性和年輕女孩的浪漫色調;
黑色:奢侈品的最佳匹配;
紫色:給人舒緩平靜的感受,常被美容及抗衰老產品使用;

男性和女性對於色彩的喜好度有所偏差:

企業分析服務公司 KISSmetrics 的調查報告顯示(這份報告主要用於建議 App 產品的創業者在產品設計上的策略)——

女性喜愛的色彩:

藍色、紫色和綠色;
女性討厭的色彩:橙色、棕色和灰色;

男性喜愛的色彩:

藍色、綠色和黑色;
男性討厭的色彩:褐色、橙色和紫色;

色彩能夠決定轉

化率的差距:

美國數位行銷公司 Hubspot 曾經做過一場 A/B Testing,用於測試不同顏色對於使用者點擊轉化造成的差異——

左右兩個測試顏面在內容上完全一致,唯一不同的是按鈕的顏色,在超過 2000 人次的樣本測試中,最終紅色方案的點擊率超過綠色方案的點擊率足足 21%。

而在測試之前,大部分的研究員都猜測綠色方案會獲得更高的點擊,因為就直覺而言,綠色代表著通行、准許通過的意思,而紅色則更傾向於警告、阻止意味。

最後,為什麼 Html 語言裡超鏈接的默認顏色是藍色的?

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

這個決定是由 Tim Berners-Lee——全球資訊網的發明者做出的。在他那個年代,網路的第一代瀏覽器 Mosaic 顯示的網頁底色通常都是灰底黑字,為了讓超文本連結能夠更方便識別,Tim Berners-Lee 將超連結定義為藍色並帶有底線的文字。

《延伸閱讀》

橘色暗示廉價,而黑色象徵高級 ——色彩是怎麼影響使用者的觀感?

2016 有哪些十大流行色?看世界知名色彩研究權威機構 Pantone怎麼說!

為什麼 IKEA 一個產品要出那麼多顏色?

Inside 網路品牌色彩學 (二):網路品牌最愛用的 logo 顏色是甚麼?

Inside 網路品牌色彩學 (一):你所不知道的 Inside 小內幕

歡迎加入「Inside」Line 官方帳號,關注最新創業、科技、網路、工作訊息

好友人數

AWS 免費線上研討會,幫助企業掌握 2022 關鍵技術「AI/ML」、加速創新之旅

AWS 於 2022 年 2 月 23 日與 3 月 4 日下午舉辦「人工智慧/機器學習」系列研討會。線上研討會(AWS Web Day)將分享 AWS 的實務經驗與技術結晶,實作工作坊(AWS Workshop)則有專家帶領實作。講座準備有獎徵答,參加即可抽 100 元美食外送平台抵用券。
評論
Photo Credit:AWS
評論

為了有效預測、加速企業決策,愈來愈多企業重視人工智慧(AI)、機器學習(ML)發展,期能借助 AI 的技術能量,為商業提供解決方案。為了協助企業搶得市場先機,AWS 將於 2022 年 2 月 23 日下午 14:00-17:00 舉辦「人工智慧/機器學習」線上研討會,大方分享 AWS 的實務經驗與技術結晶,提供商業程序最佳化與擴展的靈感,激發企業創新。

在深入了解 AWS 人工智慧/機器學習 解決方案與技術實務經驗之後,對此主題感到躍躍欲試,想更深入了解如何運用亞馬遜雲服務,並且有實機操作的機會者,也能夠報名參加 3 月 4 日 14:00-16:30 於 AWS 辦公室線下舉行的 AI/ML 實作工作坊。實作工作坊將由亞馬遜雲科技資深的 AI/ML 專家實際演示,由淺入深的手把手教學,探索如何構建 AI/ML ,借助雲端和人工智慧實現創新。

線上研討會與實作工作坊皆為免費參加,且講座過程中將進行有獎徵答,參加就有機會抽中 100 元美食外送平台抵用券。

立即報名 AWS 人工智慧/機器學習線上研討會

迎戰 AI 時代!AWS 幫助企業加速創新之旅

AWS Marketplace 具備數百種演算法與模型,目前已有 89% 的雲端深度學習專案在 AWS 上執行,能幫助增進資料科學家的生產力高達 10 倍。因此,為了將 AWS 雲端演算的好處分享給更多企業,在本場 AWS 人工智慧/機器學習線上研討會中,將由 AWS 機器學習領域和 AIoT 物聯網專家帶來精彩主題演講;除了重點整理 2021 AWS re:Invent 年底最新發表的 AI / ML 功能之外,也將分享 AWS Professional Service 的機器學習應用導入實例。

立即報名 AWS 人工智慧/機器學習線上研討會

當日議程包括:

  • 人工智慧(AI)/機器學習(ML)新功能發布
  • AWS AI 服務加速創新
  • ML Ops
  • AIoT 相關新服務+案例分享
  • SageMaker 線上零售案例分享
  • AWS ProServe 加速客戶機器學習應用導入實例

無論是開發人員、DevOps、工程師、IT 專業人員、技術決策者、架構師或任何想要了解人工智慧和機器學習的最新趨勢,以推動組織變革和加速創新的人,都能在這次的議程內容獲得新的見解,以解決商業問題並改善用戶體驗。

AWS 人工智慧/機器學習線上研討會報名須知

  • 本場 AWS 人工智慧/機器學習線上研討會為 2 月 23 日線上舉辦,另有實體工作坊為 3 月 4 日於 AWS 辦公室線下舉行。若有意參加兩場工作坊,須分開報名。
  • 若為首次參加線上研討會,官方網路研討會平台 GoToWebinar 會自動偵測參加者的電腦配置,在加入時自動安裝。若是使用手機登入此活動,則需安裝 GoToWebinar 手機應用程式。

立即探索 AI/ML 的最佳實踐,了解其他組織如何憑藉 AWS 賦予的機器學習和 AI 服務,提高效率並做出更準確的預測,為企業加速創新之旅。

立即報名 AWS 人工智慧/機器學習線上研討會