Design System

反映願景、概念和價值觀，以戰略⽅式組織，並以溝通為主體，提供構建⼀致和有凝聚⼒的產品所需的⼯具和資源。 詳情請觀看 Figma 提供的課程。

Why we need design system

• ⼀致性：不同產品有不同設計語彙

• 主題：深、淺、不同裝置

• 刪除冗餘：是否每次都重做⼀次

• 知識共享和跨職能對⿑：是否有效率的溝通

• 新成員⼊職多久上⼿？

• 品質與效率

How design system affect

• 持續維持產品⼀致性

• 建⽴和諧的使⽤者體驗

• 讓 UI 介⾯俱備共同設計語彙

• 專注於解決設計難題

• 加速產品開發效率

Getting start

• 收集

• 排序與分類

• 識別不好的地⽅

Flow

• 批准

• 發現問題

• 定義問題

• 實作與測試

• ⽂件維護

• 版本維護

• 倡導

How to do

• 重頭開始建

• 從別⼈定義的發展

• 設計原則 有影響⼒的觀點、對業務邏輯有影響⼒，衝突檢視的唯⼀標準。

• 設計基礎 無障礙、⾊彩、⽂字、結構層次、圖層、icon、排版與網格系統、間距

• 設定元件 參照原⼦設計、建⽴變體（包含各種互動變化），並搭配實務前端⼯程

• 構建元件庫

• ⽂件 命名規則、使⽤⽅式、元件與基礎描述，考量設計⾯與⼯程⾯的共通性，包含正確與錯誤使⽤範例、更新⽇誌、範例連結。

• 改進系統 與消費者⼀起測試、徵求各⽅反饋、管理內部更新流程、教育訓練、測試與成效檢視

• 更新 版本維護、版本版號意思定義、分⽀與合併

• 推廣

Roadmap

120KB

design-system.pdf

PDF

Open

Design System vs. Style Guideline

https://www.nngroup.com/articles/design-systems-vs-style-guides/