如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!
簡單是最高級的復雜
配色系統(tǒng)是設計系統(tǒng)的核心元素,創(chuàng)建配色系統(tǒng)的方法有很多種。例如,根據(jù)谷歌 Material Design 3 指南,一個設計系統(tǒng)必須具有主色、次要色、三級色和表面色(各種背景色)調色板,這將迫使你使用超過 40 種顏色。這么多的顏色會導致混亂,在設計過程中的會有干擾,大多數(shù)顏色甚至不會被使用。
設計系統(tǒng)是公司的核心產品,其用戶是設計、開發(fā)和創(chuàng)意團隊。因此,設計系統(tǒng)必須為所有人理解,為團隊使用,為測試提供錯誤檢查,并為公司盈利。我一直在努力實現(xiàn)這些目標,并因此改進了一種提供這些功能的配色系統(tǒng)。
這種配色系統(tǒng):
- 提供更少、更有限的(總共 19 種)顏色選項,減少設計團隊的決策過程。
- 為開發(fā)團隊方便、一致地開發(fā)產品而減少問題數(shù)量。
- 簡化設計運營管理并降低組織范圍內的溝通成本。
- 縮短交付流程,減少 bug 修復和預算成本。
- 使用品牌色單色化整個界面。
- 同時涵蓋淺色和深色模式,避免出現(xiàn)額外的深色主題調色板和變量。
- 通過更改 HSB 值輕松修改和適應新項目。
要創(chuàng)建一個具備上述特性的配色系統(tǒng),需要對色彩和 Figma 的實現(xiàn)有一定的專業(yè)知識。我這里提供一份 figma 配色文件作為參考: https://www.figma.com/community/file/1298331226357565644
從本質上講,RGB 色彩空間中有 16,777,216 種顏色,每種顏色都有唯一的十六進制代碼,對于我們設計師來說不太容易理解。如果想要在不使用配色生成器的情況下生成獨立的配色系統(tǒng),那么最易于理解和編輯的表示方法就是 HSB 色彩空間。它依賴于 360° 的色輪:
色輪與色相值的相互關系圖示
色相(Hue)+ 飽和度(Saturation)+亮度(Brightness)=HSB
HSB 色彩空間有三個影響十六進制代碼的值:色相(Hue)、飽和度(Saturation)和亮度(Brightness)
- 色相: 色相 (Hue) 定義了顏色的類別,取值范圍為 0° 到 360°,每 60° 為一個主色。H:0/360 代表紅色,H:60 代表黃色,H:120 代表綠色,H:180 代表青色,H:240 代表藍色,H:300 代表洋紅色。
- 飽和度: 飽和度 (Saturation) 影響顏色的鮮艷程度,取值范圍為 0 到 100,數(shù)值越高,顏色越鮮艷。S:0-33,極淡,接近白色;S:33-66,淡雅,介于淺色和鮮艷之間;S:66-100,飽和,鮮艷。
- 亮度: 亮度 (Brightness) 影響顏色的明暗程度,取值范圍為 0 到 100,數(shù)值越高,顏色越亮。B:0-33,極暗,接近黑色;B:33-66,中度亮度,介于暗色和亮色之間;B:66-100,高亮,明亮。
要生成十六進制顏色代碼,必須為這三個輸入值(色相、飽和度、亮度)都指定一個數(shù)值。例如,只要 H(色相)值保持為 228,無論 S(飽和度)和 B(亮度)如何變化,都只會呈現(xiàn)不同色調的藍色。
融合 H(色相)、S(飽和度)和 B(亮度)三個層面,可以生成色相值為 228 的各種色調。
用這種方法創(chuàng)建的配色系統(tǒng)將在淺色和深色模式下都完全可訪問。為了實現(xiàn)這一點,主色必須是可訪問的,并且必須預先定義所需的顏色數(shù)量。
1. 定義一個可訪問的主色
主色與背景必須形成至少 4.5:1 的對比度才能構建可訪問的配色系統(tǒng)。因此,在定義主色之前,我們需要了解“可訪問的”配色系統(tǒng)究竟需要滿足哪些要求。
人眼有三種類型的視錐細胞,S-M-L,用于感知不同的光波長度。M 和 L 錐細胞同時對相同波長的綠色和黃色產生反應,導致人眼感知到 20°-200°色調值之間的顏色更亮,并且這個區(qū)域與明亮顏色的對比度較低。(Ps:從人的身體條件出發(fā),是一個相對客觀的因素,比較有說服力。)
基于上述信息,只要配色系統(tǒng)滿足以下 HSB 值要求,就有可能在淺色模式下達到最大程度的可訪問性:
- 色相值在 200°-20°之間(不是 20°-200°)
- 飽和度介于 50–100之間
- 明度介于 50–100之間
深色模式專屬的配色系統(tǒng)可以使用與淺色模式相反的 H 值。H 值是影響可訪問性的核心參數(shù)。飽和度和亮度成反比,高亮度會增加對比度,而低飽和度會降低對比度。你可以預先設置一個可訪問的主色來作為基礎。
從理論和實踐角度考量,這里的主色被定為 H:228 比較合適。
某些顏色的波長范圍,特別是那些偏藍和綠的區(qū)域 (約 400-480 納米和 580-700 納米),與亮色及其在色輪上的位置對比度足夠,近似于色相 (H) 值 200° 到 20° 的顏色。
2. 定義錨點
在設計個人項目時,你可以考慮使用 19 種顏色的配色系統(tǒng),包括一個主色、8 種淺色調和 8 種深色調。了解錨點顏色后,就可以輕松計算其余顏色的色調。
設計系統(tǒng)中的基礎顏色,白色 [#FFFFFF] 和黑色 [#000000],它們是配色方案中不可定制的錨點,在進行色彩分級時不計入其中。
可定制的錨點位于配色方案的第 2 步、第 9 步(主色)和第 18 步。首先從主色開始,將其值設置為 H:228、S:76 和 B:92,以確??稍L問性。為了在主色與其淺色調、純黑色和純白色之間留有足夠的色彩間隙,建議將淺色調的值設置得更接近純白色,深色調的值設置得更接近純黑色。(注:末尾這 2 個顏色,可以根據(jù)自己的項目具體情況來設計具體色值)
可定制和不可定制的錨的方案
3. 插值
在這個步驟中,我們將計算一些中間顏色,它們介于最淺的淡色調和主色之間,以及主色和最暗的深色調之間。這些中間顏色的飽和度 (S) 和亮度 (B) 會根據(jù)一定的規(guī)律進行微調。
從主色開始的步驟中,S 和 B 值必須根據(jù)外部顏色的值進行增加或減少。淺色調、主色和深色調之間 S 和 B 值的差異會被平均分配到色彩梯度中。
這個公式必須用于插值:
([較大值]-[較小值])/[梯度數(shù)]=[每一步的值]
公式具體怎么用?下面給一個例子:
①插值飽和度
在這個配色方案中,主色具有 76% 的飽和度,淺色調的飽和度降低到 4%,而深色調的飽和度則增加到 60%。規(guī)定從主色到淺色調和深色調的過渡是通過 8 個梯度實現(xiàn)的。
- (76–4)/8=9 。為了從主色逐漸過渡到淺色調,需要在每一步的 S 值中減去 9
- (76–60)/8=2 為了從主色逐漸過渡到深色調,需要在每一步的 S 值中減去 2
②插值亮度
在這個配色方案中,淺色調的亮度最高,為 100%,主色則略暗一些,為 92%,而深色調的亮度最低,僅為 12%。規(guī)定從主色到淺色調和深色調的過渡是通過 8 個梯度實現(xiàn)的。
- (100–92)/8=1 為了從主色逐漸過渡到淺色調,需要在每一步的 B 值中增加 1
- (92–12)/8=10 為了從主色逐漸過渡到深色調,需要在每一步的 B 值中減去 10
在配色系統(tǒng)中,初始顏色值的分配可以根據(jù)需要靈活調整。你可以根據(jù)顏色漸變的平滑程度或突出某些特定的顏色,來決定分配數(shù)值的方式。
例如,你可以將數(shù)值分配得更均勻,以獲得平滑的漸變效果;也可以將數(shù)值分配得更不均勻,以突出某些特定的顏色。此外,你還可以添加錨點來控制漸變的過渡方式,使?jié)u變在特定位置產生明顯變化。(Ps:具體顏色可根據(jù)項目動態(tài)調整,顏色并不是死的)
S 和 B 值插值表
4. 透明度變化
透明顏色是設計系統(tǒng)中不可或缺的元素,用于為文本和組件狀態(tài)提供層級結構。
為了獲得透明顏色,請復制第一個和最后一個色階顏色,并將不透明度值降低到 64% 和 32%。
可以根據(jù)需求添加 16%、8% 和 4% 不透明度的額外透明版本,并可以自定義這些值。
明確的和可能的透明顏色的呈現(xiàn)
5. 根據(jù)主題搭配顏色和陰影
配對顏色可以使主題和組件狀態(tài)的顏色搭配更加協(xié)調,并方便在明暗模式之間切換。因此,配色系統(tǒng)通常采用奇數(shù)個顏色,每邊都有自己的配對。這樣,就可以同時為明亮主題提供深色調,為暗色主題提供淺色調。
淺色和深色模式的顏色配對
6. 交叉檢查可訪問性
在為 Figma 變量和主題分配顏色時,應注意選擇對比度高的顏色組合,以確保視力障礙人士也能清晰辨別。
由于主色對比度高達 5.39:1,因此整個調色板都符合無障礙標準。
在創(chuàng)建暗色主題組件時,可以使用覆蓋明暗模式的 AA/AAA 級無障礙配色方案。在檢查所有顏色組合時,如果發(fā)現(xiàn)任何無障礙性問題,可以嘗試調整錨點和 S 和 B 值來解決。
調色板的對比度方案
調色板已正確生成,可以分配給 Figma 變量了。請按照以下步驟操作:
Figma 的變量很好用,在這里可以創(chuàng)建,如果還沒用過的可以試試看
1. 基本顏色:實色
創(chuàng)建一個集合,命名為“基礎(Primitives)”。點擊“創(chuàng)建變量 > 顏色”,并命名為“color/solid/0”。以同樣的方式添加調色板中的所有顏色,將它們命名為 50 的倍數(shù)。
基本顏色變量的分配
2. 基本顏色:透明度
再次點擊“創(chuàng)建變量 > 顏色”,命名為“color/transparent/0 · 64%”,并以同樣的方式添加其他顏色。
透明顏色變量的分配
3. 顏色 Tokens
為了將基本顏色用作有限變量,必須將它們分配給 Tokens。
請按照創(chuàng)建顏色變量的方式進行操作:點擊“顏色選擇器(color picker ) > 庫(libraries)”,并在列表中選擇所需的變量。
點擊右側的“+”按鈕,添加新模式,并將它們命名為“Light Mode(明亮模式)”和“Dark Mode(暗色模式)”。
顏色模式按容器分配
4. 描邊 Tokens
以同樣的方式賦值變量,可以根據(jù)需要進行增加。
5. 文本 Tokens
透明顏色用于文本標記,以在排版中創(chuàng)建層次結構。
6. 按鈕 Tokens
一個設計系統(tǒng)通常有三個版本的按鈕:主要,色調-次要和輪廓-次要。顏色搭配和對比度方案被利用,同時適應黑暗模式的重要組件,如按鈕。
7. 顏色顯示篩選
Figma 最近發(fā)布了一項名為“顏色范圍控制”(Color scoping)的功能,它允許你根據(jù)未選擇的屬性來隱藏部分變量,從而避免顯示所有變量。
我們建立的變量系統(tǒng)完全依賴于以下結構:容器(containers)、文本(texts)和描邊(strokes)。這些設置可以根據(jù)你的項目需求進行調整。
例如,在按鈕 Tokens 中,我必須為“outlined”按鈕選擇“stroke”而不是“frame”。如果按照以下步驟進行設置,可以使庫面板中顯示的變量數(shù)量最少化,并避免在設計過程中出現(xiàn)沖突。
接下來將演示如何在設計中使用這些變量。已在給的設計參考文件中展示了生成的調色板的實現(xiàn)和輸出,大家可以去 figma 文件里直接看,
1. 淺色模式
調色板的色調已正確定義到變量中,并產生了預期的結果:
在設計效果圖中,使用調色板的淺色調創(chuàng)建了明亮主題的色彩風格。
2. 深色模式
與色調類似,調色板的深色調也被正確定義到變量中,并產生了預期的結果:
在設計中,使用調色板的深色調創(chuàng)建了暗色主題的色彩風格。
3. 主題化
這個顏色系統(tǒng)可以很容易地修改和適應任何其他項目。唯一需要做的就是定義一個可訪問的基礎色,對其進行插值,并更改原始值。
讓我們看看不同采用案例的結果:
適用于 H:340, S:84, B:88 的初稿設計
迭代是永無止境的
我們現(xiàn)在擁有了一個經過精心組織、完全無障礙的品牌調色板,它支持亮暗模式并涵蓋了整個設計系統(tǒng)。在實施過程中,根據(jù)設計系統(tǒng)結構的不同,可能會出現(xiàn)一些不一致之處,你需要根據(jù)需求修改和調整顏色值、變量和顏色范圍設置。
通過實踐,你可以學會如何使用顏色插值、HSB 顏色空間、無障礙顏色設計以及 Figma 變量。
設計系統(tǒng)的需求可能會讓你深入學習這些領域的某個知識點,從而提升能力。設計師之所以出色,是因為他們不斷探索和學習,在探索過程中鍛煉了自己的專業(yè)技能。
所以,根據(jù)今天學到的新知識,重新刷新自己產品的色彩系統(tǒng),然后也用上文章說的 figma 的變量功能來做吧。實踐后,你才能真正掌握。
歡迎關注作者的微信公眾號:「彩云譯設計
想了解更多網站技術的內容,請訪問:網站技術