靜電說：要培養(yǎng)對顏色的敏感度，你必須要了解色彩的原理。在這個基礎(chǔ)上去感悟，久而久之，色彩會在你手中變的游刃有余。下面這篇終極色彩指南非常值得一看~讓我們不妨再系統(tǒng)梳理一下你的配色技巧吧！
顏色是一種高度刺激的視覺語言。該元素主要用于使用戶在屏幕上進(jìn)行操作或突出顯示他們必須知道的信息。
即使是同一朵花，藍(lán)花和紅花所傳達(dá)的感覺也是不一樣的。它不僅傳達(dá)一種情緒或細(xì)微差別，而且還用于傳達(dá)信息。和紅綠燈一樣，綠色表示積極，黃色表示警告，紅色表示禁止。
顏色像火一樣。正確使用會給你想要的結(jié)果，但過度使用會毀了設(shè)計(jì)。在數(shù)字產(chǎn)品設(shè)計(jì)中，您需要幫助用戶根據(jù)優(yōu)先級快速采取行動，您需要非常小心地使用顏色。讓我們找出它有什么屬性可以很好地處理顏色之“火”。

顏色屬性
要知道顏色是如何工作的，我們需要知道它們有什么屬性。顏色具有三個屬性。有區(qū)分獨(dú)特顏色種類的色相（hue）、區(qū)分原色深淺的飽和度（saturation）、區(qū)分明暗的明度（Brightness）。這三個屬性用于創(chuàng)建各種視覺效果。首先，形狀主要以亮度構(gòu)成，顏色根據(jù)元素的功能進(jìn)行分類。一般來說，我傾向于使用黑白和一種強(qiáng)調(diào)色。有時不止一種顏色用于不同的功能但重要的信息。

顏色模型
在使用Sketch或 figma 時，您經(jīng)常會看到這些名詞。什么是 RGB，什么是 HEX？如何在數(shù)字環(huán)境中表達(dá)顏色？設(shè)計(jì)中使用的顏色，電腦處理的顏色，顯示器顯示的顏色，都因規(guī)格而異。色彩空間是指用于管理在此數(shù)字環(huán)境中表達(dá)的色彩的標(biāo)準(zhǔn)。在數(shù)碼產(chǎn)品中，顏色主要是RGB、HSL、HSB等，工作時主要使用HEX和RGB。

RGBA（紅、綠、藍(lán)、透明度）：這是一種通過將光紅、綠、藍(lán)三基色與表示透明度相結(jié)合來表現(xiàn)各種顏色的基本方法。
HSV/HSB（色相、飽和度、值或亮度）：這是一種直觀且易于處理的顏色屬性）。
HEX：從RGB轉(zhuǎn)換為十六進(jìn)制的代碼，與其他元素相比具有可以一次復(fù)制粘貼的優(yōu)點(diǎn)，是一種通用的顏色值，在各種環(huán)境中都易于輸入。

所有程序都使用 HSB 來選擇顏色并使用 Hex 顯示它們。當(dāng)您想使顏色變暗時，在設(shè)計(jì)時要方便得多，因?yàn)楫?dāng)您看到 HSB 的情況時，HSB 可以更直觀地處理顏色屬性，您可以減少 B 而不是通過混合紅色、綠色和藍(lán)色來變暗的 RGBA。但是在開發(fā)的時候，每個屬性打個逗號打個逗號比較麻煩，所以我傾向于使用HEX，打碼最少，容易區(qū)分。
主色和輔色

我傾向于嚴(yán)格和限制性地使用顏色，因?yàn)樵跀?shù)字產(chǎn)品 UI 中濫用顏色會干擾內(nèi)容導(dǎo)航。我們定義了顏色層次結(jié)構(gòu)來管理標(biāo)準(zhǔn)。服務(wù)中使用的顏色服務(wù)基本使用原色、二次色和黑白（Black, White）。根據(jù)服務(wù)的性質(zhì)，我們可能會決定更多不同的顏色組合。服務(wù)中使用的原色在很大程度上遵循品牌的圖形慣例。

主色：需要顏色的最常用的顏色輔色：使用主色時使用的顏色，需要與其他元素區(qū)分開來。黑白：主要用于背景和文字，最亮和最暗的顏色

顏色層級（重要性）

既然已經(jīng)決定了產(chǎn)品中要使用的顏色類型，在頁面上使用顏色時，請遵循信息的重要性?；竟羌苡珊谏桶咨M成，使用主和輔色強(qiáng)調(diào)功能或必須知道的信息等重要元素。在這種情況下，當(dāng)認(rèn)知或行為是特殊情況下的重要因素時，與其他信息不同，使用適合含義的顏色。它突出了重要的最終行為要素和必須驗(yàn)證的信息。

色彩占比

在決定使用哪些顏色之后，您需要決定使用什么比例。由于顏色是一種強(qiáng)烈的刺激物，因此您應(yīng)該通過對所有元素使用顏色來避免眼睛疲勞。最舒適和可接受的比例可以利用室內(nèi)使用的 60-30-10 規(guī)則。背景顏色使用 60% 和 30% 分配，10% 分配給要強(qiáng)調(diào)的元素或面向文本的服務(wù)?？紤]總量分配背景色后，在10%以內(nèi)一點(diǎn)一點(diǎn)地添加點(diǎn)色來調(diào)整顏色比例。
正如室內(nèi)空間設(shè)計(jì)因目的而變化一樣，色彩匹配也適用于空間。

對比

如果顏色模糊，眼睛需要集中注意力才能看到細(xì)微差別，因此最好使對比度盡可能強(qiáng)。如果你處于必須模糊區(qū)分顏色的情況下，你需要考慮元素是否真的足以通過顏色來區(qū)分它們。如果您決定以不同的方式表達(dá)一種顏色，則需要提供足夠的對比度以使該顏色與其他顏色明顯區(qū)分開來。考慮背景顏色和與其他元素的相對關(guān)系調(diào)整顏色。顏色對比度遵循WCAG劃分的等級，主要以AA級為標(biāo)準(zhǔn)。
A（最少）——3:1AA - 4.5:1AAA — 7:1

靜電說：我們在這里為大家提供了一個顏色對比檢查器，請關(guān)注我們的公眾號后，在聊天窗口回復(fù)“對比”，獲取檢查器吧互補(bǔ)！

顏色搭配

即使您已經(jīng)決定要經(jīng)常使用哪種顏色，有時您也需要不同的顏色。在這種情況下，您需要根據(jù)色輪選擇與主色相匹配的顏色。所有元素主要用單一顏色表示，雖然是與主色相似的概念，但在需要區(qū)分時使用類似顏色，補(bǔ)色用于用戶需要比任何其他元素更清楚地識別的信息。

單色：重要信息使用主色，灰色區(qū)域使用與主色相同的色調(diào)。鄰近色：類似的概念，但在需要區(qū)分時使用類比。補(bǔ)色：當(dāng)需要比其他元素更強(qiáng)烈地強(qiáng)調(diào)時使用。

明暗對比

如果難以用一種原色區(qū)分信息，則使用淺色和深色。此時，定義了比主色淺的顏色和比主色深的顏色，按照自然界的顏色變化規(guī)律，按照亮度-飽和度-色調(diào)的順序變換顏色。

加深顏色：基于 RGB 的色調(diào)，增加飽和度并降低亮度。淡化顏色：基于 CMY 色調(diào)，降低飽和度并增加亮度。
為什么這么做呢？原因有以下幾點(diǎn)：

原因一：自然界顏色的變化

在現(xiàn)實(shí)中，當(dāng)光線強(qiáng)時，物體的色彩飽和度會變?nèi)酰ㄏ胂笠幌拢?dāng)你將手電筒放在蘋果的正前方時）。顏色出現(xiàn)是因?yàn)楣獗徊牧戏瓷?。反射太少會使它看起來很暗。?dāng)物體的顏色變亮?xí)r，飽和度降低，亮度增加，當(dāng)物體的顏色變暗時，飽和度增加，亮度降低。

原因二、色相本身的明暗度雖然黃色很亮，很難在白底上書寫，藍(lán)色很暗，很難在黑底上書寫，但很難想象不同顏色之間的亮度差異。你怎么知道在屏幕上看到的色調(diào)本身的亮度？

我用illustrator調(diào)整了HSB的Hue并分配了12種顏色。我照原樣復(fù)制它，然后將其轉(zhuǎn)換為黑白。黃色和藍(lán)色是生成的，但其余顏色看起來不是很規(guī)則。為什么 180 度和 300 度的顏色更亮？

比較每個數(shù)字的圖表，當(dāng)它變?yōu)榧t色 綠色 藍(lán)色時，它會變暗，而當(dāng)它變?yōu)榍嗌蠹t色黃色時，它會變得更亮。由于RGB和CMY是標(biāo)準(zhǔn)，屏幕使用的是光的三基色，所以混合的顏色越多，越接近白色，所以原色最多的CMY越亮。

背景顏色

因?yàn)轭伾窍鄬Φ模运鼈兊膶傩詴鶕?jù)它們周圍的顏色而變化。在設(shè)計(jì)深色模式時，背景顏色是反轉(zhuǎn)的，所以不要使用相同的顏色，而是為每個主題使用合適的顏色。

《靜電的UI設(shè)計(jì)教室-4月新課》來啦！

廣受好評的全鏈路UI一對一小班課程

《靜電的UI設(shè)計(jì)教室》已經(jīng)舉辦了40多期

我們新的4月課程會在下個月中下旬開課

趁著大好春光 好好提升自己吧

↓↓長按二維碼加靜電老師咨詢↓↓

? ? ? ? ??