編輯導(dǎo)讀：不管是大型平臺(tái)型設(shè)計(jì)體系還是公司內(nèi)部用的設(shè)計(jì)體系，它們有的建設(shè)多年，有的才剛萌芽。但現(xiàn)在很多文章往往都是定性的分析，難以提供一些趨勢(shì)的辨別和數(shù)據(jù)驗(yàn)證。本篇文章內(nèi)容來(lái)自Material Design的研究者Abla Hamilton發(fā)布的：《設(shè)計(jì)體系現(xiàn)狀：2020》，從九個(gè)方面展開(kāi)介紹，與你分享。

之前的設(shè)計(jì)體系文章一直缺乏一些具體的調(diào)查數(shù)據(jù)。今天這篇文章，我來(lái)分享一下Material Design的研究者在2020年末，發(fā)布的針對(duì)于設(shè)計(jì)體系使用者社區(qū)的調(diào)查。

不管是大型平臺(tái)型設(shè)計(jì)體系還是公司內(nèi)部用的設(shè)計(jì)體系，它們有的建設(shè)多年，有的才剛萌芽。但現(xiàn)在很多文章往往都是定性的分析，難以提供一些趨勢(shì)的辨別和數(shù)據(jù)驗(yàn)證。

本篇文章內(nèi)容來(lái)自Material Design的研究者Abla Hamilton發(fā)布的：《設(shè)計(jì)體系現(xiàn)狀：2020》（The State of Design Systems: 2020，2020-12）

作者在文中分享了他們團(tuán)隊(duì)對(duì)設(shè)計(jì)體系社區(qū)中的500~1000余名成員的調(diào)查報(bào)告，并與他他們的2019年報(bào)告（去年的報(bào)告可以看這個(gè)：State of Design Systems 2019）進(jìn)行對(duì)比分析，并分享了以下數(shù)據(jù)：

• 使用的設(shè)計(jì)體系的包含內(nèi)容
• 選擇創(chuàng)建設(shè)計(jì)體系的原因分布
• 使用的設(shè)計(jì)體系分布
• 目前用來(lái)設(shè)計(jì)數(shù)字產(chǎn)品的工具分布
• 目前用來(lái)將設(shè)計(jì)文檔化和交接的工具分布
• 用于管理設(shè)計(jì)體系的的工具分布
• 支持設(shè)計(jì)體系的組織活動(dòng)情況
• 設(shè)計(jì)體系增長(zhǎng)趨勢(shì)

*需要注意的是由于調(diào)查者背景是MaterialDesign，可能會(huì)存在部分?jǐn)?shù)據(jù)的偏頗，稍微注意一下即可。以下是其核心內(nèi)容：

前言：

我們使用的設(shè)計(jì)體系一直在持續(xù)發(fā)展。在今年的“設(shè)計(jì)體系現(xiàn)狀（State of Design Systems）”調(diào)查中，我們了解了設(shè)計(jì)體系如何變得成熟、包含哪些內(nèi)容，以及如何由人員、工具和流程管理。

這是Material Design與“Clarity”會(huì)議（https://www.clarityconf.com/2020-archive）合作的第二年，著眼于設(shè)計(jì)體系的當(dāng)前狀態(tài)。

我們以幾種方式更新了2020年的調(diào)查。首先，Clarity 2020會(huì)議已轉(zhuǎn)變?yōu)樵诰€形式。通過(guò)這一更改，受訪者預(yù)計(jì)使用或創(chuàng)建設(shè)計(jì)體系的的經(jīng)驗(yàn)可能會(huì)發(fā)生變化。我們還通過(guò)Material Design的社交媒體和通訊帳戶（https://twitter.com/materialdesign）添加了分銷渠道，以擴(kuò)大今年未參會(huì)人員的影響力。

我們還計(jì)劃在兩篇文章中解釋這些結(jié)果。在本文中，我們將對(duì)調(diào)查結(jié)果進(jìn)行概述，并與去年的調(diào)查進(jìn)行比較。在2021年初，我們將進(jìn)一步深入研究設(shè)計(jì)體系的發(fā)展（譯者注，新文章還沒(méi)發(fā)布）。

關(guān)于受訪者：

今年，我們聽(tīng)到了很大一部分專注于設(shè)計(jì)工作的人的聲音（53％）。與去年的調(diào)查相比，專注于開(kāi)發(fā)的人員從11％上升到16％，同時(shí)從事設(shè)計(jì)和開(kāi)發(fā)的人員從16％上升到22％。

我們還發(fā)現(xiàn)受訪者的相關(guān)經(jīng)驗(yàn)發(fā)生了變化。去年，大多數(shù)人稱（57％），他們?cè)诟髯越巧械墓ぷ鹘?jīng)驗(yàn)不足4年。

今年的受訪者工作經(jīng)驗(yàn)結(jié)果是：

• 37％的人擁有不到4年的經(jīng)驗(yàn)
• 32％具有4-9年的經(jīng)驗(yàn)
• 31％具有9年以上的經(jīng)驗(yàn)

現(xiàn)在的分布更均勻，使我們有更廣泛的經(jīng)驗(yàn)可以從中學(xué)習(xí)。

在考慮參與創(chuàng)建或使用設(shè)計(jì)體系的人員時(shí)，讓我們使用Nikolas Klein在其文章《設(shè)計(jì)體系的成熟度》（https://www.designsystems.com/the-spectrum-of-maturity-for-design-systems/）中的定義。他將創(chuàng)造者（Creator）定義為“發(fā)明新模式或記錄現(xiàn)有模式以供他人使用的人”，而將消費(fèi)者(Consumer)定義為“使用先前定義的模式的人”。

使用這些定義，可以將76％的受訪者確定為“創(chuàng)造者”，既可以作為組織設(shè)計(jì)體系團(tuán)隊(duì)的一部分，也可以作為對(duì)設(shè)計(jì)體系做出貢獻(xiàn)的產(chǎn)品團(tuán)隊(duì)的成員。因此，我們中有大多數(shù)具有動(dòng)手經(jīng)驗(yàn)的人通過(guò)本次調(diào)查分享了這些經(jīng)驗(yàn)。

一、設(shè)計(jì)體系包含什么內(nèi)容？

在去年的調(diào)查中，我們?cè)噲D了解構(gòu)成組織設(shè)計(jì)體系的內(nèi)容。去年設(shè)計(jì)體系中最流行的工具包括組件庫(kù)（component libraries）、樣式指南（styleguides）、設(shè)計(jì)指南（design guidelines）、和內(nèi)容指南（content guidelines）。

今年，我們將問(wèn)題擴(kuò)展到包括9個(gè)選項(xiàng)，添加了諸如設(shè)計(jì)令牌（design tokens），圖標(biāo)庫(kù)(icon libraries)和可訪問(wèn)性準(zhǔn)則(accessibility guidelines)之類的內(nèi)容。

設(shè)計(jì)體系包含的前三名工具包是：

1. 圖標(biāo)庫(kù)（84％）
2. UI套件（83％）
3. 樣式指南（75％）

大多數(shù)受訪者（74％）還報(bào)告說(shuō)他們的設(shè)計(jì)體系具有組件代碼庫(kù)。

圖1.在公司內(nèi)使用的設(shè)計(jì)體系包含的具體內(nèi)容（465樣本）

這里有兩個(gè)要考慮的關(guān)鍵事實(shí)。

首先，有75％的受訪者專注于產(chǎn)品級(jí)別或設(shè)計(jì)體系級(jí)別的設(shè)計(jì)工作。

其次，記錄組織的視覺(jué)語(yǔ)言是設(shè)計(jì)體系開(kāi)發(fā)的第一步。組織的視覺(jué)語(yǔ)言在樣式指南和圖標(biāo)中表示，并嵌入到產(chǎn)品設(shè)計(jì)階段使用的UI Kit中。視覺(jué)內(nèi)容（例如樣式指南和圖標(biāo)）的比例很高，與早期的設(shè)計(jì)體系演進(jìn)階段保持一致。

二、推動(dòng)內(nèi)部設(shè)計(jì)體系建設(shè)的原因是什么？

在2019年，我們問(wèn)了：“您嘗試或使用過(guò)哪些設(shè)計(jì)體系或組件庫(kù)？” 在該調(diào)查中，有58％的受訪者選擇了“內(nèi)部設(shè)計(jì)體系”作為他們?cè)?jīng)使用或嘗試過(guò)的體系，該選項(xiàng)僅次于Google的Material Design。

在2020年的調(diào)查中，我們想了解有關(guān)內(nèi)部設(shè)計(jì)體系的更多信息，因此我們添加了以下兩個(gè)新問(wèn)題：

“貴公司是否在內(nèi)部建立了自己的設(shè)計(jì)體系？” ，進(jìn)一步有以下問(wèn)題，“您的公司為什么選擇內(nèi)部構(gòu)建設(shè)計(jì)體系而不是重新使用開(kāi)源設(shè)計(jì)體系？”

居然有大多數(shù)受訪者（80％）報(bào)告說(shuō)，他們的公司在內(nèi)部構(gòu)建了自己的設(shè)計(jì)體系。

公司創(chuàng)建其內(nèi)部設(shè)計(jì)體系的前三個(gè)原因是：

1. 最能代表他們公司的品牌（27％）
2. 解決其產(chǎn)品的特定用例（22％）
3. 框架或技術(shù)堆棧（tech stack）限制（14％）

圖2.創(chuàng)建內(nèi)部設(shè)計(jì)體系的原因（350樣本）

三、您使用了哪些設(shè)計(jì)體系？

在去年的調(diào)查中，當(dāng)我們問(wèn)到“您使用了哪些設(shè)計(jì)體系？” 選擇的前三大設(shè)計(jì)體系是：Google的Material Design（28％），內(nèi)部構(gòu)建的設(shè)計(jì)體系（21％）和Apple的Human-InterfaceGuidelines（15％）。

今年，當(dāng)我們問(wèn)到“過(guò)去兩年中您使用了哪些設(shè)計(jì)體系”時(shí)，我們通過(guò)其他設(shè)計(jì)體系和工具包（例如Bootstrap和Fluent Design System）擴(kuò)展了選項(xiàng)列表。這有助于我們了解受訪者使用的設(shè)計(jì)體系的范圍以及如何使用這些設(shè)計(jì)體系。

在過(guò)去兩年中，我們的受訪者使用的前三大設(shè)計(jì)體系是：

1. Google的 質(zhì)感設(shè)計(jì)體系（Material Design System）
2. Apple的人機(jī)交互指南（ Human-Interface Guidelines ，HIG)
3. Bootstrap

圖3.過(guò)去兩年中使用或嘗試過(guò)的設(shè)計(jì)體系（1259樣本）

在今年的結(jié)果中，Bootstrap是新秀選擇之一，在我們的清單中排在Google的MDS和Apple的HIG之后的第三位。

當(dāng)我們考慮到絕大多數(shù)（80％）的報(bào)告稱其組織已經(jīng)創(chuàng)建了自己的內(nèi)部設(shè)計(jì)體系并查看了僅那些受訪者使用的不同設(shè)計(jì)體系時(shí)，我們可以得出結(jié)論，大多數(shù)人將這些設(shè)計(jì)體系用來(lái)作為參考，幫助建設(shè)在內(nèi)部設(shè)計(jì)體系。

這進(jìn)一步證實(shí)了去年調(diào)查中記錄的一項(xiàng)發(fā)現(xiàn)：“ …公司越來(lái)越希望開(kāi)發(fā)自己的設(shè)計(jì)體系，但將使用現(xiàn)成的設(shè)計(jì)體系作為參考和影響?！?/p>

四、用來(lái)設(shè)計(jì)數(shù)字產(chǎn)品的工具是什么？

今年，我們?yōu)樵O(shè)計(jì)體系創(chuàng)造者和消費(fèi)者增加了有關(guān)工具的幾個(gè)問(wèn)題。我們?cè)儐?wèn)了專注于設(shè)計(jì)工作的受訪者，他們使用哪些工具來(lái)創(chuàng)建設(shè)計(jì)。

受訪者選擇的前3種工具是：

1. Figma（23％）
2. Sketch（19％）
3. Illustrator（11％）

圖4.受選的設(shè)計(jì)工具百分比（497樣本）

當(dāng)我們將工具偏好與公司規(guī)模進(jìn)行比較時(shí)（詳見(jiàn)圖5），F(xiàn)igma往往是擁有500名以下員工的公司的偏好選擇，而Sketch是擁有10,000名及以上員工的大型跨國(guó)公司的首選。

圖5.不同受訪者規(guī)模選擇特定設(shè)計(jì)工具的百分比（453樣本）

五、用來(lái)將設(shè)計(jì)文檔化和交接的工具是什么？

設(shè)計(jì)與工程之間的交接是產(chǎn)品設(shè)計(jì)與開(kāi)發(fā)過(guò)程中協(xié)作與溝通的關(guān)鍵時(shí)刻。

在去年的調(diào)查中，這種移交被確定為設(shè)計(jì)領(lǐng)導(dǎo)希望通過(guò)使用設(shè)計(jì)體系來(lái)緩解的痛點(diǎn)。今年，我們?cè)黾恿艘粋€(gè)新問(wèn)題，并向所有受訪者詢問(wèn)用于移交UX文檔的工具，以了解有關(guān)此設(shè)計(jì)體系接觸點(diǎn)的更多信息。

受訪者選擇的前3種工具是：

1. Figma (26%)
2. InVision (18%)
3. Zeplin (13%)

圖6.用來(lái)遞交UX文檔的工具使用情況（451樣本）

當(dāng)我們比較用于將UX文檔使用情況的工具與公司規(guī)模進(jìn)行比較時(shí)，幾乎所有公司規(guī)模都選擇了Figma，但大型公司除外，大型公司更頻繁地使用InVision。

圖7.不同受訪者公司規(guī)模下特定設(shè)計(jì)工具使用的百分比（451樣本）

六、用于管理設(shè)計(jì)體系的工具是什么？

隨著越來(lái)越多的組織創(chuàng)建設(shè)計(jì)體系，用于組織和管理設(shè)計(jì)體系內(nèi)容和文檔的工具越來(lái)越多。

在2019年，當(dāng)我們?cè)儐?wèn)管理設(shè)計(jì)體系的工具時(shí)，選擇的頭部工具是Sketch。但是，今年的頭把交椅是Figma（25％），其次是Sketch（21％）和Storybook（17％）。

圖8.使用的設(shè)計(jì)體系管理工具的選擇百分比（452樣本）

同樣，當(dāng)我們按公司規(guī)模查看設(shè)計(jì)體系管理工具的使用情況時(shí)，除大型公司外，幾乎所有公司都選擇了Figma，大型公司則使用了Sketch。

圖9.按受訪者公司規(guī)模劃分的設(shè)計(jì)體系管理工具的百分比（452樣本）

七、您如何支持設(shè)計(jì)體系？

隨著組織內(nèi)部的設(shè)計(jì)體系的發(fā)展，需要更積極的支持來(lái)幫助他們發(fā)展和成功。今年的調(diào)查增加了一個(gè)有關(guān)團(tuán)隊(duì)為支持其設(shè)計(jì)體系演變而進(jìn)行的特定活動(dòng)的問(wèn)題。

主要支持設(shè)計(jì)體系建設(shè)的活動(dòng)包括：

1. 定制及重復(fù)設(shè)計(jì)的審查（16％）
2. 入門(mén)介紹如何使用組織的設(shè)計(jì)體系（14％）
3. 能夠針對(duì)體系提交錯(cuò)誤（13％）

圖10.設(shè)計(jì)體系支持活動(dòng)的百分比（371樣本）

設(shè)計(jì)體系啟動(dòng)后，邁向成功的下一步是產(chǎn)品團(tuán)隊(duì)采用設(shè)計(jì)體系。提供入職培訓(xùn)以展示如何使用設(shè)計(jì)體系并演示體系的價(jià)值可以幫助提高知名度和采用率。

另外，使用設(shè)計(jì)體系的既定目標(biāo)是保持產(chǎn)品的一致性。讓設(shè)計(jì)體系團(tuán)隊(duì)成員在產(chǎn)品設(shè)計(jì)審查期間提供反饋，或者使產(chǎn)品團(tuán)隊(duì)能夠針對(duì)設(shè)計(jì)體系本身提交錯(cuò)誤，提供機(jī)制和機(jī)會(huì)來(lái)保持設(shè)計(jì)體系及其相關(guān)產(chǎn)品的一致性和同步性。

八、設(shè)計(jì)體系當(dāng)前的增長(zhǎng)趨勢(shì)是什么？

除了了解有關(guān)內(nèi)部設(shè)計(jì)體系增長(zhǎng)趨勢(shì)的更多信息外，我們還了解了受訪者的設(shè)計(jì)體系在組織中已經(jīng)使用了多長(zhǎng)時(shí)間。大約25％的受訪者表示他們的設(shè)計(jì)體系已經(jīng)使用了1-2年，非常新。

圖11.目前的設(shè)計(jì)體系的使用時(shí)長(zhǎng)（533樣本）

將這些使用時(shí)長(zhǎng)數(shù)據(jù)聚合為兩個(gè)集群（0-2年和 2-4+年）并按公司規(guī)模進(jìn)行分析（請(qǐng)參見(jiàn)圖12），該數(shù)據(jù)表明，規(guī)模較小的區(qū)域性公司（最多5,000名員工）正在比更大型跨國(guó)公司（擁有5,000多名員工）創(chuàng)建更多的設(shè)計(jì)體系。

越來(lái)越多的中型公司（50至1500名員工）越來(lái)越多地使用設(shè)計(jì)體系來(lái)改善其產(chǎn)品的設(shè)計(jì)和開(kāi)發(fā)團(tuán)隊(duì)流程，提升產(chǎn)品一致性和質(zhì)量。

圖12.按受訪者規(guī)模X設(shè)計(jì)體系使用時(shí)長(zhǎng)（389樣本）

九、下一步是什么？

無(wú)論是在團(tuán)隊(duì)級(jí)別、組織級(jí)別還是在更廣泛的設(shè)計(jì)體系社區(qū)中，設(shè)計(jì)體系總是在不斷發(fā)展。當(dāng)我們將這些系統(tǒng)應(yīng)用到我們的工作中時(shí)，重要的是要了解有關(guān)體系如何形成、如何得到支持以及如何演化的問(wèn)題。這樣，新的團(tuán)隊(duì)可以根據(jù)這些社區(qū)中的挑戰(zhàn)和成功基礎(chǔ)上繼續(xù)學(xué)習(xí)。

文章暫告結(jié)束，等他們新報(bào)告發(fā)布了，我再和大家分享一波。

另外，下面的內(nèi)容是近期我撰寫(xiě)的關(guān)于設(shè)計(jì)體系的相關(guān)文章，感興趣的朋友可以看看：

相關(guān)閱讀

設(shè)計(jì)體系丨設(shè)計(jì)體系的涌現(xiàn)：適應(yīng)組織的需要（一）

設(shè)計(jì)體系丨什么才是設(shè)計(jì)體系？結(jié)構(gòu)、原則與認(rèn)知誤區(qū)（二）

設(shè)計(jì)體系丨設(shè)計(jì)體系有什么用？?jī)r(jià)值與缺陷（三）

設(shè)計(jì)體系丨如何創(chuàng)建設(shè)計(jì)體系？（四）

設(shè)計(jì)體系丨根據(jù)六大設(shè)計(jì)體系總結(jié)出的資產(chǎn)清查清單（五）

參考內(nèi)容

[1].? ??原文，AblaHamilton（Material Design）,The State of Design Systems: 2020，2020-12-16，https://material.io/blog/research-state-of-design-systems-2020；

[2].????Jude Yew，State of Design Systems 2019 ，2019-12-23，https://medium.com/google-design/state-of-design-systems-2019-ff5f26ada71；

[3].????Clarity設(shè)計(jì)體系會(huì)議，https://www.clarityconf.com/2020-archive；

[4].????NikolasKlein，The spectrum ofmaturity for design systems，https://www.designsystems.com/the-spectrum-of-maturity-for-design-systems/；

作者：龍哩個(gè)龍 。公眾號(hào)：LONG說(shuō)設(shè)計(jì)

本文由 @龍哩個(gè)龍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議