理解设计系统是什么，在什么时间应该整理它？

一套系统中包含交互规范，品牌规范，声音规范，文案规范，代码标准以及一个UI库。什么时候应该建立一套设计系统？我个人比较喜欢等到产品和开发团队开发之后再开始着手做设计系统。如果你已经注意到在团队中有这个问题的存在，那么就应该

本文包含3部分：

了解设计系统（知道什么是设计系统以及何时应该组织它） 创建设计系统（创建过程以及涉及的内容） 注意事项（需要考虑的其他事项和参考）

我用一个最基本的案例来说明。

01 了解设计系统

设计系统可以通过统一设计语言来帮助团队解决设计一致性问题。 系统包括交互规范、品牌规范、声音规范、文案规范、编码标准和UI库。

02 为什么需要创建设计系统？

设计系统可以统一产品开发，节省开发成本。 建立设计体系可能一开始会降低设计效率，但会给你的团队和产品带来双倍的回报。

设计系统的优点：

03 什么时候应该建立设计体系？

我个人更喜欢等到产品和开发团队开发完成后再开始设计系统。 然而，有些人更喜欢从一开始就做一个设计系统。

这里没有标准答案，但如果你不知道如何开始，不一致和低效率持续存在，就会严重降低生产力并使团队士气低落。 如果您在团队中注意到了这个问题，那么是时候开始与团队一起定义设计系统了。

04 合作的必要性

最佳合作的前提是开放的心态。 确保所有产品利益相关者都参与该过程。 不是每个人都需要成为积极的贡献者，但每个人都必须有发言权。

05 设计系统的创建过程 1. 对设计进行全面审查

1）组织设计团队对当前产品界面进行截图。 确保您可以查看产品的所有属性，例如网站、内部工具、不同的应用程序等。

2）使用 Docs等演示软件放置上一步的屏幕截图，或者考虑直接打印这些屏幕截图并将其粘贴到白板上。

3）检查每个类别，观察不一致的地方，并与团队讨论，分析哪里有改进的机会。

考虑收集产品的所有设计组件并将它们放在 PPT 中。 这通常是一个非常令人大开眼界的过程，您会意识到创建设计系统的必要性。

收集到的截图可以分为以下几类

对产品用户界面的彻底清查常常会发现令人尴尬的不一致之处。 看到产品的整个生命周期中使用了如此多不同的按钮样式和文本大小，真是令人大开眼界。

2. 定义基本设计原子

设计原子对于界面设计来说就像建筑物中的砖块。 设计综合设计系统的第一步是创建这些基本设计原子。 这些元素的组合决定了产品的性能。

基本设计原子包括：

3. 定义设计组件

设计组件就像界面设计的功能模块。 组件由设计原子组成，根据各种项目需求组合在一起。

需要考虑组件化的模块包括：

此示例说明了组件的类型，包括按钮、表单和选项卡

执行此操作时网站设计，不要忘记每个组件的不同状态。 例如，当用户单击并输入时，输入框如何变化。

4. 定义接口

定义设计原子和设计组件后，您可以开始使用它们来设计界面。

设计原子和设计组件相结合来设计界面。 此案例显示了一个登录框，包括选项卡、表单、按钮和副本布局。

例子：

这个案例说明了设计原子和组件如何形成界面

5.添加设计模式

设计模式由常见的用户流程和交互形式组成。

案例包括：

6. 创建文档

在构建设计系统时，您应该记录原子、组件、视图和模式的最佳实践。 文档还可以包括指南和代码片段。

包括：

其他深思熟虑的设计系统将会发展

设计系统必须随着产品和团队不断适应和发展。 将其视为一个生命体。 它永远不会完美。 它将继续增长并需要您的关注。 最终，一个团队可能需要致力于维护它。

如果公司继续发展，可能需要一个团队来维护并进一步迭代。

最初，设计系统只需要少数人花部分时间兼职维护。 后来需要专门的人专职维护，直到最终形成一个由设计师、工程师、产品经理组成的庞大团队，不断改进和维护。

另外网站设计，当公司规模较小时，比如只有几个人，团队可能根本不需要设计系统。 它甚至可能阻碍产品开发。 此时最需要做的就是不断迭代，让产品适应市场。

一旦团队成长并开始将工作划分为越来越多的细节，对某种类型系统的需求就变得越来越明显。 当公司有许多团队和同事从事不同的任务时，设计系统是必须的。

不要让完美阻碍你

创建设计系统并不是一件困难的任务。 不要仅仅因为它很复杂就一直推迟它。 只需定义基本设计原子，然后让其他部分随着产品的变化而发展。 当事情开始变得复杂时，多花一点时间来完善它。

最难的部分是开始。