【講座筆記】設計系統實戰：案例解析與實用策略

在本次講座中，我們特別邀請到 Harry Chuang 老師，為大家介紹設計系統的基本概念與實例應用，希望幫助大家更全面地理解設計系統的價值。Harry 擁有產品設計師與前端工程師的雙重背景，七年前開始在新加坡工作，主要負責幫助團隊研究和開發設計系統。同時，他也是 awwrated 平台的創辦人，(閒聊) 不知道大家有沒有有使用過 awwrated 這個追劇避雷平台呢？

什麼是設計系統 (Design System)？

設計系統的核心理論源自原子設計（Atomic Design），它能將產品界面拆解為層層組裝的設計元素。

在設計過程中，設計師需要定義字型大小、間距、陰影、顏色等設計元素，並對這些元素進行統整與規範。因此，數值的收斂是設計系統建立過程中的一個關鍵步驟。這些設計元素就像 Design Token，它是一種能夠幫助設計師與工程師進行溝通和協作的共同媒介。透過明確定義和應用 Design Token ，團隊可以在開發過程中保持一致性，減少反覆溝通的成本。

圖片引用自 (原子設計作者的貼文)：https://x.com/brad_frost/status/1449026849246482434

設計系統拆解：以 Instagram 為例，界面可以拆解如下

• 原子：基礎的設計單位，例如按鈕、輸入框、圖標等。
• 分子：由多個原子組成的簡單元件，例如按鈕組合、資訊欄位等。
• 有機體：更複雜的元件組合，例如頁首、貼文區塊等。
• 模板：結構化的頁面框架，包含排版與設計佈局。
• 頁面：模板填入實際內容後的成品，直接面向使用者。

設計師與工程師對設計系統的不同需求

設計師更關注於視覺呈現和使用者體驗，從顏色、字體到排版和互動設計，需要設計系統提供清晰的設計規範和多樣化的元件庫，以快速建立一致且美觀的介面。而工程師則注重技術實現與程式碼品質，從元件的結構到效能，希望設計系統能夠提供可重複使用且易於整合的程式碼元件，幫助他們實現產品功能。

兩者在需求上的差異也體現在對設計系統的期待上。設計師需要的是易於理解的設計原則與規範，輔以豐富的元件庫和清晰的範例文件，幫助他們在設計過程中做出準確的決策。而工程師則需要清晰的程式碼結構和穩定的元件，配以完善的文件與 API，確保開發過程的穩定性與高效性。

---

設計系統整合工具 — Storybook 工具導覽

Storybook 是一個強大的開源工具，專門用於開發和展示 UI 元件，能幫助設計師與工程師更有效地協作。通常主要由前端工程師負責導入和開發，設計師參與界面呈現和功能需求的討論，同時撰寫相關的設計規範和文件。由於 Storybook 是以程式碼驅動為主，使用者需要具備一定的程式設計基礎，設計師若希望深入了解其功能，可能會需要學習基本的程式設計概念。

在 Harry 的案例中利用 Storybook 建立了一個結合設計系統與 UI 元件庫的平台

• 互動式元件展示： 開發者可以用互動式的方式展示元件的不同狀態和變體，讓設計師和工程師能夠更直觀地了解元件的行為和外觀，方便進行設計和開發。
• 文件和程式碼範例生成：自動生成元件的文件和程式碼範例，可以方便開發者理解元件用法，設計師也可以確認元件的最終呈現是否符合預期。
• 跨團隊協作平台： 作為一個跨團隊協作平台，讓設計師、工程師和其他團隊成員都能夠方便地查看和使用設計系統中的元件。
• 版本控制和管理： 能與版本控制系統整合，方便追蹤元件的變更歷史和管理不同版本的元件。
• 整合其他工具和平台： 可以與 Figma、Sketch 等設計工具以及各種前端框架整合，讓設計系統的建立和維護更加高效。

業界實際案例分享

在新加坡電商平台設計與開發中小型設計系統的經驗

根據 Harry 的經驗，設計系統的建立可以在前期先完成基本架構，例如色彩、文字、常用的按鈕和輸入框等，等到產品團隊逐漸熟悉設計系統的工作流程，再逐步擴充設計系統中的內容。這種循序漸進的方式不僅能降低初期的工作負擔，還能讓團隊更自然地適應設計系統的運作模式。

推薦閱讀 Google Material Design 等大型企業的設計系統案例

Google Material Design 為業界最大型且最知名的設計系統之一，擁有龐大的設計規範和元件庫，涵蓋了各種平台和裝置。除了提供了完整的線上文件，內容涵蓋設計原則、設計元素、互動設計以及元件使用指南之外，也提供了 Design Token 的定義和使用範例。

導入設計系統的流程與團隊協作分享

在實際開發中，設計稿與最終產品之間經常存在差異。這往往是因為工程師的首要目標在於確保功能在有限時間內實現，導致一些視覺細節容易被忽略。而設計師經常會因為細微的美感問題，如字體大小或顏色的微妙差異，與工程師反覆溝通。這些差異在產品進入成熟階段時，可能會使程式碼的維護變得困難，進而增加開發成本和導致管理上的混亂。

導入設計系統需要團隊共識和持續推動，建議先從新專案開始測試，當團隊熟悉了這樣新的工作模式後，再逐步擴展到舊專案。

每一個產品專案和團隊的規模各不相同，設計系統的規模也會因需求而異；因此，團隊應該一起研究和討論，了解現階段有哪些現有的設計系統可以參考，再思考哪些內容是目前產品專案需要的。因為建立設計系統元件庫是一個緩慢的過程，在初期不用急著要開發一個非常完整的設計系統，而是可以先聚焦於核心部分，隨著團隊的熟悉度和需求的增加逐步擴展。

設計系統的建立並非一蹴即成，需要經過以下步驟：

• 確立設計原則： 共同討論產品的核心概念和設計方向，例如簡潔風格、社群互動等等，並將其轉化為可行的設計原則。
• 定義設計元素： 根據設計原則，制定顏色、字體、間距、圓角等設計元素的規範，並將其收斂和量化，形成設計語言。
• 開發元件庫： 將設計元素組裝成可重複利用的元件，例如按鈕、輸入框、卡片等等，並將其歸類和整理，形成元件庫。
• 建立文件和規範： 為每個元件撰寫詳細的使用說明和程式碼範例，讓設計師和工程師都能清晰理解其用途和使用方法。
• 推廣和維護： 將設計系統推廣到整個產品開發團隊，並定期更新和維護，確保其與時俱進。

Takeaway

• 想建立設計系統的單位，可以參考 Google Material Design 和 Ant Design 等大型企業的成功案例，學習其規範化設計語言、元件模組化以及跨團隊協作的最佳實踐。
• 在產品或開發團隊中找出共同痛點，以數據和圖表清晰呈現設計系統帶來的效益，說服主管和同事共同參與與支持，推動整體團隊的協作能力與產品競爭力。
• 設計系統的建立是一個持續迭代的過程，由設計師與工程師共同維護和不斷優化、擴充，以適應產品發展的需求。

給設計師的設計系統必修課

掌握模組化 UI 設計，讓工程開發協作不卡關！在這門約 4 小時的課程中，經驗豐富的 Harry 老師將帶領你循序漸進地掌握模組化 UI 設計，透過 5 個設計實作練習來即時應用所學，最終做出一套基礎的設計系統。

▶ 給設計師的設計系統必修課｜課程頁面：https://academy.aapd.com.tw/courses/ds

▶ 更多 AAPD 學習資源： https://portaly.cc/aapdgo

▶ 認識 Harry Chuang 老師：https://www.threads.net/@harrychuang.ds