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