最近很多 AI 相關的科技應用，頓時有一種身心疲乏感，於是決定先不管 AI 相關的新聞以及技術，先來學習過去聽過但沒有實際在職場上應用的設計系統 (Design System) 的相關知識。
原子設計 (Atomic Design)
設計系統的概念源自於「原子設計 (Atomic Design)」，這是一種將 UI 元素分解為更小的元件，並將這些元件組合成更複雜的介面的方法。原子設計的五個層級如下：
- 原子 (Atoms)：最基本的 UI 元素，如按鈕、輸入框、標籤等。
- 分子 (Molecules)：由多個原子組成的簡單元件，如一個包含標籤和輸入框的表單元素。
- 有機體 (Organisms)：由多個分子組成的複雜元件，如一個包含多個表單元素和按鈕的表單。
- 模板 (Templates)：由有機體組成的頁面結構，如一個包含標題、導航欄和內容區域的頁面。
- 頁面 (Pages)：最終的 UI 組合，展示了實際的內容和數據。
設計系統的組成部分
設計系統通常包括以下幾個主要組成部分：
- 樣式指南 (Style Guide)：定義了設計系統的視覺風格，包括顏色、字體、間距等。
- 元件庫 (Component Library)：包含可重用的 UI 元素和元件，這些元件可以在不同的頁面和應用中使用。
- 設計模式 (Design Patterns)：提供了常見的 UI 解決方案和最佳實踐，幫助設計師和開發者在設計和實現介面時保持一致性。
- 文檔 (Documentation)：詳細說明了如何使用設計系統，包括元件的使用方法、樣式指南的應用等
- 工具 (Tools)：提供了設計和開發設計系統所需的工具，如設計軟件、程式庫等。
設計系統的好處
設計系統的好處包括：
- 一致性：設計系統確保了 UI 元素在不同頁面和應用中的一致性，提升使用者體驗。
- 效率：通過重用元件和樣式，設計師和開發者可以更快地創建和更新介面，減少重複工作。
- 可維護性：設計系統使得介面的維護和更新變得更加容易，因為所有的樣式和元件都集中在一個地方。
- 協作：設計系統促進了設計師和開發者之間的協作，因為他們可以使用相同的元件和樣式，減少了溝通成本。
- 擴展性：設計系統可以隨著產品的發展而擴展，新的元件和樣式可以輕鬆地加入到系統中。
- 可及性(無障礙)：一個設計良好的系統可以幫助確保介面對所有使用者都可及。
- 品牌一致性：幫助在所有產品和平台上保持一致的品牌形象。
- 以使用者為中心的設計：通過提供增強可用性和可及性的指南和元件，鼓勵以使用者為中心的設計方法。
- 快速上手：新成員可以通過清晰的指南和可重用的元件快速上手。
- 跨平台一致性：確保在不同平台和設備上的使用者體驗保持一致，這在當今多設備的世界中至關重要。
📓 參考資料：Atomic Design Methodology
回到部落格 🏃🏽♀️