设计系统是所有的趋势，而Web组件是对它们的完美补充。但是，有什么大惊小怪的？

首先，让我们看看什么是设计系统和Web组件。

什么是设计系统？

为了回答这个问题，我从4个不同的来源中提取了每个来源的所有定义，并将它们合并在一起。

在这个过程中，定义设计系统的答案出现了两个不同的部分。它是什么，它做什么。

让我们看看这两个部分：

作为一个组织在产品团队、页面和渠道中的核心信息来源，设计系统

它的作用

设计系统可以：

在一系列产品中创造一致的体验

启用和管理设计和代码协作

减少冗余

它是什么

设计系统是以下各项的集合：

设计

作为UI库提供的代码

组合UI元素的模式

（交互）指南

一致的样式

设计人员和开发人员的标准工具

标准语言

标准工作方式

品牌价值观

共同的心态和信念

好吧，还不太相信……我为什么要使用设计系统？

使用设计系统有很多原因。以下是来自4个不同来源的理由，归纳为一个列表。

为什么使用设计系统？

主要原因如下：

·用户界面组件

设计的外观和感觉被系统地快速、大规模地转化为可重用的UI组件。

·沟通与协作

关于定义和设计规范的活文档的统一语言有助于整个组织的沟通和协作。

·品牌一致性

可视化更新可以在中心位置轻松管理和使用。

·平台对齐

Android、iOS和web共享设计和标准，同时允许主要设计与设计变体共存，以满足特定平台的外观和感觉。

·知识共享和贡献

中心指导方针和工作方式增加了知识共享并促进了内容贡献。双赢。

·北极星

一个明确的、中心的设计愿景和原则可以作为一个指导灯，帮助团队理解他们为什么要这样做。

·实验自由

当原子设计做得好时，核心UI元素——就像乐高积木一样——可以自由地尝试各种解决问题的方法。

·最新的

一个致力于设计系统的团队可以随时了解视觉趋势和新兴技术。

·同步

所有用户都会立即了解任何设计和代码更改。

·节省的时间

节省的时间是增值的，因为这些时间可以用于探索、了解用户的需求和构建酷的产品。

知道了。Web组件呢？

什么是Web组件？

让我们再次将答案分成两个不同的部分。他们是什么，他们做什么。

它们是什么

Web组件是一组基于4种Web规范的Web平台API：

自定义元素

为设计和使用新类型的DOM元素奠定基础。

阴影DOM

定义如何在web组件中使用封装样式和标记。

ES模块

以基于标准、模块化、高性能的方式定义JS文档的包含和重用。

HTML模板

定义如何声明在页面加载时未使用但稍后可以在运行时实例化的标记片段。

他们做什么

它们允许创建新的自定义HTML元素，并具有自己的属性、方法、封装的DOM和样式

太好了，所以我们基本上可以创建任何新的HTML元素，看起来、感觉和行为都符合我们的要求！

现在，我们开始看到使用Web组件构建设计系统的吸引力，该系统需要基本元素以某种方式进行外观、感觉和行为。

欢迎大家随时交流沟通，如果有关于UI界面设计公司方面的问题，欢迎关注我们。