设计系统 创建指南

https://wubin.design/figma/design-system-creation-guide.html

创建像本文这样的内容需要花费大量的研究和精力，对我来说这是十分宝贵的经验。

本文分为三个部分：

1. 了解设计系统（它们是什么，何时开始创建）
2. 创建设计系统（创建过程）
3. 其他注意事项（其他要考虑的概念和参考）

*在本文中，我使用“产品”一词作为总称来描述网站，应用程序，在线服务等。
我创建了一个基本设计系统·文字部分的开始，以说明本文中的概念。随意下载 Figma文件，并根据需要使用它。

了解设计系统

设计系统是一种统一的语言，可以帮助团队一致地解决问题。
设计系统的各个部分可以包括：指导原则、品牌元素、声音和语调标准、代码标准、UI库。

为什么要创建设计系统？

设计系统统一了产品开发并有助于防止技术负债（Technical debt）。建立设计系统起初可能会使您放慢速度，但随着您扩展团队和产品，它会带来很多红利。

设计系统的优点：

• 产品官方性的唯一来源
• 提高产品一致性
• 节省成本/时间

  什么时候应该创建设计系统？

  我喜欢等到产品和团队有时间进行开发之后再创建设计系统。但是，大部分人人喜欢从完善的设计系统入手。
  这个没有正确的答案，但是如果您不创建设计系统，那么产品不一致和效率低下会不断加重，从而破坏团队生产力和士气。如果您开始注意到这种情况，可能是时候让团队共同创建一个设计系统。

  合作的必要性

  获得采纳的最好方法是包容。确保让所有设计产品的人员参与该过程。并不是每个人都要成为贡献者，但是每个人都必须有发言权。

设计系统创建的过程

进行设计审核

1. 组织您的团队以对当前产品的组件进行截图。确保查看产品的所有属性，例如帮助站点、内部工具、不同的应用程序等。
2. 使用Google幻灯片之类的演示软件来整理屏幕截图，或考虑打印每个屏幕截图并将其固定在泡沫芯板上。
3. 查看每个类别寻找不一致的地方，并标注好需要与团队一起改进的地方。

考虑收集您所有产品的设计组件，并进行记录。
这是一个令人大开眼界的过程，展示了创建设计系统的必要性。
将屏幕快照分为以下类别：

• 按钮
• 导航
• 样式
• 内容
• 表单
• 列表
• 品牌
• 图标
• 颜色
• 布局
• 其它

整理产品的用户界面常常会让人感到尴尬。令人惊讶的是，在产品的整个生命周期中实现了多少种不同的按钮样式和文本大小。

定义基本设计元素

设计元素是用户界面的基本结构块。创建全面设计系统的第一步是定义其基本级别的元素。这些元素结合起来确定产品的组成部分。
要考虑的要素包括：

• 颜色
• 布局
• 大小
• 间距
• 栅格系统

• 其它

  定义设计组件

  设计组件是用户界面的功能部分。组件是根据设计元素创建的，并以各种方式组合在一起进行创建。
  将基本设计元素组合在一起，方便后面创建必要的UI组件。
  要考虑的组件包括：

• 样式

• 按钮
• 标签
• 图标
• 提示
• 其它

上面的示例显示了设计组件类别的示例，包括按钮、表单和选项卡。
不要忘记为每个组件包含不同的状态。例如，当用户单击、轻按、输入前和输入后的状态。

定义视图（屏幕、页面、布局）

定义设计元素和组件后，可以将它们组合以创建视图。
设计元素和组件可以一起创建视图。上面的示例显示了一个注册表单，其中包括选项卡、表单输入、按钮和排版。
例子：

• 仪表板
• 注册表格
• 大致外观
• 细节
• 其它

上面的示例显示了设计元素和组件如何组合以创建注册视图。

还有设计模式

设计模式包括常见的用户流程和交互。
示例包括：

• 筛选
• 创作流程
• 逐步披露
• 连续滚动
• 入门演示

• 其它

  创建文件

  在创建设计系统时，必须记录对元素、组件、视图和模式的想法和最佳实践。文档还可以包括您的指导原则和代码段。
  要考虑的部分包括：

• 设计选择背后的原理

• 实施准则
• 做与不做
• 代码段

  其他注意事项和参考

  伟大的设计系统需要不断改进

  您的设计系统必须与您的产品和团队一起适应和发展。认为它是一种活的物体。它永远不会是完美的，它永远在增长，它需要爱。

  最终，您可能需要将一个团队专用于此

  如果您的公司发展到足够大的规模，则可能有必要专门组建团队进行维护和进一步发展。
  首先，设计系统由几个人兼职维护。后来，有人全职分配给它。最终由设计师、工程师和产品经理组成的整个团队拥有了它。
  当您的公司规模较小时（如几个人一样），您的团队可能不需要设计系统。当您进行迭代并使其适应产品市场契合度时，它甚至可能让你感到优点头大。
  一旦团队成长并致力于产品的各个部分，对某种类型的系统的需求就变得显而易见。当您的公司有许多团队和部门从事不同的计划时，必须有一个设计系统。

  不要让完美阻止你

  创建设计系统是一轻松的工作。不要让它的复杂性和时间投入导致拖延。定义基础，并随着产品的增长让其余部分逐步完善。当事情变得有些疯狂时，请花时间完善它。最难的部分是开始！

  优秀的设计系统示例可点击这里