色彩設計的基本原理

資訊頻道 - 設計技 來源:西瓜的設計 作者:cdo 2021-03-02

即然我們做設計師,逃脫不了的就是色彩了,光整個線框肯定是不爽的,對吧!但運用不好色彩,整個紅配綠,估計還不如線框看起來有成就感,所以我來說說關于色彩的一些知識吧。

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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


01/

色彩即“光”


事實上,色彩這東西是一種最不確定的東西,因為色彩的使用場景分為:計算機色彩和線下場景色彩,在計算機上看到的顏色與將其打印出來的顏色肯定是不一樣的。所以,搞懂色彩的姿態(tài)和組成搭配方式,包括表達方式,是學習色彩設計的第一個必修之路。

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

其實色彩,我們也可以理解成是“光”,因為有光的地方,才會有所謂的色彩一說,如果你是在一個黑燈瞎火的黑屋子里,也就不存在什么色彩了,一個全然黑暗的地方是不會存在顏色的,反過來說,在有光的地方就一定會具備所有的色彩,所以色彩我們也可以理解成是“光”。

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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


02/

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


色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

這里我順便科普一下光的知識:

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

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

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

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


03/

光源色的改變


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

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

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


04/

色彩的數(shù)目


色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

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

我這里簡單解答一下,因為光源與環(huán)境色的不同,色彩才會隨之改變,色彩在隨著環(huán)境的變化而變化時,就會導致觀看的感覺全然改變了。

知道了色彩原理和它們的數(shù)量之后,我們再來了解一下之前提到的關于色彩的表達方式(色彩語言)。


05/

表達色彩的語言


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

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

這里給不太清楚色彩三大要素的同學簡單補一下的功課:

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

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

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

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

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

這里有些同學可能對純度和明度比較難以理解,我把兩者的關系用一個圖展示一下,可能就一目了然了。

接下來,我們簡單說一下色彩的心理功能:


06/

色彩的心理功能


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

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

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

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


07/

RGB和CMYK


上面說了這么多,其實都是我即將要開始步入配色文章的基礎鋪墊,希望閱讀的你能真的好好讀下來,而不是跳過去。因為有些東西看起平淡無奇,實則撬動大理。

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

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

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

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


08/

冷色和暖色


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

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

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


09/

印象地圖和印象坐標


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

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

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

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

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

2)為了客戶:通過制作情緒板,在完成最終產(chǎn)品之前,你就可以得到一個大致的概念供客戶參考,同時當你的設計概念太過超前時,你們也可以得到一個方向上的參考;另外,設計圖片還能避免因為語言而產(chǎn)生的誤解;就算你們再說同一件事情,因為溝通上的問題也會出現(xiàn)不同的理解,而可視化的圖片則可以讓大家的意見都統(tǒng)一起來。

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

如果讓用戶自身描述色彩的調(diào)性其實還是比較困難的,因為這純屬于感性方面的東西,但如果我們會用印象地圖和坐標后,這個問題就很簡單了,制作印象地圖比較簡單。

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

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

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

色彩<a href=http://seniorhumorist.com/ target=_blank class=infotextkey>設計</a>的原理(上)

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

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

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

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

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

 

作者:西瓜,公眾號:西瓜的設計


聲明:站內(nèi)網(wǎng)友所發(fā)表的所有內(nèi)容及言論僅代表其本人,并不反映任何網(wǎng)站意見及觀點。

全部評論

暫無相關推薦