優(yōu)秀網頁設計中的色彩心理
本文關鍵詞:設計中的色彩心理學,由筆耕文化傳播整理發(fā)布。
色彩心理學被廣泛應用于各類型設計中,從日常用品、品牌logo、網站配色等等,顏色是向用戶床底信息的重要元素。
據相關分析,當人們看到某種顏色時,人的眼睛會想大腦一塊叫做“下丘腦”的區(qū)域發(fā)送信號,之后這類信號還將被先后傳遞到腦下垂體和甲狀腺,信號刺激荷爾蒙分泌,從而引起情緒波動,影響人類活動。
據科學研究,顏色可以影響人的情緒,在網頁設計方面,一個網站的設計可以在90秒內影響網站訪客對網站的印象。而其中,色彩的決定性作用站到62%到90%。
色彩意味著什么
每一個不同的顏色對不同的人都有不同的含義,起到不同的作用。另外即使是相同的顏色也會因個人性格和文化背景的差異產生不同的作用和意義。
下圖顯示了不同顏色的含義或特征。
設計中的色彩心理學并不是一門特定學科,因個人認知不同而區(qū)別。性別等社會學范疇的因素也能對色彩的功能產生影響。更深層次的研究顯示,并不總是只有色彩本身能夠對外界產生影響,某品牌對顏色的運用也會影響用戶感受。
通常意義上,女性喜歡紫色,而男性用戶則對紫色不太感冒。所以在下圖中巴黎歐萊雅的網站,頁頭和頁腳是黑色,,帶來經典和優(yōu)雅感覺。頁面中間有紫色半透明圖層,向用戶傳遞改網站產品高端且價錢不低廉的信息。
另外,網站字體用了白色,使網站看起來更現代,帶給人寧靜感,搭配紫色,強調女性化、奢華和優(yōu)雅。網站整體配色特別適合該品牌定位。
下圖是《女性健康雜志(Women's Health Magazine)》網站頁面,頂部橫幅用了粉色,而頁面其他位置則大部分選擇無色或白色,基本依靠圖片和顯眼的黑字體導航指引用戶。這樣的色彩選擇有趣但有可能不太適合這個網站。
通常針對女性用戶的網站多會選擇粉色,誕生粉色同時會讓人想起甜食。在這樣一個主要討論女性健康的網站上,像這樣強調粉色顯然不合適。進一步瀏覽該網站,每個子頁面的頂部橫幅都沿用了粉色,而在減重頁面,整個頁面的顏色運用了更多粉色和相近的鮮艷顏色。這樣的配色可能會起到反作用。
選定配色方案
在網站設計中,通常不可能只運用一種顏色,所以,設計師在動手前應先選定網站整體配色方案,要提前確定每個單獨顏色的運用及色彩搭配效果,同時要考慮顏色對用戶的影響以及主次色彩間的相互影響。
接下來向大家介紹配色三法,幫助大家進行有效合理的配色。
1: 三色系原則
這條原則是最基本也最具平衡性的一種方法,利用了顏色的生動性和互補性。設計師可以利用十二階色相環(huán)選擇任意相距120°的三種顏色分別作為背景色、內容頁顏色和導航顏色。
2: 互補色配色
第二種方法稍有難度但十分有效,需提前練習。這種方法需要挑選一組互補色和一組對比色。
3:類似色配色
第三種方法只關注互補色,設計師需要慎重選擇,考慮清楚配色帶給用戶的感覺。這種方法會增強顏色的生動性,所以要控制以免顏色太過夸張。所以,無論選擇哪種或者哪幾種顏色,都需要考慮整體配色效果。
看下圖網站配色,你認為它向外界傳遞出怎樣的信息?
1:背景色:黑色背景色傳遞出經典、優(yōu)質、正式與統(tǒng)一的感覺。顯然,具有指導性功能的網站需要利用配色傳遞出“優(yōu)質”“正式”的特性!敖y(tǒng)一性”有利于保證用戶粘性。
2:按鈕色:網站CTA按鈕選擇了紅色,與黑色背景形成了強烈對比,效果明顯,鼓勵用戶注冊,次重要的按鈕是帶有白色邊框的黑色。
3:字體色:白色字體顯眼又與網站整體配色搭配,圖標也利用了白色呈現簡單的描線風格,放在最下方折疊菜單處,鼓勵用戶下拉瀏覽更多內容。
整體來看,該網站的設計優(yōu)秀,配色合理美觀,網站給人經典又相對正式的感覺。紅色恰到好處的使用即不搶風頭又起到了很好的提示作用。
慎用甚至禁用顏色
一般情況下,棕色讓人聯想到自然,是大多數男性用戶最不喜歡的顏色,但在某些特定情況下能夠起到很好的效果,因為棕色同時意味著信賴。
在UPSlogo中的棕色效果就很好,因為UPS想傳遞出的信息就是“可信賴”。
不過有趣的是,棕色還給人以堅固感,因此適合做具有攻擊性運動的運動服。
女性用戶最不喜歡的顏色中包括橙色。
最后,需要再次強調,設計師一定要注重顏色搭配,盡量營造和諧的視覺體驗。
能夠幫助設計師選擇合適顏色的工具
Adobe Color CC,Paletton,Flat UI Color Picker,Mudcube Color Sphere,Check My Colours,Color。
總結:
色彩是設計中的一個重要元素,也是整體品牌的重要方面,選擇的顏色一定要傳遞出符合品牌特征的信息,又要配合品牌整體故事和含義。通常來講,設計師需要與現有l(wèi)ogo配合,基于已有信息選擇顏色。
本文關鍵詞:設計中的色彩心理學,由筆耕文化傳播整理發(fā)布。
本文編號:306146
本文鏈接:http://sikaile.net/wenshubaike/mishujinen/306146.html