分类
Articles

设计系统 创建指南

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

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

本文分为三个部分:
  1. 了解设计系统(它们是什么,何时开始创建)
  2. 创建设计系统(创建过程)
  3. 其他注意事项(其他要考虑的概念和参考)

*在本文中,我使用“产品”一词作为总称来描述网站,应用程序,在线服务等。

我创建了一个基本设计系统·文字部分的开始,以说明本文中的概念。随意下载 Figma文件,并根据需要使用它。

了解设计系统

设计系统是一种统一的语言,可以帮助团队一致地解决问题。

设计系统的各个部分可以包括:指导原则、品牌元素、声音和语调标准、代码标准、UI库。

为什么要创建设计系统?

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

设计系统的优点:
  • 产品官方性的唯一来源
  • 提高产品一致性
  • 节省成本/时间

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

我喜欢等到产品和团队有时间进行开发之后再创建设计系统。但是,大部分人人喜欢从完善的设计系统入手。

这个没有正确的答案,但是如果您不创建设计系统,那么产品不一致和效率低下会不断加重,从而破坏团队生产力和士气。如果您开始注意到这种情况,可能是时候让团队共同创建一个设计系统。

合作的必要性

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


设计系统创建的过程

进行设计审核

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

将屏幕快照分为以下类别:

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

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

定义基本设计元素

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

要考虑的要素包括:

  • 颜色
  • 布局
  • 大小
  • 间距
  • 栅格系统
  • 其它
定义设计组件

设计组件是用户界面的功能部分。组件是根据设计元素创建的,并以各种方式组合在一起进行创建。

将基本设计元素组合在一起,方便后面创建必要的UI组件。

要考虑的组件包括:

  • 样式
  • 按钮
  • 标签
  • 图标
  • 提示
  • 其它
上面的示例显示了设计组件类别的示例,包括按钮、表单和选项卡。

不要忘记为每个组件包含不同的状态。例如,当用户单击、轻按、输入前和输入后的状态。

定义视图(屏幕、页面、布局)

定义设计元素和组件后,可以将它们组合以创建视图。

设计元素和组件可以一起创建视图。上面的示例显示了一个注册表单,其中包括选项卡、表单输入、按钮和排版。

例子:

  • 仪表板
  • 注册表格
  • 大致外观
  • 细节
  • 其它
上面的示例显示了设计元素和组件如何组合以创建注册视图。

还有设计模式

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

示例包括:

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

创建文件

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

要考虑的部分包括:

  • 设计选择背后的原理
  • 实施准则
  • 做与不做
  • 代码段

其他注意事项和参考

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

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

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

如果您的公司发展到足够大的规模,则可能有必要专门组建团队进行维护和进一步发展。

首先,设计系统由几个人兼职维护。后来,有人全职分配给它。最终由设计师、工程师和产品经理组成的整个团队拥有了它。

当您的公司规模较小时(如几个人一样),您的团队可能不需要设计系统。当您进行迭代并使其适应产品市场契合度时,它甚至可能让你感到优点头大。

一旦团队成长并致力于产品的各个部分,对某种类型的系统的需求就变得显而易见。当您的公司有许多团队和部门从事不同的计划时,必须有一个设计系统。

不要让完美阻止你

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注