2019-1-25 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
其實(shí)根據(jù)我的從業(yè)經(jīng)驗(yàn)來(lái)看，如果想真正的了解色彩，就需要一套非常完整、系統(tǒng)的訓(xùn)練方法。可能很多人包括我自己，一開(kāi)始都對(duì)這些訓(xùn)練不以為意，認(rèn)為直接學(xué)習(xí)配色理論或方法不是更好么？為什么還要做這些色彩訓(xùn)練呢？認(rèn)為這些訓(xùn)練沒(méi)有意義，甚至有的人會(huì)覺(jué)得是小孩玩的游戲。
但殊不知其實(shí)我們每個(gè)人的色感，正是在兒童時(shí)期形成的，因?yàn)閮和瘯r(shí)期的認(rèn)知更加純粹，對(duì)于色彩的想象力以及受到的限制要比成人少得多，所以賦予色彩的深度和廣度也就比成年人更加豐富。
這也是為什么很多人看到小朋友的繪畫(huà)，會(huì)覺(jué)得他們很有配色天賦了。
所以我們要做的就是打破對(duì)色彩的固有認(rèn)知，讓自己回歸到一種單純的狀態(tài)，來(lái)重新認(rèn)識(shí)色彩。
比如現(xiàn)在給你一個(gè)蘋(píng)果，可能我們的第一反應(yīng)就是直接把它吃了，事后要你回憶對(duì)蘋(píng)果這個(gè)物體的印象，也許你體會(huì)的并不深刻。
而如果我們改變條件，假設(shè)你從未見(jiàn)過(guò)蘋(píng)果，這一次你不僅要吃掉蘋(píng)果，還要說(shuō)出你的感受。
根據(jù)你的五官對(duì)其進(jìn)行認(rèn)知，這時(shí)你對(duì)蘋(píng)果的體會(huì)將和前一次大不相同。
比如通過(guò)視覺(jué)我們可以看到綠色，通過(guò)嗅覺(jué)可以聞到果香，通過(guò)觸覺(jué)可以感受到堅(jiān)硬，通過(guò)味覺(jué)可以品嘗到酸甜，通過(guò)聽(tīng)覺(jué)可以聽(tīng)到清脆聲。
而重新認(rèn)識(shí)色彩也是同樣的道理，就像我們從未見(jiàn)過(guò)蘋(píng)果一樣去體驗(yàn)一個(gè)假設(shè)我們從未見(jiàn)過(guò)的色彩，然后通過(guò)不同的角度去對(duì)色彩進(jìn)行拆解，最后組合在一起形成屬于我們自己的配色體系。
創(chuàng)建個(gè)人色彩體系的第一步，就是為色彩命名。
比如我們隨便找一個(gè)顏色，就拿這個(gè)黃色來(lái)舉例。
根據(jù)自己對(duì)這個(gè)色彩的感覺(jué)來(lái)命名，可以隨意發(fā)揮，你想到什么就可以說(shuō)什么，沒(méi)有限制。
比如從最基本的色相角度出發(fā)，我們可以叫它鮮黃色。
根據(jù)這個(gè)顏色我們可以聯(lián)想到向日葵，所以也可以命名為向日葵。
我們還可以聯(lián)想到月亮，所以也可以起名叫月亮黃。
那我們還可以聯(lián)想到《變形金剛》里的大黃蜂，所以也可以給這個(gè)顏色起名叫做大黃蜂。
還能聯(lián)想到麥當(dāng)勞的陽(yáng)光橙，所以也可以命名為陽(yáng)光橙。總之當(dāng)你看到這個(gè)顏色時(shí)，腦海中能夠聯(lián)想到的詞匯都可以使用，哪怕是跟這個(gè)顏色相差很多也沒(méi)關(guān)系，最重要的是你自己的感受。
對(duì)色彩進(jìn)行命名之后，第二步要做的就是對(duì)色彩進(jìn)行理性分析。
我們還是拿這個(gè)顏色來(lái)進(jìn)行練習(xí)，先來(lái)找出它的色相、明度和飽和度。
首先根據(jù)色相環(huán)的大致位置，確定這個(gè)色彩的色相。
然后通過(guò)純度和明度的調(diào)整來(lái)找到與右側(cè)顏色相符的色值，這里我們得到了一個(gè)數(shù)值。
然后用吸管工具吸取右側(cè)的黃色，得到的結(jié)果和我們猜測(cè)的做比較，只要結(jié)果不是相差很大都是可以的，如果相差很多那就說(shuō)明你對(duì)色彩的敏感度還有欠缺。
HSB色值猜想完之后我們?cè)賮?lái)看看它的RGB色值。
根據(jù)RGB原理很明顯黃色是由紅色和綠色混合得到的。
但是我們對(duì)比來(lái)看很明顯這兩個(gè)黃色還是有差別的，所以還需要進(jìn)一步分析。
我們調(diào)出RGB色相環(huán)，我們看采樣的這個(gè)黃色是偏向紅色多一些還是偏向綠色多一些，很明顯是偏紅一些，因?yàn)樗容^偏橙色。
所以我們就可以適當(dāng)?shù)臏p少綠色的成分。
我們來(lái)看一下對(duì)比，已經(jīng)接近了。
最后我們通過(guò)RGB色值來(lái)對(duì)照一下，雖然紅色和綠色的色值相差不多，但是我們采樣的顏色中還有少部分藍(lán)色，肉眼其實(shí)很難看出來(lái)，但是我們可以自己去模擬一下。
這三個(gè)成分的三原色混合之后，得到的就是我們采樣的顏色了。
△ http://www.rgbchallenge.com/
如果想提升對(duì)RGB的敏感度，可以通過(guò)這個(gè)小游戲來(lái)練習(xí)一下。
玩法很簡(jiǎn)單，根據(jù)畫(huà)面中給出的RGB色值來(lái)選擇你認(rèn)為相對(duì)應(yīng)的顏色，選對(duì)了繼續(xù)下一關(guān)，選錯(cuò)了GAME OVER重來(lái)。
接下來(lái)我們來(lái)看CMYK色值。
黃色是CMY其中的一個(gè)原色，所以首先黃色肯定是最多的。
對(duì)比來(lái)看一下，很明顯采樣的黃色中還有其他顏色成分。
我們調(diào)出CMYK色相環(huán)，同樣也是看采樣的黃色偏向哪個(gè)方向，也是偏紅色多一些。
所以我們得到這個(gè)顏色中需要加入紅色，但是應(yīng)該加多少呢？
這里我們加入了20%的紅，同時(shí)將黃色的含量降到80%，這個(gè)是根據(jù)經(jīng)驗(yàn)和感覺(jué)來(lái)的。
這時(shí)將兩個(gè)顏色對(duì)比來(lái)看一下，已經(jīng)相差不多了。
最后通過(guò)數(shù)值來(lái)比對(duì)，可以說(shuō)幾乎已經(jīng)很接近了。
只不過(guò)采樣的顏色中還帶有少量的青色，但是影響不大。
然后我們?cè)賮?lái)看看色調(diào)。關(guān)于色調(diào)這種老生常談的問(wèn)題這里就不多講了，因?yàn)橹拔覍?zhuān)門(mén)寫(xiě)過(guò)一篇關(guān)于色調(diào)的文章《高手的平面課堂！最容易上手的配色方法》，里面已經(jīng)講的很詳細(xì)了。如果你看過(guò)這篇文章，那么當(dāng)你得到了一個(gè)顏色的CMYK色值時(shí)，就已經(jīng)可以判斷出是什么色調(diào)了。
如果沒(méi)看過(guò)也沒(méi)關(guān)系，我?guī)Т蠹襾?lái)區(qū)分一下，白色和純色之間是明色和淡色，純色和灰色之間是濁色和淡濁色，純色和黑色之間是暗色。
將這些代表性色調(diào)提取出來(lái)一比對(duì)，就可以知道這個(gè)色彩的大致色調(diào)是什么了。
很明顯我們采樣的這個(gè)顏色是介于純色調(diào)和明色調(diào)之間，你可以叫它純色也可以叫它明色。
色調(diào)看完之后我們?cè)賮?lái)看看它的色彩家族，也就是這五大色相關(guān)系。
首先我們來(lái)看看它的同類(lèi)色是什么，如果大家剛開(kāi)始比較困難可以偷個(gè)懶，調(diào)出色相環(huán)。
這樣找到相應(yīng)的色相就非常簡(jiǎn)單了，但是不建議大家這樣做，除非是新手或剛?cè)腴T(mén)的同學(xué)。
然后是近似色，相距45度的顏色。
然后是中差色，距離在90度左右。
接著是對(duì)比色，120度左右。
最后是互補(bǔ)色，對(duì)比最強(qiáng)烈，也就是相距180度左右的顏色。
這五大色相關(guān)系是最基本也是搭配起來(lái)最常見(jiàn)的，一般不太容易出問(wèn)題。這里需要說(shuō)明一點(diǎn)就是我們?cè)趯?duì)色值進(jìn)行猜測(cè)的時(shí)候，不需要要求太高必須要完全一致，只要差不多就可以。并且大家在看教程的時(shí)候可能會(huì)覺(jué)得有些復(fù)雜佷麻煩，我做這些為了給大家演示看上去是花了些時(shí)間，但是當(dāng)你自己在猜想的時(shí)候可能只是一瞬間的事情。
下面我們?cè)賮?lái)看看第三步，對(duì)色彩的感性分析，所謂感性分析也就是說(shuō)這個(gè)色彩給你什么感覺(jué)。
比如這個(gè)黃色給我們的正面意象有：陽(yáng)光、輕松、幽默、開(kāi)朗、熱鬧、歡樂(lè)、幼兒、開(kāi)放、快樂(lè)；負(fù)面意象有吵鬧、廉價(jià)、不雅、軟弱、浮躁、輕浮、稚嫩、散漫、不安。注意在提煉感覺(jué)的時(shí)候不要約束自己，能夠聯(lián)想到的都可以記下來(lái)。
然后是第四步對(duì)色彩進(jìn)行行業(yè)分析，也就是說(shuō)你認(rèn)為這個(gè)色彩適合哪些行業(yè)或者你見(jiàn)過(guò)哪些行業(yè)使用過(guò)這個(gè)色彩。
比如最明顯的就是兒童、寵物、游戲、時(shí)尚、運(yùn)動(dòng)、促銷(xiāo)、餐飲、農(nóng)業(yè)、傳統(tǒng)、汽車(chē)等等。
以上這些訓(xùn)練做完之后就進(jìn)入到了最后一步，也就是用這個(gè)色彩進(jìn)行任意內(nèi)容的設(shè)計(jì)。
這是我們的文案，這里我們要設(shè)計(jì)的是關(guān)于詹姆斯十六代戰(zhàn)靴的三個(gè)Banner。
1. 案例一
首先根據(jù)尺寸創(chuàng)建版面，找到一張詹姆斯的圖片去底之后放到版面中，然后將主題信息放大并選擇一款具有力量感的字體編排到版面的中上位置，將中文標(biāo)題和LOGO做重復(fù)編排。
將文字信息放置到人物下方，底部信息做描邊和變形處理為畫(huà)面增加形式感，最后將其他信息編排到空余的左側(cè)。
最后在主標(biāo)題下方添加色塊來(lái)豐富一下版面，版式部分就完成了，接下來(lái)開(kāi)始配色。
因?yàn)槲覀円玫讲蓸拥倪@個(gè)黃色所以主色已經(jīng)確定了，但是這個(gè)畫(huà)面只用一個(gè)顏色顯然是不夠的，所以我們還需要其他顏色。
因?yàn)榭紤]到設(shè)計(jì)的內(nèi)容和風(fēng)格所以我覺(jué)得配色上應(yīng)該有一些對(duì)比，但是又不想使用對(duì)比很強(qiáng)的互補(bǔ)色，所以這里我選擇對(duì)比色，但是黃色的對(duì)比色有兩個(gè)應(yīng)該選擇哪個(gè)呢，這里我選擇了紫色。
因?yàn)槿绻私釴BA的話應(yīng)該知道，湖人隊(duì)的球衣本身就是黃色和紫色，也就是人們所謂的紫金戰(zhàn)袍。
但是這個(gè)紫色有些偏紅，所以我們可以調(diào)整成偏藍(lán)一些。這也是我想告訴大家的一點(diǎn)就是配色是靈活的，千萬(wàn)不要死腦筋。
輔色確定了之后就可以為畫(huà)面填充顏色了，但是我們看填充完顏色之后人物圖片的顏色有些不協(xié)調(diào)，所以人物的顏色也需要調(diào)整。
這樣看上去就會(huì)好很多，那么第一個(gè)案例就完成了。
2. 案例二
第二個(gè)案例我們選擇鞋子來(lái)當(dāng)主體，然后編排主標(biāo)題。
將其余信息圍繞主體鞋子來(lái)編排，通過(guò)適當(dāng)?shù)淖冃谓嵌葋?lái)為畫(huà)面增加靈動(dòng)。
但是兩側(cè)很明顯太空了所以可以添加色塊和文字，版式部分就完成了。
因?yàn)槲覀冊(cè)O(shè)計(jì)的這三個(gè)Banner是一個(gè)系列的，所以配色也應(yīng)該是統(tǒng)一的不需要改動(dòng)。
3. 案例三
我們?cè)賮?lái)看看最后一個(gè)案例，前兩個(gè)案例分別是以人物為主體和以產(chǎn)品為主體，所以第三個(gè)案例我就直接用文字編排，將文字信息進(jìn)行分組給圖片留好位置。
為了增加一些形式感，下方的標(biāo)題同樣進(jìn)行描邊處理并進(jìn)行裁剪。
那么同樣使用這組配色，將圖片放置到預(yù)先留好的位置上，這個(gè)案例也就完成了。
最后我們來(lái)看一下整體效果和效果圖。
本期教程到這里就結(jié)束了，我們從幾個(gè)不同的角度去對(duì)色彩進(jìn)行拆解，大家回去之后可以自己多加練習(xí)，每天解構(gòu)一個(gè)色彩，這樣長(zhǎng)期積累下來(lái)，你就會(huì)在不知不覺(jué)中創(chuàng)建了一套屬于你自己的配色體系。
但是我相信肯定會(huì)有人有疑問(wèn)，如果照這樣做那糾錯(cuò)機(jī)制在哪？因?yàn)檫@些都是大家自己去創(chuàng)建的很多內(nèi)容不一定對(duì)，如果你有這樣的疑問(wèn)那說(shuō)明你是認(rèn)真學(xué)習(xí)的人，但是我這套方法并不是沒(méi)有糾錯(cuò)機(jī)制，這個(gè)糾錯(cuò)機(jī)制就是你自己，在漫長(zhǎng)的時(shí)間里你的成長(zhǎng)、歷練、感受、學(xué)習(xí)都會(huì)影響你對(duì)一個(gè)色彩的認(rèn)知，可能幾個(gè)月甚至幾天之后你看待同一個(gè)色彩的感覺(jué)都是不同的。所以放心大膽的去做吧，只要你肯堅(jiān)持，火候到的時(shí)候自然就會(huì)有所收獲。
藍(lán)藍(lán)設(shè)計(jì)( m.axecq.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.axecq.cn