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

01

色值：什么時候使用色值？

顏色可以用不同的方式記錄下來，最常見方式的可能是潘通色、CMYK、HEX和RGB。雖然我們在界面設計中只使用HEX和RBG，但了解它們之間的區(qū)別還是非常重要的，因為你很可能會在網(wǎng)上和線下與某個品牌打交道。

Pantone → 用于打印

Pantone色卡

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

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

CMYK → 用于打印

CMYK

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

RGB→ 用于UI設計

RGB

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

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

RGBA→ 用于UI設計

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

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

HEX → 用于UI設計

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

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

注意：印刷品和界面設計中的顏色永遠不會完全一致，因為它們是以不同的方式生成的：印刷是混合油墨，界面設計是混合光的色譜。

02在打印和屏幕顯色之間轉換顏色有時你可能會需要打印的顏色來轉換到你的UI設計中。

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

Pantone顏色查找工具

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

??提示：如果你要把屏幕顏色轉換為印刷品顏色，可以的話，在轉換前用真實的潘通色卡來對比顏色。任何專業(yè)的設計團隊或專業(yè)打印店都應該有。

03UI設計中有多少種顏色？

三色也是室內設計中的一個概念

盡管在UI設計中沒有技術限制，但最好將顏色限制在兩到三種內。

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

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

04如何在UI設計中選擇、混合和搭配顏色？

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

使用RGB色相環(huán)

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

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

單色（某個色彩的明度變化）

單色

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

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

類似色

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

互補色（色相中距離基色180度的顏色）

互補色

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

分離互補色（采用對比色中一色的相鄰兩色，組成三個顏色的對比色調）

分離互補色

在互補色的基礎上，你可以更進一步加入一個類似色讓你設計更有活力。

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

05玩轉色相、色彩、色度、色調

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

色相、色彩、色度、色調

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

06使用顏色變量

如果想要增加一點層次感，你真正應該會用的是顏色變量。你可以手動改變色調，或者使用像MATERTAL DESIGN 調色板這樣的工具。

MATERTAL DESIGN 調色板

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

顏色變量

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

figma的色彩插件

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

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

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

顏色命名

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

不要用顏色本身（紅色、藍色）來命名，而是使用一些通用的色值，因為顏色可能會隨著時間的推移而被替換和調整。

顏色命名

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

顏色變量命名

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

顏色變量命名

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

但是請注意，不要將它們命名為1、2、3、4....。因為如果你在未來的某個時候想在這之間添加其他顏色，就會變得很混亂。所以，給自己留出一些空間，方便應對各種可能發(fā)生的情況。

顏色樣式表

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

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

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

加入on-color

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

檢查對比度的可讀性

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

09自己用figma試試吧！

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

Figma顏色樣式表

1060:30:10顏色分布法則

顏色分布規(guī)則

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

60%為主色，30%為輔助色，10%為CTA的強調色。

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

60:30:10規(guī)則

正如圖中所看到的，運用這一法則你能得到有相當厚實的基礎并能讓人真正注意到CTA的頁面。