亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動態(tài) > 網站技術如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

2024-01-19 07:35:45

如何制作系統(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):

  1. 提供更少、更有限的(總共 19 種)顏色選項,減少設計團隊的決策過程。
  2. 為開發(fā)團隊方便、一致地開發(fā)產品而減少問題數(shù)量。
  3. 簡化設計運營管理并降低組織范圍內的溝通成本。
  4. 縮短交付流程,減少 bug 修復和預算成本。
  5. 使用品牌色單色化整個界面。
  6. 同時涵蓋淺色和深色模式,避免出現(xiàn)額外的深色主題調色板和變量。
  7. 通過更改 HSB 值輕松修改和適應新項目。

要創(chuàng)建一個具備上述特性的配色系統(tǒng),需要對色彩和 Figma 的實現(xiàn)有一定的專業(yè)知識。我這里提供一份 figma 配色文件作為參考: https://www.figma.com/community/file/1298331226357565644

一、什么是 HSB 色彩空間?

從本質上講,RGB 色彩空間中有 16,777,216 種顏色,每種顏色都有唯一的十六進制代碼,對于我們設計師來說不太容易理解。如果想要在不使用配色生成器的情況下生成獨立的配色系統(tǒng),那么最易于理解和編輯的表示方法就是 HSB 色彩空間。它依賴于 360° 的色輪:

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

色輪與色相值的相互關系圖示

色相(Hue)+ 飽和度(Saturation)+亮度(Brightness)=HSB

HSB 色彩空間有三個影響十六進制代碼的值:色相(Hue)、飽和度(Saturation)和亮度(Brightness)

  1. 色相: 色相 (Hue) 定義了顏色的類別,取值范圍為 0° 到 360°,每 60° 為一個主色。H:0/360 代表紅色,H:60 代表黃色,H:120 代表綠色,H:180 代表青色,H:240 代表藍色,H:300 代表洋紅色。
  2. 飽和度: 飽和度 (Saturation) 影響顏色的鮮艷程度,取值范圍為 0 到 100,數(shù)值越高,顏色越鮮艷。S:0-33,極淡,接近白色;S:33-66,淡雅,介于淺色和鮮艷之間;S:66-100,飽和,鮮艷。
  3. 亮度: 亮度 (Brightness) 影響顏色的明暗程度,取值范圍為 0 到 100,數(shù)值越高,顏色越亮。B:0-33,極暗,接近黑色;B:33-66,中度亮度,介于暗色和亮色之間;B:66-100,高亮,明亮。

要生成十六進制顏色代碼,必須為這三個輸入值(色相、飽和度、亮度)都指定一個數(shù)值。例如,只要 H(色相)值保持為 228,無論 S(飽和度)和 B(亮度)如何變化,都只會呈現(xiàn)不同色調的藍色。

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

融合 H(色相)、S(飽和度)和 B(亮度)三個層面,可以生成色相值為 228 的各種色調。

二、創(chuàng)建基于 HSB 的色板

用這種方法創(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 值要求,就有可能在淺色模式下達到最大程度的可訪問性:

  1. 色相值在 200°-20°之間(不是 20°-200°)
  2. 飽和度介于 50–100之間
  3. 明度介于 50–100之間

深色模式專屬的配色系統(tǒng)可以使用與淺色模式相反的 H 值。H 值是影響可訪問性的核心參數(shù)。飽和度和亮度成反比,高亮度會增加對比度,而低飽和度會降低對比度。你可以預先設置一個可訪問的主色來作為基礎。

從理論和實踐角度考量,這里的主色被定為 H:228 比較合適。

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

某些顏色的波長范圍,特別是那些偏藍和綠的區(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ù)自己的項目具體情況來設計具體色值)

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

可定制和不可定制的錨的方案

3. 插值

在這個步驟中,我們將計算一些中間顏色,它們介于最淺的淡色調和主色之間,以及主色和最暗的深色調之間。這些中間顏色的飽和度 (S) 和亮度 (B) 會根據(jù)一定的規(guī)律進行微調。

從主色開始的步驟中,S 和 B 值必須根據(jù)外部顏色的值進行增加或減少。淺色調、主色和深色調之間 S 和 B 值的差異會被平均分配到色彩梯度中。

這個公式必須用于插值:

([較大值]-[較小值])/[梯度數(shù)]=[每一步的值]

公式具體怎么用?下面給一個例子:

①插值飽和度

在這個配色方案中,主色具有 76% 的飽和度,淺色調的飽和度降低到 4%,而深色調的飽和度則增加到 60%。規(guī)定從主色到淺色調和深色調的過渡是通過 8 個梯度實現(xiàn)的。

  1. (76–4)/8=9 。為了從主色逐漸過渡到淺色調,需要在每一步的 S 值中減去 9
  2. (76–60)/8=2 為了從主色逐漸過渡到深色調,需要在每一步的 S 值中減去 2

②插值亮度

在這個配色方案中,淺色調的亮度最高,為 100%,主色則略暗一些,為 92%,而深色調的亮度最低,僅為 12%。規(guī)定從主色到淺色調和深色調的過渡是通過 8 個梯度實現(xiàn)的。

  1. (100–92)/8=1 為了從主色逐漸過渡到淺色調,需要在每一步的 B 值中增加 1
  2. (92–12)/8=10 為了從主色逐漸過渡到深色調,需要在每一步的 B 值中減去 10

在配色系統(tǒng)中,初始顏色值的分配可以根據(jù)需要靈活調整。你可以根據(jù)顏色漸變的平滑程度或突出某些特定的顏色,來決定分配數(shù)值的方式。

例如,你可以將數(shù)值分配得更均勻,以獲得平滑的漸變效果;也可以將數(shù)值分配得更不均勻,以突出某些特定的顏色。此外,你還可以添加錨點來控制漸變的過渡方式,使?jié)u變在特定位置產生明顯變化。(Ps:具體顏色可根據(jù)項目動態(tài)調整,顏色并不是死的)

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

S 和 B 值插值表

4. 透明度變化

透明顏色是設計系統(tǒng)中不可或缺的元素,用于為文本和組件狀態(tài)提供層級結構。

為了獲得透明顏色,請復制第一個和最后一個色階顏色,并將不透明度值降低到 64% 和 32%。

可以根據(jù)需求添加 16%、8% 和 4% 不透明度的額外透明版本,并可以自定義這些值。

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

明確的和可能的透明顏色的呈現(xiàn)

5. 根據(jù)主題搭配顏色和陰影

配對顏色可以使主題和組件狀態(tài)的顏色搭配更加協(xié)調,并方便在明暗模式之間切換。因此,配色系統(tǒng)通常采用奇數(shù)個顏色,每邊都有自己的配對。這樣,就可以同時為明亮主題提供深色調,為暗色主題提供淺色調。

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

淺色和深色模式的顏色配對

6. 交叉檢查可訪問性

在為 Figma 變量和主題分配顏色時,應注意選擇對比度高的顏色組合,以確保視力障礙人士也能清晰辨別。

由于主色對比度高達 5.39:1,因此整個調色板都符合無障礙標準。

在創(chuàng)建暗色主題組件時,可以使用覆蓋明暗模式的 AA/AAA 級無障礙配色方案。在檢查所有顏色組合時,如果發(fā)現(xiàn)任何無障礙性問題,可以嘗試調整錨點和 S 和 B 值來解決。

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

調色板的對比度方案

三、將調色板分配給 Figma 變量

調色板已正確生成,可以分配給 Figma 變量了。請按照以下步驟操作:

Figma 的變量很好用,在這里可以創(chuàng)建,如果還沒用過的可以試試看

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

1. 基本顏色:實色

創(chuàng)建一個集合,命名為“基礎(Primitives)”。點擊“創(chuàng)建變量 > 顏色”,并命名為“color/solid/0”。以同樣的方式添加調色板中的所有顏色,將它們命名為 50 的倍數(shù)。

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

基本顏色變量的分配

2. 基本顏色:透明度

再次點擊“創(chuàng)建變量 > 顏色”,命名為“color/transparent/0 · 64%”,并以同樣的方式添加其他顏色。

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

透明顏色變量的分配

3. 顏色 Tokens

為了將基本顏色用作有限變量,必須將它們分配給 Tokens。

請按照創(chuàng)建顏色變量的方式進行操作:點擊“顏色選擇器(color picker ) > 庫(libraries)”,并在列表中選擇所需的變量。

點擊右側的“+”按鈕,添加新模式,并將它們命名為“Light Mode(明亮模式)”和“Dark Mode(暗色模式)”。

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

顏色模式按容器分配

4. 描邊 Tokens

以同樣的方式賦值變量,可以根據(jù)需要進行增加。

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

5. 文本 Tokens

透明顏色用于文本標記,以在排版中創(chuàng)建層次結構。

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

6. 按鈕 Tokens

一個設計系統(tǒng)通常有三個版本的按鈕:主要,色調-次要和輪廓-次要。顏色搭配和對比度方案被利用,同時適應黑暗模式的重要組件,如按鈕。

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

7.  顏色顯示篩選

Figma 最近發(fā)布了一項名為“顏色范圍控制”(Color scoping)的功能,它允許你根據(jù)未選擇的屬性來隱藏部分變量,從而避免顯示所有變量。

我們建立的變量系統(tǒng)完全依賴于以下結構:容器(containers)、文本(texts)和描邊(strokes)。這些設置可以根據(jù)你的項目需求進行調整。

例如,在按鈕 Tokens 中,我必須為“outlined”按鈕選擇“stroke”而不是“frame”。如果按照以下步驟進行設置,可以使庫面板中顯示的變量數(shù)量最少化,并避免在設計過程中出現(xiàn)沖突。

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

四、實現(xiàn)和產出

接下來將演示如何在設計中使用這些變量。已在給的設計參考文件中展示了生成的調色板的實現(xiàn)和輸出,大家可以去 figma 文件里直接看,

1. 淺色模式

調色板的色調已正確定義到變量中,并產生了預期的結果:

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

在設計效果圖中,使用調色板的淺色調創(chuàng)建了明亮主題的色彩風格。

2. 深色模式

與色調類似,調色板的深色調也被正確定義到變量中,并產生了預期的結果:

如何制作系統(tǒng)級顏色色卡?從理論到實踐全解析!

在設計中,使用調色板的深色調創(chuàng)建了暗色主題的色彩風格。

3. 主題化

這個顏色系統(tǒng)可以很容易地修改和適應任何其他項目。唯一需要做的就是定義一個可訪問的基礎色,對其進行插值,并更改原始值。

讓我們看看不同采用案例的結果:

如何制作系統(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 的變量功能來做吧。實踐后,你才能真正掌握。

歡迎關注作者的微信公眾號:「彩云譯設計


想了解更多網站技術的內容,請訪問:網站技術

本文來源:http://www.sonygallery.com.cn/seodongtai/19645.html

免責聲明:部分文章信息來源于網絡以及網友投稿,本網站只負責對文章進行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點或證實其內容的真實性,不承擔任何法律責任。
用我們的專業(yè),做您滿意的SEO+高端網站建設服務商!