做設計系統能夠提高我們的協同生產效率，已經成為許多人許多公司的共識，那么該如何搭建設計系統，設計系統對設計師的職業發展又將帶什么什么影響？本篇文章，前阿里巴巴集團設計總監5key老師，與我們分享設計系統的核心價值以及背后思考。歡迎閱讀~

01 設計系統的價值及重要性

首先給大家講一講設計系統的價值以及重要性，我們先從所處的大環境開始。

外部環境的變化

互聯網已經不是什么新鮮事物，對于我們這一代人來講，它已經成了非?；A的社會基建。也正是因為這樣的原因。作為身處在這個行業中的設計師，我們的工作跟互聯網一定是息息相關的。根據一年多的觀察，可以列舉三部分內容：

1.十四五數字經濟規劃影響，toB 業務增長迅猛。去年年底，國家公布了「十四五數字經濟規劃」主要發展指標。產業數字化轉型帶來大量需求產生。工業互聯網平臺、網上零售、電商、政務幾個領域到 2025 年的預期性增長，加起來有 40 多萬億。因此toB、toG 類需求成為各大公司重要發展方向之一。

2.經濟環境收緊，企業降本提效。由于疫情、國際形勢的影響，整體經濟形勢受到較大的沖擊。不穩定不確定性加大，各類企業均開始收縮成本，降本提效成為企業當下最為重要策略之一。

3.開源生態繁榮，設計協作模式改變。軟件開源其實是十四五經濟規劃里面非常重要的一點。作為就是國內最大的幾家互聯網公司，字節跳動、阿里、騰訊和百度等等這些公司，紛紛響應國家的號召把自己設計系統作為開源?；ヂ摼W企業開始逐步優化產品研發模式，通過建設設計系統改進業務生產流程，提升產品迭代質量和效率。

一次關于設計系統的用戶調研

跟大家分享一組年初的調研數據，調研對象主要是設計師以及少量前端同學。目的是想看一看設計系統在當下發展的狀態，大家看到下圖里的數據樣本，有效樣本大概是 100 多個，量雖然不大但還是有一定代表性。這里面我會挑了一些關鍵信息來給大家去講一講。

首先可以看到將近60% 的團隊已經在建設自己的設計系統，有將近 20% 的團隊，已經完成這件事情，甚至已經在使用它了。

其次通過數據可以看到參與設計系統建設的人員將近40%是設計師和前端。這個點非常重要，就是如果說夠在設計跟研發之間形成綁定約束，那對于我們后面做設計系統或者使用設計系統是有非常大的價值的。甚至還有 16% 的團隊連產品也參與進來了。然后有 20% 的團隊是有設計系統架構師這么一個崗位。

最后會發現將近94%的團隊認為：做設計系統能夠提高我們的協同生產效率的。說明業內對于設計系統的作用和影響有了認知上的改變。

聊聊在阿里的真實案例

分享一下在阿里集團的一些真實的案例。阿里集團 Fusion Design和螞蟻集團的 Ant Design 支撐了三大集團數百條業務線的業務生產活動。設計系統已成為產研研發流程中必不可少的一環。部分業務線已經可以達到設計師提效50%，研發提效30%。

當然這里面有一點很重要，設計師需要的不僅僅是依靠這一套示意系統，更重要的是有一系列配套的流程和工作去來保障系統能順暢地運轉下去。

設計系統的價值

給大家說一下設計系統的價值到底在哪里，主要體現在以下三個方面：

1. 對公司而言。設計系統是一個產品的基礎，也是業務快速迭代的發動機。通過設計系統的建設，可以優化業務生產流程，達到企業降本提效的目的。
2. 對設計團隊而言。設計系統是設計團隊最為核心的能力和資產，是設計團隊提升影響力、成為業務核心能力的重要基礎。
3. 對設計師而言。設計系統是設計師體系化思考的能力沉淀，也是設計師職業發展不可或缺的一種重要能力。

02 設計系統領域的發展與實踐

設計系統的三個類型

關于設計系統的類型，我把它分成三類：系統-領域-業務。它既是一個層層遞進的關系，也是從抽象到具象的過程。

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

領域級案例：AWS CloudScape

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

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

所以整體上來講，我對那個AWS CloudScape設計系統最大的感受有三點：

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

如何構建設計系統？

相較于幾年前，我們開始構建一套設計系統的工作簡化了不少，已經不需要不需要從頭開始一點點去做。有很多人已經幫我們做了前期的準備工作，我比較推薦兩種做法，就是下圖三角的兩邊。

基于領域級構建。我們可以把基礎的組件交給其他設計系統去做，我們在它基礎上去做對于行業和領域的一個抽象和關注。去關注一下基于所屬的行業，且對行業有較強認知，把這些東西找出來，然后去做一些對于業務組件和 pattern 的抽象。比如說你認為引導用戶做一個好的評價是個非常重要的流程，你就可以對它做一個明確的 pattern 定義。你也可以在此基礎上抽象一層出來：要引導用戶做一個比較的信息交互，你把它復用到其他流程，比如發布評價，種草等場景。但這樣的話就會讓你的設計對業務是有幫助的。

基于系統級構建。這種方式偏向于做移動端場景，可以結合自己的領域直接往上做。因為在 C 端產品里面，還并未形成絕對的行業基礎方案，對于領域級的抽象有一定難度。我們可以選擇直接結合自己的領域特性把業務級這塊做好。然后在于領域級里面的設計系統的選擇，我還是比較推薦大家去用阿里、字節、騰訊這些幾家的產品，因為他們能保障迭代速度和維護，同時開源也是國家的號召，所以我們的使用體驗也會有較好的保障。

什么時候搭建設計系統

第一個階段和第二層是相對容易去做的，第三階段是最難的，也當然其價值（設計提效）最明顯。同時在針對不同階段的產品，設計師要做的事也有一定差異。

• 第一階段：設計統一化。明確設計理念，對設計風格、基礎組件、設計 模式進行定義，確保產品基礎體驗的一致性。提升設計輸出統一性。
• 第二階段：設計工程化。基于統一的組件庫與研發團隊進行共建，建立“設計&研發”的對應關系，產出代碼化資產庫， 形成中心化管理的模式。
• 第三階段：設計在線化。借助低代碼引擎建立在線搭建工具，嵌入代碼化資產，降低業務使用成本。

設計系統建設的三個階段

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

1. 0-1搭建產品。如果是一個新產品，你就可以按照設計系統的思路和方法去構建組件化的設計。等到 0 到 1 完成，要開始大規模投入建設之后，你可以跟產品提出搭建設計系統的建議，此時你的底層基礎是搭好的，做起來會更輕松，同時未來迭代也會更簡單。
2. 新上線產品。如果產品剛剛上線，你可以去先和技術團隊做好溝通，然后在迭代需求的同時，去構建完整的設計體系。然后在合適時間點和技術同學一起去做第二步的工程化。當然這個是什么？前提建立在要和我們技術團隊做好溝通。也給技術同學和我們的產品團隊一些預期，讓他們知道我們會在什么時間去做這樣的事情。
3. 老產品。如果是上線很久老產品，我認為可能就要等待一個合適的契機了。因為要做這樣的事，需要投入非常多的精力和成本，公司是一定會關注投入產出比。當然也可提前做一些設計的準備工作，應對業務上的變化。

03 設計系統對設計師職業發展的影響

設計師崗位的變遷

這里主要討論偏交互和體驗型設計師，視覺創意、空間、工業等類型設計師不在此討論范圍內。

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

到了2020年，設計師會以更加綜合、系統化的方式進行思考和設計產出，設計架構的定位逐漸清晰。此時會出現架構型設計師和產品設計師。架構型設計師就是以設計系統為基礎，幫助團隊提供強有力的體系工具和能力。產品設計師就是現在的體驗設計師，他們需要更往上游走，去解決產品體驗問題，不能只龜縮在設計領域，因為有些產品的底層邏輯就存在問題，設計師怎么改頁面也不能解決問題。所以體驗設計師要逼著自己往更有價值或者能更能產生設計影響力的方向走。這是當前設計師應該需要關注的。

架構型設計師的職責

設計系統構建。架構設計師的工作核心是在設計系統構建上，對所屬行業領域進行深入研究，基于業務構建設計系統統，與研發團隊實現工程化。同時要保證搭建的設計系統能被下游和用戶接受。

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

設計運營。當我們有了設計資產，沒有運作沒有流程，它也是跑不起來的，因此要創建團隊內外的高效工作流程，設計師要探索新的工具方法，保證和上下游的交付環節流暢，讓業務協同能順利進行。從而提升團隊設計價值與影響。

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

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