© 圖片源自網(wǎng)絡(luò)

為什么你的配色總是看起來不舒服？

如何才能讓配色更高級？

很多人在設(shè)計完成后，總是對配色不滿意，卻又無從下手。色彩搭配對設(shè)計的重要性不需要我多說，甚至有很多俗、土、Low的作品只要改改顏色就能變得很時尚。所以，作為設(shè)計師了解時下流行的配色，基礎(chǔ)的配色規(guī)律你都掌握了嗎？

今天V姐帶大家學(xué)習(xí)一下配色設(shè)計。

    顏色絕不會單獨存在。事實上，一個顏色的效果是由多種因素來決定的：反射的光，周邊搭配的色彩，或是觀看者的欣賞角度。    

    有十種基本的配色設(shè)計，分別叫做：

    無色設(shè)計(achromatic)

    類比設(shè)計(analogous)

    沖突設(shè)計(clash)

    互補設(shè)計(complement)

    單色設(shè)計(monochromatic)

    中性設(shè)計(neutral)

    分裂補色設(shè)計(splitcomplement)

    原色設(shè)計(primary)

    二次色設(shè)計(secondary)

    三次色三色設(shè)計(tertiary)

無色設(shè)計

    無彩色---指除了彩色以外的其它顏色，常見的有金、銀、黑、白、灰。明度從0變化到100，而彩度很小接近于0。

© 圖片源自網(wǎng)絡(luò)

    黑白在配色上顯得很安全，也不容易出差錯。如果兩色搭配上發(fā)生沖突時，可以采用黑白來調(diào)和。黑白能給人一種高級神秘、沉穩(wěn)大方的感覺。

© 圖片源自網(wǎng)絡(luò)

© 圖片源自網(wǎng)絡(luò)

    這種配色非常簡潔大氣通過大面積的留白，營造出設(shè)計感。即使沒有過多的元素補給空洞的版面，單獨使用黑白作為背景色也足以提升整體的圖版率。

類比設(shè)計

    在色相環(huán)上任選三個連續(xù)的色彩或其任一明色和暗色。可以理解為鄰近色，指色輪上左右相互鄰近的顏色。這種配色比較常見，搭配比同色系稍微豐富，色相柔和過渡，看起來也很和諧，營造出一個比較舒服的視覺感受。

© 圖片源自網(wǎng)絡(luò)

© 圖片源自網(wǎng)絡(luò)

沖突設(shè)計

    把一個顏色和它補色左邊或右邊的色彩配合起來。這種配色在色差上對比強烈，如紅配綠，橙配藍，紫配黃。為了吸引注意，經(jīng)常在一些需要強調(diào)的地方使用，會帶動版面氣氛，產(chǎn)生強烈視覺沖擊力的心理感受，另外這種配色需要控制色彩數(shù)量和面積。

© 圖片源自網(wǎng)絡(luò)

© 圖片源自網(wǎng)絡(luò)

互補設(shè)計

    使用色相環(huán)上全然相反的顏色。

    沒有標(biāo)準(zhǔn)元素用色的情況下，在考慮應(yīng)用色環(huán)的 「角度原則」，越需要被突出的顏色，可以在色環(huán)中離主色越遠，越不需要被突出的則越近。

© 圖片源自網(wǎng)絡(luò)

    比如上方攜程的案例，主色在藍色的情況下，支付、保險金標(biāo)簽這些需要被重點突出的色彩，使用了主色的互補色，讓我們一眼就能看見并產(chǎn)生強烈的操作欲望。

分裂互補設(shè)計

紅配綠，賽狗屁？

    鐵打的紅色，流水的藍青綠色，看看紅配綠的效果，大紅色和綠色是互補色。搭配在一起很經(jīng)典，但效果有點復(fù)古的感覺，而把大紅色改成玫紅色以后，效果就變得時尚起來了。

© 圖片源自網(wǎng)絡(luò)

    這就是分裂互補色的魅力。例如下面的設(shè)計使用了分裂補色，分裂補色就是一個顏色和它對應(yīng)的補色兩側(cè)相鄰的顏色進行搭配。這種配色既有補色的對比，同時又通過分裂出的補色來融合對比，起到中和作用。

© 圖片源自網(wǎng)絡(luò)

單色設(shè)計

    把一個顏色和任一個或它所有的明、暗色配合起來。

    單色設(shè)計即色相一致的配色更協(xié)調(diào)。簡單的理解就是：如果使用藍色就全部使用藍色，這種形式的配色給人的視覺感受更協(xié)調(diào)、一致、易于接受。

© 圖片源自網(wǎng)絡(luò)

比如下面這組經(jīng)典藍設(shè)計：

© 圖片源自網(wǎng)絡(luò)

    我們都知道，顏色的屬性分為：色相、明度、純度，在保持一個屬性固定的情況下，另外兩個就是變量，即：明度和純度。

    在基色的基礎(chǔ)上進行純度和明度的變化，單色沒有色相上的變化。

© 圖片源自網(wǎng)絡(luò)

    如上圖所示的配色形式給人的感覺都比較協(xié)調(diào)且不單調(diào)，這就是色相一致的配色所帶來的直觀感受。

PLUS版本

    單色配色的第二種表現(xiàn)形式是跟不同明純度的顏色進行搭配，也就是同色相配色。這種組合在配色上顯得十分安全，通過不同明純度來豐富畫面的層次，往往給版面一種和諧感。

© 圖片源自網(wǎng)絡(luò)

中性設(shè)計

    加入一個顏色的補色或黑色使它色彩消失或中性化。中性色在設(shè)計中也尤為重要。舉個例子，在UI設(shè)計中，中性色，常為頁面中文字、背景用到的顏色，它們承擔(dān)起最基本的層次表現(xiàn)、便于閱讀的重任。多數(shù)新手覺得中性色無關(guān)緊要，實際情況恰恰相反。

    主色輔助色決定了界面視覺是否出彩，而中性色的應(yīng)用直接決定了頁面能不能正常使用。如果看過比較多的原型案例，就應(yīng)該明白，即使只有黑白灰的狀態(tài)下，我們理解這些頁面和進行使用也不會有絲毫的障礙。

© 圖片源自網(wǎng)絡(luò)

    中性色會給人寧靜優(yōu)雅的氛圍效果，常見用于家居設(shè)計、室內(nèi)設(shè)計中。作為基礎(chǔ)色，即使大面積運用在室內(nèi)也不會覺得突兀。

© 圖片源自網(wǎng)絡(luò)

    如果真的對配色毫無頭緒，就應(yīng)該選擇安全的配色方式去設(shè)計，例如最直接粗暴的吸取圖片法，盡量降低對版面產(chǎn)生多余的混亂感。合理地運用黑白配色法，可以收緊設(shè)計畫面，營造時尚的氛圍和穩(wěn)重的印象。但同時也應(yīng)注意避免畫面陷入單調(diào)、乏味的印象中。也希望這篇簡單的文章能帶給你配色上的幫助吧！

    原色設(shè)計(primary)

    二次色設(shè)計(secondary)

    三次色三色設(shè)計(tertiary)

    我們下次再分享~