翻译 | Plasma：创建并记录一个产品设计系统
原文：Plasma design system
作者：Andrew Couldwell (2017-01-25)
阅读时间：14m 29s
本案例研究旨在记录我们如何在 WeWork 创建一个设计系统。我将分享我们对流程、产品设计、用以创建和实践设计系统的工具的见解，以及我们如何记录和与团队共享此系统。
来自使用了 Plasma 设计系统的产品的一个 UI 示例
介绍
WeWork 创建了鼓舞人心的共享工作空间，重点是社区。我们设计和构建我们自己的内部数字工具，以满足我们的业务需求，并管理我们全球的建筑和成员网络。Plasma 是一个为这些内部业务工具而创建的设计系统。
Plasma 作为一个概念，是由我们的数字创意主管 Nick Stamas 创立的。Nick 向我们的工程师介绍了用 React JS 和 Sass 构建系统的概念，并从此领导了此系统的设计。我负责其设计、创意和文档。我同时也和产品设计师 Deena Edwards 合作，她将 Plasma 应用于我们的产品。
第一步：设计探索
我们开始用 3 种不同的将应用此系统的内部产品进行试验——发现、建立和压力测试样式、组件库与模式库。随着时间的推移，方向、用户界面（UI）和样式都发生了变化，下面我将尝试捕捉这些变化，以展示被测产品的进展和范围。
sketch 画板展示了初步的探索
值得注意的是：此系统的设计方向深受 WeWork 的数字品牌指南 Wework Digital Foundations 的影响。
简单、清晰、干净
我们的内部工具都是基于网页的数据密集型产品。简洁性、可读性和加载时间都是最重要的。我很早就知道我们正在努力寻求一种清晰、干净的美学。
色彩理论
此系统主要为白色、黑色和灰色。重要的是，设计不能分散对内容的注意力，因此精妙是关键。明亮的颜色用于传达特别含义。黄色用于主要操作，因为黄色是 Wework 的核心品牌颜色之一。蓝色用于导航链接。红色用于警告和警报。我们还使用了紫色作为第三颜色，因为它是我们内部工具中的一种传统颜色，我们希望在我们的产品中保持一种熟悉的氛围。
字体匹配
Plasma 专门使用了 Helvetia，一种简单、粗体的字体。Mac 电脑已经预装了 Helvetia，而未预装的电脑将回退至 Arial（类似的、但在网页上相对安全的字体）。这非常重要，因为不需要通过第三方脚本来加载字体，这意味页面加载速度更快。
设计所有的状态。Plasma 设计系统的主要 Sketch 文件总览
产品设计
我相信您已经多次在 Behance 和 Dribbble 上看到「UI kit——免费下载！」。其中一些看起来很漂亮。但是，除非它们是用真实的产品、内容和数据进行设计的，否则它们中的许多最终都存在缺陷。永远都不要使内容适应设计，系统必须能应用于任何内容。不要只针对最佳案例场景进行设计——要考虑所有的场景。
使用将应用此设计系统的产品来创建一个设计系统至关重要，这些产品具有真实的数据和问题。
我们的目标不是创建最好看的系统，而是设计一个最能满足我们的需求的系统——在 Plasma 的案例中是业务需求，而对一些系统来说则是客户需求。我们当然打算创造令人愉悦的产品，但只是在增强用户体验（UX）方面。
下面是我对塑造了此系统的 3 种产品的一点见解：
产品 1：CMS（又名「Maggie」）
我们的 CMS 产品允许我们的营销和增长团队在我们的核心营销网站 wework.com 上添加、编辑和管理我们的建筑和市场。在 Plasma 之前，我们的 CMS 只是简单的一系列带基本 CSS 自定义的 HTML 表格。Plasma 塑造了这款产品的 UI 和 UX。下面是这个产品的一小部分 UI 示例。
应用了 Plasma 设计系统的 CMS 产品的界面示例
产品 2：Spacestation
我们的 Spacestation 产品是我们在 WeWork 总部和国际上每座建筑中最常用的工具之一。它是一个数据密集型产品，用于管理与我们的会员和建筑相关的大型信息和账单数据库。它存在着很多表格、表单输入、过滤器和导航——是一个产品设计系统的完美测试平台！我和 Spacestation 的首席产品设计师 Deena Edwards 合作，对应用于此产品的系统进行构思、应用、压力测试和迭代。
应用了 Plasma 设计系统的 Spacestation 产品中的示例、概念 UI
产品 3：DataQuery
WeWork 的业务性质意味着我们拥有大量的数据！在数字领域，这意味着我们有着大量可供使用的数据，我们可利用这些数据来开发更好的产品，以满足客户需求。这个产品的想法是在一个非常合适的时机提出的——我们已经开始构思 Plasma 设计系统，并且知道这个新产品既可使用此系统，又可随着对数据的额外需求而进一步推动它。我和我们的数据工程团队合作，构建了仪表板和数据查询工具。以下是其中一些探索。
使用 Plasma 设计系统对数据产品设计探索。显示的所有数据均为公开资料！
第二步：模式和组件
经过几天的探索、评审和迭代，我们得到了一个满意的样式。现在的任务是创建一套全面的模式和组件，包括所有的状态和场景——本质上是为我们的团队创建一份全面的 UI 工具包以供使用。
我们的系统由一些基本元素组成，例如为标题和内容定义的文本样式、调色板、我们称之为模式和组件的东西，以及模板。
一致的 UI 模式和组件在引导用户使用产品方面会有很大的作用。
模式
模式是指整个产品中反复出现或始终存在的元素或行为。例子包括导航、卡片、表格、空状态或加载状态、通知、警告和对话框。模式是通用的，可以包含组件，并且可以组合在一起构成模板。
组件
组件是指整个产品中反复使用的特定 UI 元素——通常是可操作的，有时则用于传达含义。举几个例子有，按钮、输入框、选择器、开关、头像和工具提示。
Sketch 中正在进行的设计系统（以及文档资源）
通过此链接可快速浏览包含设计系统中所有模式和组件的主要 Sketch 文件（如上文所示）。
最好的工具
我们为 UI 设计选择的工具是 Sketch。那些使 Sketch 非常适用于产品设计的功能使它在系统设计中尤其强大。当您在创建数百个可编辑的 symbol 和易于应用的文本样式时，Sketch 的简单性就变得至关重要。
关于响应性
Plasma 的设计是具有响应性的。虽然构建响应式组件很简单，但模拟响应式就不那么简单了。至少我们是这么想的。设计能够在不同浏览器宽度下工作的 web UI 非常重要。幸运的是，Sketch 提供了设置元素以不同的方式响应尺寸变化的功能。利用设置、组和 symbol 的组合，您可在 Sketch 中创建基本的响应式 UI。虽然这对断点没有帮助，但它在快速查看设计在不同浏览器尺寸下如何工作或是否工作方面非常强大。因此，我们创建了具有响应性的模式和组件库。
Sketch 中的响应式设计
阅读此文可了解 Sketch 中的响应式设计。
第三步：模板的强大力量
为保持产品的一致性，我们必须让我们的团队尽可能简单地使用 Plasma 进行设计。幸运的是，Sketch 的可编辑 symbol 和文本样式让分发和维护一个设计系统变得简单。
如果我们的团队无法简单地在他们的工作中应用此系统，那么产品的设计就很容易就误入歧途。
我们有一个（持续更新的）包含 Plasma 所有内容的主 Sketch 文件。我们最不希望的就是，人们在使用这个主文件的过程中不小心编辑和删除了一些东西！于是我们创建了一个 Sketch 模板以供我们的团队使用，托管 Dropbox 上。这个模板有一系列可编辑的 symbol，所有的文本样式，品牌颜色和一个随时可用的基本画板——使用 Plasma 可快速建立和组装一个用户界面。
使用已建立的模式和组件使我们能够专注于用户体验、解决问题以及构建有意义的功能和产品。
涵盖所有场景
我们考虑了系统中所有的「状态」，并且每个状态都有相应的 symbol。例如，表单输入具有占位符、悬停、焦点、填充、错误和禁用状态。下面「多选组件」的示例中，在右侧，您可看到「多选/占位符」这个 symbol 是被选中的。您可以在下拉列表中获取其他所有 symbol——并更改 symbol 为「多选/填充」或「多选/错误」。这对于设计或绘制产品流程非常有用！
Sketch 中的 symbol 涵盖了表单输入、按钮等的所有状态
Craft Library
我们还使用了一个很棒的工具，InVision 为 Sketch 设计的插件 Craft Library。它使我们能够创建一个共享的资源库（托管在 Dropbox 上），我们的团队可使用它来将元素拖动到他们的设计中。
更新（2017 年 12 月）
我们现在使用 Sketch Libraries 来代替 Craft Library。它做的事情或多或少是相同的，但是效率高得多！您对设为 library 的 Sketch 源文件所做的任何更改，都会同步到任何使用该 library 组件的设计中。就很酷。
预先设置按钮、输入、样式等元件库，可降低重复设计元件的风险。
使用中的 Sketch 中的 Craft Library。这是 Plasma 的主 Sketch 文件的概览。
第四步：记录设计系统
在创建设计系统时，必须要记住，您将不是唯一使用它的设计师（或开发人员）。
从字面上记录设计系统是我在这个项目中面临的最大挑战。通常我会创建带注释的规范——通常是一些 psd 和 sketch 文件，以配合设计。在我的 Adobe Portfolio 案例研究中可以看到运用这个方法的一个很好的例子。虽然规范可以包含所有想象得到的细节，但是当有新的设计师接替你的位置时，仍可能会遗漏或误解一些事情。我们想利用 Plasma 做到更好。
如何记录设计系统
我开始阅读和研究其他团队是如何做到这一点的。幸运的是，对此互联网上有很多的答案，很多公司已经公开了他们的文档。
这里有一个有用的链接列表，包含了我发现的所有在线设计系统文档。希望它对您能有所帮助。
看了网上这么多优秀的例子，我最初的目标就是创建一个网站来记录系统、规范、示例的使用，并制定所有模式和组件的指南。它可以作为一个快速参考，或者一本可详细研究的宝典。
但是，我不想因为创建网站所需的设计、构建和时间限制而被耽搁。所以，为了开始着手，我简单地创建了一个新的 Google 文档，并开始编写。随着文档内容的增加，我意识到它确实完全符合我们的需要。创建一个公开的品牌网站的唯一理由将是，作为 WeWork Digital 的 “荣誉项目”，或者作为我们开源此系统的资源。
但是就目前而言，事实证明，Google Docs 是最完美的媒介。我们所有的团队都可以轻易地访问它，并且他们可以在线评论，这对于反馈很有用。Google Docs 的「Document Outline（文档大纲）」功能，以及链接/定位到文档中的书签和标题的功能，为我们提供了足够的导航。 正如我们在英格兰北部所说的，Jobs a good’un（大概意思就是塞翁失马焉知非福……）。
我们的文档预览
由于文档是在私人的 Google 文档中，所以下面我选取了一些截图，以便您更好地了解它的结构、布局以及所包含的内容。您可以单击图片以查看原图。
Google 文档中的 Plasma 设计系统文档
更新：2017 年 12 月
发表这篇文章的大约 11 个月后，这个文档已经演变成一个您可以看到的网站。我们使用 GitHub 来支持版本控制，而且我们的团队可以轻松地进行访问，以便编写文档并为其做出贡献。
使用 markdown 进行编写，并通过一些 CSS 自定义，您就可以为您的品牌定制文档。GitBook 并不完美，它不支持响应式，但它已经够用了。
查看 Plasma 设计系统文档。
幕后（下载）
我创建了一些资源，以便您深入了解这个设计系统在 Sketch 中是如何建立的，包括 Sketch 文件下载和一份文档摘录。可在此链接中查看资源。
第五步：管理设计系统
随着文档的逐渐形成，设计需要一种有效的方法，以便与开发人员交流和跟踪系统的构建与集成。我们选择（并推荐）使用 GitHub。我们为特定的组件创建了 issue，共享设计、规范和 CSS/Sass 的预览，以简化开发流程。通过这种方式，我们的工程师就可以一个接一个地处理这些问题，因为他们已经做好准备了，他们将负起责任，并且没有任何东西会被遗漏！
我们使用 GitHub 来沟通将创建的组件
设计和代码
Plasma 的主要开发人员也是一名设计师。我们的主要设计师（我）也是一名开发人员。这反映在了我们的流程和系统质量上。通过我们的文档，我们希望向我们的设计师展示 CSS/Sass，鼓励他们了解事物的运作方式。从「学习使用此系统进行设计」的角度来看，它有助于明确地查看和学习构建过程的值、间距和命名约定。它也有助于弥合设计和开发之间的鸿沟。
命名约定
最后但同样重要的是：设计系统的目标之一是，让设计师、开发人员和产品经理都使用同一套语言。我们可以通过我们都熟悉的一致的语义命名约定（在设计和代码中）来帮助实现这一点，无论是 Sass 变量、字体样式、颜色、UI 模式和组件、模板还是页面名称。
一切都很顺利。
这不是结束
我们对 Plasma 有一个宏大的计划。我们正在努力开发这个系统，并将其推广到您之前已看过的 Spacestation 和 CMS 产品中。在这个过程中，我们学到了很多东西，并致力于从全球使用我们的工具的员工那里获取有价值的反馈，然后进行系统的迭代。我们已经讨论过 Plasma 的开源，但我们还没有做到这一步。
希望您喜欢这个案例研究，并对我们的设计过程、使用的工具和 Plasma 的预览有了了解。：）
特别感谢 WeWork 的 Nick Stamas 和 Deena Edwards 在这个项目上的辛勤工作和支持。还有我的编辑 Meagan Fisher !
附注：不要直接使用 Sketch 来创建这样一个产品设计系统。我们为达到这个阶段做了大量的工作。我在这个项目上的联合负责人 Nick Stamas 在 Selling a design system at your company 中讲述了这个过程，推荐您接下来阅读这篇文章。
更新： 2017 年 12 月
我写了一篇关于创建 Plasma 设计系统的基础工作的新文章 Laying the foundations for system design，以及为同个公司创建的另外一个设计系统！
更新：2019 年
我正在写一本关于系统设计和数字品牌指南的书！我很喜欢写作的过程，我计划在 2019 年印刷出版（还有电子书）。通过这个链接查看更多信息和进行注册以接收更新：Laying the Foundations — A book about design systems and digital brand guidelines。
以上翻译包含个人理解，仅作为个人学习笔记使用。如有错误，求指正吖，非常感谢 ^^
感谢原文作者及所有分享想法与经验的人 ^^
