用戶體驗設計遇見色彩情感

作者:佚名 來源:騰訊CDC 時間:2013-12-22 標簽: 用戶體驗

 有一段時間沒分享一點兒東西了,記得上次與大家分享過“情感化設計中的手繪應用表現”。今個再次煽情一下,與大家分享一點關于色彩情感的那些事兒,可能前部分的色彩介紹大家有了解過。但任何事情有因有果,所以還是先讓大家了解下關于色彩的組成和色彩的情感等,再來簡單說說在我們生活中和界面設計中的運用所帶來的感受,以及人們對色彩的喜好偏差和色彩的決定性作用等等。

 

一、關于色彩

1、色彩

  色彩,對于人類而言,始終屬于自然界最神奇的奧妙之一,永遠都在激發著我們的好奇心和創造力。在我們生活中無論何時何地,充滿著各種多采多姿的色彩,哪里有光,哪里就有顏色。有時我們會認為顏色是獨立的:天空是藍色的、植物是綠色的、而花朵是紅色的。但事實上,其實色彩并不會單獨存在,漂亮的色彩搭配常常可以讓畫面更加吸引人你的目光。色彩就像是音符一樣,沒有某一種顏色是所謂的“好”或“壞”,唯有一個個的音符組合起來才能譜出美妙的樂章,才能說是協調或者不協調。

2、色相環

  色相環告訴我們顏色之間的相互的關,在很多關于色彩文章中,都可以看到色相環的身影,它是我們選擇顏色的一個強有力的工具。色相環是指人類的肉眼可以辨識的色彩色相所組成的色環,它由12種基本的顏色組成。包含三原色,即紅、黃、藍,原色混合產生了二次色,即橙、綠、紫,二次色混合產生了三次色。三原色是色相環中所有顏色的“父母”。在色相環中只有這三種顏色不是由其它顏色混合而成,在色環中的位置是平均分布的。

01

 

二、色彩情感

  每個人有自己所喜愛的音樂,同樣每個人也有自己鐘愛的色彩,每一種顏色都有一種寓意。色彩做為第一視覺語言,當人類初接觸到一個事物產生第一印象時,色彩的吸引力往往高于其造型所產生的印象。適當的應用色彩能夠增強畫面感染力,提升產品印象與感覺,而不同的色彩常常左右了產品最終給人的感受。

  色彩具有象征性,而且色彩的象征性具有區域性,民族性。說到象征我們腦海里首先會蹦出:紅玫瑰象征熾熱的愛情,黃色總是與富麗,權利地位相連,白色純潔,藍色優雅平靜,黑色肅穆,邪惡等。因為顏色具有象征性,所以我們要分場合著裝,送禮等。

02

 

  色彩能夠快速幫助我們建立用戶認知: 下面簡單介紹下三原色給我們帶來的色彩感受,以及在生活中和設計中的運用。

 

紅色

  紅色是三原色之一,紅色的純度高、注目性高、刺激作用大,是視覺效果最強烈的色彩。 紅色是中華民族最喜愛的顏色,甚至成為中國人的文化圖騰和精神皈依,中國人近代以來的歷史就是一部紅色的歷史,承載了國人太多紅色的記憶。紅色代表著平安、喜慶、福祿、康壽、尊貴、和諧、團圓、成功、忠誠、勇敢、興旺、浪漫、性感、熱烈、濃郁、委婉的感受;意味著百事順遂、驅病除災、逢兇化吉、棄惡揚善……

  在生活中,也隨處可見紅色的存在,由于紅色容易吸引人眼的注意,因此許多警告符號與提示符號都使用紅色來表示,例如紅綠燈中的紅色表示停止、路邊的維修燈號、車輛的煞車燈都使用紅色來表示警告、提醒行人注意等等。在消防設備、消防栓、滅火器都使用紅色,方便在必要的時候能夠快速的找到它們。

03

 紅綠燈、消防栓、滅火器

  在網頁設計中,以紅色為主色的并不多,在大量信息的頁面里有大量面積的紅色是不易于閱讀的。但若搭配好的話,也可以起到振奮人心的作用。過純的紅色容易使人疲勞,引起人的心理反感,所以一般只有在以活動節慶為主題的網站中才會大面積使用純紅色,而在其他主題的網站中,要使用大面積的紅色就需要加白或調暗。

04

 

黃色

  黃色屬于色彩三原色之一,是所有色彩中最明亮的色彩。作為暖色調的基準色彩之一,黃色給人一種快樂、輕快、通透、輝煌、充滿希望與活力的色彩印象,給人一種莊重、高貴、明亮的心理感受。但也由于黃色的明度相當高,黃色很容易受到其他顏色的影響,色相稍微偏紅、綠一點就會被覺得是橙色或綠色,明度降低時就容易被認為是土色,所以某方面而言,黃色是一個相當難以掌握的色彩。

  黃色會令人想起太陽,而且在自然界及人類世界中都非常常見。這是一種會引起人注意的顏色。從大黃蜂到校車,從交通燈到熒光筆,到處都有醒目的黃色出現。嚴重犯規的足球運動員會被出示黃牌作為警告,而在環法自行車賽中穿黃色領騎衫的選手是所有人追逐的目標。

05

校車、足球黃牌

  黃色是在網頁設計配色中使用極為廣泛的顏色之一,它具有明朗愉快的感覺,在各類信息網站中都可以使用。但純黃色很少大面積使用,同純紅色一樣,過于強烈了,但小面積點綴用得頗多。比如用暗清色的黃與其他色彩的暗清色調和使用,頁面就會多一些典雅和奇特的感覺。

06

 

藍色

  藍色屬于色彩三原色之一,它是最冷的色彩,非常純凈,給人一種美麗、寧靜、清潔、理智、安詳與廣闊的感覺,產生對浩瀚宇宙、萬里晴空、碧波海洋的聯想; 藍色是大海與天空的顏色,在自然界中也非常常見。藍色是永恒的象征,它的種類很繁多,每一種藍色又代表著不同的政治或其他含義。藍色有著勇氣、冷靜、理智、永不言棄的含義,所以許多國家警察的制服是藍色的,警察和救護車的燈一般是藍色的。

07

 

  藍色有沉穩的特性、具有理智、準確的意象,同時還表示希望。在商業設計中,強調科技,效率的商品或企業形象,大多選用藍色當標準色,企業色,如科技、知識、計算機、企業、政府、銀行和門戶等。藍色還代表了“可信”的心理感受,很多企業做網站時都選擇了藍色。騰訊公司官網就是其中之一。

08

 騰訊公司官網、騰訊客服頁面、中國建設銀行官網、中國南方航空官網

 

  在生活和設計中還有很多諸如此類的色彩運用,比如橙色使人感到成熟的瓜果而產生甜的感受;綠色為植物的顏色,象征著生命,傳達出清爽、理想、希望、生長的意象,如果將它與藍色、黃色,甚至紅色搭配起來用于網頁設計中,則可以給網站增加一絲活潑、輕快的感覺;而紫色給人的情感是高貴、嬌艷與幽雅。色彩種類如此之多,在這里就不一 一做詳細說明了。

 

三、色彩情感在界面設計中的一些運用

  色彩是我們接觸事物所第一個感受到的,也是印象最深刻的。睜開眼睛,點開網頁,最先感受到的并不是網站所提供的內容,而是網頁中的色彩搭配所呈現出來的一種感受,各種色彩爭先恐后地沿著視網膜印在我們腦海中,色彩在無意識中影響著我們的體驗和每一次點擊,它暗示了用戶登入這個網站所代表的方向與意義。

  有看過網站色彩分析相關文章的人一定對這類圖片不陌生,它把各種知名網站的Logo與CIS系統以色彩分門別類整理。我們發現,大部分網站以及互聯網企業的商標色彩都分布在紅色系以及藍色系附近。因為橘紅色帶給人溫暖、熱情、主動的活力感,而藍色則具有可靠、專業的形象感,可以說都是網路公司形象上致力想營造出的形象,而藍色系色彩,其實還具有另外一個重要的特性。

  以下這張是來自ColorLovers的整理:

09

 

色彩的喜好偏差:

  如上面所講到的色彩帶給人的感受存在著客觀上的代表性意義,但在每個人的眼里所實際感受到的色彩存在著大大小小的差異。從一個客戶網站分析公司KISSmetrics的調查報告圖表中,我們清晰的看到,男性和女性都喜歡藍色和綠色,或許這是自然中最常見的色彩;男性和女性都比較討厭橙色和褐色。而不同的是男性喜歡黑色,而女性則討厭灰色;女性則喜歡紫色,而男性則討厭紫色。因而得知男性和女性對于色彩的喜好度是有所偏差的。所以在選擇配色時不仿多考慮不同觀賞者的角度下所呈現的樣子來做選擇、深入體會閱讀者的感受。

10

 

色彩能夠在理解和決策階段起到決定性作用:

  美國流行色彩研究中心的一項調查表明,人們在挑選商品的時候存在一個”7秒鐘定律”:面對琳瑯滿目的商品,人們只需7秒鐘就可以確定對這些商品是否感興趣。在這短暫而關鍵的7秒鐘內,色彩的作用占到67 %,成為決定人們對商品好惡的重要因素,這就是20世紀80年代出現的”色彩營銷”的理論依據。同樣道理,在界面設計中,如果色彩的選擇和搭配恰到好處,可以在段時間內給新用戶留下深刻的印象,會給我們的設計帶來意想不到的效果。

11

 

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

  美國數字營銷公司Hubspot曾經做過一場A/B Testing,用于測試不同顏色對于用戶點擊轉化造成的差異。 在下圖中,左右兩個測試頁面在內容上完全一致,唯一不同的是按鈕的顏色,在超過2000人次的樣本測試中,最終紅色方案的點擊率超過綠色方案的點擊率足足21%。而在測試之前,大部分的研究員都猜測綠色方案會獲得更高的點擊,因為就直覺而言,綠色代表著通行、準許通過的意思,而紅色則更傾向于警告、阻止意味。

12

  因為紅色具有刺激心血的緊迫感,常出現在清倉場景,而橙色的呼叫意味濃厚,用于創建下訂、購買、出售的行動,所以紅色和橙色一般用于購物網站或App的購買和支付按鈕。另外還會用于一些錯誤提示頁面,表示警示提醒你注意。

13

  因為綠色代表著安全、通行、準許的意思,可以讓人感到輕松,緩解壓力,所以綠色通常用于開始按鈕和下載按鈕,還有成功提示頁面。

 

14

手機QQ、QQ音樂產品下載頁

15

電腦管家8

  所以在設計時,不能單純憑借自己的喜好去配色,還有很大一部分原因由產品本身的定位以及標準色和整體的色調而決定,另外我們要充分的考慮用戶使用時的感受,雖然不能完全滿足所有用戶,但起碼我們要顧及大部分的用戶。當然色彩的運用不是限定死的,并非說購買按鈕一定用紅色、橙色,而下載按鈕一定用綠色。具體的色彩風格需去認真的了解設計需求,跟甲方討論產品的定位與感覺,比如:穩重、可信賴、活潑、簡潔、科技感…等等,了解到客戶對產品的定位,我們就可以確定如何選擇最合適的色彩方向來進行設計。

(本文出自騰訊CDC博客: http://cdc.tencent.com/?p=7694)

推薦設計

最新文章