设计系统最近在设计界越来越受欢迎. 现在使用的术语太多了, 诸如“模式库”或“组件库”之类的术语, “风格指南”或“设计系统”. 我听说过它们被相互交换或一起使用.
就我个人而言, 我认为有时候设计行业过于重视这三个术语的区别. 然而, 每个术语都有一个特定的定义，了解每个术语的含义是很有用的, 不是为了术语的缘故，而是要知道如何充分利用每一个，并了解您可能需要什么.
在这篇博文中，我将定义这些术语，并概述设计系统是如何有益的, 当然也有一些缺点. 我还将讨论创建一个为您的项目定制的系统的重要性.
开始之前, 重要的是要明白，在创建设计系统时，最重要的事情是让你的团队保持一致. 可能有些设计师对风格指南的理解略有不同, 模式库或设计系统. 这并不罕见，因为这些术语经常重叠. 然而, 关键的收获是，团队中的每个人都应该通过使用每个人都同意和使用的术语来使用相同的设计语言.
风格指南
风格指南与品牌指南密切相关. 设计系统的风格指南包括与颜色相关的信息, 排版, 图标样式等. 根据我的经验，颜色和排版是最重要的. 风格指南只采用了传统品牌指南的相关方面(例如. 它不会包括印刷材料的规则).
您如何创建风格指南以及您在其中包含的内容也可能取决于各种因素，例如:
您使用的开发交接工具 (eg. Zeplin、DSM、Avocode等). 所有工具都有其独特的功能和局限性，每个工具都允许你以略微不同的方式组织信息(我将在本文后面讨论开发交接平台)。.
项目需求: 每个项目都是不同的，因此风格指南的内容也会有所不同. 有些项目可能需要特别注意排版规则，而它们可能没有很多图标，因此可能不需要部分寻址图标样式.
模式库
模式库就是这样，一个模式库. 当设计一个复杂(或不那么复杂)的网站或应用程序时，通常不可能设计每个页面, 这也不是一种有效的工作方式. 最终, 如果你单独设计每个页面, 你正在让位于设计上更多的不一致和重复. 创建模式库或组件库意味着将整个设计分解为多个部分, 就像一个谜题. 每个部分都可以在设计的多个实例中使用和重用. 通过这种方式，时博体育官网不需要为出现在时博体育官网面前的每个元素创建一个新的设计.
为了更好地理解模式库是如何构建的，有必要研究一下“原子设计”。, 这个词是由布拉德·弗罗斯特提出的. 原子设计将化学与设计相提并论. 这个概念是基于这样一个想法:一个界面是由非常小的组件(原子)组成的，然后聚集在一起形成更大的组件, 稍微复杂一点的分子(分子)，然后结合在一起，形成了一个可以理解为更独特的界面部分(生物体)。. 然后这些生物结合起来创造模板，然后发展成特定的页面.
设计系统的好处
设计系统的主要目标是确保一致性，并帮助维护和潜在的扩展网站或应用程序. 然而，设计系统对不同类型的用户有不同的好处.
针对客户(网站或应用的用户):
对于网站或应用程序的用户来说，可用性是最重要的，这可以通过一致性来实现. 在大型网站或应用程序中，有许多声音参与创建最终结果. 如果没有适当的措施来防止这种情况，这可能会导致界面碎片化，并产生许多不一致的地方. 设计系统可以对此有所帮助. 他们帮助创造的一致性可以在不同方面帮助用户:
学习曲线缩短了: 减少界面中特定动作或元素的表示数量，可以避免用户必须为他们执行的每个动作或任务学习新的表示.
避免混淆: 通过追求遵循标准和惯例的一致的用户界面，时博体育官网让用户的生活更轻松. 用户带着他们自己的期望来到一个网站，这些期望是基于他们在别处学到的东西. 如果没有必要，时博体育官网不应该重新发明轮子，因为这会挑战他们的期望, 这可能会导致混乱.
更快的体验: 通过使用模式库中的组件，用户还可以更快地使用组件, 精简的经验. 这是因为更少和更一致的组件意味着更干净的代码, 这反过来意味着更好的表现.
对于团队:
对于创建网站或应用程序的设计师和开发人员团队, 设计系统意味着更有效率. 这种效率可归因于:
尊重品牌准则(设计师): 通过设计系统, 时博体育官网可以确保所有组件都遵循样式指南规定的某些规则.
保持一致性(设计师): 拥有一个设计系统可以帮助时博体育官网保持设计的一致性，这反过来意味着更精简和更快的设计，因为时博体育官网不必为每个新元素考虑新的设计.
未来设计文件(设计师): 当需要新的设计时，有了一个设计系统，时博体育官网就有了起点.
更少的代码(开发人员)
开发者的独立性: 通过设计系统，时博体育官网可以避免开发团队等待特定人员提供设计和文档的潜在障碍. 所有组件都可供整个团队使用.
开发人员文档: 良好的文档将帮助开发团队了解何时以及如何使用每个组件.
对于企业所有者或机构:
对于组织来说，设计系统可以帮助:
降低成本: 通过重用组件和功能.
更快乐的用户和吸引新用户的潜力: 有了一个设计系统，你的产品将更加一致，这将转化为更好的可用性, 让用户更快乐.
寿命: 拥有一个设计系统也意味着网站的寿命更长，因为新元素更容易创建，调整更容易实现.
设计系统的缺点
为了公平起见，时博体育官网概述了设计系统的一些缺点. 我不得不说，好处比坏处多，这是肯定的. 尽管如此，这里还是有一些缺点:
如果不及时修改，设计系统可能会变得僵化.
当一个设计系统已经存在了一段时间，它会导致反射的减少, 探索和新的创意.
维护一个设计系统可能会非常耗时. 每一个变化都必须考虑在内，最终这是手工工作. 对于不断迭代的产品来说，拥有一个始终保持最新的设计系统尤其困难.
有人可能会认为设计系统可能是限制性的. 虽然这可能是真的, 根据我的经验，这些限制促使我更有创造力，并提高了作品的可用性. 事实是, 经常, 想要拥有完全的自由和创造力是时博体育官网不愿意遵守一套规则的借口. 有时候，没有规则的设计更容易. 然而, 当你制定了一套规则并坚持执行时, 总体结果决定于质量, 和谐, 以及一种没有限制的设计所没有的坚固感.
我已经学会了不要把规则看作限制，而要把它们理解为指引. 当你没有任何规则时，你会感到沮丧，因为没有什么能完美地结合在一起, 创造一个新的元素来配合整体就变成了一个不必要的挑战. 通过创建一个系统, 这些限制使我的设计工作更加集中，并为我的创意提供了一个合理的框架来表达自己，而不会危及产品的可用性.
像专业人士一样学习规则，这样你才能像艺术家一样打破规则
你需要一个设计系统吗?
这是在你为了拥有一个设计系统而开始创建一个设计系统之前你应该问自己的第一个问题. 并不是所有的项目都需要. 也许你正在做的项目是一个非常简单的营销网站. 在这种情况下，设计系统可能仍然是有益的，但它可能是，它可以更快地设计网站的所有页面，而不是花时间创建一个复杂的设计系统.
也许你需要一个简单的设计系统. 也许, 一个带有颜色和排版的样式指南以及模式库中的几个组件将足以提供有用的文档和指导.
这将我带到了下一部分，即制作适合您和您的项目需求的设计系统.
一个适合你的设计系统
我想强调创建自己的设计系统的重要性. 我的意思是，不是每个设计系统看起来或工作起来都是一样的. 不同的项目和客户有不同的需求.
例如，一个内容丰富的网站可能需要更多地关注排版的使用, 而营销网站可能需要更多关于使用颜色和布局的指导. 你的设计系统应该做出相应的调整, 在需要额外文档的领域提供额外的支持.
当时博体育官网谈到UI和开发之间的转换时, 值得一提的是，这两个阶段之间可能存在沟通上的差距. 这种差距对设计师和开发人员来说都是令人沮丧的, 并可能导致产品进一步出现问题.
拥有一个设计系统可以极大地帮助你弥合这一差距. 这将有助于组织内容，并为开发团队理解设计的基本规则提供良好的文档. 然而, 即使有最全面的设计系统和交接指令, 从项目的开始到结束，一起工作是很重要的, 甚至在设计实施之后，也要确保没有任何解释的余地.
在构建设计系统的过程中，我尝试着识别这一差距中的常见问题，并制作特定的文档来解决这些问题，这对我帮助很大. 这都是关于定制你的设计系统. 例如, 作为一名设计师，我经常看到很多关于文本样式之间的间距的错误, 视觉元素, 填充等.). 为了解决这个问题，我提供了这方面的额外文档.
设计系统和开发交接平台
有许多开发交接平台. 正如本文开头所提到的，它们都有独特的功能和自己的局限性. 在Fruto，时博体育官网使用Zeplin. 使用这些工具时, 即使你会遇到一些限制来创建一个非常完整的设计系统, 您总是可以以自己的格式添加一些额外的文档.
例如，Zeplin有一个很好的组织组件的方法，但在我看来，它缺乏描述某些规则和元素的空间. 您不能在字体比例上重新排列文本样式，也不能添加相应的描述). 为了帮助解决这个问题, 我所做的是在Sk等h上创建一个单独的画板，并将我需要交流的一套规则放在那里. 然后我将这个画板上传到另一个页面并为它创建一个名为“指导”的部分. 这些“贴纸”画板可以包含任何你需要解释的内容，甚至可以作为组件区域(如. 交互元素状态概述).
