設計系統實戰：從組件庫到團隊規範

設計系統不是一套 UI Kit，而是一種讓團隊保持一致、高效協作的工作方式。

甚麼是設計系統

設計系統（Design System）是一套完整的標準和可復用組件，用於管理大規模的設計工作。它包含三個核心部分：

1. 設計原則：指導設計決策的價值觀
2. 組件庫：可復用的 UI 元素集合
3. 規範文檔：使用規則和最佳實踐

設計系統 vs 組件庫 vs 樣式指南

構建設計系統的步驟

第一步：設計令牌（Design Tokens）

設計令牌是設計系統的原子單位，定義了最基礎的視覺屬性：

顏色體系：

Primary:    #206BE7 (品牌主色)
Secondary:  #6C757D (輔助色)
Success:    #28A745 (成功)
Warning:    #FFC107 (警告)
Danger:     #DC3545 (錯誤)

字體系統：

標題 H1:  24px / 1.3 / Bold
標題 H2:  20px / 1.3 / Bold
標題 H3:  18px / 1.4 / SemiBold
正文:     16px / 1.6 / Regular
輔助文字:  14px / 1.5 / Regular
注釋:     12px / 1.5 / Regular

間距系統（基於 4px 基數）：

xs:   4px    (緊湊間距)
sm:   8px    (元素內間距)
md:   16px   (元素間距)
lg:   24px   (區塊間距)
xl:   32px   (大區塊間距)
xxl:  48px   (頁面級間距)

第二步：基礎組件

從最常用的組件開始，逐步擴展：

按鈕（Button）：
- 主按鈕（Primary）：頁面唯一的主要操作
- 次按鈕（Secondary）：輔助操作
- 文字按鈕（Text）：最輕量的操作
- 危險按鈕（Danger）：不可逆操作

每種按鈕需要定義：默認態、懸停態、按下態、禁用態、加載態。

表單組件：
- 輸入框（Input）：單行文本、多行文本
- 選擇器（Select）：下拉選擇、多選
- 開關（Switch）：布爾值切換
- 單選/復選：Radio / Checkbox

反饋組件：
- 提示（Toast / Message）
- 對話框（Dialog / Modal）
- 通知（Notification）
- 加載（Loading / Skeleton）

第三步：復合組件

基於基礎組件構建更複雜的 UI 模塊：

• 表格（Table）：排序、篩選、分頁
• 表單（Form）：驗證、佈局、聯動
• 導航（Navigation）：側邊欄、麵包屑、標籤頁
• 卡片（Card）：不同內容類型的卡片模板

第四步：頁面模板

常見頁面的佈局框架：

• 列表頁：搜索 + 篩選 + 列表 + 分頁
• 詳情頁：頭部信息 + 內容區 + 操作欄
• 表單頁：步驟指示 + 表單內容 + 提交區
• 儀錶盤：數據概覽 + 圖表 + 快捷操作

組件設計原則

原則一：單一職責

每個組件只做一件事，做到最好。不要把多個功能塞進一個組件。

原則二：可組合性

組件應該能自由組合，像樂高積木一樣搭建複雜界面。

原則三：可配置性

通過屬性（Props）控制組件的變體，而非創建多個相似組件：

Button
├── type: primary | secondary | text | danger
├── size: small | medium | large
├── loading: true | false
├── disabled: true | false
└── icon: 可選圖標

原則四：無障礙優先

• 所有交互組件支持鍵盤操作
• 提供 ARIA 標籤
• 顏色對比度符合 WCAG 標準
• 不僅靠顏色傳達信息

團隊協作規範

命名規範

統一的命名讓團隊溝通更高效：

• 組件命名：使用 PascalCase，如 SearchBar、UserCard
• 狀態命名：使用形容詞，如 active、disabled、loading
• 尺寸命名：使用 T 恤尺碼，如 sm、md、lg

設計交接清單

設計師交付給開發時應包含：

• [ ] 完整的設計稿（含各狀態）
• [ ] 標注文檔（間距、顏色、字體）
• [ ] 交互說明（動畫、轉場、手勢）
• [ ] 異常狀態（空數據、錯誤、加載）
• [ ] 響應式適配方案

版本管理

設計系統需要版本管理：

• Major（主版本）：破壞性更新，如組件 API 變更
• Minor（次版本）：新增組件或功能
• Patch（補丁）：修復問題、微調樣式

推薦的設計系統參考

寫在最後

設計系統是一個持續演進的產品，不是一次性的項目。從小處著手，先解決團隊最痛的一致性問題，再逐步擴展。記住：一個被團隊使用的簡單系統，比一個完美但沒人用的複雜系統有價值得多。