做設(shè)計(jì)系統(tǒng)能夠提高我們的協(xié)同生產(chǎn)效率，已經(jīng)成為許多人許多公司的共識(shí)，那么該如何搭建設(shè)計(jì)系統(tǒng)，設(shè)計(jì)系統(tǒng)對(duì)設(shè)計(jì)師的職業(yè)發(fā)展又將帶什么什么影響？本篇文章，前阿里巴巴集團(tuán)設(shè)計(jì)總監(jiān)5key老師，與我們分享設(shè)計(jì)系統(tǒng)的核心價(jià)值以及背后思考。歡迎閱讀~

01 設(shè)計(jì)系統(tǒng)的價(jià)值及重要性

首先給大家講一講設(shè)計(jì)系統(tǒng)的價(jià)值以及重要性，我們先從所處的大環(huán)境開始。

外部環(huán)境的變化

互聯(lián)網(wǎng)已經(jīng)不是什么新鮮事物，對(duì)于我們這一代人來講，它已經(jīng)成了非?；A(chǔ)的社會(huì)基建。也正是因?yàn)檫@樣的原因。作為身處在這個(gè)行業(yè)中的設(shè)計(jì)師，我們的工作跟互聯(lián)網(wǎng)一定是息息相關(guān)的。根據(jù)一年多的觀察，可以列舉三部分內(nèi)容：

1.十四五數(shù)字經(jīng)濟(jì)規(guī)劃影響，toB 業(yè)務(wù)增長迅猛。去年年底，國家公布了「十四五數(shù)字經(jīng)濟(jì)規(guī)劃」主要發(fā)展指標(biāo)。產(chǎn)業(yè)數(shù)字化轉(zhuǎn)型帶來大量需求產(chǎn)生。工業(yè)互聯(lián)網(wǎng)平臺(tái)、網(wǎng)上零售、電商、政務(wù)幾個(gè)領(lǐng)域到 2025 年的預(yù)期性增長，加起來有 40 多萬億。因此toB、toG 類需求成為各大公司重要發(fā)展方向之一。

2.經(jīng)濟(jì)環(huán)境收緊，企業(yè)降本提效。由于疫情、國際形勢(shì)的影響，整體經(jīng)濟(jì)形勢(shì)受到較大的沖擊。不穩(wěn)定不確定性加大，各類企業(yè)均開始收縮成本，降本提效成為企業(yè)當(dāng)下最為重要策略之一。

3.開源生態(tài)繁榮，設(shè)計(jì)協(xié)作模式改變。軟件開源其實(shí)是十四五經(jīng)濟(jì)規(guī)劃里面非常重要的一點(diǎn)。作為就是國內(nèi)最大的幾家互聯(lián)網(wǎng)公司，字節(jié)跳動(dòng)、阿里、騰訊和百度等等這些公司，紛紛響應(yīng)國家的號(hào)召把自己設(shè)計(jì)系統(tǒng)作為開源?；ヂ?lián)網(wǎng)企業(yè)開始逐步優(yōu)化產(chǎn)品研發(fā)模式，通過建設(shè)設(shè)計(jì)系統(tǒng)改進(jìn)業(yè)務(wù)生產(chǎn)流程，提升產(chǎn)品迭代質(zhì)量和效率。

一次關(guān)于設(shè)計(jì)系統(tǒng)的用戶調(diào)研

跟大家分享一組年初的調(diào)研數(shù)據(jù)，調(diào)研對(duì)象主要是設(shè)計(jì)師以及少量前端同學(xué)。目的是想看一看設(shè)計(jì)系統(tǒng)在當(dāng)下發(fā)展的狀態(tài)，大家看到下圖里的數(shù)據(jù)樣本，有效樣本大概是 100 多個(gè)，量雖然不大但還是有一定代表性。這里面我會(huì)挑了一些關(guān)鍵信息來給大家去講一講。

首先可以看到將近60% 的團(tuán)隊(duì)已經(jīng)在建設(shè)自己的設(shè)計(jì)系統(tǒng)，有將近 20% 的團(tuán)隊(duì)，已經(jīng)完成這件事情，甚至已經(jīng)在使用它了。

其次通過數(shù)據(jù)可以看到參與設(shè)計(jì)系統(tǒng)建設(shè)的人員將近40%是設(shè)計(jì)師和前端。這個(gè)點(diǎn)非常重要，就是如果說夠在設(shè)計(jì)跟研發(fā)之間形成綁定約束，那對(duì)于我們后面做設(shè)計(jì)系統(tǒng)或者使用設(shè)計(jì)系統(tǒng)是有非常大的價(jià)值的。甚至還有 16% 的團(tuán)隊(duì)連產(chǎn)品也參與進(jìn)來了。然后有 20% 的團(tuán)隊(duì)是有設(shè)計(jì)系統(tǒng)架構(gòu)師這么一個(gè)崗位。

最后會(huì)發(fā)現(xiàn)將近94%的團(tuán)隊(duì)認(rèn)為：做設(shè)計(jì)系統(tǒng)能夠提高我們的協(xié)同生產(chǎn)效率的。說明業(yè)內(nèi)對(duì)于設(shè)計(jì)系統(tǒng)的作用和影響有了認(rèn)知上的改變。

聊聊在阿里的真實(shí)案例

分享一下在阿里集團(tuán)的一些真實(shí)的案例。阿里集團(tuán) Fusion Design和螞蟻集團(tuán)的 Ant Design 支撐了三大集團(tuán)數(shù)百條業(yè)務(wù)線的業(yè)務(wù)生產(chǎn)活動(dòng)。設(shè)計(jì)系統(tǒng)已成為產(chǎn)研研發(fā)流程中必不可少的一環(huán)。部分業(yè)務(wù)線已經(jīng)可以達(dá)到設(shè)計(jì)師提效50%，研發(fā)提效30%。

當(dāng)然這里面有一點(diǎn)很重要，設(shè)計(jì)師需要的不僅僅是依靠這一套示意系統(tǒng)，更重要的是有一系列配套的流程和工作去來保障系統(tǒng)能順暢地運(yùn)轉(zhuǎn)下去。

設(shè)計(jì)系統(tǒng)的價(jià)值

給大家說一下設(shè)計(jì)系統(tǒng)的價(jià)值到底在哪里，主要體現(xiàn)在以下三個(gè)方面：

1. 對(duì)公司而言。設(shè)計(jì)系統(tǒng)是一個(gè)產(chǎn)品的基礎(chǔ)，也是業(yè)務(wù)快速迭代的發(fā)動(dòng)機(jī)。通過設(shè)計(jì)系統(tǒng)的建設(shè)，可以優(yōu)化業(yè)務(wù)生產(chǎn)流程，達(dá)到企業(yè)降本提效的目的。
2. 對(duì)設(shè)計(jì)團(tuán)隊(duì)而言。設(shè)計(jì)系統(tǒng)是設(shè)計(jì)團(tuán)隊(duì)最為核心的能力和資產(chǎn)，是設(shè)計(jì)團(tuán)隊(duì)提升影響力、成為業(yè)務(wù)核心能力的重要基礎(chǔ)。
3. 對(duì)設(shè)計(jì)師而言。設(shè)計(jì)系統(tǒng)是設(shè)計(jì)師體系化思考的能力沉淀，也是設(shè)計(jì)師職業(yè)發(fā)展不可或缺的一種重要能力。

02 設(shè)計(jì)系統(tǒng)領(lǐng)域的發(fā)展與實(shí)踐

設(shè)計(jì)系統(tǒng)的三個(gè)類型

關(guān)于設(shè)計(jì)系統(tǒng)的類型，我把它分成三類：系統(tǒng)-領(lǐng)域-業(yè)務(wù)。它既是一個(gè)層層遞進(jìn)的關(guān)系，也是從抽象到具象的過程。

1. 系統(tǒng)級(jí)。操作系統(tǒng)及瀏覽器級(jí)別的設(shè)計(jì)系統(tǒng)，提供最底層操 作系統(tǒng)級(jí)的設(shè)計(jì)及研發(fā)指引。配合硬件和技術(shù)的發(fā)展提供更多交互的可能性，具備更好的生長型。
2. 領(lǐng)域級(jí)。聚焦于某一領(lǐng)域通用 解決方案，為產(chǎn)品 0 到 1 發(fā)展提供基礎(chǔ)支持。建立一些具備共同認(rèn)知和有力量的標(biāo)準(zhǔn)，能夠提升這個(gè)領(lǐng)域的體驗(yàn)基礎(chǔ)。同時(shí)還需要具備良好的生長型，讓這些領(lǐng)域的產(chǎn)品具備同樣優(yōu)秀的基礎(chǔ)體驗(yàn)，也讓小公司的起步會(huì)更加快。
3. 業(yè)務(wù)級(jí)。針對(duì)業(yè)務(wù)特性進(jìn)行明確定義，為產(chǎn)品迭代研發(fā)提供 設(shè)計(jì)和工程指引。有明確的約束和指引，能夠幫助業(yè)務(wù)快速地實(shí)現(xiàn)產(chǎn)品業(yè)務(wù)邏輯，避免不必要的浪費(fèi)。具備良好的業(yè)務(wù)抽象和擴(kuò)展性，有非常好的運(yùn)作機(jī)制，能夠提升整體業(yè)務(wù)生產(chǎn)鏈路的效率。

領(lǐng)域級(jí)案例：AWS CloudScape

這里推薦一個(gè)領(lǐng)域級(jí)案例——亞馬遜 AWS CloudScape。它的整個(gè)系統(tǒng)里一共就有分為10大類的67個(gè)組件，其中有將近20多個(gè)可自定義組件。還有分為5大類的35個(gè)Pattern。Pattern相比組件具有一定差別，就是組件解決的是具體操作應(yīng)該怎么去執(zhí)行，而 pattern 是針對(duì)一個(gè)具體的事件。

舉個(gè)例子：用戶找回密碼這樣一個(gè)場景。如果你從組件角度來講，它可能就是一堆輸入框和校驗(yàn)所組成的內(nèi)容。但你如果換一個(gè)問題，組件和流程又會(huì)有許多不一樣的組合方式。所以 Pattern 的指導(dǎo)意義遠(yuǎn)勝組件這一層。AWS的優(yōu)勢(shì)就在于它制定了非常多的Pattern內(nèi)容，用來解決復(fù)雜的業(yè)務(wù)場景。同時(shí)AWS提供了27個(gè)Demo。在現(xiàn)階段它只是作為一種展示方式，但長期來看，Demo可以為在線設(shè)計(jì)或者在線搭建業(yè)務(wù)邏輯，提供底層幫助。

所以整體上來講，我對(duì)那個(gè)AWS CloudScape設(shè)計(jì)系統(tǒng)最大的感受有三點(diǎn)：

1. 內(nèi)容簡練&指導(dǎo)準(zhǔn)確。第一個(gè)就是內(nèi)容相對(duì)的簡練和務(wù)實(shí)，指導(dǎo)是非常準(zhǔn)確和有效的，因?yàn)橄鄬?duì)來說他不會(huì)講太多的設(shè)計(jì)理念、價(jià)值觀這些東西，還是更多落在實(shí)際的指導(dǎo)上。AWS更像一個(gè)指導(dǎo)手冊(cè)，讓你知道每個(gè)組件的精準(zhǔn)定義、使用場景和說明，還有而且它有調(diào)試功能，讓用戶感知不同場景組合出的結(jié)果。
2. 定位清晰&領(lǐng)域性強(qiáng)。AWS的定位還是比較清晰的，領(lǐng)域性很強(qiáng)。AWS 這個(gè)系統(tǒng)在 16 年左右就已開始做了，到今天其實(shí)他已經(jīng)是花了差不多 6 年的時(shí)間，在業(yè)務(wù)內(nèi)部做了非常長時(shí)間的打磨。
3. 設(shè)計(jì)約束性強(qiáng)。你給用戶的選擇應(yīng)該是確定性的內(nèi)容，而不是給用戶無限的選擇。所以在這點(diǎn)上面，AWS 包括有很多產(chǎn)品其實(shí)也都下了比較多的功夫，會(huì)做的約束性越來越強(qiáng)。讓用戶不要思考太多沒有必要的東西，而是把重點(diǎn)關(guān)注在產(chǎn)品本身，關(guān)注業(yè)務(wù)流程和產(chǎn)品質(zhì)量。

如何構(gòu)建設(shè)計(jì)系統(tǒng)？

相較于幾年前，我們開始構(gòu)建一套設(shè)計(jì)系統(tǒng)的工作簡化了不少，已經(jīng)不需要不需要從頭開始一點(diǎn)點(diǎn)去做。有很多人已經(jīng)幫我們做了前期的準(zhǔn)備工作，我比較推薦兩種做法，就是下圖三角的兩邊。

基于領(lǐng)域級(jí)構(gòu)建。我們可以把基礎(chǔ)的組件交給其他設(shè)計(jì)系統(tǒng)去做，我們?cè)谒A(chǔ)上去做對(duì)于行業(yè)和領(lǐng)域的一個(gè)抽象和關(guān)注。去關(guān)注一下基于所屬的行業(yè)，且對(duì)行業(yè)有較強(qiáng)認(rèn)知，把這些東西找出來，然后去做一些對(duì)于業(yè)務(wù)組件和 pattern 的抽象。比如說你認(rèn)為引導(dǎo)用戶做一個(gè)好的評(píng)價(jià)是個(gè)非常重要的流程，你就可以對(duì)它做一個(gè)明確的 pattern 定義。你也可以在此基礎(chǔ)上抽象一層出來：要引導(dǎo)用戶做一個(gè)比較的信息交互，你把它復(fù)用到其他流程，比如發(fā)布評(píng)價(jià)，種草等場景。但這樣的話就會(huì)讓你的設(shè)計(jì)對(duì)業(yè)務(wù)是有幫助的。

基于系統(tǒng)級(jí)構(gòu)建。這種方式偏向于做移動(dòng)端場景，可以結(jié)合自己的領(lǐng)域直接往上做。因?yàn)樵?C 端產(chǎn)品里面，還并未形成絕對(duì)的行業(yè)基礎(chǔ)方案，對(duì)于領(lǐng)域級(jí)的抽象有一定難度。我們可以選擇直接結(jié)合自己的領(lǐng)域特性把業(yè)務(wù)級(jí)這塊做好。然后在于領(lǐng)域級(jí)里面的設(shè)計(jì)系統(tǒng)的選擇，我還是比較推薦大家去用阿里、字節(jié)、騰訊這些幾家的產(chǎn)品，因?yàn)樗麄兡鼙Ｕ系俣群途S護(hù)，同時(shí)開源也是國家的號(hào)召，所以我們的使用體驗(yàn)也會(huì)有較好的保障。

什么時(shí)候搭建設(shè)計(jì)系統(tǒng)

第一個(gè)階段和第二層是相對(duì)容易去做的，第三階段是最難的，也當(dāng)然其價(jià)值（設(shè)計(jì)提效）最明顯。同時(shí)在針對(duì)不同階段的產(chǎn)品，設(shè)計(jì)師要做的事也有一定差異。

• 第一階段：設(shè)計(jì)統(tǒng)一化。明確設(shè)計(jì)理念，對(duì)設(shè)計(jì)風(fēng)格、基礎(chǔ)組件、設(shè)計(jì) 模式進(jìn)行定義，確保產(chǎn)品基礎(chǔ)體驗(yàn)的一致性。提升設(shè)計(jì)輸出統(tǒng)一性。
• 第二階段：設(shè)計(jì)工程化。基于統(tǒng)一的組件庫與研發(fā)團(tuán)隊(duì)進(jìn)行共建，建立“設(shè)計(jì)&研發(fā)”的對(duì)應(yīng)關(guān)系，產(chǎn)出代碼化資產(chǎn)庫， 形成中心化管理的模式。
• 第三階段：設(shè)計(jì)在線化。借助低代碼引擎建立在線搭建工具，嵌入代碼化資產(chǎn)，降低業(yè)務(wù)使用成本。

設(shè)計(jì)系統(tǒng)建設(shè)的三個(gè)階段

搭建設(shè)計(jì)系統(tǒng)是一個(gè)龐大的工作，老板會(huì)問你，你需要花多少精力去做？做多久才能有結(jié)果？我們得先有一個(gè)范圍，才能給出答案。因此我總結(jié)了設(shè)計(jì)系統(tǒng)的三個(gè)階段：

1. 0-1搭建產(chǎn)品。如果是一個(gè)新產(chǎn)品，你就可以按照設(shè)計(jì)系統(tǒng)的思路和方法去構(gòu)建組件化的設(shè)計(jì)。等到 0 到 1 完成，要開始大規(guī)模投入建設(shè)之后，你可以跟產(chǎn)品提出搭建設(shè)計(jì)系統(tǒng)的建議，此時(shí)你的底層基礎(chǔ)是搭好的，做起來會(huì)更輕松，同時(shí)未來迭代也會(huì)更簡單。
2. 新上線產(chǎn)品。如果產(chǎn)品剛剛上線，你可以去先和技術(shù)團(tuán)隊(duì)做好溝通，然后在迭代需求的同時(shí)，去構(gòu)建完整的設(shè)計(jì)體系。然后在合適時(shí)間點(diǎn)和技術(shù)同學(xué)一起去做第二步的工程化。當(dāng)然這個(gè)是什么？前提建立在要和我們技術(shù)團(tuán)隊(duì)做好溝通。也給技術(shù)同學(xué)和我們的產(chǎn)品團(tuán)隊(duì)一些預(yù)期，讓他們知道我們會(huì)在什么時(shí)間去做這樣的事情。
3. 老產(chǎn)品。如果是上線很久老產(chǎn)品，我認(rèn)為可能就要等待一個(gè)合適的契機(jī)了。因?yàn)橐鲞@樣的事，需要投入非常多的精力和成本，公司是一定會(huì)關(guān)注投入產(chǎn)出比。當(dāng)然也可提前做一些設(shè)計(jì)的準(zhǔn)備工作，應(yīng)對(duì)業(yè)務(wù)上的變化。

03 設(shè)計(jì)系統(tǒng)對(duì)設(shè)計(jì)師職業(yè)發(fā)展的影響

設(shè)計(jì)師崗位的變遷

這里主要討論偏交互和體驗(yàn)型設(shè)計(jì)師，視覺創(chuàng)意、空間、工業(yè)等類型設(shè)計(jì)師不在此討論范圍內(nèi)。

2000年時(shí)設(shè)計(jì)師還叫美工，那時(shí)設(shè)計(jì)不被關(guān)注，專業(yè)技能層次不齊，從業(yè)者不受尊重，到了 2010年，設(shè)計(jì)師崗位與國際接軌，職責(zé)開始細(xì)分。對(duì)接商業(yè)需求、制作產(chǎn)品原型。再到15年的時(shí)候，崗位進(jìn)一步升級(jí)，形成了以圍繞用戶體驗(yàn)為中心進(jìn)行產(chǎn)品全鏈路設(shè)計(jì)，此時(shí)出現(xiàn)了體驗(yàn)設(shè)計(jì)師。

到了2020年，設(shè)計(jì)師會(huì)以更加綜合、系統(tǒng)化的方式進(jìn)行思考和設(shè)計(jì)產(chǎn)出，設(shè)計(jì)架構(gòu)的定位逐漸清晰。此時(shí)會(huì)出現(xiàn)架構(gòu)型設(shè)計(jì)師和產(chǎn)品設(shè)計(jì)師。架構(gòu)型設(shè)計(jì)師就是以設(shè)計(jì)系統(tǒng)為基礎(chǔ)，幫助團(tuán)隊(duì)提供強(qiáng)有力的體系工具和能力。產(chǎn)品設(shè)計(jì)師就是現(xiàn)在的體驗(yàn)設(shè)計(jì)師，他們需要更往上游走，去解決產(chǎn)品體驗(yàn)問題，不能只龜縮在設(shè)計(jì)領(lǐng)域，因?yàn)橛行┊a(chǎn)品的底層邏輯就存在問題，設(shè)計(jì)師怎么改頁面也不能解決問題。所以體驗(yàn)設(shè)計(jì)師要逼著自己往更有價(jià)值或者能更能產(chǎn)生設(shè)計(jì)影響力的方向走。這是當(dāng)前設(shè)計(jì)師應(yīng)該需要關(guān)注的。

架構(gòu)型設(shè)計(jì)師的職責(zé)

設(shè)計(jì)系統(tǒng)構(gòu)建。架構(gòu)設(shè)計(jì)師的工作核心是在設(shè)計(jì)系統(tǒng)構(gòu)建上，對(duì)所屬行業(yè)領(lǐng)域進(jìn)行深入研究，基于業(yè)務(wù)構(gòu)建設(shè)計(jì)系統(tǒng)統(tǒng)，與研發(fā)團(tuán)隊(duì)實(shí)現(xiàn)工程化。同時(shí)要保證搭建的設(shè)計(jì)系統(tǒng)能被下游和用戶接受。

資產(chǎn)管理。需要將設(shè)計(jì)系統(tǒng)的內(nèi)容沉淀為資產(chǎn)，并開始設(shè)計(jì)資產(chǎn)的管理，讓下游和用戶知道如何去使用，因此要在管理和分發(fā)的模式上做工作。即為團(tuán)隊(duì)設(shè)計(jì)師提供設(shè)計(jì)“齊套”服務(wù)，就是當(dāng)你的下游拿到這個(gè)東西的時(shí)候，他們可以快速開工，甚至是不用問你就能開工。所以我們需要針對(duì)于業(yè)務(wù)需求提供相應(yīng)的資產(chǎn)物料。這些物料不僅是組件模板，還包含素材、文案和插畫等，這些都屬于資產(chǎn)管理范疇的一環(huán)。

設(shè)計(jì)運(yùn)營。當(dāng)我們有了設(shè)計(jì)資產(chǎn)，沒有運(yùn)作沒有流程，它也是跑不起來的，因此要?jiǎng)?chuàng)建團(tuán)隊(duì)內(nèi)外的高效工作流程，設(shè)計(jì)師要探索新的工具方法，保證和上下游的交付環(huán)節(jié)流暢，讓業(yè)務(wù)協(xié)同能順利進(jìn)行。從而提升團(tuán)隊(duì)設(shè)計(jì)價(jià)值與影響。

04 最后，有一些建議送給大家

1. 埋頭做設(shè)計(jì)的時(shí)候，也抬頭看看。互聯(lián)網(wǎng)發(fā)展至今已不是新鮮事物，早已成為國家基礎(chǔ)建設(shè)重要組成部分。國家策略很大程度將影響到互聯(lián)網(wǎng)企業(yè)的經(jīng)營策略，作為企業(yè)的一員，設(shè)計(jì)師的發(fā)展也與之息息相關(guān)。
2. 設(shè)計(jì)系統(tǒng)已成趨勢(shì)，要會(huì)用也要懂如何構(gòu)建。互聯(lián)網(wǎng)紅利期已經(jīng)遠(yuǎn)去，降本提效已經(jīng)成為各大企業(yè)的長期策略。設(shè)計(jì)系統(tǒng)是產(chǎn)品研發(fā)鏈路中最為重要的能力之一，使用和構(gòu)建設(shè)計(jì)系統(tǒng)將成為體驗(yàn)設(shè)計(jì)師的核心能力之一。
3. 跳出基礎(chǔ)組件，從領(lǐng)域和業(yè)務(wù)中去抽象。設(shè)計(jì)系統(tǒng) ≠ UI Kit，UI Kit 無法體現(xiàn)設(shè)計(jì)系統(tǒng)真正價(jià)值。基于開源設(shè)計(jì)系統(tǒng)進(jìn)行 0 到 1 啟動(dòng)，將更多精力放在對(duì)領(lǐng)域 和業(yè)務(wù)的設(shè)計(jì)抽象上。
4. 關(guān)注職業(yè)發(fā)展，成為最后那個(gè)淘汰者。互聯(lián)網(wǎng)發(fā)展至今，設(shè)計(jì)師 title 不斷變化，公司對(duì)設(shè)計(jì)的期望也在不斷提升?！绊撁孀小币褯]有競爭力，需 要不斷提升自己的核心競爭力來保障自己在競爭中不掉隊(duì)。