UI界面設(shè)計(jì)

UI設(shè)計(jì)中的色彩搭配技巧

7633

隨著扁平化設(shè)計(jì)和 Material Design 的日益普及，色彩理論知識(shí)的重要性也變得愈加明顯！

每個(gè)APP 都會(huì)有一套配色方案，并在主要區(qū)域使用其基礎(chǔ)色彩。

分享大綱

1、色彩的概述——（了解色彩）

2、色彩在設(shè)計(jì)中的四大原則——（介紹色彩在設(shè)計(jì)時(shí)需要知道的理論知識(shí)）

3、UI中的配色——（介紹UI設(shè)計(jì)顏色的搭配）

4、配色小技巧——（簡(jiǎn)單的小白配色方法）

1、色彩的概述

1.1、光與色的簡(jiǎn)介

無(wú)光一片黑，有光即顯色，無(wú)色僅黑白，有色因光澤！

光源色

發(fā)光體發(fā)出的光，形成了不同的色彩，稱(chēng)之為光源色。不同的光源色呈現(xiàn)出來(lái)的顏色是不一樣的。

圖片來(lái)源于網(wǎng)絡(luò)僅供學(xué)習(xí)，侵權(quán)告知?jiǎng)h

固有色

固有的物體本身的顏色在常態(tài)光源下產(chǎn)生的色彩。

圖片來(lái)源于網(wǎng)絡(luò)僅供學(xué)習(xí)，侵權(quán)告知?jiǎng)h

環(huán)境色（反光）

指在各類(lèi)光源的照射下，環(huán)境所呈現(xiàn)的顏色。物體表面受到光照后，除吸收一定的光外也能反射到周?chē)奈矬w上。

比如，一個(gè)在紅色燈光下的瓷具會(huì)呈現(xiàn)部分淡紅色，就是環(huán)境色的影響。

圖片來(lái)源于網(wǎng)絡(luò)僅供學(xué)習(xí)，侵權(quán)告知?jiǎng)h

1.2、色彩傳達(dá)的情感

人們看到不同的顏色會(huì)產(chǎn)生不同的心理感受

圖片來(lái)源于網(wǎng)絡(luò)僅供學(xué)習(xí)，侵權(quán)告知?jiǎng)h

2、色彩在設(shè)計(jì)中的四大原則

2.1、整體色調(diào)要協(xié)調(diào)統(tǒng)一

界面設(shè)計(jì)應(yīng)該先確定主色調(diào)，主色將會(huì)占據(jù)頁(yè)面中很大的面積，其他的輔助色都應(yīng)該以主色為基準(zhǔn)進(jìn)行搭配。這可以保證整體色調(diào)的協(xié)調(diào)統(tǒng)一，重點(diǎn)突出，使作品更加專(zhuān)業(yè)、美觀。

圖片來(lái)源于網(wǎng)絡(luò)僅供學(xué)習(xí)，侵權(quán)告知?jiǎng)h

2.2、配色要有重點(diǎn)色

配色時(shí)，可以選取一種顏色作為整個(gè)界面的重點(diǎn)色。

要點(diǎn) 1：重點(diǎn)色可以被運(yùn)用到焦點(diǎn)圖、按鈕、圖標(biāo)，或者其他相對(duì)重要的元素，使之成為整個(gè)頁(yè)面的焦點(diǎn)；

要點(diǎn) 2：重點(diǎn)色不應(yīng)該用于主色和背景色等面積較大的色塊；

要點(diǎn) 3：重點(diǎn)色應(yīng)用于強(qiáng)調(diào)界面中重要元素的小面積零散色塊。

圖片來(lái)源于網(wǎng)絡(luò)僅供學(xué)習(xí)，侵權(quán)告知?jiǎng)h

2.3、注意色彩平衡

配色的平衡主要是指顏色的強(qiáng)弱、輕重和濃淡的關(guān)系。

要點(diǎn) 1：同類(lèi)色彩的搭配方案往往能夠很好地實(shí)現(xiàn)平衡性和協(xié)調(diào)性；

要點(diǎn) 2：高純度的互補(bǔ)色或?qū)Ρ壬ɡ缂t色和綠色很容易帶來(lái)過(guò)度強(qiáng)烈的視覺(jué)刺激，使人產(chǎn)生不適的感覺(jué)）；

要點(diǎn) 3：高明度的顏色顯得更明亮，可以強(qiáng)化空間感和活躍感；

要點(diǎn) 4：低明度的顏色則會(huì)更多的強(qiáng)化穩(wěn)重低調(diào)的感覺(jué)。

圖片來(lái)源于網(wǎng)絡(luò)僅供學(xué)習(xí)，侵權(quán)告知?jiǎng)h

2.4、對(duì)立色的調(diào)和

當(dāng)包含兩個(gè)或者兩個(gè)以上的對(duì)立色時(shí)，頁(yè)面的整體色調(diào)就會(huì)平衡，這時(shí)就需要對(duì)對(duì)立色進(jìn)行調(diào)和。

調(diào)和的 3 種方法：

1. 調(diào)整對(duì)立色的面積，使一種顏色為主色，其他顏色成為輔助色。為了降低輔助色的色感，可能需要適當(dāng)調(diào)整它們的純度和明度；

2. 添加兩種對(duì)立色之間的顏色，引導(dǎo)顏色在色相上逐漸過(guò)渡，例如要調(diào)和紅色和黃色，可加入橙色；

3. 加入大量的中性色，黑、白、灰稱(chēng)為中性色，它們不帶任何正面或負(fù)面的感情色彩，用來(lái)調(diào)和其他彩色是一種非常有效的方法。

圖片來(lái)源于網(wǎng)絡(luò)僅供學(xué)習(xí)，侵權(quán)告知?jiǎng)h

3、UI中的配色

3.1、主色

主色是指在配色中處于支配地位的色彩。在配色前，主色是最先確定的顏色

一般情況下，主色是配色中使用面積最多的色彩。用于主要的組件、組件的背景、大面積色塊等。

例如，下面頁(yè)面中的主色是藍(lán)色。盡管也運(yùn)用了大面積的白色，但是黑白灰屬于無(wú)彩色，無(wú)彩色并不參與到配色過(guò)程中。綠色是作為強(qiáng)調(diào)色而出現(xiàn)的：

圖片來(lái)源于網(wǎng)絡(luò)僅供學(xué)習(xí)，侵權(quán)告知?jiǎng)h

3.2、襯托色

襯托色是主色以外，為了襯托主色而出現(xiàn)的另一種色彩。襯托色通常為主色的互補(bǔ)色或?qū)Ρ壬?。襯托色所使用的面積可大可小，只要達(dá)到襯托的目的即可。

一組配色中一定會(huì)有一個(gè)主色，而襯托色并非必不可少。是否采用襯托色，取決于你的配色計(jì)劃。通常單一的色彩會(huì)比較單調(diào)，而利用襯托色來(lái)強(qiáng)化主色的豐富變化是解決這一問(wèn)題的方案之一。

圖片來(lái)源于網(wǎng)絡(luò)僅供學(xué)習(xí)，侵權(quán)告知?jiǎng)h

3.3、背景色

背景色經(jīng)常表現(xiàn)為無(wú)彩色（黑、白、灰）或者低飽和度的色彩。背景色主要是作為背景而存在，它最好不要以非常強(qiáng)烈的姿態(tài)出現(xiàn)。背景色并非具有某種功能，它是一個(gè)頁(yè)面的基礎(chǔ)底色。

3.4、強(qiáng)調(diào)色

強(qiáng)調(diào)色是在主色以外起強(qiáng)調(diào)作用的色彩，可以說(shuō)它是非常重要的視覺(jué)焦點(diǎn)。它本身具有一種獨(dú)立性，因此在配色上要形成與主色的強(qiáng)烈對(duì)比。它可以是主色的對(duì)比色、互補(bǔ)色等，使其能跳脫于主色的色彩。

強(qiáng)調(diào)色所用的面積比較小，只要在焦點(diǎn)領(lǐng)域運(yùn)用上強(qiáng)調(diào)色，其本身就有著聚焦的作用。有時(shí)候強(qiáng)調(diào)色還扮演著襯托色的角色。