編輯導(dǎo)語：隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，產(chǎn)品體驗(yàn)的一致性和開發(fā)的效率越來越被重視，設(shè)計(jì)系統(tǒng)的出現(xiàn)就是為了解決這樣的問題。一套優(yōu)秀的設(shè)計(jì)系統(tǒng)有利于幫助產(chǎn)品在各個(gè)平臺(tái)保持一致的設(shè)計(jì)語言和風(fēng)格，給用戶一致的產(chǎn)品體驗(yàn)。本文將從設(shè)計(jì)系統(tǒng)的概念、來源、作用和具體搭建4個(gè)方面，對設(shè)計(jì)系統(tǒng)進(jìn)行梳理分析，與大家分享。

相信很多互聯(lián)網(wǎng)設(shè)計(jì)師在近幾年慢慢的接觸到聊“設(shè)計(jì)系統(tǒng)”這個(gè)詞，且這個(gè)詞也一直在“進(jìn)化”，設(shè)計(jì)系統(tǒng)在企業(yè)運(yùn)用中被越來越重視，隨著互聯(lián)網(wǎng)行業(yè)的聚變式發(fā)展，網(wǎng)站 UI 構(gòu)建也經(jīng)歷了“體驗(yàn)一致性”、“設(shè)計(jì)效率”、“UI系統(tǒng)構(gòu)建/應(yīng)用效率”、“多端適配” 等諸多問題。許多人認(rèn)為構(gòu)建一套設(shè)計(jì)系統(tǒng)（Design System） 是解決企業(yè)級(jí)用戶體驗(yàn)規(guī)模化問題的關(guān)鍵。

我們需要從體驗(yàn)工程視角將設(shè)計(jì)與前端看成一個(gè)整體系統(tǒng)化的制定設(shè)計(jì)系統(tǒng)。

而當(dāng)業(yè)務(wù)演進(jìn)到 “平臺(tái)化、垂直市場、采購市場” 階段時(shí)，UI 也面對了更多的問題和挑戰(zhàn)：“周期性業(yè)務(wù)的品牌更新”，“不同品牌的多種垂直業(yè)務(wù)同期構(gòu)建”，“眾多相似的后臺(tái)系統(tǒng)構(gòu)建”，“跨業(yè)務(wù)/部門的設(shè)計(jì)、前端協(xié)作問題”。

面對這些問題，體驗(yàn)工程的建設(shè)已經(jīng)遠(yuǎn)遠(yuǎn)不止于一套設(shè)計(jì)規(guī)范或一套組件庫，他需要一套完整的系統(tǒng)來支撐，解決內(nèi)部協(xié)作的一致性問題，解決設(shè)計(jì)系統(tǒng)更新的周期性問題，解決一群設(shè)計(jì)師與工程師如何規(guī)?；纳a(chǎn)各種業(yè)務(wù) UI 的問題，從而最終解決用戶體驗(yàn)一致性的問題。

01 設(shè)計(jì)系統(tǒng)是什么？

我們先來看下百度是怎么描述設(shè)計(jì)系統(tǒng)的？

“系統(tǒng)設(shè)計(jì)是根據(jù)系統(tǒng)分析的結(jié)果，運(yùn)用系統(tǒng)科學(xué)的思想和方法，設(shè)計(jì)出能最大限度滿足所要求的目標(biāo) (或目的) 的新系統(tǒng)的過程。系統(tǒng)設(shè)計(jì)內(nèi)容，包括確定系統(tǒng)功能、設(shè)計(jì)方針和方法，產(chǎn)生理想系統(tǒng)并作出草案，通過收集信息對草案作出修正產(chǎn)生可選設(shè)計(jì)方案，將系統(tǒng)分解為若干子系統(tǒng)，進(jìn)行子系統(tǒng)和總系統(tǒng)的詳細(xì)設(shè)計(jì)并進(jìn)行評(píng)價(jià)，對系統(tǒng)方案進(jìn)行論證并作出性能效果預(yù)測”

還是不太理解？

簡單點(diǎn)說：設(shè)計(jì)系統(tǒng)包括完整的設(shè)計(jì)價(jià)值觀和原則、設(shè)計(jì)標(biāo)準(zhǔn)、場景定義 以及一套工具包，用于搭建和組合產(chǎn)品與服務(wù)。它是一套解決方案。

02 設(shè)計(jì)系統(tǒng)的來源？

2013brad frost發(fā)表的ATOMIC DESIGN：

Atomic design來源于我們之前學(xué)過的化學(xué)元素表，我們?nèi)庋鬯姷臇|西都是由這些原子（atoms）構(gòu)成，然后原子在構(gòu)成分子（Molecures），分子再組成更復(fù)雜的組織(Organisms)。不讓帶認(rèn)為界面也是如此，有一個(gè)最小元素，一層層組合出新的、更大的單元。

舉個(gè)例子：

模塊：商標(biāo)+住導(dǎo)航模塊+搜索+個(gè)人信息 =頁眉

了解了基本的原子理論，我們再來看下螞蟻金服的設(shè)計(jì)系統(tǒng)：

可以看到；

螞蟻金服的設(shè)計(jì)系統(tǒng)可分解成：設(shè)計(jì)資源+體驗(yàn)策略+設(shè)計(jì)價(jià)值觀和原則+工具化，這些基本的元素組成了強(qiáng)大的螞蟻金服設(shè)計(jì)系統(tǒng)。

03 設(shè)計(jì)系統(tǒng)有什么作用？

設(shè)計(jì)系統(tǒng)包括完整的設(shè)計(jì)價(jià)值觀和原則、設(shè)計(jì)標(biāo)準(zhǔn)、場景定義以及一套工具包（UI 模式庫和代碼），用于搭建和組合產(chǎn)品與服務(wù)。鼓勵(lì)崗位之間的合作，減少溝通障礙。一個(gè)好的風(fēng)格指南可以幫助設(shè)計(jì)人員和開發(fā)人員了解他們工具箱的工具，并為如何正確使用他們提供規(guī)則和最佳實(shí)踐。學(xué)會(huì)理性的方式來做設(shè)計(jì)，養(yǎng)成良好的設(shè)計(jì)習(xí)慣。

1）設(shè)計(jì)高效率：快速了解產(chǎn)品設(shè)計(jì)全貌（包括設(shè)計(jì)原則、風(fēng)格，樣式、組件）多人協(xié)作如Google docs共享的方式高效。

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

04 如何搭建設(shè)計(jì)系統(tǒng)？

1. 搭建要點(diǎn)

• 創(chuàng)建可維護(hù)的設(shè)計(jì)系統(tǒng)，要建立長遠(yuǎn)成功的設(shè)計(jì)系統(tǒng)：
• 建立設(shè)計(jì)體系團(tuán)隊(duì)，合適的人員和流程來確保系統(tǒng)的穩(wěn)定發(fā)展。
• 適應(yīng)性強(qiáng)，使其易于維護(hù)。
• 新模式的請求是如何處理的？發(fā)現(xiàn)錯(cuò)誤的時(shí)候會(huì)怎樣？誰批準(zhǔn)設(shè)計(jì)系統(tǒng)的變化？負(fù)責(zé)保持文檔更新的是誰？改變系統(tǒng)的 UI 模式？團(tuán)隊(duì)如何了解變化？

2. 搭建步驟流程

共創(chuàng)者：UI + UI Dev

創(chuàng)建工具：Sketch（UX設(shè)計(jì)工具）+ Zeplin（團(tuán)隊(duì)協(xié)作工具 + Storybook，github設(shè)計(jì)系統(tǒng)開源框架）

協(xié)作方式：設(shè)計(jì)師與研發(fā)不再是線性的瀑布式協(xié)作模式，而是共創(chuàng)的協(xié)作模式。

舉個(gè)例子：Material Design設(shè)計(jì)價(jià)值觀

• Create：創(chuàng)造一個(gè)將經(jīng)典的設(shè)計(jì)原則和科技、創(chuàng)新相結(jié)合的設(shè)計(jì)語言。
• Unify：開發(fā)一套統(tǒng)一的底層系統(tǒng)，保持各端一致的用戶體驗(yàn)。
• Customize：靈活多變的視覺語言，讓各家自成一派，形成獨(dú)特鮮明的品牌風(fēng)格。

設(shè)計(jì)原則：

風(fēng)格指南：雖然風(fēng)格識(shí)別指南是相當(dāng)觸覺的，設(shè)計(jì)語言指導(dǎo)方針更難確定。設(shè)計(jì)語言風(fēng)格指導(dǎo)闡明一般的設(shè)計(jì)方向、哲學(xué)和方法具體項(xiàng)目或產(chǎn)品。設(shè)計(jì)師薩曼莎·沃倫（Samantha Warren）在設(shè)計(jì) style tiles 時(shí)做出了回應(yīng)，這是一款比情緒板更有形的可交付產(chǎn)品。

3. 設(shè)計(jì)資產(chǎn)

設(shè)計(jì)資產(chǎn)層面，一般包含以下兩個(gè)部分：

• 設(shè)計(jì)資源：
• 字體系統(tǒng)
• 調(diào)色板1.0
• 組件庫
• 樣式庫
• 全局樣式
• 動(dòng)效
• 說明文檔：
• 組件說明文檔
• 設(shè)計(jì)過程說明文檔
• 開發(fā)說明文檔

4. 設(shè)計(jì)系統(tǒng)的使用與維護(hù)

（1）團(tuán)隊(duì)分工明細(xì)

不論是虛擬的還是實(shí)體的團(tuán)隊(duì)，設(shè)計(jì)師與前端都已經(jīng)是一條船上的人了，職責(zé)明確，目標(biāo)清晰，一般來說團(tuán)隊(duì)內(nèi)有如下角色：

• 【構(gòu)建Design System的設(shè)計(jì)師與前端】一般承擔(dān)整個(gè)團(tuán)隊(duì)的用戶體驗(yàn)一致性與提升效能的KPI；設(shè)計(jì)師需要負(fù)責(zé)分發(fā)、同步、更新在業(yè)務(wù)演進(jìn)過程中不斷迭代的設(shè)計(jì)系統(tǒng)物料；開發(fā)需要負(fù)責(zé)代碼分發(fā)、版本管理、DEMO/API查詢、質(zhì)量管理、發(fā)布流程。
• 【使用Design System的設(shè)計(jì)師與前端】團(tuán)隊(duì)全員，借助一定的工具與適時(shí)制定團(tuán)隊(duì)協(xié)作規(guī)范能夠有效保障Design System的合理運(yùn)用。

（2）迭代運(yùn)作機(jī)制

設(shè)計(jì)風(fēng)格和模式是不斷迭代的，設(shè)計(jì)本身就是潮流化的。我們該以哪種標(biāo)準(zhǔn)審核這些設(shè)計(jì)是否符合我們的設(shè)計(jì)規(guī)范？我們該以哪種標(biāo)準(zhǔn)從業(yè)務(wù)中提取優(yōu)秀的設(shè)計(jì)模式？一般來說團(tuán)隊(duì)內(nèi)迭代更新機(jī)制有2種：

• 【日常迭代優(yōu)化】現(xiàn)有設(shè)計(jì)模式在業(yè)務(wù)創(chuàng)新中無法滿足，將建議提交給構(gòu)建設(shè)計(jì)系統(tǒng)的設(shè)計(jì)師與前端進(jìn)行評(píng)估優(yōu)化；
• 【立項(xiàng)迭代優(yōu)化】一般1-2年周期內(nèi)，由于品牌升級(jí)與業(yè)務(wù)擴(kuò)張，現(xiàn)有產(chǎn)品需要系統(tǒng)化的品牌樣式升級(jí)；此時(shí)復(fù)制構(gòu)建Design System的設(shè)計(jì)師與前端與業(yè)務(wù)使用者代表成立項(xiàng)目組系統(tǒng)化迭代現(xiàn)有設(shè)計(jì)系統(tǒng)。

（3）開發(fā)層面 – 高效溝通，減少重復(fù)

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

看到這里你會(huì)發(fā)現(xiàn)，其實(shí)所有的設(shè)計(jì)語言基本的設(shè)計(jì)思路都是相同的，都是基于原子理論打造設(shè)計(jì)。下面這張圖分析了各個(gè)設(shè)計(jì)規(guī)范的抽象思路：

建立設(shè)計(jì)系統(tǒng)不是一蹴而就的，這是一個(gè)漫長的過程，并且充滿著嘗試，錯(cuò)誤、測試、學(xué)習(xí)、失敗…

——GE產(chǎn)品設(shè)計(jì)師Marco lopes

最后放一些比較優(yōu)秀的幾家公司的設(shè)計(jì)系統(tǒng)供大家參考和欣賞：

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

本文由 @唐寅聊設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自pexels，基于CC0協(xié)議。