為一款 App 的界面配色，是一個 UI 設(shè)計師的基本功，好的配色不但能傳達出鮮明的產(chǎn)品主題調(diào)性，并且能為用戶的視覺行為產(chǎn)生引導(dǎo)作用，構(gòu)成良好的用戶體驗。

對于UI設(shè)計師來說，不但要考慮顏色在給予用戶的感受上的作用，同樣應(yīng)當考慮其實用性，避免重形式而輕內(nèi)容的問題發(fā)生。

所以本文的內(nèi)容是基于色彩的基礎(chǔ)知識，為大家介紹 UI 設(shè)計師常用的配色方案、配色流程，當然也包括其他視覺設(shè)計工作者在工作中要用到的基礎(chǔ)色彩常識。

一、色彩常識??

顏色或色彩是通過“眼、腦和我們的生活經(jīng)驗”所產(chǎn)生的?種對“光”的視覺效應(yīng)。但是人對顏色的感覺不僅僅由“光”的物理性質(zhì)所決定，還包含著“心理”等許多因素，比如人類對顏色的感覺往往受到周圍顏色的影響。有時人們也將物質(zhì)產(chǎn)生不同顏色的物理特性直接稱為顏色。

顏色的應(yīng)用在 UI 設(shè)計師的工作中是非常關(guān)鍵的一環(huán)。

1.顏色的三要素?

（1）色相?

是指色彩的相貌，色相被用來區(qū)分顏色，根據(jù)光的不同波長，色彩具有紅色、黃色或綠色等性質(zhì)，這被稱之為色相。

（2）明度?

是色彩從亮到暗的明暗程度，黑色的絕對明度被定義為 0 （理想黑）,而白色的絕對明度被定義為 100 （理想白），其他系列灰色則介于兩者之間。

（3）純度?

純度通常是指色彩的鮮艷度。從科學(xué)的角度看，一種顏色的鮮艷度取決于這一色相發(fā)射光的單一程度。色彩的純度強弱，是指色相感覺明確或含糊、鮮艷或混濁的程度。

顏色三要素

?2. 色彩模式?

（1）HSB??：在 HSB 模式中，H（Hues）表示色相，S（Saturation）表示飽和度，B（Brightness）表示亮度。

（2）RGB??：三原色紅、綠、藍疊加最終為白色（加色模式）。常用于光源光情況下，例如顯示屏幕。

（3）CMYK??：三基色洋紅、黃、青疊加最終為黑色（減色模式）。常用于反射光情況下，例如印刷。

（4）LAB? ：LAB 色彩模型是由亮度（L）和有關(guān)色彩的 A，B 三個要素組成。L 表示亮度（Luminosity），A 表示從洋紅色至綠色的范圍，B表示從黃色至藍色的范圍。

色彩模式

?3. 色彩心理作用?

色彩心理作用是指色彩作用與人的情感所產(chǎn)生的心理感受與綜合性生理感覺作用。它影響著人們的記憶、感知、聯(lián)想和情感，刺激著視覺，在設(shè)計中有著不可忽視的作用。色彩的直接心理作用對設(shè)計有著重大的影響，關(guān)系到對用戶心理的把握。

圖源-dribbble

色彩心理作用包括色彩的直接心理效應(yīng)和間接心理效應(yīng)。

（1）直接心理??

色彩的直接心理效應(yīng)是色彩本身的屬性即色相、明度、純度等感官印象造成的心理感受。它包括很多不同的心理效應(yīng)，一般可分為 9 類，即色彩的興奮感和沉靜感、色彩的冷暖感、色彩的輕重感、色彩的華麗感和樸素感、色彩的明快和陰郁感、色彩的軟硬感、色彩的明暗感和色彩的空間感。

（2）間接心理??

色彩的間接心理效應(yīng)是由色彩的直觀感受反映到大腦所產(chǎn)生的聯(lián)想效果。在設(shè)計中常常利用色彩間接心理效應(yīng)來傳達廣告信息。

?4. 色彩象征 & 聯(lián)想??

色彩的象征

?色彩象征?

1）灰?：正式、重?、成熟

2）棕?：保守、親切、穩(wěn)定

3）粉?：?性、天真、?春

4）??：注意、提醒、快樂

5）紫?：奢華、浪漫、創(chuàng)意

是一種充滿神秘的顏色，在自然界中較少見到，所以被引申為象征高貴的色彩。

在UI設(shè)計中的應(yīng)用場景為紫+粉常用于女性化的產(chǎn)品調(diào)性。

6）??：新鮮、清潔、健康

白色常常被認為是無色”即不是色彩。

在UI設(shè)計中的應(yīng)用場景，常用于背景色，緩和各種顏色的沖突，以襯托其他色彩，提高畫面明度，提高文字可讀性。

圖源-dribbble

7）??：正式、權(quán)?、?練

是一種充滿質(zhì)感的顏色，它是所有色彩中最有力量的，能很快吸引用戶的注意力。

在UI中的應(yīng)用場景，常和其他色彩百搭，比如黑色+金色，黑色+紅色等等，以及現(xiàn)在UI設(shè)計中的暗黑模式。

圖源-dribbble

8）藍?：信任、舒適、放松

純凈的藍色通常讓人聯(lián)想到海洋和天空，讓人的內(nèi)心感到平和，有助于人的頭腦變得冷靜，減少工作中的煩躁和沖動。

在UI設(shè)計中應(yīng)用場景，常用于工具、商務(wù)、科技類等產(chǎn)品，B端設(shè)計也經(jīng)常運用。

圖源-dribbble

9）綠?：??、?然、成功

綠色是大自然中最常見的顏色，代表著健康、生命、青春、寧靜、自然、和平、安全、舒適，是一種充滿希望的顏色。

在設(shè)計中的應(yīng)用場景，健康、醫(yī)療、運動及少兒類產(chǎn)品使用較多，一般在軟件中表示安全、成功。

圖源-dribbble

10）橙?：信?、能量、樂觀

它烘托出的活躍氣氛沒有危險的感覺，反而是一種友好。

在UI設(shè)計中應(yīng)用場景，電商、金融以及服務(wù)類的產(chǎn)品使用較多，比如淘寶。

圖源-dribbble

11）紅?：危險、重要、激情

最醒目和強勢的顏色，甚至能引起一些生理反應(yīng)，例如心跳呼吸加快等。

在UI設(shè)計中應(yīng)用場景，紅色常用于電商、金融、服務(wù)等行業(yè)。紅色也最能烘托氣氛，在中國傳統(tǒng)節(jié)日里都使用熱鬧的紅色來裝飾，比如新年春節(jié)階段。同時紅色也代表了警示、告誡，所以在界面設(shè)計中常用紅色的文字和按鈕來警示用戶慎重操作。

圖源-dribbble

??5.UI中的色彩??

Ul配色一般包含主色和輔助色、強調(diào)色、中性色。

主色通常與品牌色一致，輔助色一般選擇與主色色調(diào)一致且能拉開層次的顏色，強調(diào)色選擇與主色相對立的互補色。

中性色主要用于界面中的線條和背景

圖源-dribbble

?二、配色方法?

每?種色彩都有其自身的特質(zhì)，而這?特性的發(fā)揮，還需要依賴于色彩在整個配色時所處的位置、面積等，即色彩與其他色彩所形成的秩序。

?1. 主色&輔助色配色?

顏色同樣有主體，和輔助。確定主體色系，有助于頁面整體基調(diào)的把控。在實際的操作過程中，顏色要適量，通常2-3種就可以了。多了往往較亂（并非絕對）。

?2. 色環(huán)配色方法?

單色系配色法：同?個色系內(nèi)根據(jù)顏色的明度和純度不同去做區(qū)分，形成層級關(guān)系、對比關(guān)

系的配色方法。例如：深藍、天藍、淺藍這樣的層級變化。

鄰近色配色法：相鄰的色系進行搭配。例如：黃色、橙色、紅色。

對比色配色法：對比的色系進行搭配。例如：黃色、紫色。

配色方法

?3.App 配色?

一套 App 配色基本由背景色、主題色、輔助色、點睛色 4 種色調(diào)組成。

• 背景色：分為淺色基地（白基），深色基地（黑基），彩色基地（灰基）。

• 主題色：除了基地背景色外占最多體積的色調(diào)組成，主色調(diào)也可由幾個顏色混合的漸變色組成。

• 輔助色：輔助主色，使畫面細節(jié)更豐富，輔助色也可由呼應(yīng)主色調(diào)內(nèi)容圖片輔助。

• 點睛色：引導(dǎo)閱讀，裝飾頁面，讓頁面的元素信息層級井然有序。

如何給一個 App 配色

?三、配色工具?

flatuicolors?（https://flatuicolors.com）

提供多款扁平?彩配??案，可以根據(jù) UI 設(shè)計的需要選擇使?。

Paletton?（http://paletton.com）

是?個在線的?環(huán)配??具，我們可以根據(jù)需要選擇單?、相近?、對??等規(guī)則來查看配?，也可以實時查看其在??中的搭配效果。

uigradients（https://uigradients.com/）

UIgradients 以分享美麗漸變?彩為主的分享站，??接近上百種漸變配??案，設(shè)計師可根據(jù)???格來選擇搭配，此外我們還能直接獲得對應(yīng)漸變配?的CSS代碼。

webgradients（https://webgradients.com/）

富有超多好看漸變漸變配?的?站，只需要復(fù)制?彩編號填充漸變，或者直接下載PSD，Sketch，圖?，CSS代碼。

CoolHue（https://webkul.github.io/coolhue/）

富有超多好看漸變配?的?站，可安裝Sketch 插件，或者直接下載圖?和CSS代碼。

中國色網(wǎng)站（http://zhongguose.com/）

只有中國的顏色, 才能這般,美得不可方物

Adobe Color【工具】（https://color.adobe.com/zh/create/color-wheel）

Adobe色輪配色工具，可以選擇色彩模式與調(diào)和規(guī)則

ColorSpace（https://mycolor.space/）

功能強大的漸變色在線生成器，支持單色、雙色，甚至三色漸變。

?寫在最后?

色彩是設(shè)計中的重要組成部分，不同的色彩傳遞不同的情感和態(tài)度給用戶，這也是UI設(shè)計規(guī)范中需要注意的部分，即做到色彩統(tǒng)一、色彩平衡。

本文使用 文章同步助手 同步