發(fā)布時(shí)間:2024-02-22 12:33:31 瀏覽量:154次
當(dāng)我們討論色彩的時(shí)候,聊的更多的是色彩的搭配。雖然有些設(shè)計(jì)師認(rèn)為有些色彩是一些純粹的美學(xué)上的選擇,但是實(shí)際上,色彩對于用戶的心理和行為的影響相對更深,最終會反映在用戶體驗(yàn)和行為反饋上。
經(jīng)過深思熟慮的配色最終會從「不錯(cuò)」提升到「優(yōu)秀」,平庸的配色最終會降低用戶體驗(yàn),甚至?xí)绊懢W(wǎng)站本身的可用性。
當(dāng)然,色彩理論是一個(gè)相對復(fù)雜的主題。從用戶體驗(yàn)的角度上來說,色彩所涉及到的遠(yuǎn)不是配色方案這一個(gè)維度。通常,我們聊得最多的是不同色彩所產(chǎn)生的心理效應(yīng),以及多色彩搭配的時(shí),相互之間的影響和可訪問性上的問題。
從掌握色彩的基礎(chǔ)特征,到了解色彩背后的用戶心理特征,接下來就可以逐步過渡到最有價(jià)值的部分:通過意想不到的搭配營造對比,使用協(xié)調(diào)的組合讓人愉悅,以及讓特定色彩最大化地發(fā)揮價(jià)值,達(dá)成設(shè)計(jì)目的。
雖然 藍(lán)/白/灰 三色的搭配有點(diǎn)過度使用,但是這三種顏色確實(shí)是非常實(shí)用的搭配,在金融行業(yè)的應(yīng)用非常普遍,因?yàn)槠渲兴{(lán)色通常和「忠誠、信任」有緊密的關(guān)聯(lián)。
我們其實(shí)沒少討論色彩心理學(xué)上的問題,不過這本身并不是一個(gè)淺顯的問題,色彩的心理影響是一個(gè)主觀且復(fù)雜的話題。不過,能夠利用好色彩心理學(xué)的知識,能夠解決更普遍的設(shè)計(jì)問題。
通常,配色方案會將色彩數(shù)量控制在3到4種,每種顏色單獨(dú)的特征和隱喻都非常容易理解,但是搭配起來則沒那么簡單。設(shè)計(jì)師通過學(xué)習(xí)基礎(chǔ)的色彩心理學(xué),將一部分色彩本身的屬性發(fā)揮出來,但是想要控制得更加細(xì)致,則需要了解更多的細(xì)節(jié)和更加深入的知識。
色彩本身的含義很容易學(xué)習(xí)和記憶,其中更加微妙的含義同樣可以很好運(yùn)用于數(shù)字設(shè)計(jì)。(Vandelay Design)
雖然黑白灰這樣的色彩作為輔助色廣泛存在于不同的配色方案當(dāng)中,但是它們本身占據(jù)大量面積或者用作主色的時(shí)候,用戶同樣可以感知到。
色彩的配比同樣會影響體驗(yàn)。以藍(lán)色為例,在簡約的布局當(dāng)中,大面積使用藍(lán)色作為主色調(diào),和在大面積白底上使用很小的一抹藍(lán)色用來強(qiáng)調(diào) CTA按鈕,所帶來體驗(yàn)是截然不同的。
另外,網(wǎng)站中細(xì)節(jié)的處理也會影響整體體驗(yàn),比如Zutano 和 P&N Bank 同樣是使用紅色和白色作為主要的色調(diào),但是它們的網(wǎng)站所帶來的體驗(yàn)是截然不同的。
雖然不愿意承認(rèn),但是設(shè)計(jì)師們經(jīng)常忽略一些色彩在不同文化當(dāng)中存在的差異,而這是一定不能忽略的。
比如白色,在西方世界當(dāng)中被視之為純潔純真,和希望有關(guān)。但是在亞洲地區(qū),白色和喪事有時(shí)候是會產(chǎn)生關(guān)聯(lián),以白色為主的設(shè)計(jì)常常會被視之為過于「素」,認(rèn)為不夠吉利。
不同國家的用色傾向
另外一方面,隨著現(xiàn)代主義運(yùn)動(dòng)的普及,白色也擁有了更加現(xiàn)代的特征,在日本白色甚至和當(dāng)?shù)匚幕Y(jié)合,延伸出更加細(xì)膩獨(dú)特的精神特質(zhì),隨著日本戰(zhàn)后設(shè)計(jì)領(lǐng)域的發(fā)展和崛起,白色在這一地區(qū)的含義則更加豐厚。原研哉在《白》一書當(dāng)中,針對白色的含義和特征進(jìn)行了非常深入的探討,之后的《Subtle》一書當(dāng)中,雖是圍繞紙來探討微妙的體驗(yàn),但是也沒少提及白色本身的特征。
《白》和《Subtle》
綠色在通常意義當(dāng)中被視作為和財(cái)富、自然、生命力有關(guān)的色彩,但是在某些宗教當(dāng)中被視作為神圣的色彩,它的內(nèi)涵和外延也都是不一樣的。
時(shí)間變化對于配色所帶來的影響不僅僅如此,比如:中日兩國在色彩使用上,還存在一個(gè)非常典型的差異,歷史上日本在一個(gè)很長的周期內(nèi)是作為中國的屬國所存在的,這也使得中國自古以來崇尚飽和度較高的正色。而日本則大多使用飽和度偏低的間色,這一特征可以從兩國的傳統(tǒng)色上體現(xiàn)出來:
中國傳統(tǒng)色
日本傳統(tǒng)色
不過,有些顏色所包含的含義,在不同的文化體系當(dāng)中差異并不大,比如橙色。不過說道橙色,值得一提的是,色彩的認(rèn)知還存在性別上的差異,有調(diào)研指出,男性更偏好橙色,而女性對于橙色的喜好則沒有男性那么強(qiáng)烈。
同樣的,時(shí)間對于色彩的影響最終還會影響到色彩的性別效應(yīng)。粉色在二戰(zhàn)以前其實(shí)性別意味并沒有那么強(qiáng)烈,但是二戰(zhàn)以后到現(xiàn)在,含義發(fā)生了巨大的變化。
不過這是更長維度上的變化,在短時(shí)間以內(nèi),流行色的趨勢變化,對于用色也也同樣存在影響。這種影響是非常直接的,在時(shí)尚行業(yè)有著非常直接的體現(xiàn),而在網(wǎng)頁和UI設(shè)計(jì)行業(yè),同樣存在存在。
比如2017年的潘通年度流行色是草木綠,而2018年的潘通年度流行色則是紫外光色。
紫色的流行在UI設(shè)計(jì)上則體現(xiàn)得非常明顯:
當(dāng)然,我們也會好奇,是否存在一種色彩,是不分性別文化,大家都會喜歡的呢?確實(shí)有人通過大規(guī)模的調(diào)研和探索找到了一種「世界上最受歡迎的色彩」。
所以,當(dāng)你在設(shè)計(jì)的時(shí)候,如果你的目標(biāo)用戶群體有著清晰的地域或者性別偏向,你可以有目的地利用這些知識來規(guī)避設(shè)計(jì)陷阱,更好地發(fā)揮色彩本身的功能和優(yōu)勢。如果受眾廣泛,則可以盡量使用通用性更強(qiáng)的色彩來進(jìn)行設(shè)計(jì)。
配色在品牌視覺中所發(fā)揮的作用是不言而喻的,但是,色彩本身的內(nèi)涵和情緒特質(zhì)并不是全部。比如一個(gè)行業(yè)當(dāng)中,很多企業(yè)都使用了藍(lán)色,那么你的公司繼續(xù)使用藍(lán)色,可以讓用戶更快「識別出」你所屬的領(lǐng)域,但是本身也存在讓人混淆的風(fēng)險(xiǎn)。如果你想要在視覺上脫穎而出,可以試著使用不同的色彩。
紅色的含義很豐富,它是既代表危險(xiǎn),也代表激情和亢奮,紫色則有奢華感。維珍航空使用略偏紫的紅色,來作為網(wǎng)頁的設(shè)計(jì)用色,營造出富有奢華而富有激情的氛圍,正面而富有高級感。
在進(jìn)行品牌設(shè)計(jì)的時(shí)候,選擇配色的第一步,始終是了解各種顏色或者色相的氣質(zhì)和情感屬性。然后,在具體設(shè)計(jì)的時(shí)候,在進(jìn)一步根據(jù)品牌的氣質(zhì)和需求,再在色相的基礎(chǔ)上調(diào)整明暗和飽和度。
下面附上各種色彩的基本情感屬性和氣質(zhì)特征:
紅色:危險(xiǎn),激情,興奮。它是最激烈的顏色,能夠引起更強(qiáng)烈的反應(yīng),甚至引起生理反應(yīng)。更為明亮的粉紅色會帶有女性化和浪漫的特征,而偏暗的栗色則顯得柔和、高級而傳統(tǒng)。
橙色:創(chuàng)意、冒險(xiǎn)、青春。橙色富有活力,同時(shí)橙色和70年代的時(shí)代氣息聯(lián)系最為緊密,也最能喚起復(fù)古的感覺。
黃色:快樂、愉悅、警告。無論是在兒童還是在成年人的設(shè)計(jì)當(dāng)中,黃色都非常的受歡迎。柔和的黃色給人感覺更加中性,給嬰兒用也非常合適,明亮的黃色在設(shè)計(jì)中非常受歡迎。色調(diào)較深的黃色接近金色,這和財(cái)富和成功上有關(guān)聯(lián)。黃色有時(shí)候還會用作警告。
綠色:財(cái)富,生命,健康。綠色所產(chǎn)生的聯(lián)想更為豐富。一方面,較暗的綠色和傳統(tǒng)的財(cái)富的概念有關(guān)聯(lián)(美元紙幣?),另一方面它海河環(huán)境、自然概念緊密,檸檬綠則和更新、生長的概念非常貼近。
藍(lán)色:信任、溝通、憂傷。
藍(lán)色是受歡迎程度最高的色彩,明亮的藍(lán)色與忠誠度和信任有較深的關(guān)聯(lián),較暗的藍(lán)色則和悲傷、抑郁的情緒氛圍關(guān)系緊密。正是因?yàn)樗{(lán)色受歡迎,所以使得大量的品牌選擇藍(lán)色色調(diào)作為基礎(chǔ)色。
紫色:高貴、靈性、神秘。
紫色自古一來就是和皇室、財(cái)富聯(lián)系在一起,因?yàn)樽仙剂显诠糯拿鳟?dāng)中難以獲取,很難獲取。另外,它本身具有明顯的神秘感,因此還和靈性有關(guān)。紫色還能喚醒創(chuàng)造力,因此也是一種獨(dú)特的色彩。
黑色:精致,奢華,壓抑。
黑色本身能夠給設(shè)計(jì)帶來高級感,但是也有悲傷和壓抑的一面。黑色作為中性色經(jīng)常和其他的色彩一起使用,不同的使用方法,能創(chuàng)造不同的體驗(yàn),現(xiàn)代或者傳統(tǒng),正式或者休閑,無論哪種。
白色:純潔,純真,簡潔。
白色大多情況下呈現(xiàn)出來的是一種積極的情緒,在極簡主義設(shè)計(jì)當(dāng)中被廣泛地運(yùn)用,就像黑色一樣,它可以凸顯或者放大其他色彩的一些特征。
灰色:灰色本身可以有很多不同的含義,但是具體的含義取決于不同的情況。
它可以顯得很復(fù)雜,可以顯得暗淡無光,可以呈現(xiàn)出高級感,也能顯得無情,同時(shí)也可以喜怒無常。它在一定程度上會呈現(xiàn)出來負(fù)面或者悲傷的情緒,這也主要取決于如何使用,深淺如何。
棕色:棕色實(shí)際上是明度更低的橙色,它是泥土的色彩,所以也帶有自然的氣質(zhì)屬性,容易讓人想起大地。它可以讓人覺得舒適或者復(fù)古,也能凸顯骯臟的一面,同樣的,取決于如何使用。
了解這些色彩的性格和含義,只是為設(shè)計(jì)師提供一個(gè)設(shè)計(jì)基礎(chǔ),在此基礎(chǔ)上為產(chǎn)品和品牌來創(chuàng)造配色方案是比較合理的。
當(dāng)然,單純「用哪些色彩」也不是全部的影響因素。就像之前的案例一樣,即使使用了類似或者相同的色彩,但是在處理方法上有所差異,也能帶來截然不同的體驗(yàn)。
比如紅色和黃色的搭配,有調(diào)研表明,這兩種色彩搭配在一起的時(shí)候能夠更快喚醒人類的食欲(這種視覺上的影響是生物性的),所以很多餐飲巨頭會使用這兩種色彩來作為配色的基礎(chǔ)。
麥當(dāng)勞和 Wendy’s 均是美國餐飲巨頭,兩家在品牌設(shè)計(jì)上同樣使用了紅色和黃色為主的配色,但是你看看兩家的LOGO配色,Wendy 中采用了大面積的紅色,而麥當(dāng)勞簡約的形體之下,只使用了黃色(其他地方?jīng)]少用紅色)。同樣的,在包裝,店面裝修和印刷品的處理上,兩家在兩種主色調(diào)的框架下,進(jìn)行了截然不同的設(shè)計(jì),完全做到了差異化和區(qū)分。
必須明確的是,色彩理論是一只腳站在科學(xué)領(lǐng)域當(dāng)中,另一只腳則踏在藝術(shù)的區(qū)域里面。就像我們之前所說的,色彩的含義只能作為參考,而非依據(jù),色彩之間的搭配所帶來的也絕非氣質(zhì)和體驗(yàn)上的 1 + 1 = 2,不同色彩之間的「化學(xué)反應(yīng)」所帶來的變化往往無法精準(zhǔn)預(yù)測,需要通過測試和調(diào)整來達(dá)成設(shè)計(jì)目標(biāo)。
這款給植物澆水的概念應(yīng)用,使用了色調(diào)獨(dú)特的綠色作為主色調(diào),搭配了低飽和度的藍(lán)色、黃色和紅色,這種色彩上的微調(diào)讓整個(gè)應(yīng)用顯得不單調(diào)但是足夠沉穩(wěn)優(yōu)雅。
打破常規(guī)的配色方案是讓品牌與眾不同的好辦法。雖然想要?jiǎng)?chuàng)造出這樣的配色方案,比起傳統(tǒng)的配色方式更需要技巧,但是設(shè)計(jì)師要學(xué)會這樣的配色方法并不困難。
想要讓配色方案更加突出,在設(shè)計(jì)中添加強(qiáng)調(diào)色可能是最容易入手的地方。
舉個(gè)例子:一個(gè)律師事務(wù)所的網(wǎng)站可能會使用傳統(tǒng)的灰色和海軍藍(lán)作為基礎(chǔ)配色,但是,如果能夠加入檸檬綠作為強(qiáng)調(diào)色,會顯得獨(dú)特很多,能夠和其他的同類網(wǎng)站區(qū)別出來。或者你可以看看 Hogan Lovells 這個(gè)案例,作為一個(gè)法律行業(yè)的網(wǎng)站,它采用了白色、灰色和淺綠色作為配色方案,它比其他的同類網(wǎng)站看起來更加年輕也更加現(xiàn)代。
Hogan Lovells 采用了非常清新的色調(diào)來營造現(xiàn)代設(shè)計(jì)。
Berdan Real Estate 是另外一個(gè)值得學(xué)習(xí)的案例。作為一個(gè)房地產(chǎn)網(wǎng)站,它的配色方案是以黃色和桃紅色為主的,這兩種色彩在同類網(wǎng)站中并不常見,其他的同類網(wǎng)站大多數(shù)還是以藍(lán)色、紅色和大面積的綠色為主要配色的。黃色和桃紅的配色讓 Berdan Real Estate 顯得更加富有活力。
Berdan Real Estate 規(guī)避開了典型的企業(yè)網(wǎng)站配色,轉(zhuǎn)而使用新鮮溫暖的配色方案。
保險(xiǎn)業(yè)也是一個(gè)非常典型、非常傳統(tǒng)的行業(yè),它們并沒有像其他的現(xiàn)代企業(yè)一樣隨著時(shí)代的變化而發(fā)生根本性的革命,但是這并不意味著這些企業(yè)沒法在設(shè)計(jì)上動(dòng)心思。Lemonade 這個(gè)網(wǎng)站就采用了灰色和白色為主的配色方案,強(qiáng)調(diào)色用的是紫紅色。在這個(gè)以冒險(xiǎn)而聞名的行業(yè)當(dāng)中,這種設(shè)計(jì)本身也算得上是出人意表。
Lemonade
60–30–10 規(guī)則其實(shí)是一套很簡單的配色規(guī)則,這套配色方法據(jù)說是室內(nèi)設(shè)計(jì)行業(yè)中總結(jié)出來的。這套規(guī)則很簡單,這三個(gè)數(shù)字分別對比配色方案中三種顏色的配比,相對中性的色調(diào)占據(jù)整個(gè)顏色配比的60%,這種顏色的對比色占據(jù)配比 30%,而第三種顏色則作為強(qiáng)調(diào)色,占據(jù)10%的配比。
對于想要嘗試非常規(guī)的配色方案的設(shè)計(jì)師而言,更容易上手,并且這種配色方法通常也不太容易超出行業(yè)或者品牌的設(shè)計(jì)規(guī)范和設(shè)計(jì)預(yù)期。其中用來強(qiáng)調(diào)的配色,占據(jù)的配比僅有10%,能夠讓設(shè)計(jì)獨(dú)特,又不會占據(jù)太大的面積影響主要的配色方案。而這也可以讓品牌配色更加具備前瞻性,從而可以從同行當(dāng)中脫穎而出。
Clarity Stress Management 的網(wǎng)站就很好地踐行了60-30-10 規(guī)則,首屏當(dāng)中的紫色、白色和洋紅大體上是按照這樣的配比和功能來設(shè)計(jì)的。
雖然色彩理論是一套相對復(fù)雜的學(xué)科,但是基礎(chǔ)的知識并不是那么復(fù)雜,設(shè)計(jì)師可以結(jié)合知識來更加高效地使用配色,創(chuàng)造出更加多樣和復(fù)雜的配色方案。
精心設(shè)計(jì)的配色方案,尤其是一些意想不到的配色,不僅貼合美學(xué)上的需求,而且可以對用戶產(chǎn)生心理影響,讓品牌看起來更加獨(dú)特,帶來更加獨(dú)特的用戶體驗(yàn)。
譯者:陳子木
本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
熱門資訊
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范,原來如此重要!
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎?這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范,包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
3. 移動(dòng)端UI設(shè)計(jì)中常見的5種APP界面類型,你get到了嗎?
通過介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型,幫助大家更好地了解UI設(shè)計(jì)的基本知識
4. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
5. 移動(dòng)端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個(gè)好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
6. 推薦10本適合UI設(shè)計(jì)師看的書籍,輕松掌握技能!
對于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久?培訓(xùn)完能拿多少工資?
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程,以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣?想學(xué)UI設(shè)計(jì)要多少錢?
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎?不知道學(xué)UI設(shè)計(jì)要花多少錢?不妨看看這篇文章,了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
10. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對色彩在早期文明社會中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
最新文章
同學(xué)您好!