設計系統 (Design System) 近年備受設計界重視，但我們究竟是隨波逐流，還是真正明白其價值？設計系統不單是整理 UI，更着重一致性、可擴充性及協作效率。以下將深入分析設計系統的核心概念，並探討它如何提升產品體驗及開發效率。

UI Kit 與前端開發框架：兩者有何分別？

在討論設計系統之前，先釐清 UI Kit、前端開發框架與設計系統的區別。它們各有功能，但不能互相取代。

UI Kit

UI Kit 是一組預製的 UI 元件。設計師可利用它來快速建立介面，這類套件常見於 Dribbble 等設計資源平台。這些套件通常具有獨特的視覺風格，例如玻璃擬態或新型態設計 (Neumorphism)，但缺乏設計原則與互動指引，因此可能不夠統一和實用。

前端開發框架 (front-end framework)

例如 Bootstrap、Tailwind 等框架不僅提供預製組件，還透過 Sass 變數與 Design Tokens 管理顏色、間距、圓角等設計屬性，並內建 12 列網格系統，成為現代 UI 設計的基礎。然而，它們主要為工程師而設，欠缺完整的設計理論基礎，因此並非完整的設計系統。

UI Kit 和前端開發框架可以是設計系統的一部分，但它們欠缺設計原則、內容策略與開發規範，無法構成真正的設計系統。

設計系統：數碼產品的生態系統基石

現今，設計系統不僅是一組 UI 套件，而是一個完善的數碼產品生態系統，能夠統一視覺、內容與技術標準，確保一致性的同時提升可擴展性。

品牌指南與設計系統

傳統的品牌指引 (Brand Guidelines) 主要規範標誌、字體、顏色等視覺元素，確保品牌形象統一，但在數碼產品時代，品牌體驗不僅來自視覺設計，更包括 UI、互動設計、操作流程、內容語調，以至客戶支援服務。設計系統正是為了解決這種跨平台、跨產品的一致性問題，讓用戶在不同數碼接觸點（網站、app、客戶服務系統等）均能體驗到一致的服務。

設計系統的核心構成

1. 設計原則 (Principles)：如一致性、可用性、易用性等基本指導原則。
2. 設計基礎 (Foundations)／全局樣式 (Global Styles)：定義顏色、字體、間距、排版、圖示等全局樣式。
3. 品牌形象：規範視覺和語言風格，如 logo、圖像和語調。
4. 組件庫 (Component Library)：包括按鈕、表單、導航等可重複使用的 UI 元件。
5. 內容指南 (Content Guide)：規範文案風格、語法、標題層級和格式標準。
6. 無障礙規範 (Accessibility Guidelines)：確保所有用戶，包括身心障礙者，都能順利使用產品。
7. 程式碼片段與開發規範：為開發者提供重用的程式碼和開發標準。

你可以根據產品和團隊需求調整這些元素的比重。關鍵是確保系統能提升團隊工作效率、一致性、降低設計與開發成本，最終改善用戶體驗。

一致性：設計系統的核心價值

原子設計：從細微處達至整體統一

一致性不只在於劃一 UI 樣式，更是影響認知負荷 (Cognitive Load) 與使用者習慣的關鍵。例如：

• 統一按鈕樣式 → 有助用戶快速識別及預測操作行為
• 為特定流程設計專屬版面 → 降低學習成本，提升操作效率

在設計系統中，實現基本組件的一致性是第一步，進一步可追求模組、頁面以至整個流程的一致性。這種層遞原則源自 Brad Frost 提出的原子設計方法論 (Atomic Design Methodology)。透過層級式架構，設計系統在細節與整體之間取得平衡。從小組件組成大組件，隨着組件層級愈高，用戶的目標也會逐步從功能導向轉為流程導向。

跨平台及跨產品的一致性

除了維持組件的一致性，我們還可從宏觀角度理解「一致性」的概念，將其擴展到各個平台和產品。

隨著電子設備日趨多樣化，用戶經常需要在不同設備之間轉換使用。設計系統必須確保：

• 統一視覺語言：協助用戶迅速適應不同設備的界面
• 無縫體驗：支援響應式 (Responsive) 與自適應 (Adaptive) 設計，更包括如 Apple「接手」等跨設備功能
• 功能一致性：確保用戶在不同平台執行相同操作時，都能獲得一致的體驗

案例：Foodpanda 團購功能

Foodpanda 在應用程式及網頁版本提供相同的「團購」功能體驗。雖然導航結構略有不同，但主要內容版面、互動方式保持一致，而非將網頁和 app 視為獨立的設計項目，確保用戶能在任意設備上順暢轉換。

這樣，app 的用戶在瀏覽網頁時會感到份外熟悉，新用戶亦可在安裝 app 前，先透過網頁版本輕鬆體驗服務，有助日後轉化為長期的 app 用戶。

多產品設計系統

隨著企業擴展產品線，即使各產品線有獨立的業務範圍，但在各產品之間保持相當的視覺一致，既可幫助用戶更快熟習產品，同時加強品牌形象。因此，設計系統的靈活性變得極為重要。例如：

Google：Gmail、Docs、Android 共用統一的設計語言，但各自保持獨特風格

Spotify Encore 設計系統：建立核心設計基礎 (Foundation)，其組件再分為網頁及 app 兩個版本，並容許不同產品團隊擴展自訂樣式

LINE：提供多達 34 種服務。設計系統分為 LINE Messenger 及 Global Family Service，另設品牌指引確保整體形象統一。

這類「母子式設計系統 (Parent-Child Design System)」架構能兼顧統一性及靈活性，以配合不同產品需求。

設計系統如何降低成本及提升效益

• 節省設計及開發時間：重用組件庫，減省從零開始設計所需的時間。
• 企業資產：其他部門亦可運用設計系統，製作符合品牌標準及視覺規範的內容，減輕設計團隊負擔。
• 降低溝通成本：建立單一資訊來源 (Single Source of Truth)，減少內部協調所需成本。
• 加快產品迭代：透過統一的組件及樣式庫，令產品更新更快捷、更具效率。
• 強化品牌一致性：確保所有數碼接觸點（網站、App、客戶服務系統等）均能維持統一體驗。

設計系統不僅是一個工具，更是企業的核心資產，推動高效協作及卓越的產品體驗。

總結

• 設計系統並非單純的 UI Kit 或前端開發框架，而是涵蓋設計、內容及技術規範的完整系統。
• 一致性是其核心價值，不僅影響 UI，更涉及跨設備及跨產品的使用體驗。
• 靈活的設計系統能有效降低成本、提升效率，為企業增強競爭力。

若正在構建設計系統，關鍵並非隨波逐流，而是要深入思考如何讓設計系統確實服務於產品及用戶。

如欲參考大品牌的設計系統，歡迎瀏覽「設計師道具箱」查看我整理的清單。