編輯導語：隨著互聯網行業的發展，產品體驗的一致性和開發的效率越來越被重視，設計系統的出現就是為了解決這樣的問題。一套優秀的設計系統有利于幫助產品在各個平臺保持一致的設計語言和風格，給用戶一致的產品體驗。本文將從設計系統的概念、來源、作用和具體搭建4個方面，對設計系統進行梳理分析，與大家分享。

相信很多互聯網設計師在近幾年慢慢的接觸到聊“設計系統”這個詞，且這個詞也一直在“進化”，設計系統在企業運用中被越來越重視，隨著互聯網行業的聚變式發展，網站 UI 構建也經歷了“體驗一致性”、“設計效率”、“UI系統構建/應用效率”、“多端適配” 等諸多問題。許多人認為構建一套設計系統（Design System） 是解決企業級用戶體驗規?；瘑栴}的關鍵。

我們需要從體驗工程視角將設計與前端看成一個整體系統化的制定設計系統。

而當業務演進到 “平臺化、垂直市場、采購市場” 階段時，UI 也面對了更多的問題和挑戰：“周期性業務的品牌更新”，“不同品牌的多種垂直業務同期構建”，“眾多相似的后臺系統構建”，“跨業務/部門的設計、前端協作問題”。

面對這些問題，體驗工程的建設已經遠遠不止于一套設計規范或一套組件庫，他需要一套完整的系統來支撐，解決內部協作的一致性問題，解決設計系統更新的周期性問題，解決一群設計師與工程師如何規?；纳a各種業務 UI 的問題，從而最終解決用戶體驗一致性的問題。

01 設計系統是什么？

我們先來看下百度是怎么描述設計系統的？

“系統設計是根據系統分析的結果，運用系統科學的思想和方法，設計出能最大限度滿足所要求的目標 (或目的) 的新系統的過程。系統設計內容，包括確定系統功能、設計方針和方法，產生理想系統并作出草案，通過收集信息對草案作出修正產生可選設計方案，將系統分解為若干子系統，進行子系統和總系統的詳細設計并進行評價，對系統方案進行論證并作出性能效果預測”

還是不太理解？

簡單點說：設計系統包括完整的設計價值觀和原則、設計標準、場景定義 以及一套工具包，用于搭建和組合產品與服務。它是一套解決方案。

02 設計系統的來源？

2013brad frost發表的ATOMIC DESIGN：

Atomic design來源于我們之前學過的化學元素表，我們肉眼所見的東西都是由這些原子（atoms）構成，然后原子在構成分子（Molecures），分子再組成更復雜的組織(Organisms)。不讓帶認為界面也是如此，有一個最小元素，一層層組合出新的、更大的單元。

舉個例子：

模塊：商標+住導航模塊+搜索+個人信息 =頁眉

了解了基本的原子理論，我們再來看下螞蟻金服的設計系統：

可以看到；

螞蟻金服的設計系統可分解成：設計資源+體驗策略+設計價值觀和原則+工具化，這些基本的元素組成了強大的螞蟻金服設計系統。

03 設計系統有什么作用？

設計系統包括完整的設計價值觀和原則、設計標準、場景定義以及一套工具包（UI 模式庫和代碼），用于搭建和組合產品與服務。鼓勵崗位之間的合作，減少溝通障礙。一個好的風格指南可以幫助設計人員和開發人員了解他們工具箱的工具，并為如何正確使用他們提供規則和最佳實踐。學會理性的方式來做設計，養成良好的設計習慣。

1）設計高效率：快速了解產品設計全貌（包括設計原則、風格，樣式、組件）多人協作如Google docs共享的方式高效。

2）協作高效率：對齊研發的實現距離單位，高還原度，及跨學科跨崗位間的高效溝通。共享的詞匯表，有用的文檔使測試更容易，并作為未來協作友好的基礎。

04 如何搭建設計系統？

1. 搭建要點

• 創建可維護的設計系統，要建立長遠成功的設計系統：
• 建立設計體系團隊，合適的人員和流程來確保系統的穩定發展。
• 適應性強，使其易于維護。
• 新模式的請求是如何處理的？發現錯誤的時候會怎樣？誰批準設計系統的變化？負責保持文檔更新的是誰？改變系統的 UI 模式？團隊如何了解變化？

2. 搭建步驟流程

共創者：UI + UI Dev

創建工具：Sketch（UX設計工具）+ Zeplin（團隊協作工具 + Storybook，github設計系統開源框架）

協作方式：設計師與研發不再是線性的瀑布式協作模式，而是共創的協作模式。

舉個例子：Material Design設計價值觀

• Create：創造一個將經典的設計原則和科技、創新相結合的設計語言。
• Unify：開發一套統一的底層系統，保持各端一致的用戶體驗。
• Customize：靈活多變的視覺語言，讓各家自成一派，形成獨特鮮明的品牌風格。

設計原則：

風格指南：雖然風格識別指南是相當觸覺的，設計語言指導方針更難確定。設計語言風格指導闡明一般的設計方向、哲學和方法具體項目或產品。設計師薩曼莎·沃倫（Samantha Warren）在設計 style tiles 時做出了回應，這是一款比情緒板更有形的可交付產品。

3. 設計資產

設計資產層面，一般包含以下兩個部分：

• 設計資源：
• 字體系統
• 調色板1.0
• 組件庫
• 樣式庫
• 全局樣式
• 動效
• 說明文檔：
• 組件說明文檔
• 設計過程說明文檔
• 開發說明文檔

4. 設計系統的使用與維護

（1）團隊分工明細

不論是虛擬的還是實體的團隊，設計師與前端都已經是一條船上的人了，職責明確，目標清晰，一般來說團隊內有如下角色：

• 【構建Design System的設計師與前端】一般承擔整個團隊的用戶體驗一致性與提升效能的KPI；設計師需要負責分發、同步、更新在業務演進過程中不斷迭代的設計系統物料；開發需要負責代碼分發、版本管理、DEMO/API查詢、質量管理、發布流程。
• 【使用Design System的設計師與前端】團隊全員，借助一定的工具與適時制定團隊協作規范能夠有效保障Design System的合理運用。

（2）迭代運作機制

設計風格和模式是不斷迭代的，設計本身就是潮流化的。我們該以哪種標準審核這些設計是否符合我們的設計規范？我們該以哪種標準從業務中提取優秀的設計模式？一般來說團隊內迭代更新機制有2種：

• 【日常迭代優化】現有設計模式在業務創新中無法滿足，將建議提交給構建設計系統的設計師與前端進行評估優化；
• 【立項迭代優化】一般1-2年周期內，由于品牌升級與業務擴張，現有產品需要系統化的品牌樣式升級；此時復制構建Design System的設計師與前端與業務使用者代表成立項目組系統化迭代現有設計系統。

（3）開發層面 – 高效溝通，減少重復

基于 UI kit 創建的組件庫，幫助他們在最終產品中保持代碼的一致性和復用性。并且設計語言作為一種工具，是整個團隊順暢溝通的最重要的語言。所以我們確保我們的設計語言，是能夠讓開發，產品都懂，并在第一時間執行的。既然是語言，那么每個元素都會有自己的名字。每個組件，甚至每個組件中不同屬性的元素我們也賦予它名字。

看到這里你會發現，其實所有的設計語言基本的設計思路都是相同的，都是基于原子理論打造設計。下面這張圖分析了各個設計規范的抽象思路：

建立設計系統不是一蹴而就的，這是一個漫長的過程，并且充滿著嘗試，錯誤、測試、學習、失敗…

——GE產品設計師Marco lopes

最后放一些比較優秀的幾家公司的設計系統供大家參考和欣賞：

• 通用電氣：https://www.predix-ui.com/#/home
• Salesforce: www.lightningdesignsystem.com
• IBM設計系統：carbondesignsystem.com
• 螞蟻設計體系：https://ant.design/docs/spec/introduce-cn
• 谷歌設計體系：https://design.google/

本文由 @唐寅聊設計 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自pexels，基于CC0協議。