靜電說：在UI設計的環(huán)節(jié)中，我們首先要對產(chǎn)品進行立項，然后進行產(chǎn)品調(diào)研，繪制低保真原型圖，進行交互設計，隨后設計師接手開始進行品牌塑造和高保真UI界面的設計工作。在這個過程中，配色是其中最重要的一環(huán)之一，也是很多設計師畢竟難以駕馭的環(huán)節(jié)，顏色不是臟了，就是不符合設計風格，用戶不喜歡，要么就是存在色差，無法準確還原顏色。

要培養(yǎng)對顏色的敏感度，你必須要了解色彩的原理。在這個基礎上去感悟，久而久之，色彩會在你手中變的游刃有余。下面這篇終極色彩指南非常值得一看~讓我們不妨再系統(tǒng)梳理一下你的配色技巧吧！要用好顏色，軟件和硬件兩塊，一個都不能少。

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

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

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

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

主色和輔色

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

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

顏色層級（重要性）

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

色彩占比

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

對比

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

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

顏色搭配

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

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

明暗對比

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

加深顏色：基于 RGB 的色調(diào)，增加飽和度并降低亮度。淡化顏色：基于 CMY 色調(diào)，降低飽和度并增加亮度。
背景顏色

因為顏色是相對的，所以它們的屬性會根據(jù)它們周圍的顏色而變化。在設計深色模式時，背景顏色是反轉(zhuǎn)的，所以不要使用相同的顏色，而是為每個主題使用合適的顏色。

色差
顏色一般會在顯示屏幕上表現(xiàn)為RGB色（紅，綠和藍）或者是LSB/L（色相，飽和度和亮度）下圖就是一個典型的色彩空間圖。它代表了一個顯示設備（或者配置文件希望這個顯示設備）能顯示多少顏色數(shù)。

如果你把一種顏色從一種色彩空間轉(zhuǎn)成另一個色彩空間，實際上，這個色彩空間會盡可能的適配你要的顏色，讓他們盡可能的在同一個位置（由于色彩空間的改變，其實轉(zhuǎn)化后的顏色并不能完全一致）。也就是說這個RGB的數(shù)值會根據(jù)這個色彩空間的定義而做出改變。如果你原先所使用的這個顏色剛好位于這個色彩空間的邊緣位置，改變后的色彩空間會讓你的顏色呈現(xiàn)更真實或者失真。

設計師絕大部分作品都在網(wǎng)絡端傳輸，選擇sRGB這樣標準的色彩配置文件可以幫助我們解決一部分的問題。另外，顯示器的色域色準也是很容易被廣大設計師忽略的一個要點。

這就是很多設計師覺得在不同設備上，同一張圖片，同一種配色卻顯示的顏色不一樣的最重要的原因。

顯示器對于設計稿顏色的影響

對于UI設計師來說，選擇一臺顯示色準更好的顯示器，可以盡可能真實的還原顏色本身的觀感，讓你用最標準的感受去做設計，去配色。這樣可以保證設計稿和手機上觀看的效果盡可能的一致。

此外，顯示器是否是標準色域覆蓋（99-100%）也很重要，色域越廣，顯示器顯示的顏色數(shù)量越多，但是色彩的呈現(xiàn)卻不會越準確。例如99%sRGB一定比80%sRGB要好，但是130%sRGB就會導致過飽和的情況發(fā)生。

同理，低端手機的屏幕的顯示效果也相對于使用較好顯示屏的手機顯示的顏色差。我們在測試的時候，需要保證在顯示顏色較準確的設備上進行設計和查看，確保你所見的，所設計的顏色就是你想要的，而且在這些設備上是準確的。

在之前，靜電購入了 明基PD2705U這款顯示器，那么咱們結(jié)合這臺顯示器，來看看這臺顯示器與其它顯示器的參數(shù)和軟件測試數(shù)據(jù)。接下來進行一些測試，看看同一張圖片在不同顯示器，不同移動設備的顯示效果。

明基PD系列號稱是設計師專用顯示器，擁有標準的99%sRGB色域覆蓋，了解后知道明基PD系列每臺顯示器都經(jīng)過了嚴格的出廠校色，拿到手以后看到出廠校色，不用二次校色就能放心使用。還對屏幕做了均勻性管控，也就是將屏幕分為25塊區(qū)域，對每塊區(qū)域進行單獨校色，讓亮度色彩能夠均勻顯示。動畫設計、CAD/CAM模式、雙色彩、暗房等模式滿足設計師們的需要。PD2705U還帶外接控制器，對于需要調(diào)整參數(shù)設置的設計師們來說真是太好用了。

我們分別使用同一份設計稿放置在不同的屏幕上進行展示(顯示器全部設置為出廠模式，不進行任何設置)，然后以iPhone 12 Pro進行攝屏。

用來顯示icon圖標，我們可以明顯感受到兩臺顯示器的顏色差異。PD2705U的顏色更自然，下圖的另一臺顯示器則整體偏藍色，雖然飽和度很高，但是感覺就像加了味精一樣，這是很多顯示器的弊病，雖然很討好普通用戶的眼球，但是對于設計師來說，則意味著顏色失真。

PD2705U顯示效果（上圖）

某老顯示器效果（上圖）
來看看UI界面的效果，靜電準備了一些UIkit素材，放在兩個屏幕上分別對比一下。特別選擇了顏色更加豐富的界面素材，上圖是明基PD2705U，下圖是6年前買的普通顯示器。我們發(fā)現(xiàn)，在色彩層次的呈現(xiàn)上，PD2705U層次更為豐富，注意觀察漸變的表現(xiàn)方式，我們可以有更明顯的感官。

PD2705U顯示效果（上圖）

某老顯示器效果（上圖）

UI界面的表達上，PD2705U會更亮一些，而下方的顏色則會偏暗。這也更貼合iPhone等中高端手機對于顏色的呈現(xiàn)。

PD2705U顯示效果（上圖）

某老顯示器效果（上圖）

灰色也是設計師比較在意的一方面，低端顯示器在顯示不同灰度的時候，有時候甚至無法準確的顯示，因為灰階的多與少也是反映一塊顯示器品質(zhì)的重要參數(shù)。我們在Figma中拉一個從黑色到白色的大漸變，可以看一下，哪一塊顯示器過渡更加柔和呢？PD2705U對于灰色的過渡明顯比之前的顯示器好非常多。

PD2705U顯示效果（上圖）

某老顯示器效果（上圖）

灰色卡片相信各位UI設計師一定印象深刻，灰色的展示效果決定了顯示器的效果，在PD2705U上，比白色深了一度的灰色呈現(xiàn)出更淺的效果，而下方的老顯示器上，灰色則展示的更深一些（因為這個顯示器可能無法展示出那么淺的灰色）。很多時候，UI界面的灰色是設計師非常在意的點，可見更專業(yè)的顯示器對于灰度的顯示更加到位，這臺PD2705U表現(xiàn)很不錯。

PD2705U顯示效果（上圖）

某老顯示器效果（上圖）

最后大家再來看看潘通色的表現(xiàn)吧！相對來說，PD2705U的顏色比下方老顯示器的顏色顯示略深。甚至是沒有下方那么艷麗，但這確實是色彩原本的樣子。看慣了加太多“特效”的顯示效果，不少設計師可能需要適應一下。

原圖截圖效果（上圖）

PD2705U顯示效果（上圖）

某老顯示器效果（上圖）

以上就是各位設計師搞定顏色的N種方法哦，要使用顏色，一定要用更好的介質(zhì)，更好的顯示器去呈現(xiàn)顏色，認知到真實的顏色，這樣顏色才能為你所用，設計出更漂亮的UI界面。拋開技能層面，明基的設計師專用顯示器PD2705系列，非常適合各位設計師購買使用，并且還有獨家用戶福利，標配Pantone Connect高級會員一年使用權。一個更合適的價格，擁有更好的品質(zhì)和實用性，還有更好的顏色效果，何樂而不為呢？

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

純小班教學 新一期開始報名啦

??報名送價值199元正版Eagle軟件??
2022年最后一期課程