如何在UI界面產(chǎn)品設(shè)計(jì)系統(tǒng)中創(chuàng)建配色體系

首先看一個(gè)概念，什么是色帶（色標(biāo)）？其定義了顏色如何以平滑、連續(xù)的方式從淺色過渡到深色的視覺傳達(dá)。顏色漸變在設(shè)計(jì)系統(tǒng)中用于構(gòu)建顏色目錄/應(yīng)用指南，最終應(yīng)用于不同的 UI元素、交互狀態(tài)、插圖作品、陰影和品牌數(shù)字資產(chǎn)中。

1、定義品牌色
一旦定義了品牌色，就可以開始創(chuàng)建色帶了，注意不要重新定義和改變原本的品牌用色，以HSL顏色為例，調(diào)整色彩的亮度，每種顏色定位 8 個(gè)等級(jí)，對(duì)于大多數(shù)設(shè)計(jì)系統(tǒng)來說就足夠用了，并且足以覆蓋淺色和深色模式。您的品牌顏色可能會(huì)落在 400-500 范圍內(nèi)，但不限于此。

2、調(diào)整HSL亮度
——色調(diào)、飽和度、亮度。增加第三個(gè)值（亮度），使顏色更亮，或減少它，使顏色更暗。在這種情況下，我們需要 200 檔變暗，因此我們將減小該值。力求每個(gè)色標(biāo)之間形成明顯的對(duì)比——我發(fā)現(xiàn)當(dāng)樣本之間沒有間隙時(shí)，這會(huì)更容易。

3、調(diào)整飽和度
如果我們想要更多或更少的色彩豐富度，我們可以調(diào)整飽和度。調(diào)整亮度的相同原則也適用于飽和度，盡管調(diào)整可能會(huì)更加微妙。當(dāng)您努力將其調(diào)整到需要的位置時(shí)，您可能仍在進(jìn)行輕微的亮度調(diào)整。


4、檢查對(duì)比度的可訪問性
如果您計(jì)劃將顏色用作前景文本或文本的背景顏色，那么您需要測試每種顏色組合，我們使用 Figma 插件Stark進(jìn)行檢查對(duì)比。 

5、對(duì)所有其他顏色重復(fù)此操作
完成品牌的第一個(gè)色帶可以讓創(chuàng)建其余部分變得更容易。您將遵循相同的過程，但目標(biāo)是每個(gè)站點(diǎn)的飽和度和亮度水平大致相同。例如，green.400 和 Purple.400 的飽和度和亮度相似，但它們的色調(diào)會(huì)不同。