2022-5-29 純純
好的配色不但能傳達出鮮明的產(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）色相
是指色彩的相貌，色相被用來區(qū)分顏色，根據(jù)光的不同波長，色彩具有紅色、黃色或綠色等性質(zhì)，這被稱之為色相。
（2）明度
是色彩從亮到暗的明暗程度，黑色的絕對明度被定義為 0 （理想黑）,而白色的絕對明度被定義為 100 （理想白），其他系列灰色則介于兩者之間。
（3）純度
純度通常是指色彩的鮮艷度。從科學(xué)的角度看，一種顏色的鮮艷度取決于這一色相發(fā)射光的單一程度。色彩的純度強弱，是指色相感覺明確或含糊、鮮艷或混濁的程度。
（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表示從黃色至藍色的范圍。
色彩心理作用是指色彩作用與人的情感所產(chǎn)生的心理感受與綜合性生理感覺作用。它影響著人們的記憶、感知、聯(lián)想和情感，刺激著視覺，在設(shè)計中有著不可忽視的作用。色彩的直接心理作用對設(shè)計有著重大的影響，關(guān)系到對用戶心理的把握。
色彩心理作用包括色彩的直接心理效應(yīng)和間接心理效應(yīng)。
（1）直接心理
色彩的直接心理效應(yīng)是色彩本身的屬性即色相、明度、純度等感官印象造成的心理感受。它包括很多不同的心理效應(yīng)，一般可分為 9 類，即色彩的興奮感和沉靜感、色彩的冷暖感、色彩的輕重感、色彩的華麗感和樸素感、色彩的明快和陰郁感、色彩的軟硬感、色彩的明暗感和色彩的空間感。
（2）間接心理
色彩的間接心理效應(yīng)是由色彩的直觀感受反映到大腦所產(chǎn)生的聯(lián)想效果。在設(shè)計中常常利用色彩間接心理效應(yīng)來傳達廣告信息。
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ā)揮，還需要依賴于色彩在整個配色時所處的位置、面積等，即色彩與其他色彩所形成的秩序。
顏色同樣有主體，和輔助。確定主體色系，有助于頁面整體基調(diào)的把控。在實際的操作過程中，顏色要適量，通常2-3種就可以了。多了往往較亂（并非絕對）。
單色系配色法：同?個色系內(nèi)根據(jù)顏色的明度和純度不同去做區(qū)分，形成層級關(guān)系、對比關(guān)
系的配色方法。例如：深藍、天藍、淺藍這樣的層級變化。
鄰近色配色法：相鄰的色系進行搭配。例如：黃色、橙色、紅色。
對比色配色法：對比的色系進行搭配。例如：黃色、紫色。
一套 App 配色基本由背景色、主題色、輔助色、點睛色 4 種色調(diào)組成。
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)一、色彩平衡。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://sillybuy.com