关于设计系统,所有你需要知道的全在这里「译文」

关于设计系统,所有你需要知道的全在这里「译文」

原作者:Audrey Hacq

原文于2018.05.23发在Medium 请在这里戳英文原文链接

翻译如有错误,欢迎指正。


设计系统是我目前每天工作的核心部分... 从我周边的人每天聊的东西来看,似乎很多人的工作重心也在设计系统上。

去年读完Alla Kholmatova的书,我有幸在三月(2018.03)参加了关于设计系统的第一届欧洲会议。在那次会议之后,我更加坚定的觉得,每个产品和每个品牌在未来都会使用设计系统,不管是简洁的还是全面的,严格的还是宽松的,单独的还是跨平台的...

什么是设计系统?

什么是设计系统?我一直听到不一样的解释,那让我们从什么不是设计系统开始吧:它不是一个Sketch库,不仅仅是一个样式库或模式库。实际上,它包含所有这些,甚至更多别的东西。

设计系统允许团队设计,理解,和开发一个产品的所有元素。它是唯一的真相源。

所以设计系统不是单一的交付物,是一整套交付物。设计系统会随着产品,工具和新的技术一起不断的进化。

Jina Ann在这次会议中是这样完美诠释设计系统的:

设计系统是由有形的和无形的元素组成的。有形的东西像是给设计师和工程师使用的工具,设计模式,组件,指南等等。无形的,但是通常最难的事情是面对一些抽象的东西,比如品牌价值,工作中分享的方式,思维方式,共有的信仰...


样式指南和模式库有什么不同?

你现在应该很清楚的知道,样式指南和模式库只是设计系统交付物中的一部分。

样式指南 - 由名字可知,负责图形样式(颜色,字体,插画...)和它们的使用

模式库 - 主要用来整合功能性的组件和使用。

如今的设计系统大部分包含这两者,就像Shopify的设计系统中一栏叫“视觉”,是我们说的样式指南,一栏叫做“组件”,是我们说的模式库。

Shopify - Polaris的样式指南和模式库


为什么我们现在开始关心设计系统了?

想要分解设计和组件已经不是什么新鲜事了,但是我们看到这个趋势在过去几年内迅速上升。越来越多的公司开始以数字支持为主了,甚至平面打印的指南都不存在了。

在过去很长一段时间内,数字的东西被当成是副业:我们过去常常做平面打印的指南,然后额外的做一些数字化的指南。谁曾经收到过一本300页的纸质指南,里面只有6页是关于数字化的呢?我收到过 ‍♀️然后作为一个设计师,这绝对不是我想要的。

我们需要一个共同语言去在实体和数字间架起桥梁,并且这个共同语言需要随着时间而进化。设计系统最早是由图形指南衍生的,但是设计系统更加成熟并且和团队的工作流高度集成。现在也有工具供我们构建和分享组件系统啦。

设计系统包含哪些东西?

设计系统的本质目的就是主导团队的工作。所以我们要问自己的第一个问题不是“我应该将什么放进我的设计系统里面?” 而是 “谁会使用这个设计系统,会怎么使用?”

一旦我们的第一个目标确认并且也大概知道什么是已经在公司内部存在的(什么行得通,什么行不通?团队对这个话题的成熟度在哪个层次?已经存在的工具有哪些?...)我们就容易得知从何开始了。

#1 目标和共同价值观

我们的目标是什么?为什么?怎么做?

在开始任何事前,保证整个团队都清楚的知道共同的目标是什么。这样有助于建立一个清晰的愿景,然后每个人都朝相同的方向努力。目标会随着时间不断的进化,这样很正常,但是我们需要保证目标变化时,大家心里都有数。

基于我们的品牌目标下,价值观会像我们的理想一样指引我们前进。我们需要确保我们正在做的东西没有违背我们核心的价值观。

除了这些品牌和产品价值之外,我们也可以定义一些团队的价值,这样每一位协作者都能齐心协力。

ASH团队创造的他们核心价值的海报


#2 设计原则

该网站集合了很多大公司的设计原则和方法

首先要牢记于心的是:设计原则远远不只是指产品的视觉因素...

设计原则是一些用来帮助团队到达产品最终目标的指引性话语,它会帮助团队去做一些有意义的设计决定。

我会拿Medium作为例子。他们一个设计原则是“方向大于选择”。基于这个设计原则,相比于设计一个常规的可以随意选择颜色和字体的文字编辑器,Medium选择做一个非常简单的。这一个设计决定让作者更好的专注于文章的内容而不是视觉因素。

设计原则必须要指导设计选择。


#3 品牌识别和语言

Shopify的品牌识别

定义品牌识别的时候应该本着和策略以及品牌目标一致的原则。Alla Kholmatova说到了感知模式,如下:

  • 颜色
  • 字体
  • 空间
  • 形状
  • 图标
  • 插画
  • 照片
  • 动效
  • 声调口气
  • 音效

如果把品牌比作语言,上面列的那些就像是字母表,字母表是很好的入门知识,但是并不代表学了字母表你就能讲一门语言。我们需要使用字母表去组成一些单词,然后用单词组成句子。就像是语言中需要语法和动词的变化,这些品牌元素也需要一些规则。

在我们的设计系统中,这些规则在指南具体化了,比如建议做的和不建议做的,好的使用例子。这样可以保证设计团队可以使用语言中的“正确的组合”,从而让品牌独特并且具有识别性。

@Backelite的品牌指南


#4 组件和模式


组件和模式是设计系统的核心。所有我们前面提到的元素会帮助我们去创造组件和模式,并且呈现一致的体验。

组件就像是Lego积木。设计师会在Sketch中使用组件,工程师也会直接在代码中使用它们。组件的功能行为必须详细的被描述清楚。

模式的作用是让我们在整个产品中用一个有逻辑并且一致的方式去使用组件。

下面的图片中,我们可以清晰的看见组件在技术功能文档中被详尽的描述清楚了,而模式会给出该如何使用组件的建议:

模式和组件 ©Nathan Curtis

如果你在想应该给你的系统优先开发哪个组件,你可以试一下组件优先级工作坊

最佳实践

深挖一些通用的最佳实践案例,基于产品和团队成熟度,从中提取那些行之有效的最佳实践。

最佳实践会帮助团队形成并且开发他们的技术能力。

BBC设计系统的“怎么做系列”

哪一种设计系统?

对于每个团队或者产品,几乎对应着一种设计系统。为了定义我们自己的设计系统,我们需要问问自己这些问题:

  • 多少人会使用这个系统?
  • 他们是做什么的?他们对这个设计系统的了解足够成熟吗?
  • 我们要将设计系统用在多少个产品上面?多少个平台上?多少种不同的技术?
  • 对于不同的产品,我们需要哪种程度的一致性?

问答所有这些问题有助于定义一个最合适的设计系统。

Alla Kholmatova的书中给了我们一些灵感。

严格还是宽松?

左边是Airbnb / 右边是TED

严格的系统需要一个全面具体的文档,并且该文档需要在设计师和工程师中完全同步。往系统中添加新模式的过程会非常严格。一个严格的系统还需要涉及面广到覆盖团队会遇到的大部分使用场景。

宽松的系统会留出更多实验的空间。这样的系统一方面给团队提供一个框架,另一方面也保留一些自由发挥的余地。关于产品的特定需求,设计师和工程师可以自行决定是否遵循设计系统。

从我的经验来看,我们不得不从严格和灵活之间找到一个平衡点:非常严格的系统可能会让不想使用设计系统的设计师和工程师感到反感。另一方面,如果一个设计系统太宽松了,我们还能叫它设计系统吗?

模块化还是集成式?

模块式系统和集成式系统 ©Alla Kholmatova

模块化的系统由可交换的和可重复使用的部分组成。它对于需要快速扩展的项目来说非常合适。坏处是想要模块既能一起使用也能分开使用,这一点特别困难。这种系统尤其适合大型产品像是电商类,金融类,和政府网站类。将模块化设计和原子设计一起应用会非常有趣。

集成式的系统适用于独特的情境。它由不同的小部分组成,但是不同的小部分不能互换。这种系统适用于重复模块极少和视觉方向频繁变动(作品集,橱窗展示,营销活动)的产品。

中心式还是分布式?

设计系统对于组织机构最重要的是进化能力和可扩展性。在这篇文章里,Nathan Curtis详细介绍了不同类型的模型。这是其中两种:

中心式模型中,一个团队负责设计系统的进化。该团队负责促进其他团队的工作,确保设计系统能覆盖大部分需求。

分布式模型中,来自多个团队的多个人会负责设计系统的进化。因为每个人都有参与感,所以设计系统可以更快的被采用,但是团队的负责人需要对设计系统有个整体的把控。

无论上述哪种情况,我建议让每个人都参与其中,大家一起提建议改进设计系统。

多维度衡量你的系统

为了定义出我们想要的系统,我们使用了三种衡量维度:

Airbnb:一个严格,模块式,中心式的设计系统

好的设计系统例子

以下是我最爱的设计系统

Material design: 导航极简。给设计师和工程师提供的工具很赞。

Atlassian: 非常详尽。

Polaris: 来自于Shopify,该设计系统和设计师还有工程师的工作流完美结合起来了。

IBM:设计语言做得很好。

最后的话

一个设计系统是一个完整的产品,它会帮助项目成员去打造其他的产品。对于每一个好产品,它们都有自己的待办事项列表,以不断迭代的风险工作,并且把使用者(设计师,工程师,产品负责人)放在中心。

设计系统越是和设计师以及工程师的工作流整合的好,就越是有效。

一个集成的好例子是Sketch的插件Polaris,Polaris在Sketch中直接显示了系统的组件和文档,因此设计师在概念阶段想要的东西就一应俱全了。

来自Polaris的一个叫Telescope的Sketch插件

然后所有的这些只是一个开始。

我十分相信未来会有很多好的技术革新给我们的生活上的便利,也会让我们专注于我们产品的体验和我们的用户。


参考链接

Alla Kholmatova的关于设计系统的书

Nathan Curtis的每一篇精彩的文章

Jina Anne的会议和著作

这个库里面也有一些好的设计系统的例子。

感谢阅读。

发布于 2019-11-09

文章被以下专栏收录