面向开发人员的设计系统

如果你和设计师一起工作，你很可能至少听过几次“设计系统”这个词。UI 设计系统是目前设计界的热门话题，原因很简单——它能为所有产品开发者，包括开发者，带来诸多优势！

很多开发者听到“设计”这个词就会立刻转身离开，以为这不是专门为他们设计的。恰恰相反，了解设计系统将极大地提升你对如何将设计和原型转化为代码的理解，并通过提供多种资源的快速访问，让你的工作更加轻松。这将成倍地加快开发速度，并减少交接过程中的误解。

无论你的团队是否已经拥有设计系统，而你还不确定该如何使用它；或者你只是听说过这个术语，并且好奇它的真正含义，你都来对地方了！我们将探讨设计系统的用途、通常包含的内容，以及如何充分利用这一实用资源来改进应用程序的开发流程和用户体验。

到底什么是设计系统？

设计系统是一系列相互关联的设计元素的集合，这些元素经过整理和记录，方便您参考。您可以将其想象成一个包含所有您所需的设计资源和资产的库，并根据您的应用进行定制。

它的概念类似于组件库，但数量多达一千个！正如组件可以分解成构建块，然后以各种不同的方式组合以快速构建 UI 一样，设计也可以分解成最小的元素——字体、颜色、图标、图像、副本等。设计系统是这些设计元素及其协同工作的记录集合。

图片来自https://www.sketchappsources.com/free-source/4059-eva-design-system-sketch-freebie-resource.html

设计系统的目的是什么？

设计系统最终是为了提供一致性。它们可以通过多种方式实现这一点，并带来其他好处，但一致性是首要目标。

视觉一致性和用户信任

设计系统通过记录应用程序、产品和品牌的设计决策以供日后参考，从而实现视觉一致性。在不同位置（无论是在应用程序内部还是外部）选择不同的 UI 或使用不同的模式，会造成令人沮丧且不直观的用户体验，应始终避免这种情况。（更不用说，对于设计师和开发者来说，这同样令人沮丧，因为他们不得不为每个项目从头开始或重复工作。）这还会让您的品牌和产品看起来不够专业，从而降低用户的信任度。您肯定不希望社交媒体图片与网站截然不同，而网站又与您的应用程序截然不同。

第一印象至关重要，如果给人留下杂乱无章的印象，或者更糟的是，感觉你不知道自己在做什么，那么在吸引用户购买或使用你的产品时，第一印象就毫无帮助。尤其是在银行、教育、安全、医疗保健等行业，用户会把生活中的重要部分托付给你，这一点尤其重要。

从开发者的角度来看，设计系统在设计应用程序的 UI 时最为有用。除非在所有情况下都是同一个人编写用户界面，否则如果没有一个可靠的数据来源可供参考，人们会做出不同的个人判断或设计决策。虽然很多 UX 和 UI 决策在制定时可能感觉很小甚至难以察觉，但对于经常使用应用程序的用户来说，它们都会累积起来。如果您是一个大型团队的一员，或者在有多个不同的开发团队专注于应用程序的不同部分（甚至可能是不同的应用程序，但它们都需要共享相同的外观和感觉）的情况下工作，这个问题会变得更加严重，因为许多不同的人都在制定不同的设计决策。

简化设计和开发流程

在没有参考点的情况下工作也会减慢设计和开发进程，因为做出这些决定需要时间。重复 UI 选项或试图回忆应用程序其他地方如何处理某个情况会打断你的思路，让你无法专注于之前关注的问题。通过使用设计系统，你可以避免这种情况，因为它始终拥有单一的可靠来源，让开发人员在感到困惑时可以快速参考它，回到正轨。

最后，并非每个开发者都乐于或乐于做出设计决策。正如上文所述，即使是微小的选择，累积起来也会影响应用程序的整体可用性——这对于专注于其他技能的人来说压力巨大！然而，作为功能开发的一部分，开发者经常被要求在开发过程中做出这类细微的设计决策。我认为开发者了解一些设计基础知识固然有益，但最终，许多开发者会感到欣慰和高兴，因为他们能够向真正热爱这类工作的其他人学习设计知识——如果你所有的设计知识都包含在一个设计系统中，他们甚至不需要直接联系设计师。

命名一致性

设计系统也非常有用，因为它能确保每个人都使用相同的语言来讨论相同的元素。你是否遇到过这样的情况：你和同事原本以为你们在某件事上意见不合，结果却发现你们描述的其实是同一件事——只不过你称之为“toast通知”，而他们称之为“snackbar通知”？又或者，你对“天蓝色”的理解可能与设计师的设想不同？当你使用多个不同的库、框架或语言时，很容易出现沟通上的混乱。

如果你试图描述视觉元素而没有参考点，这些误解是不可避免的。事物的名称其实并不重要，只要每个人都知道你在说什么就行——而设计系统从本质上解决了这个问题。你无法在不给事物命名的情况下对其进行分类！

你知道人们常说——编程只有两件难事：命名、缓存失效和差一错误。但说真的，我发现这种命名一致性在两个主要方面特别有用：组件名称和颜色名称。

• 将组件的命名和文档化作为设计系统的一部分，可以确保每个人（不仅仅是开发人员）都了解所有组件的含义、名称和功能。这为设计师提供了讨论和使用现有组件的工具。如果没有这些工具，我发现经常有人要求构建与我们已有组件几乎完全相同但又不完全相同的东西。听起来像组件库？嗯，没错！你只是将其作为更大的设计系统的一部分，这样访问和了解组件库的权限就不会仅限于开发团队。

• 颜色是另一个巨大的好处，因为你可以确保 CSS 变量与 Figma（或其他设计软件）的 token 保持一致。最好的情况是，你可以利用 Unite UX 之类的软件，将 Figma 文件导出到 SASS 文件，然后添加到你的代码库中。即使无法做到这一点，将所有内容以相同的方式命名无疑会简化沟通和交接流程。这确实是一个双赢的局面。

我可以在设计系统中找到什么？

一些最常见的元素包括（但不限于）设计令牌、网格系统、图标库、组件设计、样式指南以及品牌语言/语调指南。我们将逐一介绍这些元素（因为如果您不熟悉它们，它们听起来可能有点乱），并讨论开发人员如何利用它们。

设计代币

设计令牌是设计系统中最小的部分——当你深入研究某个元素时，你会发现这些小值。例如，你经常会发现间距、颜色、字体和字体大小、不透明度、边框半径等设计令牌。美国网页设计系统网站对此进行了非常优雅的阐述：“设计令牌是一组有限的离散选项，就像音符的音阶是从所有可能的频率谱中提取出来的一样。”

当你阅读这段描述时，你可能已经意识到这些标记在开发端的对应物：CSS 属性。将所有这些设计标记作为变量存储在样式表中，并将它们应用于全局样式的基本元素，将使你的工作更加轻松，开发过程更加快捷。它带来了使用 Bootstrap 风格的“小”、“中”和“大”预设样式的所有便利，同时还具有设计师为你的特定应用程序和用户群精心设计并精心创建所有这些样式的优势。

图标库

图标库，顾名思义，就是图标的库——关键在于所有图标都必须具有统一性。无论是设计团队专门使用的第三方图标库，还是一套完全为应用程序定制的图标，指定一套图标都至关重要，这样您就不会最终使用来自不同图标库的图标，而这些图标的插图风格、线条粗细和大小各不相同。无论您的图标库是 SVG 还是图标字体的集合，重要的是要了解有哪些图标可供选择、它们的名称以及它们的位置。

组件库

图片来自：https://www.telerik.com/kendo-react-ui/components/grid/

您可能已经熟悉组件库，例如KendoReact（如果您不熟悉，我建议您先阅读《组件库构建终极指南》作为入门指南），但您是否知道它们可以作为更大型设计系统的一部分？如上所述，这样做的主要好处之一是可以与开发团队以外的人员共享以前仅供开发人员使用的资源。这是一个很好的例子，说明了设计系统实际上是一条双向通道——它不仅仅是一个专门设计内容的集合，更是设计师/开发人员协作的平台。

记录组件对于加快新团队成员（包括设计师和开发人员）的入职也非常有帮助。没有什么比能够查看构成代码库和应用程序的所有构建块（了解所有变体、设计以及它们的构建方式）更能帮助你更快地了解代码库和应用程序。

如果您有一些非标准的、特定于应用程序的组件，而新手可能光凭名称就认不出来，那么它也非常有用。我曾经在一家公司工作过，那里的“Walkaround”是一个常见的、经常使用的组件……但你不可能在第三方组件库中找到它！它是完全定制的，专为他们特定的数据可视化需求而创建。能够在他们的设计系统中查找它并查看使用示例，使得将该组件集成到功能中变得容易得多。

网格系统

图片来自https://www.designer-daily.com/the-use-of-grids-in-website-design-6639

随着 CSS 网格的出现，网格系统在开发方面受到了越来越多的关注。但在设计方面，它们并非一个新概念——使用网格来组织和布局元素的想法与设计本身一样古老。印刷设计师曾使用网格来将信息适配到物理页面上，并创建视觉层次来引导浏览者的视线。同样的概念也同样适用于 UI 设计——事实上，所有 Web 和 UI 设计都自然而然地基于网格，这完全得益于 HTML 和 CSS 的工作方式！这简直是天作之合。

通过创建可在应用或网站不同页面重复使用的网格系统，您可以真正加快设计和构建界面的速度。它还有助于实现我们之前提到的一致性；当布局可预测时，用户很快就能了解各种元素的布局位置，以及与某些元素交互时会发生什么。如果没有这种视觉一致性，用户需要更长的时间才能弄清楚每个页面上发生了什么，以及他们需要在哪里完成任务。更不用说，这就像是使用作弊代码来启动您的设计和开发流程！它为您提供了一个模板，而不是一个完全空白的页面。

风格指南

图片来自https://www.canva.com/learn/50-meticulous-style-guides-every-startup-see-launching/

风格指南可以说是最初的设计体系；它记录了品牌视觉呈现的高级规则。这通常包含一些最常用的设计元素（例如品牌颜色和字体），也包含一些示例，例如应选择的图像类型（例如，趣味盎然的插图或纯黑白摄影）、徽标及其变体，或任何品牌专属的字符或图标。简而言之，它是一个记录品牌相关资产及其使用方式的地方。

风格指南也非常有用，它可以快速概括您的品牌，您可以将其交给合同工、广告代理商、自由职业者或公司外部其他需要使用您品牌资产的人员。即使由不太熟悉您品牌的人完成工作，它也能确保外观保持一致。对于那些需要一些信息，但又不需要像全职员工那样详细了解的人来说，这是一个非常方便的文档。

品牌语言和语调指南

图片来自https://www.contentharmony.com/blog/great-brand-guidelines/

最后，在你的设计系统中，一个很棒的元素是品牌语言和语调指南。捕捉一种感觉或语调可能很难，但你与用户沟通的方式确实会产生巨大的影响！无论你是随意还是正式，是加入一些小笑话和俏皮话还是保持完全刻板，无论你是否使用缩写——所有这些都会影响到你的品牌在用户浏览你的应用时所呈现的“声音”。

你可能很快就会认为这对开发人员来说无关紧要，因为他们不是负责文案的人。然而，根据经验，我敢打赌，你写的微文案比你想象的要多！开发人员经常在开发过程中填写一些小的文案：按钮文本、表单标签、标题、替代文本等等。这些小细节加起来会构成整个界面！拥有品牌语言指南可以帮助你在“开始！”和“下一步”之间做出选择——它们对用户来说确实有不同的感受。

总结

如果您之前读过我的任何文章，相信以下几点对您来说都不会感到意外：我相信，当设计师和开发者能够高效协作时，您和您的用户都会受益。设计系统是实现这一目标的绝佳途径，它创建了双方均可参考的单一事实来源。整合所有这些要素，开发者可以轻松引导新团队成员，快速找到基本问题的答案，而无需私信对方并等待回复，还可以下载徽标和图标等常用资源，等等。更不用说设计系统所能提供的整体一致性和便捷的沟通体验！如果您的公司已经拥有设计系统但尚未使用，希望本文能激励您开始利用如此优秀的资源。如果您还没有……或许值得推荐！