设计系统 | 什么是设计系统（Design System）

静H 2023-07-26 15:52:21

设计系统近几年来一直是比较热门的话题，我最近参与到了一个Design System的项目，今天把所学到的经验和知识分享给大家。

Design system是个比较庞大的话题，今天主要会围绕以下内容深入介绍Design System，我接下来也会持续更新其他关于Design System的话题：

为什么我们需要设计系统
什么是Design System
Design System和Style Guide以及Pattern Library的区别
我们对Design System的误解
Design System的重要性
什么时候开始Design System
设计系统项目中可能会面临的挑战

一、为什么我们需要设计系统？

随着电子创新的发展，人们对产品或服务的要求越来越高。他们期望即使在同一个公司开发的不同的平台上的不同的产品中都能有流畅的体验。用户的这种变化，使得越来越多互联网公司开始意识到设计的重要性。

公司开始扩张内部的设计团队，优化设计流程和工具。然而，设计团队规模的扩大一定能带来好的用户体验吗？答案是不一定。

对设计的重视和投资，也会带来许多挑战。比如，如何保证用户体验的流畅性和一致性？如何管理设计债务和技术债务？如何能帮助公司扩大规模等等。

举一个我工作中的例子，我上一家公司去年成立了in-house的设计团队。但是真正开始做设计的时候才发现，一个产品至少有3套不同的设计语言，而我们的加入又带来新的设计决策。不管对于设计团队还是开发团队来说，每一次引入新的设计决策，都会造成相应的设计债务或者技术债务，这些债务都会限制到设计规模的扩大。

Forrester在今年2月发布的一篇名为《Unlocking Design’s Full Business Potential》的研究报告中指出，有3分之一参与调研的设计团队领导表示他们还在竭力为用户提供一致的流畅的体验。

所以无论公司为设计团体投入多大的资源，只有当所有的产品服务能够为用户解决问题，为他们带来连贯一致的体验，公司的竞争力才会提升。

Design System便是战略上重要的一环。这也是为什么越来越多的公司开始搭架Design System。Forrester的研究报告中所研究的385企业中有40%的的公司已经推出了它们自己的设计系统，并且被其他的项目团队所用，有46%的公司正在扩大设计系统使用率的路上。

很多我们熟知的公司也在近几年推出了他们的Design System，包括像Adobe，Altassian，Salesforce，Airbnb等等。

Adobe的设计系统Spectrum

二、什么是设计系统

设计系统是一系列可重用的组件和它们的使用指导文档，使用这些组件能够快速地开发不同平台的产品。在制作这些组件的过程中会考虑到公司的设计理论和Branding(颜色，文案，字体等等)，所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石(building blocks)和指导。

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications

——Design better

三、Design System和Style Guide以及Pattern Library的区别

Style guide和Pattern library其实是设计系统的两个组成部分，但除了它们，设计系统外还包括了一系列的标准来指导设计。这些标准记录了设计团队达成一致的一系列决定，比如我们如何选择控件，如何在不同的控件中选择。正是因为这些标准才确保了设计方案不仅仅只解决一个问题，而是能被复用。标准也是为什么用户能获得一致的体验的原因。

四、我们对Design System的误解

在我目前所参与的Design System的项目中，大部分时间是在跟不同职位的同事”推销”Design System，为了能得到他们的支持或是说服他们成为第一批使用Design System的项目组。

我的一个感受便是Design System最具挑战的并不是制作过程，而是得到其他同事和项目以及公司的支持。在”销售“的过程中，我也发现人们都Design System都有这样那样的误解，导致项目的推动受阻。

以下三点是比较常见的对设计系统的偏见：

1）Design System限制了设计师的创造力

非常意外地，这是很多设计师对Design System的看法。他们觉得Design System会限制他们的发挥，以致于他们不能去探索一些新的样式和交互方式。我个人觉得作为设计师我们不能仅仅为了有创意而去引入新的样式或交互方式。我们的设计都应该解决商业或用户的问题。对于那些产品还不成熟的公司，在组件库上的创意能带来的收益微乎其微。这也就是为什么我觉得设计师的创造力应该用在提升整个体验上。

Design System的存在可以减少很多不必要的工作，比如调整间距，对其元素等等。设计师有更多的时间来关注更全局的设计策略。

2）Design System只关乎设计，可由设计师独立完成

对Design System的另一个误解便是以为它仅仅是一些在设计软件中的可重复使用的components，所以可由设计师独立完成。

Design System作为公司design language的single source of truth，是需要来自不同角色支持和参与的。包括前端工程师，品牌市场，Accessibility专家和动态设计师等等。

3）Design System是一劳永逸的

很多人认为Design System的价值在于，只要完成就大功告成了。

但其实想要Design System成功，就需要像对待一个产品一样对待它，需要维护和改进。这可以包括两个方面，一个是对内部使用design system的项目组和同事，一种是对用户而言。Design System的项目团队应该定期收集内部使用Design System的同事以及产品用户的反馈，确保能把它们的反馈持续地更新到Design System里。

五、Design System的重要性

1）提高设计开发效率

这是Design System最显而易见的好处之一。因为组件库的可重用性，设计师和开发都不用从头设计开发一个组件。

Design System还让我们能够更高效地完成原型制作，更快地得到用户反馈。我还记得几年前我的日常工作中，很多时候都在做很多重复的工作。有了Design System，任何改动只需要在设计系统中进行，这减少了很多不必要的工作。

2）确保设计一致性，为用户提供连贯一致的用户体验

Design system的两个组成部分组件库和标准文档，都为公司的各种产品提供了单一真相来源(the single source of truth)。所以用户不会在公司产品中看到不同样式的按钮或是不同交互方式的搜索框。设计的一致性让用户能缩短的学习使用产品的周期，让他们能够预见他们的操作所带来的改变。

3）设计系统促进了公司内部的合作和交流

一个成功的设计系统是需要跨功能团队参与，例如设计师，开发团队，市场和品牌，文案，Accessibility专家。只有这样才能确保Design System能解决产品设计和开发中所遇到的问题。

设计系统因此促进了公司内部不同职位的合作和交流，这种文化的建立也会帮助公司更有效地推出新的产品或服务。

六、什么时候开始创建设计系统？

设计系统很有价值，但是这不代表所有的公司都需要一个Design System。设计系统的出现是为了让设计能够扩大规模，为了提供一种设计标准来供不同的设计师参考。

如果所在的公司出现了下面的两个特征，那就说明我们可以开始提出设计系统了：

公司有不同的产品，且都需要长期的开发和迭代
越来越的设计师加入公司

但如果你的公司没有长期需要开发的产品，或者你是公司唯一的设计师，这个阶段Pattern libraby和Style guide 应该是足够的。

七、设计系统项目中可能会面临的挑战

我相信每个设计师和前端工程师都能看到Design System的价值，但是在实际的项目中，却会面临各种各样的挑战。

1）Design System是非常繁琐耗时的项目

只有当设计系被当做一个项目来看待的时，它成功的几率才会更大。我们需要有策略地去”销售“它，有roadmap来指导团队，有相应的计划来让更多项目看到它的价值。在Design System成型以后还需要定期收集内部用户和产品用户的反馈。这些还仅仅是流程层面的，当设计师开始做组件时，也是非常耗时的工作。为了确保所设计的控件能解决一系列的问题，设计师需要考虑不同的使用场景，确保在设计软件中制作的控件有延展性，能被其他的设计师所用。

2）Design System需要支持者

很多大公司现在成熟的Design System都是从side projects开始的。因为公司在投入大量资源之前，都想看看Design System能给公司带来什么。所以Design System项目的初期其实是非常艰难的，因为一方面需要各种资源来启动项目，另一方面又需要像公司高层证明Design System的价值来获得更多的资源。

所以项目初期，获得不同项目和不同职位同事的支持是很重要的。让他们看到design system的价值，让他们愿意参与到Design System前期的制作，让他们成为design system的支持者。只有这样才能更快地推进Design System，以便被其他项目使用，从而展现它的价值。

一些公司发布的Design System：

Atlassian Design System

Lightning Design System

Spectrum, Adobe’s design system

Microsoft Design

Primer Design System

Shopify Polaris

参考链接：

Design system handbook

Forrester Report: Unlocking Design’s Full Business Potential | Adobe XD Ideas

感谢大家的阅读，下一篇将会讲讲如何开始一个设计系统的项目。