原文：Design Systems for Developers
image.png

开发者们的设计系统

如果你和一些设计者一起工作，有很多次很大的机会听到 ’design system‘。UI设计系统在当前设计世界是一个很热的话题，这是有原因的 — 这对于开发产品的每一个人都提供了大量的优势，包括开发者。

很多的开发者听到** ’design‘** 这个单词然后里立马闭嘴，装出这不是为他们准备的。相反地，理解设计系统将极大地提高你对如何将设计和原型转换成代码的理解，并通过快速访问多种资源使你的工作变得更加轻松。这会指数倍的加速你的开发过程，也会减少在交接过程中的误解。

What Is a Design System, Anyway?

到底设计系统是什么？

A design system is a collection of connected design elements, organized and documented for easy reference.（设计系统是一组相关的设计元素的集合，被组织起来和记录下来便于参考）。就像一个库有你需要的设计资源和资产，专门为你的应用程序自定义设计。

这和组件库的概念类似，但实际上有上千种。同样的方式，组件能被分解成很多构建区块，然后被各种不同的方式组合快速的组成UI草稿，设计也可以被分解成小的元素 — font, icons, colors, images , 等等。设计系统记录了设计元素的集合和他们是如何一起工作的。

image.png

What’s the Purpose of a Design System?

设计系统的目的是什么

设计系统最终的存在是为了提供一致性。通过多种方式可以做到提供一致性，也有其他的收益也是作为一些副作用，但是 一致性 仍然是最主要的目标。

Visual Consistency and User Trust

视觉一致性和用户信任

设计系统创建视觉一致性通过记录下来作为将来的参考 — 你已经为你的应用、产品和品牌做出的设计决策。做出不同的UI选择或者在不同的地方使用不同的模式 — 不管这些不同的地方是在应用程序内还是在应用程序外 — 我们应该永远避免创建令人沮丧的和反直觉的用户体验。（更不必说一个糟糕的用户体验，对于设计者和开发者，不得不重做他们的工作。）这也会使得你的产品和品牌看起来不专业，这也会导致用户对你很低的信任。你并不想你的社交媒体的图形和你的网站看起来完全不同，和你的应用程序看起来也完全不同。

第一印象是非常重要的，给人的印象是混乱的还是更加的糟糕（就像你不知道你在做什么一样） — 尤其当你想让其他人使用或者买你的产品这是没有帮助的。用户信任是非常重要的，如果你工作在银行行业，教育，安全，医疗或者类似的，这尤其重要。

从一个开发者的视角，当你考虑应用程序的UI时，设计系统是最有用的。除非是在不同的情况下都是同一个人处理UI，如果没有唯一的真理来源作为参考，开发者会做出不同的个人判断或者设计决策。虽然许多UX和UI决策在你做的时候可能会觉得微不足道，甚至不引人注意，但它们都会增加用户对你应用的参与度。当你工作在一个很大的team或者与多个不同的开发team一起工作，他们曾聚焦于应用的不同部分（可能甚至不同的应用都要应用同样的外观），这样不同的人都要做出不同的设计决策， 问题会变得更加的复杂。

Streamlining the Design and Development Process

平滑的设计和开发流程

没有一个固定的参考点也会延缓你的设计和开发流程，这是因为做出这些决策是花时间的。反复讨论UI选择或者试着去记住这种情况在应用的其他地方是如何处理的，这会打断你的工作流程，让你从之前关注的问题上分心。通过使用设计系统，你可以避免这个问题，拥有一个唯一的真理来源，当他们一遇到困惑的时候，开发者们可以快速的参考， 并能很快的回到正轨。

最终，并不是所有的开发者都喜欢或者乐于做设计决策。就像之前提到的，甚至是很小的决策加起来也会影响应用的整体可用性 - 对于一个拥有专注于其他领域技能的人来说，这是很大的压力。然而，作为功能开发的一部分，开发者总是在忙碌的时候定期的被要求做出不同种类的小的设计决策。我认为让开发者了解一些设计基础是有益的，这样在一天结束的时候，许多开发人员会感到轻松和愉快，因为他们能够遵从那些真正喜欢这种工作的人的设计知识 — 如果你的设计知识应用到了设计系统里，你不必DM(私聊)一个设计师来做这样的事情。

Naming Consistency

命名统一性

设计系统也是非常有用的，他们能确保当谈论相同的元素每一个人能使用同样的语言。你曾经遇到过
你和你的同事都不同意一些事情，发现你总是被同样的事情打扰，仅仅是你把它叫做‘toast notification’,他们把它叫做 ‘ toast notification ’？或者可能你对‘sky blue’的理解和你设计师的预期是不一样的。当你用到多个不同的库、框架或者语言，这是很容易造成混乱的。

当没有一个固定的参考点，你试图描述视觉元素，误解是不可避免的。叫什么不重要，只要每一个人知道你在谈论什么，设计系统可以从本质上解决这个问题。特别是当你列出一个列表时，你不可能不给他们一个命名。

你知道他们在说什么 — 有两件事情在编程时是困难的：命名，缓存有效性和溢出错误。我发现命名一致性在两方面是特别有用的：组件名称和颜色名称

  • 命名和用文档记录你的组件 — 作为设计系统的一部分，可以确保每一个人 ，不仅仅是开发者，了解都是哪些组件，他们的名称是什么和他们都做了什么。这给了设计师们可以谈论的工具，并且可以利用你已经拥有的组件。如果没有这一点，我发现让我们去创造一些与我们已经拥有的东西几乎相同但又不完全相同的东西是太常见了。听起来像组件库是吗？是的。你仅仅把它作为设计系统的一部分，这样访问和对组件库的感知，就不仅仅限于开发团队。

  • 颜色也会带来另外一个很大的收益，这样你可以确保你的CSS变量和其他的Figma tokens 对齐。最好的场景是，这可以利用一些软件例如Unite UX可以把颜色从figma文件中导出到SASS文件，并添加到代码库里。即使这不可能，统一命名所有的东西将会 毋庸置疑的 加快沟通和接力的过程。这是一个双赢的情况。

    What Can I Find in a Design System?

    在一个设计系统里能找到什么？

很多常见的设计元素（当然不限于）design tokens, grid systems, icon libraries, component designs, style guides and brand language/tone-of-voice guides。

Design Tokens

设计令牌
摘自：Design Tokens是什么？

Design Tokens是一种视觉原子化的设计系统，它将视觉控件和界面属性重新梳理归纳进行语义化命名，代替前端代码中的复杂代码（例如十六进制的颜色代码），这样可以方便设计师进行统一的管理和扩展，保证产品的一致性，也大大提升开发效率。

image.png
Design tokens 是设计系统中最小的部分。当你深度探讨一个元素的时候 你会发现他的价值。举个例子，你会发现一些 design tokens , spacing, colors, fonts and font sizes, opacities, border radii(边界半径),等等。The U.S. Web Design System website 说的很优雅：“设计令牌是一组有限的离散选项，就像从所有可能频率的频谱中绘制出音符的音阶一样”。

当你阅读那些描述时，你会意识到在开发方面相当于：CSS 属性。保存这些design tokens作为变量在你的样式表里，并且在全局样式中把他们应用到你的基本元素里，会是你的生活更轻松、开发流程更快。它带来了使用bootstrap风格的“小”、“中”和“大”预设样式的所有便利，以及所有这些样式都是由设计师为您的特定应用程序和用户群精心创建的优势。

Icon Libraries

Icon 库
image.png
Icon linbraries ，就是icon 库 — 这里最重要的部分就是所有的icons聚合在一起。不管是不是你的设计团队已经专门选择了第三方库，或者是为你的应用完全设计的一组自定义的icon，指定一组icon集这是非常重要的，这样你可以避免使用一些来自不同地方的icon集 — 他们有不同的示例样式，线宽度和大小。不管你的icon库是SVG还是icon font，最重要的部分是知道你有什么样的图标可以选择，它们的名称和它们可以被用在什么地方。

Component Libraries

组件库
image.png
图片来自于https://www.designer-daily.com/the-use-of-grids-in-website-design-6639

你组件库是你最大可能熟悉的，例如KendoReact(建议读下The Ultimate Guide to Building a UI Component Library—Part 1: Creating a Plan作为入门介绍)， 但是你知道它们可以作为大型设计系统的一部分。如上所述，这里的一个主要好处是与开发团队之外的人共享以前特定于开发的资源。这是一个很好的例子来说明：设计系统是双向的 —— 它不仅仅是特殊设计的集合，还是一个可以为开发者和设计者提供合作的地方。

用文档记录你的组件是非常有帮助的，可以加速团队新人的培训，包括设计师和开发者。没有什么能比查看构成代码库和应用程序的所有构建块能更快地帮助你了解代码库和应用程序——查看所有的变量、设计以及它们是如何构建的。

如果你有非标准的、特定应用的组件，这也是非常有帮助的，新用户可能不能单单通过组件名称就能识别出来。我曾经工作在一个公司，有一个组件 ‘Walkaround’ 是一个通用的、经常使用的组件…但是它并不像我们在第三方组件库见到的那样。是完全自定义的，为特定的数据可视化需求创建的。在设计系统里能够查阅到，并且有示例展示如何使用，这样把组件应用到新需求开发中就会变的更加的容易。

Grid Systems

网格系统
image.png
图片来自于https://www.designer-daily.com/the-use-of-grids-in-website-design-6639

随着CSS网格的出现，网格系统在开发侧得到了很多的关注。但是在设计侧，这并不是一个新概念 — 使用网格来组织和布局元素的概念和设计一样古老。平面设计者们使用网格在物理纸面上来适配信息，并且创建可视化的层级来引导用户阅读页面内容。

同样的概念也适用于UI设计 — 实际上，所有的网页和UI设计本质上都是基于网格的，这是由于HTML和CSS工作的方式。这是天作之合。

通过创建网格系统，可被用于应用或者网站的不同页面，你可以加速创建设计和界面的时间。也可以帮助我们构建一致性就像我们之前谈论的那样，当布局是可预测的，用户可以很快的了解到：他们能期望到的不同的元素会放在哪里，当它们和特定的东西交互时会发生什么。没有这类的视觉一致性，这将会花费用户很长的时间来识别出每一个页面都发生了什么和他们需要完成的任务在哪里。更加不用说，这就像用伪代码来开始你的设计和开发流程。这给了你一个开始的模板，而不是一个完全空白的页面。

Style Guides

样式指南
image.png
图片来自于https://www.canva.com/learn/50-meticulous-style-guides-every-startup-see-launching/

Style guides 是原始的设计系统；他们用文档记录了一些高级规则作为一个品牌的视觉呈现。通常包含一些使用最多的design tokens(像品牌颜色和字体)，，但也包括应该选择的图像类型的例子(例如，有趣和好玩的插图或黑白照片)，logo和logo的变化，或者特定品牌的人物和icons。总的来说，这是一个可以用文档记录与品牌有关的资产和如何使用它们的地方。

Styles guide 也非常的有用，可以作为你的品牌概览，你可以把它交给 合同工人，广告代理商，自由职业者，你公司外的其他人，那些需要你品牌资产的人。这确保了一致性的外观，甚至于是一些不熟悉你品牌的人们来完成的工作。对于那些需要一些信息，但不需要像全职员工那样详细的人来说，这是一个很方便的文档。

Brand Language and Tone-of-Voice Guides

品牌语言和语音指南

摘自品牌调性有哪些？

Tone of voice：调性，也翻译成语气、口吻，通常是品牌个性的外在表现，有时也被称为品牌风格，包括语言、信息、音乐、颜色、感官方面，如嗅觉、味觉和触觉、体验、代言人等等。

image.png
最后，在你的设计系统里极好的一件事情就是有一个品牌语言和语音指南。捕获用户的感受或者语调是困难的，但是有一个 你和用户交谈的方式 会带来一个很大的影响。不论是轻松还是随意，你是否夹杂一些笑话和妙语或者一直保持完全的刻板严肃，不管是有对比还是没有 — 所有这些加起来就是你的品牌“听起来”的方式，特别当用户在你的页面时浏览导航。

你可能很快的意识到这对于开发者来说这没什么，因为他们不是对公关文案负责的那个人。然而，基于经验，我打赌你已经写了比你预想的更多的微副本。在开发过程中开发者会忙于填上一些小的副本：button text, form labels, captions, alt text, 等等；这些小事情会在你的界面上累积起来! 有一个品牌语言指南能帮助你在比如 'let's go ' 和 ‘Next’ 之间选择 — 这会让你的用户感觉不一样。

Wrapping Up

我相信你和你的用户会收益的，当你的设计者和开发者能具备良好的合作能力。设计系统是实现这个目标极好的方式，通过创建一个唯一的真理来源两方面都能作为参考。编译完所有的这些，这使得开发者培训新的团队成员也变得容易，对于一些基础问题可以很快的找到答案而不需要DM(私聊)某人和等待一个答案，下载通用的资产例如logo和icon，以及其他。更不用说整体的一致性和沟通的便捷性，这些设计系统都能提供。如果在你的公司有一个这样的设计系统，还没有使用它，希望这能启发你，开始利用这些伟大的资源。如果你还没有，这可能是最值得的建议了。