Design System
反映願景、概念和價值觀,以戰略⽅式組織,並以溝通為主體,提供構建⼀致和有凝聚⼒的產品所需的⼯具和資源。 詳情請觀看 Figma 提供的課程。
Why we need design system
⼀致性:不同產品有不同設計語彙
主題:深、淺、不同裝置
刪除冗餘:是否每次都重做⼀次
知識共享和跨職能對⿑:是否有效率的溝通
新成員⼊職多久上⼿?
品質與效率
How design system affect
持續維持產品⼀致性
建⽴和諧的使⽤者體驗
讓 UI 介⾯俱備共同設計語彙
專注於解決設計難題
加速產品開發效率
Getting start
收集
排序與分類
識別不好的地⽅
Flow
批准
發現問題
定義問題
實作與測試
⽂件維護
版本維護
倡導
How to do
重頭開始建
從別⼈定義的發展
設計原則 有影響⼒的觀點、對業務邏輯有影響⼒,衝突檢視的唯⼀標準。
設計基礎 無障礙、⾊彩、⽂字、結構層次、圖層、icon、排版與網格系統、間距
設定元件 參照原⼦設計、建⽴變體(包含各種互動變化),並搭配實務前端⼯程
構建元件庫
⽂件 命名規則、使⽤⽅式、元件與基礎描述,考量設計⾯與⼯程⾯的共通性,包含正確與錯誤使⽤範例、更新⽇誌、範例連結。
改進系統 與消費者⼀起測試、徵求各⽅反饋、管理內部更新流程、教育訓練、測試與成效檢視
更新 版本維護、版本版號意思定義、分⽀與合併
推廣
Roadmap
Design System vs. Style Guideline
https://www.nngroup.com/articles/design-systems-vs-style-guides/
Last updated