前面本篇文章將立足于色彩理論的基礎(chǔ)之上，對色彩的搭配和使用進(jìn)行贅述，在設(shè)計(jì)中應(yīng)該怎么樣才能讓色彩看起來舒服一些；

色彩作為視覺感知的先覺條件，在很大程度上決定了作品的好壞以及給觀者留下什么樣的印象，人們感知到的即是通過色彩所傳遞出的情感，色彩作為一門獨(dú)立的學(xué)科，在基于其理論體系之上衍生出了眾多的搭配方法和技巧，在遵循色彩構(gòu)成的原理之上可以更好的幫助我們對色彩有深入的認(rèn)知和使用，對于色彩而言，除了要了解基本的構(gòu)成之外，在使用的過程中更重要的是要對色相，明度，飽和度有敏銳的觀察里和視覺感知力，通過三者不斷的變化和調(diào)整把控使色彩更加具有情感，讓視覺感知更加的舒適并滿足我們的實(shí)際的需求；

色相

色相的變化則是基于三原色的基礎(chǔ)上產(chǎn)生出來的色與色之間的關(guān)系，是決定色彩的基礎(chǔ)，我們經(jīng)常說的色彩搭配通常是指某個顏色與另一個顏色的色相搭配，其在色彩選擇和使用中起著決定性的作用，色相可以說是色彩的選擇時的框架，同時也是情感和情緒單一且直觀的視覺感知體現(xiàn)，是偏向理性的理論支撐；

明度和純度

則是基于色相之上的深淺和明暗變化，在色相的框架之內(nèi)可以利用明度和純度的變化營造更加細(xì)膩的舒適效果，同時兩者也反應(yīng)出最終色相的舒適程度和搭配的效果優(yōu)劣，也是色彩細(xì)節(jié)的根本所在，其影響的直接結(jié)果就是即使在符合色彩原理的基礎(chǔ)上也未必能有舒適的視覺感知，更加偏向感性；

在同一個色相下，明度和純度的變化則是以縱向和和橫向的方式變化，兩者相交處則決定了最終色彩值，色彩的舒適與否很大程度上取決于明度和純度的交叉，色相包含明度和純度，但又取決于明度和純度，三者互為相依形成色彩三要素，明度和純度與無色的黑白同樣是神一樣的存在，至始至終貫穿整個色彩，同時也是色彩細(xì)節(jié)和視覺感知最有力的體現(xiàn)，更是確定單個純色的最佳方式；

圖1:

當(dāng)一個畫面中出現(xiàn)兩個不同的色相時，則需要在遵循三原色的原理上對其中一個色相的明度和純度進(jìn)行調(diào)整以達(dá)到視覺感知的舒適，在進(jìn)行色彩搭配的過程即是在確定色相之后以色相的深淺明暗進(jìn)行細(xì)微的調(diào)整使其色彩的情緒和情感表達(dá)能夠更加的準(zhǔn)確可視化，如只是調(diào)整不同的色相變化則會讓畫面不堪入目；

圖2:

而當(dāng)一個畫面只使用一個色相的時候，則是明度和純度發(fā)揮作用最大的時候，通過色相的深淺和明暗就可以完成一個不錯的畫面，但就視覺設(shè)計(jì)而言，單一色相相對來說則會比較局限，也很難滿足畫面中多種情緒細(xì)微的變化，而與左邊的圖相比之下，整個畫面則會顯得稍微亮了一些，同背景下不同的搭配傳遞出的視覺效果也有差別；

在遵循色彩搭配原理的基礎(chǔ)上，更加需要注重明度和純度的變化所傳遞出的視覺感知效果帶給人們的舒適度，而并非有理論支撐或者照搬理論就就是完全合適的；相反在確定明度和純度之后也可以調(diào)整色相使色與色之間更加舒適；

色彩通常是感性的，但同時也是基于一定的理論基礎(chǔ)之上，通過人為的視覺感知，對表達(dá)事物理解程度進(jìn)行調(diào)整的，更簡單的理解就是色彩理論作為框架的輔助，而人眼的感官舒適度作為目的，用色彩基礎(chǔ)理論的方法論對明度和純度不同調(diào)整嘗試的過程；

理論認(rèn)知即是對色彩基礎(chǔ)知識學(xué)習(xí)的層面，是學(xué)習(xí)和認(rèn)識色彩的方法論，它是輔助我們合理使用色彩的基本原理，即是對色彩劃分，色彩的構(gòu)成，色彩原理的思維邏輯理解；

無色系與有色系存在的唯一差別即是無色只有明度沒有純度，而有色則是都存在的，相對來說也會比無色復(fù)雜一些，同時也是我們需要深入理解和學(xué)習(xí)的方向，而理論認(rèn)知只是建立相應(yīng)的色彩框架，很多設(shè)計(jì)師大都停留在色彩框架的邊緣以色彩理論的空架子作為支撐是很難掌握實(shí)際需求和最終的視覺效果，但兩者在使用時也會存在一些相似的原理和規(guī)律；

當(dāng)以實(shí)際應(yīng)用模式把無色系和有色系分別列出結(jié)構(gòu)圖可以看出，兩者的變化規(guī)律基本一致，而有色系則是多了一個純度，也就是顏色的深淺，并呈現(xiàn)出循環(huán)規(guī)律，在進(jìn)行選擇時則可以融合黑白灰以調(diào)整有色的顏色深淺和明暗；

而當(dāng)有色與無色變化規(guī)律進(jìn)行對比之后可以看出，從黑到白的變化中無色是自然過度的，而加入一個紅色之后則發(fā)生了有色的變化，黑到紅是明度的變化，而紅到白則包含明度和純度的變化，單個色彩則是與黑白融合變化后的結(jié)果，那邊融合的多紅色即偏向那邊，所有單個色彩均是如此變化規(guī)律，而色彩搭配則可以看作多與少之間的搭配；

圖1:

在使用黑白灰的情況下，更多的只需要考慮色彩的明暗即可，不管如何使用都離不開從黑到白的無色變化規(guī)律，無色可以與任何色彩隨意搭配使用，除了極端的純黑和純白之外，其他均可以看作是黑白的明暗過度色；

圖2:

在有色中加入黑色則可以使色彩變的暗一些，而加入白色則可以讓色彩變的亮一些或者顏

色淺一些，即可影響明度同時也影響著色彩的純度，有色的搭配方法則是根據(jù)色彩變化的

規(guī)律進(jìn)行的，也是色相的變化而在使用中還要結(jié)合純度和明度；

案例延展可以出，在規(guī)避三背景上面的三原色之外，背景可以使用其他的任何過度色，具體可以根據(jù)實(shí)際的要表達(dá)的需求而定；

感性認(rèn)知是建立在理論認(rèn)知的基礎(chǔ)上對目的理解和色彩感官的使用，是以人的感官目的為基礎(chǔ)進(jìn)行的色彩使用，是色彩所表現(xiàn)出的情感和視覺感受，通常就是我們常說的對色彩的敏銳度以及對需求深度理解的色彩視覺表現(xiàn)，也是三要素的具體表現(xiàn)；

色彩的情感是人視覺感知之后的心理作用，也是色彩心理的表現(xiàn)，在色相較為固定的情況下，通過調(diào)整明度和純度之后就會得出新的色調(diào)，而隨之變化的也有色彩的情感和心理變化，而情感和心理變化等這些不確定的因素則需要用色彩之間的搭配來相對較為固定

的傳達(dá)出色彩所代表的某一特定的情緒；

圖1:

在遵循色彩搭配原理的基礎(chǔ)上進(jìn)行色彩之間的搭配使用是沒有問題的，但就視覺而言左邊的顏色則會顯得太過于扎眼，與文字色和背景色之間并沒有很好的過渡，導(dǎo)致整個版面的色彩視覺感知跳躍，所傳遞出的情感和心理也飄忽不定，靚麗充滿活力的色彩與背景和文字的沉穩(wěn)雖然是形成了鮮明的對比，但卻讓人感覺不是那么協(xié)調(diào)舒服；

圖2:

基于感性認(rèn)知的基礎(chǔ)上，對原有色彩進(jìn)行明度和純度的調(diào)整，讓色彩之間在視覺上保持一致的同時也與背景和文字的色彩相互協(xié)調(diào)舒適，讓版面不失去色彩突出的同時也讓整個版面的情感和心理變化相對的固定在某一特定的變化中，以達(dá)到視覺感知認(rèn)知的目的與視覺的舒適度平衡，通常調(diào)整是根據(jù)色彩的主從原則和表現(xiàn)的主體進(jìn)行的；

在色相不變的情況下，把兩個案例的背景加入大量的黑色，在改變其情緒和心理的同時使其更加突出色彩，而兩個背景也都進(jìn)行了純度的調(diào)整，在差別不是很大的情況下尤其會突出感性認(rèn)知對情緒和心理變化的影響，同時也是讓色相與色相之間保持視覺的一致性，突出單個色相的原始基本情感；

在使用色彩的時候很多人都誤以為只是色彩與色彩之間的搭配沒有做好，在學(xué)習(xí)完理論知識之后又很難在實(shí)際應(yīng)用中發(fā)揮出來，提升色彩舒適度除了要了解理論知識外，還需要注意色彩的感性認(rèn)知以及視覺對色彩的敏感度（也就是單個色彩的純度和明度）；

一致性是讓色彩視覺感知舒服的最簡單的方法，同時也是調(diào)整色彩的明度和純度而決定的，尤其是在使用多色的情況下一致性尤為重要，在簡單的三色搭配使用原則中同樣需要注意主色與其他兩個色之間的視覺一致性；

以“形影”為題創(chuàng)作的概念性的海報(bào)，為了表達(dá)這個詞的意思，先做好一個一個圖形，同時帶有一定的影子過渡，顏色方面選擇沒那么高的飽和度和純度的對比色，以凸顯形影表達(dá)的意境，然后把圖形置入到新建的畫布中

圖1:

把圖形復(fù)制一層使兩個圖形對稱排列并調(diào)整到版面中合適的位置，然后根據(jù)圖形的色彩基調(diào)選擇背景色，色調(diào)的選擇是在保證能夠凸顯出主體圖形的同時又能與主體融為一體，并貼合情感的需求，背景色選擇藍(lán)色便紫的較淺色調(diào)，目的是為了更好的融合圖形的影子以及“形影”所表現(xiàn)的感念氣質(zhì)，在色調(diào)和整體上視覺感知基本保持在同一水平線上，且足以突出主體，同時符合色彩搭配的理論基礎(chǔ)；

圖2:

在較為中性色調(diào)的畫面中，色彩的搭配使用最為頭疼，亮一點(diǎn)顯得亮，暗一點(diǎn)則會顯得深沉，在整體的色調(diào)基本保持一致的時候，文字使用純白色則是為了在較為和諧且稍微偏灰的畫面中起到點(diǎn)亮的作用，如果用無色系的較深的顏色則會讓整個畫面太過于深沉，且與主體想要表達(dá)的氣質(zhì)不符，同時對圖形和背景添加些許的質(zhì)感處理，讓整個畫面看起來更加的具有品質(zhì)感；

無色并不是沒有色彩，在設(shè)計(jì)中無色系同樣發(fā)揮著不可忽略的作用，尤其是在大面積使用高飽和度和純度的畫面中或者是多色的搭配使用中，無色系可以很好的起到調(diào)和色彩和視覺感知平衡的作用；

新建一個畫布把主體圖形植入到畫面當(dāng)中，在很多情況下可以根據(jù)所要表達(dá)感性概念詞去選擇色彩的大致范圍，然后進(jìn)行局部的色彩調(diào)整油畫，同時也可以直接根據(jù)整個畫面和主體所要表達(dá)的情感進(jìn)行色彩搭配，然后調(diào)整合適的背景色；

圖1:

為了讓整體的色調(diào)和視覺感知保持一致，背景色選擇一個高明度低純度的淺色以突出主體，同時把主體調(diào)整到版面中合適的位置為后續(xù)的文字編排留下相應(yīng)的布局空間，從整個畫面的色調(diào)當(dāng)中可以看出，如果要添加相應(yīng)的合適色彩則會把整個畫面基本的情感和情緒弱化從而增加傳遞出色彩與色彩之間形成的其他情緒和感知，通常情況下大多人會為了色彩搭配而忽略這種微妙的感知認(rèn)知；

圖2:

把圖形復(fù)制一層做相應(yīng)的效果處理，使其自身的視覺效果得到提升，同時把文字信息植入到畫面當(dāng)中，在背景淺且較亮的畫面中文字通常會使用無色系，這是為了保證畫面視覺效果和色彩情緒時使用無色系的色色彩作為調(diào)和整個畫面的視覺平衡，同時又能保證其基礎(chǔ)設(shè)定的情感表達(dá)和視覺預(yù)想效果，文字使用黑色時則會把整個畫面向外擴(kuò)展的色感壓回到畫面當(dāng)中形成一個黑色的壁壘，同時干凈利索的傳遞自身攜帶的信息；

色彩效果對比

在畫面主題顏色不變的情況下，只是調(diào)整文字的顏色對比之后可以看出，左邊的文字顏色雖然也是與整體色調(diào)較為符合，但就整體而言則會顯得輕浮一些，本身的理論依據(jù)并沒有太多問題，只是在視覺感知上面會讓人感覺沒有右邊的成熟穩(wěn)重，看起來更加舒服；

在設(shè)計(jì)中色彩雖然變化多端，但除了理論依據(jù)之外，還有很多方式方法可以為我們的色彩使用提供幫助，主從原則就是色彩選擇使用最好的方式之一，同時也是設(shè)計(jì)師普遍使用的方式，其主要是根據(jù)設(shè)計(jì)的目的和主體進(jìn)行的色彩搭配使用；

當(dāng)我們拿到一個主題時，首先要先對主體的色調(diào)和視覺感知影響的情緒和情感變化做一下簡單的捕捉，然后結(jié)合最終預(yù)想的視覺效果進(jìn)行色調(diào)的初步選擇和搭配的嘗試；

圖1:

主體所呈現(xiàn)出的色調(diào)則是紅藍(lán)多一些，在選擇背景時則基于紅色調(diào)或者紫色調(diào)的基礎(chǔ)上選擇一個高明度低純度的色，這樣可以更好的突出主體，同時還能與主體的色調(diào)融合在一起，在視覺上看起來也會舒服一些，然后適當(dāng)?shù)膶δＬ剡M(jìn)行簡單的修飾和處理，并調(diào)整到畫面中合適的位置，接著就是把把文字編排置入到畫面中并考慮其應(yīng)該使用什么樣的色調(diào)以更好的貼合畫面和主體；

圖2:

文字的顏色同樣是基于主體的色調(diào)進(jìn)行選擇，如果使用無色系則會讓整個畫面所傳遞出的氣質(zhì)不倫不類且比較死板，而基于主體色調(diào)的基礎(chǔ)上主要考慮文字不被主體吃掉或者扎眼，也能很好的保持清晰的信息傳遞，在最底部加入與背景同色的橫條以最為文字的載體，整體文字色不僅可以與背景和主體融合在一起，同時也能與被其區(qū)分開獨(dú)立的保持信息的清晰傳遞，在主體色調(diào)不變的情況下可以在明度和純度上嘗試更多可能：

嘗試效果

在基于主體色的基礎(chǔ)上可以嘗試更多的配色方案，其視覺效果不僅可以讓畫面看起來更加舒服，同時也會有更多的可能，不管是調(diào)整明度，純度，色相都會有不同色視覺效果，最終則需要根據(jù)實(shí)際的表達(dá)需求而定；

在設(shè)計(jì)中很多情況下色彩起著決定性的作用，而色彩用的好不好除了色相與色相的搭配之外，更重要的則是對明度和純度的視覺敏感度，以及其對視覺感知所帶來的情緒和心理變化，色彩本身是感性，而對于設(shè)計(jì)師來說則需要通過感性的認(rèn)知去理解色彩的情緒和心理；

今天的分享就到這里，如果想系統(tǒng)學(xué)好UI設(shè)計(jì)，成為月薪過完的UI設(shè)計(jì)師，可以認(rèn)認(rèn)真真看下面的這篇文章，一定能給大家?guī)砗艽?的幫助。