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

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

如何才能讓配色更高級(jí)？

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

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

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

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

    無色設(shè)計(jì)(achromatic)

    類比設(shè)計(jì)(analogous)

    沖突設(shè)計(jì)(clash)

    互補(bǔ)設(shè)計(jì)(complement)

    單色設(shè)計(jì)(monochromatic)

    中性設(shè)計(jì)(neutral)

    分裂補(bǔ)色設(shè)計(jì)(splitcomplement)

    原色設(shè)計(jì)(primary)

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

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

無色設(shè)計(jì)

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

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

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

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

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

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

類比設(shè)計(jì)

    在色相環(huán)上任選三個(gè)連續(xù)的色彩或其任一明色和暗色?？梢岳斫鉃?span>鄰近色，指色輪上左右相互鄰近的顏色。這種配色比較常見，搭配比同色系稍微豐富，色相柔和過渡，看起來也很和諧，營(yíng)造出一個(gè)比較舒服的視覺感受。

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

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

沖突設(shè)計(jì)

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

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

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

互補(bǔ)設(shè)計(jì)

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

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

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

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

分裂互補(bǔ)設(shè)計(jì)

紅配綠，賽狗屁？

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

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

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

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

單色設(shè)計(jì)

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

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

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

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

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

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

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

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

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

PLUS版本

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

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

中性設(shè)計(jì)

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

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

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

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

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

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

    原色設(shè)計(jì)(primary)

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

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

    我們下次再分享~