我们使用的设计系统不断发展。在今年的设计系统现状调查中,我们了解了设计系统是如何成熟的,设计系统中包含哪些内容,以及设计系统是如何由人员、工具和流程管理的。
这是 Material Design 第二年与设计系统会议Clarity合作,着眼于设计系统的当前状态。需要赶上吗?阅读我们对去年以社区为中心的调查的总结。
我们以几种方式更新了 2020 年的调查。首先,Clarity 2020 会议转变为在线形式。随着这种变化,我们预计受访者使用或创建设计系统的经验水平可能会发生变化。我们还通过 Material Design 的时事通讯和社交媒体帐户增加了分销渠道,以扩大对未参加今年会议的人们的影响。
我们还计划在一系列的两篇文章中解释这些结果。在本文中,我们将概述调查结果并与去年的调查进行比较。2021 年初,我们将深入探讨设计系统的演变。
考虑到这一点,我们开始吧!
关于受访者
今年,我们听说有很大一部分人专注于设计工作(53%)。与去年的调查相比,我们发现专注于开发的人从 11% 上升到 16%,同时从事设计和开发的人从 16% 上升到 22%。
我们还看到受访者的角色经验水平发生了变化。去年,大多数人 (57%) 表示他们在各自的岗位上拥有不到 4 年的经验。今年的结果是:
- 37% 的经验不足 4 年
- 32% 有 4-9 年经验
- 31% 拥有 9 年以上经验
分布更均匀为我们提供了更广泛的经验可供学习。
在考虑参与创建或使用设计系统的人员时,让我们使用 Nikolas Klein 在他的文章《设计系统的成熟度范围》中的定义。他将创造者定义为“发明新模式或记录现有模式以供他人使用的人”,而消费者则定义为“使用先前定义的模式的人”。
使用这些定义,76% 的受访者可以被确定为“创造者”,或者是他们组织的设计系统团队的一部分,或者是为设计系统做出贡献的产品团队的成员。因此,我们有绝大多数人通过本次调查分享了实践经验。
设计系统包括什么?
在去年的调查中,我们试图了解哪些工件构成了组织的设计系统。去年设计系统中最流行的工件包括组件库、样式指南、设计指南和内容指南(component libraries, style guides, design guidelines, and content guidelines)。
今年,我们将问题扩展为包括 9 个选项,添加了design token、图标库和可访问性指南等内容。
设计系统构成前3名:
- 图标库 (84%)
- UI Kit (83%)
- 样式指南 Style Guide(75%)
大多数受访者 (74%) 还表示他们的设计系统有一个组件代码库。
图 1:组织设计系统中包含的特定工件的响应百分比(响应 = 465)
这里有两个关键项目需要考虑。
首先,75% 的受访者关注产品级别或设计系统级别的设计工作。
其次, 记录组织的视觉语言是设计系统开发的第一步。组织的视觉语言在样式指南和图标中表达,并嵌入到产品设计阶段使用的 UI 工具包中。拥有高比例的视觉设计工件,如样式指南和图标,与早期设计系统演化阶段一致。
是什么推动了内部设计系统的创建?
2019 年,我们问:“您尝试或使用过哪些设计系统或组件库,如果有的话?” 在那次调查中,58% 的受访者选择“内部设计系统”作为他们曾经使用或尝试过的一种,该选项排名第二,仅次于谷歌的 Material Design。
在 2020 年的调查中,我们想更多地了解内部设计系统,所以我们添加了以下 2 个新问题:
首先,“贵公司是否在内部建立了自己的设计系统?” 如果是,“为什么你的公司选择在内部构建设计系统,而不是重复使用开源设计系统?”
大多数受访者(80%!)报告说他们的公司在内部建立了自己的设计系统。
公司创建内部设计系统的三大原因是:
- 最能代表公司品牌 (27%)
- 解决他们产品的特定用例(22%)
- 框架或技术堆栈限制 (14%)
图 2:提供创建内部设计系统的理由的回复百分比(回复=350)
您使用过哪些设计系统?
在去年的调查中,当我们问到“您使用了哪些设计系统?” 选择的前 3 个设计系统是:谷歌的material design (28%)、内部构建的设计系统 (21%) 和苹果的人机界面指南 (15%)。
今年,当我们询问“您在过去 2 年中使用了哪些设计系统”时,我们通过其他设计系统和工具包(例如 Bootstrap 和 Fluent Design)扩展了选项列表。这有助于我们了解受访者使用的设计系统范围以及这些设计系统的使用方式。
我们的受访者在过去 2 年中使用的前三个设计系统是:
- material design
- Apple 的人机界面指南 (HIG)
- Bootstrap
图 3:过去 2 年使用或尝试的设计系统选择百分比(响应=1259)
在今年的结果中,新增功能之一 Bootstrap 在我们的列表中排名第三,仅次于 Google 的 Material Design 和 Apple 的人机界面指南 (HIG)。
当我们考虑到绝大多数 (80%) 报告说他们的组织已经创建了自己的内部设计系统并审查了这些受访者使用的不同设计系统时,我们可以得出结论,大多数人正在使用这些设计系统作为参考影响并告知他们自己的内部设计系统。
这进一步证实了去年调查中记录的一项发现,即“……公司越来越希望开发自己的设计系统,但会使用现成的设计系统作为参考和影响。”
用于设计数字产品的顶级工具是什么?
今年,我们为设计系统创建者和消费者添加了几个关于工具的问题。我们询问了专注于设计工作的受访者他们使用哪些工具来创建设计。
我们的受访者选择的前 3 个工具是:
- Figma (23%)
- Sketch (19%)
- AI (11%)
图 4:选择使用的设计工具的响应百分比(响应 = 497)
当我们将工具偏好与公司规模进行比较时(参见图 5),Figma 是员工人数少于 500 人的公司的首选,而 Sketch 是员工人数在 10,000 人及以上的大型跨国公司的首选。
图 5:选择受访者公司规模使用的特定设计工具的受访者百分比(Responses=453)
用于设计文档和移交的顶级工具是什么?
设计和工程之间的交接是产品设计和开发过程中协作和沟通的关键时刻。
在去年的调查中,这种交接被确定为设计主管希望通过使用设计系统来缓解的痛点。今年我们增加了一个新问题,并询问所有受访者有关用于移交 UX 文档的工具,以了解有关此设计系统接触点的更多信息。
我们的受访者选择的前 3 个工具是:
- Figma (26%)
- InVison (18%)
- Zeplin (13%)
图 6:选择使用的移交 UX 文档工具的响应百分比(响应=451)
当我们将用于交付 UX 文档的工具与公司规模进行比较时,几乎所有规模的公司都选择了 Figma,除了更经常使用 InVision 的大公司。
图 7:选择受访者公司规模使用的特定交接工具的受访者百分比(Responses=451)
用于管理设计系统的顶级工具是什么?
随着越来越多的组织创建设计系统,用于组织和管理设计系统工件和文档的工具的选择越来越多。
2019 年,当我们询问管理设计系统的工具时,首选的工具是 Sketch。然而,今年,首位被 Figma(25%)、Sketch(21%)和 Storybook(17%)占据。
图 8:选择使用的设计系统管理工具的响应百分比(响应=452)
同样,当我们按公司规模审查设计系统管理工具的使用情况时,几乎所有公司都选择了 Figma,除了大公司在此活动中更多地使用 Sketch。
图 9:按受访者公司规模划分的选择设计管理工具的受访者百分比(Responses=452)
您如何支持设计系统?
随着设计系统在组织内的发展,需要积极的支持来帮助他们成长和成功。今年的调查增加了一个关于团队为支持他们的设计系统发展而执行的特定活动的问题。
报告的主要支持活动包括:
- 设计评审 (16%)
- 入职如何使用组织的设计系统(14%)
- 能够针对系统提交错误 (13%)
图 10:选择使用的设计系统支持活动的响应百分比(响应 = 371)
设计系统启动后,成功的下一步是产品团队采用设计系统。提供引导以展示如何使用设计系统并展示系统的价值有助于提高认识和采用。
此外,使用设计系统的一个既定目标是保持产品的一致性。让设计系统团队成员在产品设计评审期间提供反馈,或为产品团队提供针对设计系统本身提交错误的能力,提供机制和机会来保持设计系统及其相关产品的一致性和同步性。
设计系统当前的增长趋势是什么?
除了了解有关内部设计系统增长趋势的更多信息外,我们还了解了受访者的设计系统在他们的组织中使用了多长时间。大约 25% 的受访者表示他们的设计系统已经实施了 1-2 年,这使得它们相当新。
图 11:选择设计系统到位年数的回复百分比(回复=533)
将数据合并为两个集群(0 - 2 年;2 - 4 年以上)并根据公司规模进行分析(参见图 12),数据显示,从小型到大型的区域公司(最多 5,000 名员工)正在创建更多的设计系统比较大的跨国公司(员工人数超过 5,000 人)。
越来越多的中型公司(50 - 1500 名员工)越来越多地使用设计系统来改进其产品的设计和开发团队流程、产品一致性和质量。
图 12:按受访者公司规模划分的设计系统数量(响应=389)
下一步是什么?
设计系统总是在不断发展,无论是在团队级别、组织级别,还是在更广泛的设计系统社区中。当我们将这些系统应用到我们的工作中时,重要的是要询问有关系统是如何形成的、如何支持它们以及它们如何变化的问题。这样,对流程不熟悉的团队可以根据他们的挑战和成功继续向社区学习。请继续关注 Material Design 博客,以便在 2021 年初进行更深入的了解。
谢谢,晚安。