顏色是用戶界面設(shè)計(jì)中的主要元素之一。它可以將你的產(chǎn)品的第一印象從復(fù)雜的酷變成瘋狂和迷亂。它并不是要混合漂亮的顏色，而是創(chuàng)建一個(gè)色彩系統(tǒng)。讓我們從最基礎(chǔ)的地方開始，然后努力上升到專業(yè)水平。

01

色值：什么時(shí)候使用色值？

顏色可以用不同的方式記錄下來，最常見方式的可能是潘通色、CMYK、HEX和RGB。雖然我們在界面設(shè)計(jì)中只使用HEX和RBG，但了解它們之間的區(qū)別還是非常重要的，因?yàn)槟愫芸赡軙诰W(wǎng)上和線下與某個(gè)品牌打交道。

Pantone → 用于打印

Pantone色卡

圖片來源：Pantone官網(wǎng)

這是顏料的精確混合，所以在全球內(nèi)它都是相同的顏色。你無法在你的家用打印機(jī)上打印出潘通色，但你可以查看那官方的潘通色卡作為參考，專業(yè)的打印機(jī)會為你獲取特定的潘通色，并將顏色添加到機(jī)器上進(jìn)行打印。因此，打印潘通色通常比較昂貴，這就是為什么它主要用于需要在不同媒體上都相同的logo或品牌元素，其余的都是用CMYK。

CMYK → 用于打印

CMYK

混合這四種顏色，青色、品紅、黃色和黑色，是所有其他打印顏色的基礎(chǔ)。這也是家用打印機(jī)和專業(yè)打印機(jī)中的四種基礎(chǔ)顏色。

RGB→ 用于UI設(shè)計(jì)

RGB

RGB代表紅、綠、藍(lán)。顯示器會顯示出這些顏色，所以它們是由光而不是顏料構(gòu)成的。光的顏色光譜比印刷品大。由于它們的系統(tǒng)不同，打印出來的和屏幕顯示的顏色永遠(yuǎn)不會100%匹配。這不是問題，只要調(diào)色板本身是對的，只是需要提醒這一點(diǎn)。

在用戶界面設(shè)計(jì)中給出RGB值時(shí)，它的范圍是0-255，例如，R=255，G=255，B=255或RBG=255,255,255是白色，而RGB=0，0，0是黑色。

RGBA→ 用于UI設(shè)計(jì)

與RGB相同，A代表一個(gè)額外的alpha通道。Alpha調(diào)節(jié)透明度，從0.0（完全透明）到1.0（完全不透明）。

例如，RGBA = 255, 255, 255, 0.5是具有50%透明度的白色。

HEX → 用于UI設(shè)計(jì)

用這個(gè)吧！RGB的形式不是不能用，只是記下它有點(diǎn)繁瑣，而HEX（十六進(jìn)制）是RGB的一個(gè)簡短形式，它顯示與RBG數(shù)值對應(yīng)的完全相同的顏色。由于它的字符串格式，HEX更容易記住、復(fù)制、粘貼和分享。

HEX由6位字符組成，前面有一個(gè)井號。字符前兩位代表R，三四位代表G，五六位代表B，這就是為什么RGB和HEX對應(yīng)的顏色是相同的。

注意：印刷品和界面設(shè)計(jì)中的顏色永遠(yuǎn)不會完全一致，因?yàn)樗鼈兪且圆煌姆绞缴傻模河∷⑹腔旌嫌湍?，界面設(shè)計(jì)是混合光的色譜。

02在打印和屏幕顯色之間轉(zhuǎn)換顏色有時(shí)你可能會需要打印的顏色來轉(zhuǎn)換到你的UI設(shè)計(jì)中。

網(wǎng)上有許多在線顏色轉(zhuǎn)換器，但多年來，最突出的是潘通官方的轉(zhuǎn)換器，它使用所謂的潘通色彩橋梁。如果要使用數(shù)字版本的顏色，

Pantone顏色查找工具

在這里，你可以選擇輸入HEX、RGB或CMYK，然后會出現(xiàn)一個(gè)建議的、比較匹配的潘通色。點(diǎn)擊這個(gè)系統(tǒng)建議的潘通色，你還會得到其他比較相關(guān)的顏色值。如果你想將潘通色轉(zhuǎn)換為Hex，只需點(diǎn)擊左側(cè)菜單中的“Pantone to Pantone"（雖然這個(gè)措辭有點(diǎn)令人困惑，但它是有效的）。

??提示：如果你要把屏幕顏色轉(zhuǎn)換為印刷品顏色，可以的話，在轉(zhuǎn)換前用真實(shí)的潘通色卡來對比顏色。任何專業(yè)的設(shè)計(jì)團(tuán)隊(duì)或?qū)I(yè)打印店都應(yīng)該有。

03UI設(shè)計(jì)中有多少種顏色？

三色也是室內(nèi)設(shè)計(jì)中的一個(gè)概念

盡管在UI設(shè)計(jì)中沒有技術(shù)限制，但最好將顏色限制在兩到三種內(nèi)。

當(dāng)然，你仍然能夠使用這些顏色的變化（下文會有更多關(guān)于變化的內(nèi)容）。但你很快就會知道，當(dāng)你想要一個(gè)更有活力的設(shè)計(jì)時(shí)，更重要的是顏色的組合而不是使用的顏色的數(shù)量。

話雖如此，如果你有一些很棒的想法，需要使用大量的顏色，那就盡情去做吧。規(guī)則是用來被打破的。

04如何在UI設(shè)計(jì)中選擇、混合和搭配顏色？

在挑選和混合顏色方面你可能有點(diǎn)天賦。但如果你對配色感到有點(diǎn)不放心，這里有一些技巧你可以使用。

使用RGB色相環(huán)

我個(gè)人是不相信顏色聯(lián)想的，如藍(lán)色是平靜的，紅色是充滿活力的。因?yàn)檫@是隨著文化的變化而變化的，它更多的是關(guān)于你創(chuàng)造情緒的顏色組合方式。

我們通常會使用RGB色相環(huán)，它有12個(gè)色塊（由所謂的原色、第二色和第三色組成）。為了讓例子更容易理解，我把色相環(huán)簡化為幾個(gè)部分。通常，你會在設(shè)計(jì)軟件中看到色相環(huán)，它有一個(gè)柔和的顏色過渡，讓你來挑選顏色。Adobe也有一個(gè)很棒的色相環(huán)工具，可以幫助你設(shè)置顏色。

單色（某個(gè)色彩的明度變化）

單色

挑選你的顏色，然后往色相環(huán)中央遞進(jìn)，你會得到一個(gè)可愛的漸變。這種顏色組合可以創(chuàng)造非常微妙和復(fù)雜的外觀。

類似色（色相環(huán)中距離基色30度的顏色/在色相環(huán)上90度角內(nèi)的色）

類似色

在色相環(huán)中任意一個(gè)90度內(nèi)我們能得到類似色。用這種方法挑選顏色能在不失優(yōu)雅的情況下為你的設(shè)計(jì)增加了一點(diǎn)靈動(dòng)感。

互補(bǔ)色（色相中距離基色180度的顏色）

互補(bǔ)色

如果你正在尋找一些充滿活力的元素，那么這就是你要做的。從一個(gè)基色開始，從距離基色180度的地方找到互補(bǔ)色。用這個(gè)方法你可以把基色和更多單色結(jié)合起來，效果很不錯(cuò)！

分離互補(bǔ)色（采用對比色中一色的相鄰兩色，組成三個(gè)顏色的對比色調(diào)）

分離互補(bǔ)色

在互補(bǔ)色的基礎(chǔ)上，你可以更進(jìn)一步加入一個(gè)類似色讓你設(shè)計(jì)更有活力。

這三種方法應(yīng)該可以幫助你創(chuàng)建你的調(diào)色板，還有更多的方法，例如對比色法（triadic）和矩形分割法（tetradic），你可以去看看，但它們需要更多的經(jīng)驗(yàn)。

05玩轉(zhuǎn)色相、色彩、色度、色調(diào)

確定了你的顏色后，并不意味著你只能用這些顏色，它們是基礎(chǔ)，你仍然將它們玩出花樣。了解調(diào)整顏色的不同方法很重要，但千萬不要太過度。

色相、色彩、色度、色調(diào)

• 色相 → 是飽和度和亮度都為100%的顏色
• 色彩 → 是純色與白色度組合產(chǎn)生的顏色
• 色度 → 是純色與黑色度組合產(chǎn)生的顏色
• 色調(diào) → 是純色與灰色度組合產(chǎn)生的顏色

06使用顏色變量

如果想要增加一點(diǎn)層次感，你真正應(yīng)該會用的是顏色變量。你可以手動(dòng)改變色調(diào)，或者使用像MATERTAL DESIGN 調(diào)色板這樣的工具。

MATERTAL DESIGN 調(diào)色板

??注意：圓圈上的“P”表示文本顏色此背景色中是否易讀。白色表示白色文本在此背景色上易讀。黑色則表示黑色文本在此背景色上易讀。

顏色變量

添加十六進(jìn)制的色值，工具會為你創(chuàng)建變量。你可以根據(jù)你的設(shè)計(jì)需要使用任意多或少的變量。我通常用到3到5個(gè)，但最多9個(gè)也完全可以。它們也不需要是精確相鄰的，你可以為你的設(shè)計(jì)選擇你喜歡的對比度，挑選一些。如果你對上面這些數(shù)字感到迷惑，在下一節(jié)我會解釋顏色命名的問題。

figma的色彩插件

我最近發(fā)現(xiàn)了這個(gè)神奇的插件：Color Shades for Figma，它可以在你的文件中創(chuàng)建所有的顏色色調(diào)，非常貼心。

圖片來源：Figma社區(qū)

07以正確的方式給顏色命名

顏色命名

因此，一旦你選擇了你的顏色和變量，你可以把它們記錄在一個(gè)樣式表或設(shè)計(jì)系統(tǒng)中。

不要用顏色本身（紅色、藍(lán)色）來命名，而是使用一些通用的色值，因?yàn)轭伾赡軙S著時(shí)間的推移而被替換和調(diào)整。

顏色命名

你使用什么名字來命名并不重要，這些名字只需要具有描述性和一致性，例如，背景色、灰色等可以稱為中性色。然后你有一個(gè)主色和一個(gè)副色，我的副色通常是我的高光色。

顏色變量命名

你的顏色變量是圍繞主色或副色建立的。因此，它們沒有自己的名字，但它們需要被區(qū)分，通常是通過一個(gè)數(shù)字。在調(diào)色板中，我比較喜歡用100、200、300...來命名。不過，你也可以使用10、20、30...。

顏色變量命名

對于基色，我喜歡用500命名，然后根據(jù)我的需要在它左右創(chuàng)建其他顏色。

但是請注意，不要將它們命名為1、2、3、4....。因?yàn)槿绻阍谖磥淼哪硞€(gè)時(shí)候想在這之間添加其他顏色，就會變得很混亂。所以，給自己留出一些空間，方便應(yīng)對各種可能發(fā)生的情況。

顏色樣式表

??別忘了表示錯(cuò)誤、警告、信息和成功的系統(tǒng)顏色，通常是紅色、橙色、藍(lán)色和綠色。如果你愿意，你也可以調(diào)整它們來搭配你的品牌顏色，只要確保用紅色標(biāo)出錯(cuò)誤就行了。

08添加“On-color"，讓它具有可訪問性！

另一個(gè)值得加入的東西是on-color，這意味著在另一個(gè)顏色之上使用的顏色，如文本或圖標(biāo)。有意識地使用on-color有兩個(gè)主要好處：

加入on-color

1. 你會時(shí)刻被提醒檢查顏色對比度的可讀性。要么在你的設(shè)計(jì)軟件中使用插件，要么使用像圖中那樣的在線對比度檢查器。順便說一下，根據(jù)WCAG的規(guī)定，你必須要讓你的頁面具備可訪問性。

檢查對比度的可讀性

2. 比方說，你的輔助色是深灰色，而你還沒有定義一個(gè)on-color。通常情況下，這個(gè)顏色會被做成一個(gè)變量，并被用作文本顏色?，F(xiàn)在如果你改變這個(gè)顏色，比如變成亮藍(lán)色，那么你需要改變你設(shè)計(jì)文件中的所有文本，甚至是代碼。所以用上on-color，讓事情保持的簡潔和簡單。

09自己用figma試試吧！

你可以在這里下載Figma的免費(fèi)顏色樣式表，自己嘗試一下！

Figma顏色樣式表

1060:30:10顏色分布法則

顏色分布規(guī)則

除了使用什么顏色之外，還有一個(gè)重要的部分是如何使用它們。60:30:10規(guī)則是一個(gè)很好的經(jīng)驗(yàn)法則。這意味著在設(shè)計(jì)中你最多使用60%的主色，30%的輔助色用來突出內(nèi)容，10%的地方使用強(qiáng)調(diào)來引導(dǎo)用戶行為（如CTA、按鈕）。

60%為主色，30%為輔助色，10%為CTA的強(qiáng)調(diào)色。

這是一種顏色排布的“感覺"，而不是精確的測量。在此，顏色可以是一種顏色或一種顏色及其顏色變量。你可以嘗試一下，但是，要確保你的CTA始終是一致并且是突出的。

60:30:10規(guī)則

正如圖中所看到的，運(yùn)用這一法則你能得到有相當(dāng)厚實(shí)的基礎(chǔ)并能讓人真正注意到CTA的頁面。