設計系統｜使用色彩系統創造品牌視覺和無障礙設計

Posted on by Constance

設計系統 (design system) 中的顏色，不僅僅是為了突出品牌，更是為了讓使用者能正確理解介面的含義，結合無障礙設計，創造出完美的使用體驗。然而，要做好色彩系統 (color system)，就不是區區一位設計師所能掌握的，更是需要數學的配合，來創造出最理想的結果，這可是一大挑戰！

本文會不定時更新，並逐步完成並補充說明圖片。感謝你的體諒。

色彩系統的構成

就像佈局、排版、字體和圖示一樣，色彩也是設計系統的基本部份，屬於*全局樣式 (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)。

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