【译文】关于设计系统你需要知道的一些事

tjyuanpeng

程序员 / 前端技术 / javascript

原文链接：

设计系统已成为我每天工作中很关键的一部分内容，从我跟其他人的讨论来看，似乎很多人都是这种情况;)

去年(2017)，我阅读了 Alla Kholmatova 的书，并且很荣幸参加了四月在欧洲举办的首届设计系统大会。所有这些使我更加坚信，未来每个品牌每个产品都会使用设计系统，或简单或全面，或严格或松散，或单一或跨平台…

什么是设计系统

关于设计系统，我听过好多定义。所以让我先说一下什么是设计系统，不是sketch库，更不是样式指南 (style guide) 或者模式库 (pattern Library)。事实上，设计系统包含的内容比上面说的更多

设计系统是一个聚合团队设计、认知、开发产品所需要的所有元素的唯一来源

所以设计系统是一组可交付产物。它会随着产品、工具和新技术的发展不断迭代。

正如 Jina Anne 在大会上描述的那样，设计系统分别由有形的元素和无形的元素组成：

给设计和开发人员的工具，模式 (pattern)，组件，规范 (guidelines)
品牌价值，工作方式，思维方式，共同理念等一些难以描述的抽象元素

样式指南(style guide) 还是模式库(pattern Library)：有啥差异？

现在你应该很清楚了，样式指南(style guide) 和模式库(pattern Library) 只是设计系统的交付产物之一

样式指南(style guide) - 正如它的名字，重点在图形样式（颜色，字体，图形）以及它们的用途

模式库(pattern Library) 重点关注功能组件以及他们的用途

大多数设计系统同时包含两者，比如 Shopify： “视觉(Visuals)” tab页是它的样式指南(style guide)， “组件(Components)” tab页是它的模式库(pattern Library)。（译者注：shopify已经把visuals改成design啦）

Shopify — Polaris: 样式指南(style guide) 和模式库(pattern Library)

为啥要说这个？

把设计和组件分开来呈现并不是最近才提出的想法，但是过去几年这种趋势更加流行了。越来越多的公司都开始以数字技术来提供图形指南(Graphic guidelines)，甚至不再印刷纸质文档了。

长期以来，数字化内容指南一直被当作设计规范的副产品：我们通常用纸质图形指南(Graphic guidelines)来指导设计出版物，额外的指南(guidelines)来做数字化内容。有谁收到过300页的纸质图形指南(Graphic guidelines)，但是关于数字化内容指南(guidelines)只有6页的情况？反正我遇到过，作为一个设计师，这不是我想要的结果！

我们现在必须发展出一套共享的描述语言，用来抹平纸质出版物和数字化内容的区别。设计系统(Design System) 是直接从图形指南(Graphic guidelines)演进而来的。但它更成熟，更贴近现有团队的工作流程。我们现在也有了工具去构建共享的系统组件

具体内容是啥？

设计系统的基本目的是促进团队的工作。因此，我们需要问自己的第一个问题不是“我应该在设计系统中放入什么？” ，而是“谁将使用它以及如何使用它？”。

一旦我们确定了目标，那对公司中现有的东西进行初步了解（什么在真正起作用？团队使用它的熟练程度如何？现在有啥工具？），会让我们更容易知道从哪里开始。

#1. 目的和共同价值

我们要去哪儿？为什么？怎么去？

开始任何事情之前，最重要的是使团队围绕一组清晰的结果来对齐目标。这将有助于建立一致的愿景，并确保每个人都朝着相同的方向前进。这些目标会随着时间而变化，这太正常了。我们只需要确保这些变化都进行了广泛的沟通就够了。

至于价值，则根据品牌目标来指导我们做出选择。我们需要确保我们的设计不偏离这些关键价值点。

除了品牌和产品价值，我们还可以定义一些团队价值，使每个合作者都具有共同的价值观。

#2. 设计原则(Design Principles)

首先要明确的是：设计原则(Design principles) 不仅限于产品的视觉效果……

设计原则(Design principles)是指导性的句子，可以帮助团队通过设计达到产品目的

他们将帮助团队做出有意义的设计决策。

我以 Medium 为例 (译者注：一个博客发布平台)，他们的设计原则之一是“方向大于选择”。由于这一原则，他们选择设计了一种简单的内容编辑器，而不是提供一个可以随意选择颜色和字体的常规文本编辑器。这么做是为了让博客作者更专注于文章的内容本身，而非视觉呈现。

设计原则(Design principles) 必须指导设计决策

#3. 品牌识别和语言

品牌识别应根据品牌的战略和目标来确定。 Alla Kholmatova 谈到她提出的“感知模式”(perceptual patterns) 包含以下几个方面：

颜色
字体
空间
形状
图标
图形
图像
动画
语音语调
声音

所有这些元素构成了品牌

这是一个很好的开始，但还远远不够！我们必须走得更远，就像有了字母才能组成单词，单词组成句子，句子才能传情达意。如同语言需要语法一样，这些品牌要素需要通过一系列规则(rule)，才能将他们串起成为一个系统

在我们的设计系统(Design System) 中，它是由指南(guidelines)，行为准则 (do’s and don’ts) 以及 “良好示例”(good examples) 组成的。

这将确保设计团队正确地组合使用这些元素，增强品牌的独特性以及可辨识度。

#4. 组件和模式(patterns)

组件和模式是系统的核心。前面提到的所有这些元素都将帮助我们创建它们，并提供一致的体验。

组件(components) 就像乐高的积木。设计人员在sketch中使用它们，程序员则在代码中使用它们。组件的功能必须明确定义。

模式(patterns)，就像拼装乐高时的搭建手册，使我们在所有产品中，以逻辑一致的方式应用这些组件

在下图中，我们可以清楚地看到，组件(components) 由技术和功能文档定义，而模式(patterns) 则说明如何使用它们

模式(Pattern) 与组件(component) ©Nathan Curtis

如果你想知道应该最先开发哪个组件，请参阅组件优先级研讨component prioritization workshop.

最佳实践

除了文档，最佳实践(best practices) 往往对团队产生更大的影响

根据产品不同和团队成熟度的差异，最佳实践的想法(idea) 通常来源于工作中最佳实践的积累，抽取出其中有意义的部分汇聚成最佳实践。

最佳实践能帮助团队形成和发展技术能力。

设计系统的类型

我们可以说每个团队或每个产品都有各自的设计系统(Design System)……要定义我们自己的系统，我们必须问自己如下的问题：

有多少人使用这个系统
他们的背景是什么，是否足够成熟来使用这个系统
我们有多少产品？或者部署到多少平台？有多少种不同的技术（Angular，React等等）？
整个产品的一致性希望达到什么程度？

所有这些问题的答案将帮助我们定义最适合的设计系统。

从 Alla Kholmatova 的书中，可以给我们一些灵感：

严格还是松散?

严格系统(strict system)，具有全面而详细的文档，并且在设计和开发之间完全同步。在系统中引入新模式会有严格的流程。一个严格系统(strict system) 的涵盖范围应该足够广泛，以涵盖团队可能遇到的大多数情况。

松散系统(loose system) 会为实验探索留出更多空间。该系统为团队提供一个大的框架，同时保留一些自由度。设计师和开发人员可以根据自己对产品需求的理解，自由使用，或者不使用它们。

根据我的经验，我们需要在严格性和灵活性之间找到恰当的平衡：非常严格的系统可能会排斥那些不想使用它的设计人员和开发人员。另一方面，如果这个系统过于宽松，这还能叫设计系统(design system) 吗？

模块化还是集成？

模块化系统(modular system) 由可互换和可重复使用的零件组成。它非常适合必须快速扩展和适配多个用户需求的项目。不好的一面是，实现起来通常代价高昂（因为很难做出自身保持独立，而又能相互配合工作的模块）。这种系统特别适合作为电子商务，金融和政府网站的大规模产品。对于模块化系统(modular system)，特别适合参考原子设计思想(Atomic design)

集成系统(integrated system) 应用在独特的领域。它也由零件组成，但是这些零件通常不考虑互换性。这种系统适用于重复组件很少，常常需要强有力的艺术传达，或是经常变化艺术方向的产品（产品系列展示，陈列柜，市场营销活动……）