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

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

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

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

了解设计系统

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

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

为什么要创建设计系统?

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

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

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

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

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

合作的必要性

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


设计系统创建的过程

进行设计审核

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

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

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

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

定义基本设计元素

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

要考虑的要素包括:

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

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

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

要考虑的组件包括:

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

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

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

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

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

例子:

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

还有设计模式

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

示例包括:

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

创建文件

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

要考虑的部分包括:

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

其他注意事项和参考

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

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

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

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

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

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

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

不要让完美阻止你

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

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

Posted by:Bruce

Hi! I’m Bruce Wu UI/UX Design, Product Designer, Freelance👋 Some Availability For Projects. My superpower is to channel my interdisciplinary skill sets to create appealing and delightful experience for users in meaningful ways, to make people's lives easy and simple.