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

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

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

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

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

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

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

前言：

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

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

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

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

關(guān)于受訪者：

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

我們還發(fā)現(xiàn)受訪者的相關(guān)經(jīng)驗發(fā)生了變化。去年，大多數(shù)人稱（57％），他們在各自角色中的工作經(jīng)驗不足4年。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這進一步證實了去年調(diào)查中記錄的一項發(fā)現(xiàn)：“ …公司越來越希望開發(fā)自己的設(shè)計體系，但將使用現(xiàn)成的設(shè)計體系作為參考和影響。”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

主要支持設(shè)計體系建設(shè)的活動包括：

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

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

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

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

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

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

圖11.目前的設(shè)計體系的使用時長（533樣本）

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

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

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

九、下一步是什么？

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

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

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

相關(guān)閱讀

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

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

設(shè)計體系丨設(shè)計體系有什么用？價值與缺陷（三）

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

設(shè)計體系丨根據(jù)六大設(shè)計體系總結(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è)計體系會議，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/；

作者：龍哩個龍 。公眾號：LONG說設(shè)計

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

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