编辑导语：设计系统的搭建可以帮助提升设计效率，推动产品开发，并一定程度上降低设计成本，推动设计开发上的一致性，也能协调设计团队的多项业务。本篇文章里，作者就设计系统的构成、优点等方面进行了总结，一起来看一下。

构建设计系统有助于将设计组件统一为一个有意义的实体，简化设计和开发过程，从而节省开发人员的时间。

但是，如果你浏览有关设计系统的文章，你可能会注意到其中大多数都只是告诉你如何创建一个系统。

本文以一种略有不同的方式介绍这一热门主题，不仅涵盖一般的设计系统，还涵盖我们作为 Shakuro 的开发和设计外包公司使用设计系统的相关原则所得到的经验。系统化的 UI / UX 设计方法可以在很多方面帮助我们创建更好的网站和应用程序，标题种提到的“更快”只是一个开始。

一、设计系统及其组成部分 What design systems are and what they are made of

一个设计系统是一套设计组件和规则，用来规范他们的使用并定义产品的理念。它听起来像是样式指南，但区别在于样式指南是静态文档，其目标非常明确——准确定义设计元素在各种场景，事件和媒介中的用法。样式库还有一个概念，从技术上来讲，它是 UI 组件的简单集合。

不同的设计师理解和定义设计系统的方式可能会有所不同。在本文中，设计系统将项目的样式库及其样式指南整合到一个实体中，将所有内容组合在一起并使其易于扩展。

产品的设计系统包括几个大的部分，具体数量和内容取决于具体公司或产品。

设计系统可能包含的组件有：

• 一组可调用的界面组件（换句话说，UI 工具包）例如图标、按钮、插图等。
• 使用这些组件的必要规则。
• 排版指南。
• 不同类型设备上的状态和行为规定。
• 动画和声音设计指南。
• 用户体验写作和品牌展示的规则，例如公司的价值观和品牌形象识别设计。

重要的是要注意，设计系统的目的是形成一个产品的全面图景，因此即使将实际的白色 #FFFFFF 颜色用于空白，而实际的黑色＃000000 颜色用于文本，也需要在文档中注明。

下面看一下我们的项目种设计系统的颜色部分：

设计系统概念诞生于 20 世纪中叶，但是如果更广泛地看待这个概念，可以追溯到中世纪。关于数字设计，第一次有意义的大规模网络统一的尝试是由谷歌发起的 Material Design。他们从 2011 年开始研究这个想法，并在 2014 年提出了一个真实的设计系统。从那时起，设计系统的主题开始特别受设计领域欢迎和讨论。

此外，系统化的概念对于实现前端和一般的 UI 时使用的组件方法来说是特别有意义的。React、Vue、Angular 和其他流行的前端框架都使用基于组件的范式。因此，即使是小型项目团队也要考虑创建设计系统，更不用说像 Airbnb、Uber 和 IBM 这样的大公司了，他们自己构建大型设计系统来加强和维护自己的品牌形象。

二、设计系统的优点 Benefits of using the design system approach for creating different products for different businesses

如果你对设计系统在现实生活中的样子感兴趣，你可能会发现一个设计系统的案例清单：包括上面提到的产品公司以及 Atlassian、Shopify、Spotify 和星巴克这样的公司。产品公司设计系统的目的是确保一种产品与另一种产品相似。

作为一家为许多不同客户设计和开发的服务公司，我们采用不同的方法，从设计系统中获得最佳效果，同时能够令团队规模较小。

与大型企业可能有 10-20 人的团队全职管理他们的每个系统不同，我们为每个产品设计一个系统，创建一种小型产品团队。在这种情况下，设计系统更像是一组规则和系统性元素的重复使用，而不是像产品团队通常做的那样，成为一个具有超级深度的完整案例。同时，我们保留了设计系统的主要特点，并利用其主要优势来节省时间和减少错误。

今天，任何网站或 APP 都是一个商业问题的解决方案，需要一个有条不紊的方法。因此，系统的方法能够给我们带来以下几处优点。