在这篇文章中，我们将详细地了解设计系统和样式指南之间的区别，每个系统中应包含什么内容以及何时使用它们。
在开发网站或应用程序时，当涉及用户界面设计时，很难保持一切正常。
当然，可以使用Google文档或其他笔记跟踪工具来记录HEX颜色代码或字体选择。但是像按钮设计这样的东西呢？如何确保所有按钮都以相同的方式设计？以及具有不同用途的按钮是否被正确设计？
样式指南可以帮助解决这个问题，但这可能还不够。
更大的网站或应用程序、全渠道体验和不断增长的产品团队都为样式指南无法解决的复杂性添加了额外的层次。这就是设计系统发挥作用的地方。
什么是样式指南？
样式指南是一份描述品牌使用的核心视觉元素和样式的文档。它可以是一组独立的指南，也可以出现在更大的设计系统中。
Yelp的样式指南对其工作原理有一个很好的类比。
样式指南中的元素，如颜色和字体，就像是原料。设计师可以参考样式指南，以了解在制作特定“食谱”时使用哪些原料。
但这通常是样式指南的尽头。它向我们展示了主要原料以及如何使用它们的基本准则。然而，完整的说明、成品和食谱（即数字产品和用户体验）却没有得到解决。
对于一些品牌和设计团队来说，这已经足够了。
样式指南的目的
样式指南为设计师提供了一组基础准则，用于创建品牌的视觉资产。这涵盖了从设计网站到创建商务赠品等方方面面的事物。
然而，不仅仅是网页设计师使用样式指南。以 Disqus 的样式指南为例。
这个微型品牌指南对媒体从业者非常有帮助。像记者、评论员和意见领袖这样的人会参考这些视觉资源和可下载资产，以确保在线提及公司时使用正确版本的品牌。
因此，样式指南有两个重要目的。主要目的是帮助设计师为数字产品赋予一致的视觉风格和元素。次要目的是确保品牌的视觉身份在网络上得到正确呈现。
样式指南中应包含什么
无论是员工还是媒体机构查看您的样式指南，都不应该有关于如何处理品牌元素（如徽标、颜色、字体和图标）的疑虑。但这通常不足以帮助设计师创建数字产品的用户界面。
这就是为什么一些样式指南包含与网格、间距、布局、图标、动画等相关的额外规范的原因。包含辅助功能部分的做法也越来越受欢迎。常用 UI 组件的小集合也是如此。
如果您在网络上查看，会注意到样式指南在品牌之间有所不同。例如，Drupal 的样式指南包括以下几个方面的指南：
· 设计原则
· 版式
· 颜色
· 标记
· 网格
· 辅助功能
还有一个名为“字词和短语”的部分，为 Drupal 品牌制定了内容样式的准则。
与此相反，Frontify 的品牌指南包括以下内容：
· 品牌身份
· 徽标
· 颜色
· 字体
· 品牌形象
· 产品形象
· 图片引用和尺寸
还有一个专门用于“材质” UI 的部分。它包含了超出主要数字产品之外的用户体验的指南，如公司的文具、包装、赠品和电子邮件签名。
最终，样式指南是由设计师来完善的。首先添加核心元素，如徽标、颜色和字体，然后从那里扩展。
何时创建样式指南
除非您正在构建一个小型、个人和非商业网站，否则真的没有不创建样式指南的充分理由。
它为您提供了一个地方来记录有关您品牌视觉身份的最关键的设计决策。即使您是独自工作，将所有这些信息放在一个地方仍然是有价值的。
而且，样式指南是一个与客户开发和共享的极好资源。无论您在启动他们的网站或应用程序后是否继续为他们工作，样式指南都可以确保您最初的设计决策得以维持。当需要进行更改时，可以更新文档，以便将来使用它的所有人保持一致。
什么是设计系统？
设计系统是品牌的视觉语言。样式指南只是其中的一小部分。设计系统是完整的工具包，还包括设计原则、可重用组件、模式库、设计资源等等。
让我们从之前的 Yelp 的类比继续谈起。
如果样式指南中的元素是原料，那么配方说明就是您放入用户界面的各种组件，如按钮、字段、卡片、列表、头像等。它还包括将这些组件组合成页面上有用且交互式元素的模式。
样式指南的“原料”确保每个组件和模式都具有一致的外观和感觉。组件和模式库确保您以正确的顺序和方式将所有内容组合在一起，以获得最佳结果。
设计系统的其他组成部分，如代码片段、设计令牌和资源，帮助您遵循说明，以便将食谱变成出色的最终产品。
设计系统的目的
一致性、清晰度和质量是使用设计系统的自然结果。在 Seeds 设计系统主页上，Sprout Social 解释了为什么这是如此重要：
“独特而一致的品牌形象使我们与竞争对手区分开来，建立了与我们的客户之间的信任和熟悉感，并最终导致长期品牌价值的形成。”
设计系统不仅仅是用于记录如何创建单个数字产品的工具。尽管它们通常是从这样的角度开始的。
设计系统为您提供了组合品牌视觉资产所需的所有说明和准则。这使得它成为扩展品牌不可或缺的工具包。例如：
一个预计每年都会以指数级增长库存的商店
一个正在扩张并招聘新员工以满足业务不断变化需求的数字团队
一个正在拓展到新渠道并需要一种快速有效的方式来做到这一点的品牌
随着增长，复杂性就会增加。您的产品、团队或影响力越大，当涉及到 UI 设计时，保持一切井井有条和一致就会变得更加困难。这就是为什么如果您的目标是增长和可扩展性，设计系统是必不可少的原因。
设计系统中应包含什么
与样式指南一样，您决定放入设计系统的内容取决于您的品牌和您正在构建的内容。尽管如此，设计系统是全面的工具包，因此大多数都包括以下内容：
· 品牌介绍
· 设计原则
· 样式指南
· 组件库
· 模式库
· 设计令牌
· 资源，如库、模板和工具
一些还包括像 Atlassian 设计系统那样的内容部分。
这一部分提供了处理以下内容的指南：
· 包容性语言
· 语言和语法
· 词汇
· 语气和语调原则
· 写作准则
· 写作风格
这只是设计系统为跨学科产品团队提供服务的一种方式。包含设计令牌部分有助于弥合网页设计师审美选择与在开发产品时实现它们之间的差距。
在 Talend 的 Coral 设计系统中，您会找到如何处理设计令牌的一个很好的例子。
这就是为什么设计系统通常被称为分布式团队的唯一真相来源。它们使任何人都能够在为品牌设计数字产品、资产和体验时做出自信的决策。
何时创建设计系统
设计系统对数字团队有多么有利是清楚的。
它们为设计师提供了在开发品牌资产时使用一致的视觉语言。它们减少了沟通错误、误解和错误。它们还使设计和更新视觉界面变得更加容易和快速。
然而，建立和维护它们需要大量的工作。因此，在为您的品牌开发一个之前，考虑它是否值得投资是很重要的。
如果您正在为个人项目、小型企业设计网站，或者是静态内容，可能不会有太多变化或扩展，那么设计系统可能对您没有好处。
结论
虽然没有样式指南就不能有设计系统，但有样式指南却可以没有设计系统。有各种各样的原因可以选择后者。
样式指南是跟踪为品牌视觉身份奠定基础的设计决策的好方法。如果您不确定是否需要设计系统，样式指南不需要太多的时间投入。您也不必得到其他团队成员和利益相关者的支持。
所以，至少计划为您工作的每个专业项目制作一个样式指南。
现在，如果您正在启动一个重要项目——无论是企业网站、大型电子商务市场、移动应用等——您很有可能会受益于设计系统。随着更多的组成部分、贡献者、修订和整体复杂性，设计系统是确保您创建的内容在最高水平上一致执行的唯一方式。
精选文章：