2022-5-29 純純
好的配色不但能傳達(dá)出鮮明的產(chǎn)品主題調(diào)性，并且能為用戶的視覺(jué)行為產(chǎn)生引導(dǎo)作用，構(gòu)成良好的用戶體驗(yàn)。
對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)，不但要考慮顏色在給予用戶的感受上的作用，同樣應(yīng)當(dāng)考慮其實(shí)用性，避免重形式而輕內(nèi)容的問(wèn)題發(fā)生。
所以本文的內(nèi)容是基于色彩的基礎(chǔ)知識(shí)，為大家介紹 UI 設(shè)計(jì)師常用的配色方案、配色流程，當(dāng)然也包括其他視覺(jué)設(shè)計(jì)工作者在工作中要用到的基礎(chǔ)色彩常識(shí)。
顏色或色彩是通過(guò)“眼、腦和我們的生活經(jīng)驗(yàn)”所產(chǎn)生的?種對(duì)“光”的視覺(jué)效應(yīng)。但是人對(duì)顏色的感覺(jué)不僅僅由“光”的物理性質(zhì)所決定，還包含著“心理”等許多因素，比如人類(lèi)對(duì)顏色的感覺(jué)往往受到周?chē)伾挠绊?。有時(shí)人們也將物質(zhì)產(chǎn)生不同顏色的物理特性直接稱為顏色。
顏色的應(yīng)用在 UI 設(shè)計(jì)師的工作中是非常關(guān)鍵的一環(huán)。
（1）色相
是指色彩的相貌，色相被用來(lái)區(qū)分顏色，根據(jù)光的不同波長(zhǎng)，色彩具有紅色、黃色或綠色等性質(zhì)，這被稱之為色相。
（2）明度
是色彩從亮到暗的明暗程度，黑色的絕對(duì)明度被定義為 0 （理想黑）,而白色的絕對(duì)明度被定義為 100 （理想白），其他系列灰色則介于兩者之間。
（3）純度
純度通常是指色彩的鮮艷度。從科學(xué)的角度看，一種顏色的鮮艷度取決于這一色相發(fā)射光的單一程度。色彩的純度強(qiáng)弱，是指色相感覺(jué)明確或含糊、鮮艷或混濁的程度。
（1）HSB ：在 HSB 模式中，H（Hues）表示色相，S（Saturation）表示飽和度，B（Brightness）表示亮度。
（2）RGB ：三原色紅、綠、藍(lán)疊加最終為白色（加色模式）。常用于光源光情況下，例如顯示屏幕。
（3）CMYK ：三基色洋紅、黃、青疊加最終為黑色（減色模式）。常用于反射光情況下，例如印刷。
（4）LAB ：LAB 色彩模型是由亮度（L）和有關(guān)色彩的 A，B 三個(gè)要素組成。L 表示亮度（Luminosity），A 表示從洋紅色至綠色的范圍，B表示從黃色至藍(lán)色的范圍。
色彩心理作用是指色彩作用與人的情感所產(chǎn)生的心理感受與綜合性生理感覺(jué)作用。它影響著人們的記憶、感知、聯(lián)想和情感，刺激著視覺(jué)，在設(shè)計(jì)中有著不可忽視的作用。色彩的直接心理作用對(duì)設(shè)計(jì)有著重大的影響，關(guān)系到對(duì)用戶心理的把握。
色彩心理作用包括色彩的直接心理效應(yīng)和間接心理效應(yīng)。
（1）直接心理
色彩的直接心理效應(yīng)是色彩本身的屬性即色相、明度、純度等感官印象造成的心理感受。它包括很多不同的心理效應(yīng)，一般可分為 9 類(lèi)，即色彩的興奮感和沉靜感、色彩的冷暖感、色彩的輕重感、色彩的華麗感和樸素感、色彩的明快和陰郁感、色彩的軟硬感、色彩的明暗感和色彩的空間感。
（2）間接心理
色彩的間接心理效應(yīng)是由色彩的直觀感受反映到大腦所產(chǎn)生的聯(lián)想效果。在設(shè)計(jì)中常常利用色彩間接心理效應(yīng)來(lái)傳達(dá)廣告信息。
1）灰?：正式、重?、成熟
2）棕?：保守、親切、穩(wěn)定
3）粉?：?性、天真、?春
4）??：注意、提醒、快樂(lè)
5）紫?：奢華、浪漫、創(chuàng)意
是一種充滿神秘的顏色，在自然界中較少見(jiàn)到，所以被引申為象征高貴的色彩。
在UI設(shè)計(jì)中的應(yīng)用場(chǎng)景為紫+粉常用于女性化的產(chǎn)品調(diào)性。
6）??：新鮮、清潔、健康
白色常常被認(rèn)為是無(wú)色”即不是色彩。
在UI設(shè)計(jì)中的應(yīng)用場(chǎng)景，常用于背景色，緩和各種顏色的沖突，以襯托其他色彩，提高畫(huà)面明度，提高文字可讀性。
圖源-dribbble
7）??：正式、權(quán)?、?練
是一種充滿質(zhì)感的顏色，它是所有色彩中最有力量的，能很快吸引用戶的注意力。
在UI中的應(yīng)用場(chǎng)景，常和其他色彩百搭，比如黑色+金色，黑色+紅色等等，以及現(xiàn)在UI設(shè)計(jì)中的暗黑模式。
圖源-dribbble
8）藍(lán)?：信任、舒適、放松
純凈的藍(lán)色通常讓人聯(lián)想到海洋和天空，讓人的內(nèi)心感到平和，有助于人的頭腦變得冷靜，減少工作中的煩躁和沖動(dòng)。
在UI設(shè)計(jì)中應(yīng)用場(chǎng)景，常用于工具、商務(wù)、科技類(lèi)等產(chǎn)品，B端設(shè)計(jì)也經(jīng)常運(yùn)用。
圖源-dribbble
9）綠?：??、?然、成功
綠色是大自然中最常見(jiàn)的顏色，代表著健康、生命、青春、寧?kù)o、自然、和平、安全、舒適，是一種充滿希望的顏色。
在設(shè)計(jì)中的應(yīng)用場(chǎng)景，健康、醫(yī)療、運(yùn)動(dòng)及少兒類(lèi)產(chǎn)品使用較多，一般在軟件中表示安全、成功。
圖源-dribbble
10）橙?：信?、能量、樂(lè)觀
它烘托出的活躍氣氛沒(méi)有危險(xiǎn)的感覺(jué)，反而是一種友好。
在UI設(shè)計(jì)中應(yīng)用場(chǎng)景，電商、金融以及服務(wù)類(lèi)的產(chǎn)品使用較多，比如淘寶。
圖源-dribbble
11）紅?：危險(xiǎn)、重要、激情
最醒目和強(qiáng)勢(shì)的顏色，甚至能引起一些生理反應(yīng)，例如心跳呼吸加快等。
在UI設(shè)計(jì)中應(yīng)用場(chǎng)景，紅色常用于電商、金融、服務(wù)等行業(yè)。紅色也最能烘托氣氛，在中國(guó)傳統(tǒng)節(jié)日里都使用熱鬧的紅色來(lái)裝飾，比如新年春節(jié)階段。同時(shí)紅色也代表了警示、告誡，所以在界面設(shè)計(jì)中常用紅色的文字和按鈕來(lái)警示用戶慎重操作。
圖源-dribbble
5.UI中的色彩
Ul配色一般包含主色和輔助色、強(qiáng)調(diào)色、中性色。
主色通常與品牌色一致，輔助色一般選擇與主色色調(diào)一致且能拉開(kāi)層次的顏色，強(qiáng)調(diào)色選擇與主色相對(duì)立的互補(bǔ)色。
中性色主要用于界面中的線條和背景
圖源-dribbble
每?種色彩都有其自身的特質(zhì)，而這?特性的發(fā)揮，還需要依賴于色彩在整個(gè)配色時(shí)所處的位置、面積等，即色彩與其他色彩所形成的秩序。
顏色同樣有主體，和輔助。確定主體色系，有助于頁(yè)面整體基調(diào)的把控。在實(shí)際的操作過(guò)程中，顏色要適量，通常2-3種就可以了。多了往往較亂（并非絕對(duì)）。
單色系配色法：同?個(gè)色系內(nèi)根據(jù)顏色的明度和純度不同去做區(qū)分，形成層級(jí)關(guān)系、對(duì)比關(guān)
系的配色方法。例如：深藍(lán)、天藍(lán)、淺藍(lán)這樣的層級(jí)變化。
鄰近色配色法：相鄰的色系進(jìn)行搭配。例如：黃色、橙色、紅色。
對(duì)比色配色法：對(duì)比的色系進(jìn)行搭配。例如：黃色、紫色。
一套 App 配色基本由背景色、主題色、輔助色、點(diǎn)睛色 4 種色調(diào)組成。
flatuicolors （https://flatuicolors.com）
提供多款扁平?彩配??案，可以根據(jù) UI 設(shè)計(jì)的需要選擇使?。
Paletton （http://paletton.com）
是?個(gè)在線的?環(huán)配??具，我們可以根據(jù)需要選擇單?、相近?、對(duì)??等規(guī)則來(lái)查看配?，也可以實(shí)時(shí)查看其在??中的搭配效果。
uigradients（https://uigradients.com/）
UIgradients 以分享美麗漸變?彩為主的分享站，??接近上百種漸變配??案，設(shè)計(jì)師可根據(jù)???格來(lái)選擇搭配，此外我們還能直接獲得對(duì)應(yīng)漸變配?的CSS代碼。
webgradients（https://webgradients.com/）
富有超多好看漸變漸變配?的?站，只需要復(fù)制?彩編號(hào)填充漸變，或者直接下載PSD，Sketch，圖?，CSS代碼。
CoolHue（https://webkul.github.io/coolhue/）
富有超多好看漸變配?的?站，可安裝Sketch 插件，或者直接下載圖?和CSS代碼。
中國(guó)色網(wǎng)站（http://zhongguose.com/）
只有中國(guó)的顏色, 才能這般,美得不可方物
Adobe Color【工具】（https://color.adobe.com/zh/create/color-wheel）
Adobe色輪配色工具，可以選擇色彩模式與調(diào)和規(guī)則
ColorSpace（https://mycolor.space/）
功能強(qiáng)大的漸變色在線生成器，支持單色、雙色，甚至三色漸變。
色彩是設(shè)計(jì)中的重要組成部分，不同的色彩傳遞不同的情感和態(tài)度給用戶，這也是UI設(shè)計(jì)規(guī)范中需要注意的部分，即做到色彩統(tǒng)一、色彩平衡。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com