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

在設計系統 (design system) 中，顏色不僅是塑造品牌形象的關鍵，更關鍵的是它能幫助使用者準確解讀介面含義，並結合無障礙設計創造理想的使用體驗。然而，構建出色的色彩系統 (color system) 並非易事，它需要結合科學才能達成最佳效果。

色彩系統是設計系統的基石，規範了設計元素的色彩運用。乍看之下，選色與用色似乎輕而易舉，但隨着組件越來越多時，色彩管理變得複雜，因此必須系統化。

建立色彩系統能確保設計時僅使用預設的顏色，保持一致性，這對於維護設計擴展性至關重要。同時，色彩系統與品牌形象保持一致，可以強化品牌的視覺識別。

除了品牌主色，整個色版還能體現品牌的風格和氛圍。觀察色版時，我們可以察覺偏向哪種顏色、飽和度、鮮豔度、色階是平穩還是活潑。這些細節共同塑造了品牌的獨特風格和想傳達的訊息。

三大顏色類型

色彩系統包含多種色相，每種色相又可細分為色調，設計系統的顏色主要分為三大類：

重點色／主色 (primary colour)：讓介面與品牌互相呼應，與品牌色相近。常見於山重，如主按鈕，以維持品牌一致性。
輔助色 (secondary colour)：包括特定功能和狀態的語義顏色，如失敗、成功、警告和資訊功能色。此外，還涵蓋不同色相的顏色，用於圖表、插圖、圖示和主題顏色等地方。
中性色 (neutral colour)：通常是灰色調，常見於文字、背景、邊框和分隔線，要求高對比度，以確保可讀性。

缺乏品牌色的情況下，如何選擇重點色？
基於 logo 顏色或產品行業特性，結合情緒版來定義適合的重點色調。
當品牌色是紅色或綠色，如何區分重點色與功能色？
微調功能色，或利用文字、圖示等其他視覺元素來引導使用者。
若品牌顏色在介面上不適用，該如何處理？
不必強求將品牌色作為重點色，可以微調其明度和飽和度，以適應對比度需求。可參考《通用設計 – 針對色盲色弱者的設計要點》一文。
功能狀態是否必須跟隨特定的功能色？
在簡約設計趨勢下，過多色彩容易喧賓奪主。加上考慮到無障礙設計，UI 常用中性色，並搭配文字、圖示或圖像作為輔助提示。對於「警告」狀態，若非強烈警示，避免使用黃色等強烈色彩，以免在 alert 或 toast 等元素造成過於嚴厲的視覺感受。

讓我們深入探討更科學的選色策略吧。

在介面設計中，每種顏色都在塑造品牌的視覺風格。為了營造一致的形象，我們需確保所有色調的彩度和明度協調。即使色調有所變化，我們也調配出帶有重點色色調的輔色。

建議利用 HSL 或 HSB (又稱 HSV) 色彩模型調色。這兩種模型讓我們輕鬆地調整色相、飽和度和亮度。HSB 和 HSL 的主要差別在於亮度的控制：HSB 中調整亮度會影響色相和飽和度，而 HSL 尤許獨立調整亮度，提供更精細的控制

此方法基於色環的色相結構。在 HSL 色彩模型中，色環呈 360º，色相值 (H) 範圍為 0 至 360。

若要建立 24 種色調（包括重點色）：

雖然在上一步保持亮度不變，但實際上這些顏色在視覺亮度可能與主色不一致。僅調整色相可能令藍色顯得比紅色深。要校準顏色的視覺亮度，可以：

注意：大幅度調整亮度或飽和度可能令顏色不協調，因此需謹慎調整，或按比例調整飽和度和亮度。

飽和度與亮度之間的關係可能較為複雜，涉及色彩科學。嘗試實踐上述的調色技巧，你或會發現二者並非線性關係。當調整黃色調的亮度時，過度校準會將其變為棕色，因此處理黃色時需格外小心。

有確定色相後，接下來是創建色階。在色彩系統中，每個色相需要多個色階，以適應各種功能、介面組件和特定應用，如插圖、資訊圖表和主題顏色。

然而，色階數量應按具體設計需求而定。善用色階能創造出更明確的視覺層次、增強設計元素的可讀性，令使用者更容易理解和互動。同時，遵循無障礙設計的指導原則來設定色階，確保設計滿足不同人士的需要。

建立色階通常不是基於透明度，而是基於亮度或對比度，因為高飽和度的主色，即使透明化，其飽和度和亮度仍可能過高，不適合作為背景顏色。然而，中性色因其極低的飽和度，可以透過以下兩種方法建立色階：

半透明色階：在 UI 中使用接近黑色或白色的半透明顏色。這種方法適合固定背景實色的情況，如舊版 Material Design 的中性色階，但這方法不適用於建立彩色色階。
實色色階：根據透明度、亮度或對比度來設定色階差距，然後轉換為純色。深色和淺色主題分別使用相反方向的色階。這種方法更常見，尤其適合用於建立彩色色階。

在某些設計系統中，中性色版是以純黑和純白的灰色調為基礎。若要讓中性色與重點色更協調，可以將重點色輕微融入灰階。例如，將 10% 透明度的重點色上與 90% 的黑色混合，形成帶有重點調的自然灰黑色，創造出更和諧的視覺效果。