設計系統 (Design System) | 色彩系統

設計系統 (design system) 中的顏色,不僅僅是為了突出品牌。之所以說它是一個色彩系統 (color system),是因為我們需要在每個組件中有系統地使用顏色,或結合無障礙設計 (accessibility design),以確保用戶正確理解顏色在介面中的含義。

本文還在撰寫中,編者將逐步完成並補充說明圖片。感謝你的體諒。

在網上有很多關於組件設計的討論,但是較少人談論如何做好色彩系統。你可能會想,選顏色有多難?在我看來,色彩系統是設計系統中最具挑戰性的課題。許多著名的設計系統的顏色都是由數據和演算法衍生出來,所以不是區區一位設計師能夠輕易掌握得到。

色彩系統的構成

跟佈局排版、字體和圖示一樣,色彩也是設計系統的基礎,同屬於*全局樣式 (global style)。

色彩系統由各種色相組成,每種色相又被細分為多種色調。顏色數量這麼多是為了功能和組件的需要,以及其他用途,如插圖和圖表;然而,這並不代表我們在設計系統都需要包含這麼多顏色;顏色的數量完全取決於組件和用途。

設計系統的色彩大致可分為三大類:重點色、輔色和中性色。

色彩系統的構成

*全局樣式:主導品牌視覺的基本設計元素,影響組件 (component) 和模式 (pattern) 的設計,因此通常在設計組件之前就已經確立。

重點色 (accent colour)

重點色的主要目的是將介面元素聯繫品牌,所以重點色通常與品牌顏色相同或相似。它奠定了品牌的基調和視覺風格,經常用於主按鈕和關鍵的介面元素。

可否直接使用品牌色作為重點色?

一般來說,品牌顏色不太可能直接用作重點色,除非品牌規範中所述的品牌顏色已經解決了數碼媒體所面臨的問題。因此,重點色與品牌色通常是接近而不完全相同,原因是…

與功能色衝突:如果品牌色為綠色,那麼主按鈕可能也是綠色的,但要注意組件的預設狀態不能與成功狀態(綠色)太相似。如果品牌色是紅色,則很容易與錯誤狀態相撞。如果是這樣的話,你可以選擇…

  • 功能色和重點色分別使用不同的綠色;
  • 調整預設狀態的顏色,並使用較為中性的顏色,如灰色;
  • 精心設計組件的成功狀態,這樣用戶就可以不僅僅靠顏色也辨別狀態。

品牌顏色在介面上效果不佳:太亮、太暗或太鮮艷的品牌顏色都很難使用。要麼亮度或顏色對比與組件不配,要麼顏色對視障人士不友好,而重點色往往需要滿足這些要求。

  • 若視障人士看得清楚介面,正常視力者都會看得舒服。選色關鍵是前景色和背景色的對比。
    • 如果重點色達到 WCAG 2.1 的 AA 級,即最低對比度為 4.5:1,則可以滿足大多數視障人士的閱讀條件。
    • 如果不能達到這要求,請盡量達到 3:1 的對比度,否則即使是視力正常的人也很難看清。
  • 如果品牌顏色有以上問題,可以稍微調整一下顏色,然後作為重點色使用:
    1. 與品牌顏色保持一致的色相,即 HSL 或 HSB 的 hue;
    2. 仔細調整明度和飽和度,使顏色符合對比度要求。

根據上面列出的條件,我們會知道黃色和橙色調難以在淺色背景上有高對比。試想想做好「麥當勞」的色彩系統是多麼令人頭痛 😅

沒有品牌顏色應如何決定重點色?

這與色彩系統沒有甚麼關係,但對於接案的設計師來說並不陌生。例如,當新創公司還沒有品牌規格或 logo,或者客戶不想使用現有品牌的顏色,或者需要不同的顏色來區分不同用戶群組的介面時,這些情況使品牌顏色不能作為重點色使用。

  • 沒有品牌規格,但有 logo:按照以上方法稍微調整 logo 的顏色作為重點色。
  • 從零開始:跟品牌設計一樣,先從產品的行業特徵、理念、名稱或用戶特徵中抽取關鍵詞,組織成情緒板 (moodboard) 來決定品牌的基調和重點色。

輔色

輔色主要由特定功能和狀態的功能色 (semantic colours) 組成。一般來說,功能色有四種。如上所述,成功狀態就是其中之一。

狀態色調
成功綠色
失敗紅色
警告黃色
資訊藍色

狀態與顏色的組合是約定俗成,尤其是成功和失敗狀態的用色,所以不要妄圖改變人們根深蒂固的認知。然而,警告和資訊狀態可以用中性顏色代替,例如只用文字和圖示來表示這些狀態。警告與失敗也類似,但其嚴重程度和對用戶的影響不同。如果它只是提醒,不是警告,那麼黃色元素就太過嚴厲了。

許多設計系統在它們的色彩系統中,都包含了黃色和藍色調,但它們未必用於狀態相關的組件,尤其是大型的「侵入式」組件,如 alert 和 toast。取而代之會多用中性色或其他視覺元素來表達,只在小元素使用狀態顏色。這做法不僅對使用者更寬容,也避免使用過多顏色喧賓奪主,干擾品牌的調性。

除了必要的功能色外,輔色還可以選擇包含色環中的其他色調,如橙色和紫色。這些顏色不會直接影響使用體驗,也未必反映在組件上,但可預留將來使用或用於以下用途:

  • 資料視覺化 (data visualisation) / 圖表:柱形圖、圓餅圖、熱力圖
  • 介面主題
  • 插圖
  • 指定顏色的圖示或組件,如徽章

根據主色搭配輔色

現在讓我們探討一些更「科學」的東西。

介面上每一種顏色都在塑造品牌視覺,如果每個色調的彩度和明度相似,整體顏色便給人更一致的形象。不管色調如何,讓我們嘗試調配有重點色感覺的輔色。

建議使用 HSL 或 HSB (又稱 HSV) 色彩模型進行調色,方便調整色相、飽和度和亮度。HSB(又稱 HSV)和 HSL 的主要分別在於亮度的調整。總之,調整 HSB 的亮度也會影響色相和飽和度,而 HSL 則可單獨調節。

第 1 步:色環取色

這個方法是根據色環的色相而定。

HSL 的色環是 360º,所以色相值 (H) 從 0 – 360。如要建立包含重點色共 24 種色調,每種色調的平均色相差就是 360 ÷ 24 = 15。在飽和度 (S) 和亮度 (L) 保持不變下,可累加或累減 15 度色相值 (H) ,從而得到 24 個色相值。當然,你不必使用所有的顏色,但你愈細分色相,就愈容易得到更「純」的顏色,而不是只有非黃非綠的複雜顏色。

第 2 步:校準視覺感官明度

雖然在上一步中顏色的亮度保持不變,但實際上這些顏色的明度,與重點色之間存有視覺差異。如果我們只調整色相值,我們總會覺得藍色比紅色深。校準顏色到接近的亮度:

  1. 在顏色上疊加純黑色,並將圖層混合模式改為色相,便可在灰階下看到的沒有色彩、只有不同亮度的顏色。
  2. 仔細調整顏色的飽和度 (S) 和亮度 (L),直至視覺感官明度相似。

如果大幅調整一側的亮度或飽和度,即使明度相似,顏色也不會相配,所以一定要仔細調整,或按飽和度和亮度的比例調整。

飽和度和亮度之間的關係很難理解,畢竟這是色彩科學的範疇。如果你試過上面的調色方法,你會發現飽和度和明度不是線性的。當顏色變得更黃更亮時,校準亮度使黃色強行變成棕色,因此需要特別小心處理黃色調。

中性色

中性色通常用於介面文字和背景元素,如背景、邊框和分隔線。因此選色的關鍵是使文字變得清楚易讀,並讓背景元素襯托其他的彩色元素。

創造中性色的深淺色調

對於顏色較飽和的重點色與輔色,一般不會根據顏色的透明度,而是根據亮度或顏色對比度來建立色調。這是因為如果重點色本身的顏色較為飽和,那麼把顏色再弄得更透明,也難以降低顏色的飽和度和亮度作為背景元素使用。簡單來說就是顏色不夠淡。然而,中性色是飽和度很低的灰色調,因此可以用透明度來建立色調,在組件上使用半透明顏色,或者將半透明顏色轉換為純色來建立色調。根據這兩種方法,淺色和深色主題的色調會有差別:

  • 帶有透明度的中性色調:以半透明黑色建立淺色主題的色調;以半透明白色建立深色主題的色調。
  • 純色的中性色調:深淺主題可選擇使用相同或不同的色版。若相同,各主題的用色可能正好相反,例如淺色主題的文字使用最深色的色調,而深色主題的文字則使用最淺色的色調。

建立有品牌調性、更自然的中性色調

在某些設計系統中,中性色版是以純黑和純白的灰色調為基礎。如果你想讓中性色更配合重點色,你可以嘗試在灰階上混合少量重點色。例如,在 10% 透明度的重點色上疊加 90% 的黑色,以取得更自然、帶有色調的灰黑色。

關於無障礙設計

對於使用者數量較多的產品,整個設計系統,小至用色都須符合無障礙設計 (accessibility design) 的要求,但隨着人們愈來愈重視殘疾人士的權利,無障礙設計不再是額外的設計或功能,而是基本要考慮的事情,使更多不同的人可以使用產品,亦即「包容性設計」 (inclusive design)。


本文仍處於草稿階段,我將繼續撰寫及補充解說圖片。感謝你的閱讀。