设计系统：它是什么、为什么以及如何创建它

设计系统的主题似乎已经从各个方面得到了考虑：您可以找到许多关于设计系统的文章、帖子、报告和其他材料 创建设计系统。尽管如此，每个遇到这个术语的人都会有很多疑问。我们将尝试详细回答主要问题：

• 什么是设计系统？
• 这是什么呢？

什么是设计系统？

设计系统是一个包含可视化组件、代码库和使用指南的结构。

通常，新手设计师会犯这样的错误：将设计系统视为只是一个 UI 套件（包含图形界面元素、版式和颜色的文档），从而简化了概念。

设计系统由三个层次组成：

A 用户界面套件 是为其创建设计系统的产品的视觉语言。这些是颜色、字体、图标、按钮、项目符号、切换开关、滑块、图像、动画。这些元素各不相同，具体取决于数字产品的具体情况。所有这些都有助于创建用户交互的界面的可见部分。

该框架是一个为每个元素编写的代码库，以及动画、标签和导航标签的插件。

指南 是一组模板和规则，用于使用组织工作流程的元素。由于有了指导方针，设计人员不再参与简单的任务，但开发人员立即参与其中。

例如，指南指定网站上弹出窗口的参数：文本的缩进、标题和正文文本的位置和大小、按钮的位置以及窗口的外观更多文字。

设计系统的类型

没有单一的分类，但专家区分了两种类型的设计系统——开源和闭源。

在开源系统中，任何公司都可以使用材料并根据自己的项目进行调整——更改按钮颜色、字体和图标。例如，在 Ant Design、人机界面指南和 Material Design 系统中。

闭源设计系统通常是为特定公司或产品创建的。这些材料要么是完全封闭的材料，仅供员工访问，要么是部分开放的。

如何创建设计系统

设计系统的开发基于原子设计的原理。原子设计是一种包括五个层次的设计元素的技术：原子、分子、有机体、图案和页面。

设计系统结构：

• 原子 是最小的组件：按钮、图标、输入字段和字体。
• 分子 是几个简单元素的组合：两个按钮、一个标题和一个输入行、一个通知栏、一个复选框和文本。
• 生物 是完整的组件：站点标题、授权表单、产品卡和通知横幅。
• 模板 – 没有内容的页面布局：菜单、网站外观。
• 前往 是充满内容的页面。

一般算法如下所示：

• 选择颜色和字体，设置模块化网格，然后选择动画、图像和声音。
• 创建基本的界面元素。
• 设计元素组合和布局。
• 创建元素列表以及规则。在指南中，指定元素是什么、它在哪里使用以及它解决什么任务。

通常，设计系统不是从头开始创建的，而是基于已经开发的材料构建的：UI 套件、指南或品牌手册。

为什么需要设计系统？

与每个 IT 产品一样，回答“设计系统的用途是什么？”这一问题至关重要。或者，正如店里的一些同事所说，“那又怎样”？

这个问题的答案将帮助您了解产品的价值。从我们上面的描述中已经可以看出一部分了。但让我们把它分解并更深入地研究一下。

自动化和干细胞工程

自动化提供了最明显的好处。设计系统将帮助您实现操作自动化，从而腾出时间来处理其他职责。

迭代性

能够继承并自动应用对设计系统元素的修改对于产品团队来说是一个有价值的工具。您可以在一个位置快速进行装饰性甚至重大更改。通过这种方式，您始终可以增强产品。

持续一致

一致性是指产品中执行相同功能的对象和实体应以统一和相似为目标。

当我们在产品中使用类似功能时，它们会变得熟悉和方便：我们本能地了解按钮的工作原理和外观，以及它的位置。

我们希望每个人都能从这篇文章中学到一些有价值的东西。我们再次相信，撰写文章可以构建知识并激发更多的学习。