色彩設(shè)計(jì)的原理(上)

0 評(píng)論 12326 瀏覽 48 收藏 24 分鐘

編輯導(dǎo)語:設(shè)計(jì)師在日常的工作中對(duì)于色彩的運(yùn)用是十分重要的,一個(gè)產(chǎn)品首先映入眼簾的就是它的顏色,所以對(duì)于產(chǎn)品的定位以及顏色的把控也是設(shè)計(jì)師的一大重點(diǎn);本文作者分享了關(guān)于色彩設(shè)計(jì)的原理,我們一起來了解一下。

大家好,你們猜我今年吃的最多的是什么?是餃子,吃的品種最多的也是餃子!

色彩設(shè)計(jì)的原理(上)

今年的餃子中我覺得最好吃的就是四喜餃子,就那種肚子里有肉餡兒,皮兒上另外放四種食物色兒包起來的餃子;作為設(shè)計(jì)師,我比較喜歡色兒多的食物,這個(gè)文章也是跟色兒有關(guān)的,就是色彩設(shè)計(jì)的原理知識(shí)闡述。

竟然我們做設(shè)計(jì)師,逃脫不了的就是色彩了,光整個(gè)線框肯定是不爽的,對(duì)吧!但運(yùn)用不好色彩,整個(gè)紅配綠,估計(jì)還不如線框看起來有成就感,所以我來說說關(guān)于色彩的一些知識(shí)吧。

色彩設(shè)計(jì)的原理(上)

在了解配色之前,你首先需要學(xué)習(xí)的是色彩原理“Color Rules”,但其實(shí)你可能不知道的是,色彩原理之前你還應(yīng)該在刨一層(對(duì),往色彩它家祖墳上刨),就是色彩的表達(dá)方式。

一、色彩即“光”

事實(shí)上,色彩這東西是一種最不確定的東西,因?yàn)樯实氖褂脠?chǎng)景分為:計(jì)算機(jī)色彩和線下場(chǎng)景色彩,在計(jì)算機(jī)上看到的顏色與將其打印出來的顏色肯定是不一樣的。所以,搞懂色彩的姿態(tài)和組成搭配方式,包括表達(dá)方式,是學(xué)習(xí)色彩設(shè)計(jì)的第一個(gè)必修之路。

色彩設(shè)計(jì)的原理(上)

其實(shí)色彩,我們也可以理解成是“光”,因?yàn)橛泄獾牡胤?,才?huì)有所謂的色彩一說,如果你是在一個(gè)黑燈瞎火的黑屋子里,也就不存在什么色彩了,一個(gè)全然黑暗的地方是不會(huì)存在顏色的,反過來說,在有光的地方就一定會(huì)具備所有的色彩,所以色彩我們也可以理解成是“光”。

色彩設(shè)計(jì)的原理(上)

那么,光到底是什么東西呢?其實(shí)光就是電磁波的一部分(這里的電磁波可不是你理解的七龍珠里的動(dòng)感光波哦!),在電磁波中,包含了從無線電廣播及電視所使用的長(zhǎng)波,到紫外線,x射線以及被稱為y射線的短波,這些電磁波都是無法被我們?nèi)搜鬯吹降模渲?,只有一種我們才是可見的,那就是“可見光”。

二、“光”的組成與看得見的原理

色彩設(shè)計(jì)的原理(上)

可見光其實(shí)還是可以分類的,它其實(shí)就是一層一層的顏色合并起來的,波長(zhǎng)最長(zhǎng)的是紅色,中間是綠色,最短的是是偏藍(lán)的顏色;這里你發(fā)現(xiàn)了沒有,其實(shí)它就是紅、橙、黃、綠、藍(lán)、靛、紫的組成,這個(gè)組成就是:“可見光”,是不是瞬間感覺很親切?!我們?cè)谛W(xué)的自然課上就玩過那種三棱鏡,三棱鏡就是可以將太陽光分解出來的一種好東西。

這里我順便科普一下光的知識(shí):

  • 可見光(波長(zhǎng))的范圍:390nm~780nm的電磁波;
  • 人眼可見范圍一般是:312nm~1050nm;
  • 可見光透過三棱鏡可呈現(xiàn):紅、黃、綠、藍(lán)、靛、紫,他們的結(jié)合稱為:光帶,也可以叫:光譜;
  • 一個(gè)光帶(光譜)中,紅色光波長(zhǎng)最長(zhǎng)(640nm~780nm),相反,紫色光最短(380nm~470nm);
  • nm:納米,也叫毫微米,它是長(zhǎng)度的度量單位。

色彩設(shè)計(jì)的原理(上)

那么,可見光的來源是哪里呢?當(dāng)然是太陽了,太陽每日東升西落散發(fā)的光,就包含:y射線、x射線、紫外線、可見光、紅外線…等等等等,我們能用三棱鏡折射出來并用肉眼看到的,就叫做“光源色”。

如果你想讓光源色變成你喜歡的顏色,只要在光源前面加上一層你喜歡的色彩透明物就可以了,這種出來的色彩我們就稱它為“透過光”;比如我們的紅色透明卡片,在光源透過紅色卡片后,呈現(xiàn)出來的紅色光,就是“透過光”了。

色彩設(shè)計(jì)的原理(上)

但這里你一定要明白一個(gè)重點(diǎn),那就是我們身邊幾乎所有的東西都不會(huì)自行發(fā)光,而是需要借助太陽光和照明材料的照射才能看到;這種所謂的感知色彩方式,我們就稱它為“反射光”,或者是“表面色”。

而且,只有那些能照射到物體上的光才能稱得上是“光源色”,其實(shí)那種光本身我們幾乎是感覺不到色彩存在的;但是由于物體本身表面涂上了涂料或者油墨什么的,也或者是物體本身的有色性質(zhì),當(dāng)光照射上去后,物體會(huì)將幾乎所有的波長(zhǎng)都全部吸收進(jìn)去;而這些全部波長(zhǎng)中,能留下來并能使人眼看到的波長(zhǎng),才是我們最終能看到身邊那些色彩的根本原理所在。

三、光源色的改變

剛才講到的知識(shí),可能你感覺和配色沒什么關(guān)系哈,但這些其實(shí)是真正學(xué)習(xí)色彩最基礎(chǔ)的知識(shí),你只有清清楚楚的知道了色彩的原身到底是什么,怎么來的,你才能更好的掌握它要去哪里,怎么使用,對(duì)不!

色彩設(shè)計(jì)的原理(上)

剛才我就說到光源色了,但這里需要再提一點(diǎn),光源色可不是一成不變的,舉幾個(gè)例子吧,光源色一般會(huì)有:太陽光、熒光燈、白熾燈、火焰、LED燈,等等……好多好多,就算單純的一個(gè)太陽光,在晴天和陰天的天氣下,也是不一樣的;所以說,光源色顏色如果不同,那么被那種光源所照射而看到的“反射色”顏色也就會(huì)隨之改變了。

給你舉個(gè)例子,我們?nèi)ト怃佡I豬肉,一般那些老板都會(huì)用通紅的燈光照色豬肉,這樣豬肉才看起來新鮮可口,可我們買回去再看,也就很一般了,這就是光源色不同帶來的改變。

四、色彩的數(shù)目

色彩設(shè)計(jì)的原理(上)

在色彩學(xué)中,目前人類能計(jì)算出來的色彩數(shù)目大約是750萬種;但是,真正能用于識(shí)別色彩語言和有名稱的,也不是很多,目前能區(qū)分出來的并且有名稱的顏色也就269種,可能咱日常中使用的都不到100種吧。

但是!你可能不知道,雖然我們?nèi)粘J褂玫臄?shù)量不多,但眼睛可是很給力的,我們普通人眼(沒受過訓(xùn)練的)也能分辨出大約3000~5000種顏色;并根據(jù)美國(guó)科學(xué)部調(diào)查結(jié)論所述,人類具有分辨數(shù)百萬種顏色的能力,是不是這樣一聽就很給力呢?那么,這里細(xì)心的你可能會(huì)有一個(gè)小疑惑就是——為什么會(huì)有那么多色彩呢,這些色彩是怎么來的呢?

我這里簡(jiǎn)單解答一下,因?yàn)楣庠磁c環(huán)境色的不同,色彩才會(huì)隨之改變,色彩在隨著環(huán)境的變化而變化時(shí),就會(huì)導(dǎo)致觀看的感覺全然改變了。

知道了色彩原理和它們的數(shù)量之后,我們?cè)賮砹私庖幌轮疤岬降年P(guān)于色彩的表達(dá)方式(色彩語言)。

五、表達(dá)色彩的語言

通過了解色彩的表達(dá)語言,才是你剛剛邁入使用色彩的第一步,別著急,這可是基礎(chǔ),要穩(wěn)扎穩(wěn)打才行。

色彩設(shè)計(jì)的原理(上)

在我們了解的269種顏色中,色彩有各式各樣的分類和表達(dá)方式,這么多我們需要怎么搞呢?其實(shí)很簡(jiǎn)單,在色彩的基礎(chǔ)學(xué)里有一個(gè)叫做“曼塞爾色系”的理論,這個(gè)“曼塞爾色系”聽起比較高端,用大白話給你翻譯一下就比較親切了,它就是我們?nèi)粘?谥薪械摹吧啞?;但他不光只涵蓋色輪這一個(gè)概念,“曼塞爾色系”理論還將基礎(chǔ)色分為了:色相、純度、明度三種要素。

這里給不太清楚色彩三大要素的同學(xué)簡(jiǎn)單補(bǔ)一下的功課:

所謂“色相”,指的就是像紅色或者藍(lán)色這些色調(diào)的稱呼,也就是它們的面相,在剛才我說的“曼塞爾色系”的理論(色輪)中,一共會(huì)有10種基礎(chǔ)色相。

“純度”,是指色彩鮮明的程度,比如:“鮮艷的顏色”、“暗沉的顏色”,這種表達(dá)方式就是純度的意思,按照邏輯那么就是越鮮艷的純度就越高,越暗沉的純度也就越低;色輪中,無論是哪種顏色,只要它純度越低,就一定越接近灰色。

最后一個(gè),“明度”,是指色彩的明亮程度,和純度一樣,也是以高和低表示;明度最高是白色,相反,最低是黑色。

在軟件的拾色器中,色相、純度、明度分別為:H、S、L。

色彩設(shè)計(jì)的原理(上)

這里有些同學(xué)可能對(duì)純度和明度比較難以理解,我把兩者的關(guān)系用一個(gè)圖展示一下,可能就一目了然了。

接下來,我們簡(jiǎn)單說一下色彩的心理功能:

六、色彩的心理功能

作為設(shè)計(jì)師,你一定已經(jīng)知道色彩是可以影響人心情的了,比如:黃色可以發(fā)揮凝聚力,紅色可以使心態(tài)變得積極向上,藍(lán)色可以減退食欲和降血壓,等等。

色彩設(shè)計(jì)的原理(上)

色彩給人造成的心理效應(yīng)絕對(duì)是夠震撼的,所以,色彩的一些簡(jiǎn)單心理效應(yīng)也是需要我們提前大概了解一下的,因?yàn)檫@對(duì)我們后期配色有著至關(guān)重要的作用;比如說我們現(xiàn)在要設(shè)計(jì)一個(gè)高端的商務(wù)網(wǎng)站,那么是不是第一腦補(bǔ)的就是一些黑和藍(lán)的科技風(fēng)格呢?又或者設(shè)計(jì)一個(gè)西餐菜單,可能就會(huì)想到黑和橙色。

色彩設(shè)計(jì)的原理(上)

當(dāng)然了,不同的顏色給人心理的重量感覺和距離感覺也是不同的,比如兩個(gè)同樣大小的盒子,一個(gè)黑色一個(gè)白色,我們普遍都會(huì)第一認(rèn)為黑色盒子比白色盒子重一些。又或者裝修家里面我們把墻面刷成白色,目的就是為了視覺感官上墻面離我們更遠(yuǎn),這樣會(huì)顯得室內(nèi)空間變大。

其實(shí)最著名的配色心理效應(yīng)是我們?nèi)粘T隈R路上見到的那些路標(biāo)牌子,這些路標(biāo)牌子的配色不僅遠(yuǎn)處容易看到,而且就算在有風(fēng)景的環(huán)境下,也可以一目了然,第一時(shí)間喚起人們的注意力。

這就是正確配色的神奇之處,如果你希望你的界面或者點(diǎn)擊元素被用戶第一時(shí)間看到,那就需要先大致了解一下色彩對(duì)人的心理感受與情感鏈接。

七、RGB和CMYK

上面說了這么多,其實(shí)都是我即將要開始步入配色文章的基礎(chǔ)鋪墊,希望閱讀的你能真的好好讀下來,而不是跳過去。因?yàn)橛行〇|西看起平淡無奇,實(shí)則撬動(dòng)大理。

好了,開始說這一環(huán)節(jié),這個(gè)環(huán)節(jié)是RGB和CMYK的色彩表示說明;在講之前,我先回顧一下之前說到的那個(gè)“透過色”和“反射色”,我們知道了光是加上顏色之后所透出的才叫做“透過色”,而光照射到物體上反射出來的是叫做“反射色”。

那么,我們現(xiàn)在要講的新知識(shí)就是透過色和反射色的混合方式了,就像我們?cè)谡{(diào)一杯果汁,同樣的,透過色和反射色也是被多個(gè)元素混合調(diào)制而成。

色彩設(shè)計(jì)的原理(上)

先說透過色,它首先是屬于“加色混合”的方式所調(diào)制,其內(nèi)容包含:紅(red)、綠(green)、藍(lán)(blue)共三種顏色混合所表現(xiàn)出來的各種顏色,我們稱它為:RGB色彩,使用場(chǎng)景就是在我們的顯示器屏幕上。

色彩設(shè)計(jì)的原理(上)

另一個(gè)反射色,它和透過色相反,屬于“減色混合”方式調(diào)制,它是用畫具、染料、油墨之類的“色材”來表現(xiàn)顏色的,其內(nèi)容包含:青(cyan)、品紅(magenta)、黃(yellow)、黑(black)四種油墨相互結(jié)合而成,我們稱它為:CMYK色彩,使用場(chǎng)景就是我們的印刷品上,你看到的打印機(jī)里的那幾個(gè)油墨盒子就是CMYK的原身。

你應(yīng)該發(fā)現(xiàn)了,顯示器上的顏色和印刷出來的顏色配比壓根兒就是不一樣的,所以,在你設(shè)計(jì)時(shí),一定要提前設(shè)置好這個(gè)關(guān)鍵點(diǎn);并且,如果你是作平面設(shè)計(jì)的,一定要有一套自己的配色卡,光憑屏幕上的配色來進(jìn)行設(shè)計(jì),是有一定風(fēng)險(xiǎn)的,最好是對(duì)照專用的色表進(jìn)行色彩選取,這樣電腦上制作完打印出來的才是符合視覺的色彩配色。

八、冷色和暖色

首先我要明確一點(diǎn)的是,全世界的人對(duì)色彩的冷、暖感知都是相同的;所以,在設(shè)計(jì)時(shí),你不用考慮地域差異問題,只要考慮產(chǎn)品本身色彩對(duì)目標(biāo)用戶是否匹配即可。

色彩設(shè)計(jì)的原理(上)

在“曼塞爾色系”(色輪)中,以紅、黃為中心的色相我們稱之為:暖色,而以藍(lán)、紫為中心的色相我們稱之為:冷色,而冷暖周圍的色塊我們就稱為:暖色區(qū)和冷色區(qū)了。

在定位了冷、暖色區(qū)后,我們可以根據(jù)區(qū)域的劃分進(jìn)行色彩的選取,產(chǎn)品冷暖色的選取,決定了產(chǎn)品的調(diào)性風(fēng)格,它是直接影響用戶視覺及心理的第一感受要素。

九、印象地圖和印象坐標(biāo)

在明確知道冷暖色的區(qū)間與定位后,我們就可以創(chuàng)建自己的色彩印象地圖和印象坐標(biāo)了,環(huán)環(huán)相扣式的色彩認(rèn)識(shí),能讓你在看似繁瑣的過程中快速提升配色,那么剛才我說的印象地圖和坐標(biāo)是什么呢?

其實(shí)它可以理解為我們產(chǎn)品設(shè)計(jì)時(shí)的一種調(diào)研方式——“情緒版”,情緒版我想大家應(yīng)該明白吧,我這里啰嗦一下,給大家從新普及一下情緒版的概念知識(shí)。

色彩設(shè)計(jì)的原理(上)

情緒版:對(duì)使用對(duì)象與產(chǎn)品認(rèn)知的色彩,影像,數(shù)字資產(chǎn)或其它材料的收集,可以引起某些情緒反應(yīng),作為設(shè)計(jì)方向與形式的參考;設(shè)計(jì)師運(yùn)用它來檢視色彩,樣式,并據(jù)以說服其它人之所以如此設(shè)計(jì)的理由。

他其實(shí)有兩層作用,一個(gè)對(duì)內(nèi),一個(gè)對(duì)外,對(duì)內(nèi)是對(duì)自己,對(duì)外是對(duì)客戶,先說對(duì)自己:

1)為了自己:在開始設(shè)計(jì)之前,通過收集一些想法與靈感,可以簡(jiǎn)化設(shè)計(jì)的流程,將茫然的盯著雪白的屏幕的時(shí)間大幅縮短;另外,你的概念被用戶送承認(rèn),也能節(jié)約你的時(shí)間和勞力。

2)為了客戶:通過制作情緒板,在完成最終產(chǎn)品之前,你就可以得到一個(gè)大致的概念供客戶參考,同時(shí)當(dāng)你的設(shè)計(jì)概念太過超前時(shí),你們也可以得到一個(gè)方向上的參考;另外,設(shè)計(jì)圖片還能避免因?yàn)檎Z言而產(chǎn)生的誤解;就算你們?cè)僬f同一件事情,因?yàn)闇贤ㄉ系膯栴}也會(huì)出現(xiàn)不同的理解,而可視化的圖片則可以讓大家的意見都統(tǒng)一起來。

我想這么解釋情緒版,大家應(yīng)該比較容易理解,并且,應(yīng)該多多少少感覺到色彩印象地圖和坐標(biāo)的含義了吧,是的,它們其實(shí)和情緒版類似,目的也是為了定位產(chǎn)品的配色基調(diào)和方向的;所謂印象,就是用戶對(duì)某產(chǎn)品、某物體、某外界的一種心智認(rèn)知,用大白話翻譯就是“我認(rèn)為的它應(yīng)該是這個(gè)顏色和感覺”;而地圖就是一種能找到色彩感覺的路線指南,坐標(biāo)就是數(shù)學(xué)中的函數(shù)坐標(biāo)軸。

如果讓用戶自身描述色彩的調(diào)性其實(shí)還是比較困難的,因?yàn)檫@純屬于感性方面的東西,但如果我們會(huì)用印象地圖和坐標(biāo)后,這個(gè)問題就很簡(jiǎn)單了,制作印象地圖比較簡(jiǎn)單。

直接上例子,方法&案例混合闡述:

色彩設(shè)計(jì)的原理(上)

比如某客戶要求你做一個(gè)某某美食產(chǎn)品,我們可以運(yùn)用印象地圖來解決,制作方式如下,首先收集許多與客戶印象符合的素材(比如:照片、圖片等,任何素材都可以,你可以大膽發(fā)揮想象,例如一堆沙子,一片葉子、一張布,都可以);收集完后將收集的素材擺在地上或貼到紙上,然后稍微離遠(yuǎn)一些瀏覽,這種客戶選出的素材集合,整體的色彩感知,就是印象地圖了;如果想要精確一些,可以像這些素材拍個(gè)集體照,然后放入PS軟件內(nèi)處理成馬賽克,這樣就更加精準(zhǔn)的知道客戶想要的產(chǎn)品色彩感知了。

而印象坐標(biāo)一般是在產(chǎn)品團(tuán)隊(duì)討論產(chǎn)品是要趨向于年輕還是成熟或者輕量級(jí)還是重量級(jí)等等方向時(shí)所使用的手法,制作方式如下:

色彩設(shè)計(jì)的原理(上)

畫出一個(gè)坐標(biāo)軸,X軸兩端為:溫暖、清爽,y軸兩端為:年輕、成熟(x軸和y軸的名稱必須是對(duì)立的,并且是從兩個(gè)方向定位,比如x軸定位產(chǎn)品是溫暖型的還是鋼煉型的,y軸是活躍年輕配色還是成熟穩(wěn)重的配色);畫好之后采取多人討論的方式,最終將收集來的素材放入坐標(biāo)軸的四個(gè)象限內(nèi),這樣一個(gè)印象坐標(biāo)就做好了。

印象坐標(biāo)雖說不能起到?jīng)Q定性作用,但作為配色的目的來說,一定派得上用場(chǎng)。

好了,這篇文章就先寫到這里,其實(shí)還沒完,下篇我繼續(xù)講配色的原理。

這篇文章我主攻范圍就是最基礎(chǔ)的色彩來源、改變的原理、色彩數(shù)目、色彩心理感知、RGB和CMYK、冷暖色、印象圖和坐標(biāo)。

下篇文章我重點(diǎn)闡述配色方式與應(yīng)用,可能說起來下篇文章較為工具型,但我認(rèn)為,若想徹底對(duì)色彩大世界有新的認(rèn)識(shí)與改變,還需要從源頭出發(fā)去認(rèn)識(shí)色彩;這樣做的結(jié)果,你會(huì)發(fā)現(xiàn),我們?cè)诤笃趯?duì)色彩的認(rèn)識(shí)與使用上會(huì)有新的認(rèn)識(shí),就包括在你走路時(shí),或許溫暖的陽光會(huì)讓你有一絲新的了靈感觸發(fā)呢?!

 

作者:西瓜,公眾號(hào):西瓜的設(shè)計(jì)

本文由 @西瓜的設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!