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

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

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

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