UI設計三色搭配原則：圖標好壞，色彩決定

UI圖標繪製的成敗，很大程度上取決於顏色選擇。掌握「三色搭配原則」——主色、輔助色、強調色的黃金比例與關係，能讓圖標系統在視覺上統一協調、層次分明、辨識度極高。以下通過9組實戰案例圖解，帶你直觀掌握配色邏輯。

核心要點速記

• 主色（60%）：決定品牌調性與界面基調，通常為品牌色或中性色。
• 輔助色（30%）：輔助主色建立層次，用於次要元素、背景區塊、圖標填充等。
• 強調色（10%）：高飽和度、高對比色，專用於關鍵交互點（如通知紅點、CTA按鈕、狀態圖標），引導視線聚焦。
• 色相關係：同類色和諧穩重、互補色對比強烈、鄰近色過渡自然，根據功能屬性選擇。
• 無障礙考量：確保色盲用戶也能區分圖標狀態，不可單靠色差傳達關鍵信息。

將原則內化為肌肉記憶，每次畫圖標前先定三色體系，輸出穩定、專業、可擴展的圖標系統。