• EN
香港:(852)3749 9734
info@inspirr.com

新聞資料

UI設計技巧:色彩情感對UI設計起到怎樣的作用

當我們點開網站,最先感受到的並非網站提供的內容,而是網頁中色彩搭配所呈現的感受。這是因為人類對色彩的敏感程度很高,導致色彩能在第一時間吸引人類的注意力,也是讓人類印象最深刻的元素。本文將以色彩情感為主題,和大家一起探討「色彩情感對UI設計起到怎樣的作用」。

什麼是色彩情感?

色彩本身只是一種常見的物理現象,按道理它並不具備任何情緒。但由於人類長期生活在一個色彩的世界,積累着許多視覺經驗,一旦看到某種色彩便會憑着知覺經驗,在心理上引出某種情緒。也就是說,所謂的色彩情感,主要是受到人類潛移默化的影響而產生的心理效應。

心理上根據顏色對心理感覺的不同,大致分為暖色調、冷色調和中性色調。

UI設計技巧:色彩情感對UI設計起到怎樣的作用

暖色調:如紅、橙、黃、棕,往往會讓人聯想起紅色和橘黃色的太陽,棕黃色的大地,給人一種溫暖的感覺,因此多用於表達熱烈、興奮、熱情、溫和、溫暖等消極情緒。值得注意的是,紅色在可見光譜中光波頻率最低,波長最長,衍射能力最強,極易引起注意,因此也能用作警告,危險,禁止之意。

UI設計技巧:色彩情感對UI設計起到怎樣的作用

冷色調:如藍、綠、紫,往往使人聯想到綠色的森林,藍色的天空和冰雪,給人清涼的感覺,因此多用於文雅、莊重、理智、安詳與潔凈等情緒。

UI設計技巧:色彩情感對UI設計起到怎樣的作用

中性色調:如黑、白、灰,在色彩配色中佔有相當主要的地位,它們活躍在各種配色中,最大限度地改變對方的明度、亮度與色相,產生出多層次、多品種的優美色彩。但大面積使用中性色調時,容易給人帶來寒冷、嚴峻、恐怖、莊嚴、死亡等消極情緒。

當然,色彩的冷暖感覺是相對的,除橙色與藍色是色彩冷暖的兩個極端外,其他色彩的冷暖感覺都是相對存在的,比如說紫色,它既富有藍色的寒冷性,又富有紅色的鼓舞性,常常處於冷暖之間遊離不定的狀態,這主要取決於它的藍調和紅調含量。若紫色中紅調多,藍調少,會給人一種優美、柔和、涼爽的情緒;反之,則會帶來神秘、魔幻、莊嚴之感。

色彩情感對UI設計起到怎樣的作用?

了解完不同色彩所表達的情緒特徵後,接下來我們回顧主題,說說色彩情感與UI設計的關係。

一、 色彩的喜好偏差對UI設計的影響

雖然色彩給人的感受存在客觀的代表性意義,但在每個人的眼裡實際感受到的色彩情緒卻存在差異。根據KISSmetrics的調查報告圖表,我們清晰看到:

UI設計技巧:色彩情感對UI設計起到怎樣的作用

男性和女性都喜歡藍色和綠色,以及比較討厭橙色和褐色。不同的是,大多男性喜歡黑色,而女性討厭灰色;女性喜歡紫色,但男性則討厭紫色。可見,男性和女性對於色彩喜好度是有所偏差。

事實上,除了性別,年齡、文化、地區等對色彩喜好度同樣存在差異,因此選擇配色時不妨多考慮不同用戶類型對色彩的偏好,以此確定UI設計的主色調。

二、 色彩在理解和決策階段起到決定性作用

美國流行色彩研究中心的一項調查表明,人們在挑選商品時存在「7秒鐘定律」:即面對琳琅滿目的商品,人們只需7秒鐘就能確定對這些商品是否感興趣。而在這短暫且關鍵的7秒鐘內,色彩的作用佔67%,成為決定人們對商品好惡的重要因素。

UI設計技巧:色彩情感對UI設計起到怎樣的作用

同樣道理,在UI設計中,如果色彩的選擇和搭配恰到好處,可在短時間內給新用戶留下深刻印象,甚至有可能會刺激他們消費的意欲。

三、 色彩能決定轉換率的差距

美國數字營銷公司Hubspot曾經做過一場有關「測試不同顏色對用戶點擊轉化造成的差異」的A/B測試(如下圖),發現紅色按鈕方案的點擊率超過綠色方案點擊率的21%。而在測試之前,大部分研究員都猜測綠色按鈕會獲得更高的點擊,因為就直覺而言,綠色代表通行、准許通過的意思;紅色則更傾向於警告、阻止之意。

UI設計技巧:色彩情感對UI設計起到怎樣的作用

專家預測,紅色具有刺激心血的緊迫感,容易吸引用戶的注意力,並具備濃厚的緊急呼叫之意,因而多用於購物類產品的購買和支付按鈕,另外也會用於一些錯誤提示頁面,提醒用戶需注意;相反,綠色會讓人感到輕鬆、緩解壓力,使用戶的注意力和情緒不必過分緊張,所以綠色通常用於開始按鈕和下載按鈕,還有成功提示頁面。

在UI設計時,我們不能單純憑藉自己的喜好去配色,具體的色彩風格應該從設計需求、產品本身的定位,標準色和整體的色調而決定。另外,我們也要充分考慮用戶的感受,雖然不能完全滿足所有用戶,但起碼我們顧及了大部分的用戶,會對網站的轉換有積極的幫助。