近些年来，一些世界领先的科技公司相继在全球范围内分享了他们的设计条例和规范。而其中最典型的例子就是谷歌的Material Design设计语言规范。尽管与Material Design类似的规范，还有Yelp的Styleguide, 苹果公司的Human Interface Guidelines以及美国政府使用的U.S. Web Design System等等，所有这些规范都逐渐被人们称做“设计体系”。

那么，什么是设计体系呢？

设计体系是各种设计条例，规范以及原则的集合， 一般在设计和编程过程中得以运用，实现和完善。而且，无论是简单按钮的设计，还是单个网页应用的设计等等，设计体系往往通过三种作用不一的属性，帮助团队实现设计的一致性和系统性：

条例：必须在设计中添加视觉或语言提示，将用户指向页面的CTA按钮。

规范：拥有三种特色类型：主，次和默认类型。

原则：适用于特定的人机交互。

那么以下我们就以按钮设计为例，讲解这三种属性具体的应用和表现：

图中所示按钮通过色彩和文本的变化，充分的体现了设计相关条例和规范。例如图中“提交表格”，“删除文件”和“通知团队”等按钮设计，就充分的运用和体现了以上三种属性。因为这些按钮设计都明确的指向了特定的用户行为。而设计体系所包含的组件远比这些按钮设计复杂，它们应用和实现以上三种属性的同时，也极有助于团队设计和创建更优的软件应用。

设计体系等同于Style Guides吗？

答案当然是否定的。Style Guides主要集中于你所猜测的设计样式，一般包含色彩，字体，商标，品牌等属性。它们时常为设计和营销团队所使用，因为Style Guides包含了他们最初沟通的品牌。 而设计体系不仅仅是视觉层面的展现，更多的关注整个设计的良性循环。

设计体系类似于Pattern Libraries吗？

答案也是否定的。Pattern Libraries一般是指设计中可重复使用的组件和交互的存储库，例如按钮，模型以及页面布局相关类型的存储。而且，由于Pattern Libraries非常关注和依赖设计形式和外观，它也与Style Guide密切相关。

设计体系与前端框架也相似吗？

一般而言，一个前段框架可以是一个设计体系，但一个设计体系却并不一定会是一个前段框架。为什么呢？答案很简单。因为前段框架是更利于开发者的设计，能够为开发人员提供各种技术指导。如此，反过来，就必然对于非技术人员来说，就会相当的不利。

而且，随着基于组件的JavaScript 框架设计的兴起，比如Vue和React等，设计体系也同样开始关注组件设计。尽管，可能其中的一些框架存在缺失音调，声音和消息的传递等元素。

将设计体系视作是一个良性的循环体系

设计体系是设计样式，组件以及声音的集合。例如，MailChimp，作为一个邮件推广竞争平台，不仅拥有非常全面的 styleguide, 而且还专为邮件发送和接收创建了独立的指南（名为Voice and Tone），以集中规范其邮件声音和音调。而设定这一指南的目是为了展现其同理心，关注部分弱势群体（例如残疾人群）并提供更加全面贴心的使用体验。MailChimp就是使用这些规范为其平台和服务设计统一的声音。

为什么设计体系日益兴起呢？

设计体系的理念早就已提出，例如1975年美国宇航局提出的图形标准手册。 然而却直到最近，才有一些公司，由于设计与业务的不协调发展，才开始慢慢注意到设计体系。为了打造良好的用户体验，一些公司的内部团队逐渐认识到设计体系的重要性，坚持以用户为中心的指导，使用系统的方法，努力打造干净，一致和贴心的设计。

如前所述, 设计体系不仅仅是静态的样式指南。而且随着公司日益发展成熟以及用户需求的不断变化，设计体系的应用，拥有很多典型生动的实例，比如孤独星球的样式指南。它背后的设计团队就有意识的在提升其用户体验上下功夫。因为他们深深的知道“过时”的设计会对他们的业务增长多么的不利。

设计体系是如何让设计师和公司受益的呢？

设计体系通过帮助公司内部团队设计和创建统一，稳健的设计模式，让他们真正的受益，提高工作和协作效率。

具体而言，对于设计师来说，他们可以将用户界面分解成更多细小的部分，例如组件，而不是作为一个完整的网页实体进行设计。 这种基于组件的设计模式或理念允许设计师更加轻松简易的定义和更改界面组件。而对于开发者而言，他们可以更容易的在一定范围内创建一定风格的组件。

设计体系给公司内部团队带来的有利影响，远远超过他们的预估和想象。它们能够加深不同公司团队，尤其是设计和开发团队，之间的交流和理解。Iran Feather, 一名来自孤独星球的前工程师，他认为设计体系是“将设计师和开发团队紧密联系在一起的协作工具”，能够极大的提升工作效率。

而且，除了为公司现有团队带来福利，设计体系也为新员工提供更好的入职体验。作为新设计和开发员工的入职学习资源，这些设计体系和规范能够有效地帮助他们熟悉和定位公司设计和开发运作模式，更好的适应和融入公司。

设计体系是否有官方标准呢？

答案还是否定的。由于并不是所有的公司都存在相同的问题，设计体系并没有官方的标准可以遵守。例如，以上谈及的孤独星球设计就十分依赖想象力和设计元素来吸引用户。通过设计和创建符合旅游地特点的图标以吸引用户注意。

而Salesforce的Lightning Design System则不一样，它包含了设计模式，组件以及设计指南等。尽管并未囊括任何JavaScript编程代码，但也能够轻松的帮助公司团队根据选择使用所需的任何前端开发框架。谷歌的Material Design 则包含了交互运动指南，因为他们希望为用户提供更加自然流畅的交互动画之类的“愉悦”体验。然而，我最喜爱的，IBM的Carbon Design System，不仅涉及设计模式和指南，还提供了动态的“Sandbox”定制组件设计。

总之，各类设计体系并不相同，且也没有正式的标准供各公司参考和遵守。

如何创建设计体系呢？

既然设计体系如此重要而有效，那么我们要如何为公司构建设计体系呢？首先，将公司设计师，开发人员和行业专家们召集起来。然后对整个设计体系中可能涉及的色彩，字体和组件进行盘点讨论。最后，开始构建设计体系。

原文地址：https://medium.muz.li/what-is-a-design-system-1e43d19e7696

作者：Sylvee L.