UI設(shè)計(jì)配色寶典上

【導(dǎo)讀】今天這篇文章來(lái)主要講下關(guān)于配色常見(jiàn)的幾種搭配方式，比較偏于理論，其實(shí)當(dāng)我剛做美工的時(shí)候?qū)τ谶@些內(nèi)容我是從來(lái)不看的，感覺(jué)非?？菰?，當(dāng)做了一段時(shí)間工作之后，再回頭看看這些內(nèi)容又是另外一種感覺(jué)。這篇文章我希望盡可能縮短無(wú)用枯燥的理論，簡(jiǎn)短精干的總結(jié)幾個(gè)方面來(lái)給大家?guī)?lái)一點(diǎn)啟示。一、學(xué)配色，必須先了解配色比例：日本的設(shè)計(jì)師提出過(guò)一個(gè)配色黃金比例，是70：25：5,其中的70%為大面積使用的主色，25%為輔助色，5%為點(diǎn)綴色。一般情況下建議畫(huà)面色彩不超過(guò)3種，3種是指的3種色相，比如深紅和暗紅既可以視為一種色相。一般來(lái)說(shuō)顏色用的越少越好，顏色越少畫(huà)面越簡(jiǎn)潔，作品會(huì)顯得更加成熟。顏色越少我們?cè)饺菀卓刂飘?huà)面，除非有特殊情況，比如一些節(jié)日類(lèi)的海報(bào)等，要求畫(huà)面有一種熱鬧，活力的氛圍的，多些顏色可以畫(huà)面顯得很活躍，但是顏色越多越要嚴(yán)格按照配色比例來(lái)分配顏色，不然會(huì)使得畫(huà)面非常混亂，難以控制。點(diǎn)綴色5%主色70% 輔助色點(diǎn)綴色5%主色的確立會(huì)影響到:螫個(gè)畫(huà)面格調(diào)二、了解色彩的關(guān)系色彩搭配就是不同色相之間相互呼應(yīng)相互調(diào)和的一個(gè)過(guò)程，色彩之間的關(guān)系取決于在色相環(huán)上的位置，色相和色相之間距離的角度越近，則對(duì)比越弱，離得越遠(yuǎn)則對(duì)比越強(qiáng)烈。對(duì)于新人，我們只需記住六種基礎(chǔ)色相即可。對(duì)于新人，我們只需記住六種基礎(chǔ)色相即可。紅橙黃綠藍(lán)紫背下這六種色相之后，那么你的配色之旅已經(jīng)起了一個(gè)良好的開(kāi)端…因?yàn)樗械念伾伎梢愿鶕?jù)這六種基礎(chǔ)色相來(lái)調(diào)配。這就是六字真言。下面我們來(lái)說(shuō)下3種最最常見(jiàn)的色彩配色方式。相鄰色搭配

在色輪中挨著比較近的就是鄰近色，根據(jù)紅橙黃綠藍(lán)紫這六字順序，相鄰色搭配就是紅+橙，橙+黃，黃+綠，綠+藍(lán)……以此類(lèi)推。相鄰色在12色輪中的位胃90”以內(nèi)相鄰色因?yàn)楸容^鄰近，有很強(qiáng)的關(guān)聯(lián)性，非常協(xié)調(diào)柔和，畫(huà)面非常和諧統(tǒng)一，可以制造出一種柔和溫馨的感覺(jué)，因?yàn)樵谏喼形恢幂^近所以這種搭配視覺(jué)沖擊力較弱。幾個(gè)例子：這兩張基本都是采用相鄰色的搭配方式，第一張還加了一筆橙色起到點(diǎn)綴的作用，整體畫(huà)面非常柔和協(xié)調(diào)，因此這類(lèi)配色常用家居，棉織品，小清新淡雅的服裝，中國(guó)風(fēng)等能給人以寧?kù)o，柔和，傳統(tǒng)感覺(jué)的產(chǎn)品。相近色搭配中還有一種單色系的搭配方式，采用同一色相，僅僅調(diào)整該色的明度/飽和度，得到另外一種顏色如上圖所示，文字顏色就是用背景色降低飽和度/明度后的結(jié)果。本身背景色明度很高，又采用單色搭配手法所以會(huì)給人高雅，淡雅，寧?kù)o的感覺(jué)。主標(biāo)題的字體也配合整個(gè)畫(huà)面采用了一些變形，使得整體非常統(tǒng)一和諧。

七夕這張圖片使用的藍(lán)與紫搭配，畫(huà)面寧?kù)o和諧。旁邊這張圖片使用的單色搭配，深藍(lán)+淺藍(lán)，畫(huà)面統(tǒng)一帶有一點(diǎn)傳統(tǒng)的感覺(jué)。這張海報(bào)用的紅+橙的搭配方式，以橙色為主色調(diào)，背景中采用不同橙色增加了畫(huà)面的空間感，并且讓畫(huà)面看起來(lái)不是那么的單調(diào)，海報(bào)中鄧超驚訝的表情，以及背景傾斜的線條和幾何方塊的點(diǎn)綴，漂浮的產(chǎn)品使得原本穩(wěn)定的畫(huà)面變得活潑輕快富有沖擊力，可見(jiàn)海報(bào)做成什么格調(diào)也與畫(huà)面每個(gè)組成部分都有密切的關(guān)系。間隔色搭配根據(jù)紅橙黃綠藍(lán)紫這六字順序，紅+黃，橙+綠，黃+藍(lán)，綠+紫，藍(lán)+紅，因?yàn)檫@種搭配方式中間都隔了一個(gè)顏色，因此稱為間隔色。間隔色在1?色輪中的彳立置相距120間隔色相比較相鄰色，2色之間在色輪上相隔遠(yuǎn)一些，因此視覺(jué)沖擊力會(huì)強(qiáng)于相鄰色，而且間隔色使用非常廣泛，既沒(méi)有180°互補(bǔ)色沖擊力那么具有刺激性，又比相鄰色多了一些明快、活潑、對(duì)比鮮明的感覺(jué)。特別是紅黃藍(lán)三原色之間的相互搭配應(yīng)用非常廣泛也非常流行。幾個(gè)例子：這張基本是很典型的藍(lán)黃間隔色搭配，畫(huà)面非常明快時(shí)尚，文字還采用了白色作為調(diào)和。藍(lán)色本身就具有一種科技的格調(diào)。這里用藍(lán)黃白搭配再合適不過(guò)了?！笗?huì)員回饋「會(huì)員回饋這張是典型的三原色紅黃藍(lán)組合，畫(huà)面比例控制的非常好，以藍(lán)色為點(diǎn)綴，也采用了白色作為調(diào)和緩沖。使得畫(huà)面有一定的空間感。紫綠搭配，很明快略帶一絲傳統(tǒng)的一種中性搭配方式。紫綠搭配，很明快略帶一絲傳統(tǒng)的一種中性搭配方式。紅黃百搭色有非常搶眼的促銷(xiāo)感。大家可以看上方這幾個(gè)圖片的背景都不是單一的顏色，比如最后這張海報(bào)紅色背景上又加了一個(gè)深紅色的放射性背景。第三張海報(bào)紫色背景后面還加了一些深紫色的幾何方塊做點(diǎn)綴。雖然是兩個(gè)顏色，但是都屬于一種色相，這樣可以使得畫(huà)面擺脫單調(diào)的感覺(jué)，增加畫(huà)面的空間感，給人以活潑時(shí)尚的感覺(jué)。B痘痘■痘印0B痘痘■痘印0控油部清潔J5-de-cL+口一-#■§總巴HOW2配色一定要控制好畫(huà)面的色彩比例~~重點(diǎn)說(shuō)下紅藍(lán)搭配紅藍(lán)搭配應(yīng)用非常廣泛，因?yàn)檫@2個(gè)顏色是典型的冷暖結(jié)合的顏色，有很強(qiáng)的對(duì)比性，會(huì)給人留下很深刻的印象。比如百度的logo,百事可樂(lè)的logo，公安局的警車(chē)，超人、蜘蛛俠的動(dòng)漫形象，很多國(guó)家的國(guó)旗等。這2種色彩對(duì)比很容易讓人視覺(jué)疲勞心理亢進(jìn)。所以不適用家居等靜物。由于紅藍(lán)搭配沖擊過(guò)于強(qiáng)烈，因此最常見(jiàn)是采用白色作為調(diào)和色，最典型的就是百事可樂(lè)的Logo在看幾個(gè)例子這些海報(bào)基本都無(wú)一例外的在圖片中添加了白色作為調(diào)和，白色和黑色都是萬(wàn)能的調(diào)和色，紅藍(lán)搭配還要注意的是不能讓色彩過(guò)于均衡，一定要控制好兩色的比例，其中一個(gè)要為主色在畫(huà)面中要占大比例，使之產(chǎn)生主次關(guān)系，或者降低其中一個(gè)顏色的明度/飽和度，產(chǎn)生一種明暗對(duì)比。還需要說(shuō)明一點(diǎn)的是：冷色在畫(huà)面中總是趨于后退，暖色是趨近，暖色很容易就可以進(jìn)入人的眼簾。這點(diǎn)就需要大家根據(jù)畫(huà)面中重點(diǎn)信息的層級(jí)自己把握了。互補(bǔ)色搭配在色輪中相隔180°的2個(gè)顏色互為補(bǔ)色，是色彩搭配中，對(duì)比最為強(qiáng)烈的顏色，沒(méi)有之一…根據(jù)紅橙黃綠藍(lán)紫這六字順序，互補(bǔ)色就是中間間隔2個(gè)顏色，紅+綠，橙+藍(lán)，黃+紫…互補(bǔ)色在12色輪中的相隔180°互補(bǔ)色搭配可以表現(xiàn)出一種力量，氣勢(shì)與活力，有非常強(qiáng)烈的視覺(jué)沖擊力，而且也是非?，F(xiàn)代時(shí)尚的搭配。若控制的不好往往產(chǎn)生不協(xié)調(diào)，不含蓄，不安定的效果。幾個(gè)例子：和9。。份登裝免費(fèi)領(lǐng)免費(fèi)送!和9。。份登裝免費(fèi)領(lǐng)免費(fèi)送!互補(bǔ)色搭配要注意三個(gè)方面：①一定要控制好畫(huà)面的色彩比例，因?yàn)檫@個(gè)2個(gè)顏色放一起對(duì)抗非常激烈，所以一定要選出一個(gè)老大當(dāng)主色調(diào)，另外一方作為點(diǎn)綴或者輔助色。②還可以降低其中一方的明度/飽和度，這樣可以產(chǎn)生一種明暗對(duì)比，緩沖其對(duì)抗性。③或者在畫(huà)面中加入黑/白作為調(diào)和色進(jìn)一步緩沖其對(duì)抗的特性?？偨Y(jié)下本文配色方法其實(shí)也就是記住六個(gè)字：紅橙黃綠藍(lán)紫，色相相隔越遠(yuǎn)對(duì)比越強(qiáng)烈，離