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

隨著產品架構越來越複雜,設計系統(Design System)的重要性逐漸凸顯,它不僅能提升團隊協作效率,還能確保產品設計的一致性,有效解決設計師與工程師之間的溝通與協作問題。
AAPD - As A Product Designer

AAPD - As A Product Designer

2024年12月16日 下午 10:56

講座筆記

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

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

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

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

設計系統拆解:以 Instagram 為例

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

設計系統拆解:以 Instagram 為例,界面可以拆解如下

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

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

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

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

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


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

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

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

UI 元件庫的平台成果案例

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

業界實際案例分享

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

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

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

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

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

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

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

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

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

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

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

Takeaway

  • 想建立設計系統的單位,可以參考 Google Material DesignAnt 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

文章標籤

# figma# Storybook# Design Token# Design System