设计系统是现代产品设计的核心，它不仅仅是组件库的集合，而是一个涵盖规则和管理的全面体系。本文将深入探讨设计系统的十个关键方面，从组件库到产品化，再到跨部门合作，揭示如何通过设计系统提升品牌一致性和用户体验。

我对于设计系统的介绍就像是掉进了一个黑洞

这发生在我在一个交易软件公司做产品设计期间。我们呈指数级的扩张，所以我们的 UI 组件库需要升级以满足商业需求。当我进行了一次产品审查来确认优化点，我知道了 Figma 上线了一个自动排版功能。我将这个新功能应用到我们的组件库里，但是事情变得更复杂了。我并不止于做了审查，我最后设计了整套设计系统。在这个项目里，我一人承担了多种职责：创造内容，调研，编写文档，训练我的设计伙伴如何使用并更新设计系统。

我做的第一套设计系统只是为了解决开发的页面还原度问题。在深度沉浸于设计系统的世界后，也经历了在其他公司的设计经验后，我学到了一些我希望在一开始就有人告诉我的事情。

Article body illustrations by Aura de Papel.

一、设计系统并不仅仅是组件库。

当 Figma 上线了自动排版功能，它改变了设计师建造模块的方式。我试着确认哪些元素能用这个新功能重建。我发现线上产品和设计之间有很大数量的组成差异。开发和设计都能接触到这些组件，但是他们没有一个任何标准来规范自己使用组件的方式。我不认为我能一次性完成一个通过更新一些组件来驱动整个产品的项目，但实际上我做到了。我不仅仅赋予了一些组件自动布局的能力，同时我编写了文件夹来保持产品的一致性。由此，UI 组件库成为了一个设计系统。通过这个，我学习到，UI 组件库是组件和风格的集合体，而设计系统则是通过规则管理他们的存在。

二、产品化你的设计系统，你的用户会感谢你。

一个解决用户的问题并满足特定商业需求的软件产品。熟悉目标用户的特征，工作流程以及痛点是创造一个有影响力的产品的第一步。对于你的设计系统而言，这也是一样的。

设计系统是为了两方人而存在的。首先，它面向最终在你的公司产品上产生购买行为的用户。但是，它也为依赖自己而工作并创造有影响力的产品的设计师们服务。当你将设计系统看作一个产品，它的优点是会节省设计师花费的一些重复劳动并使得设计师将更多的精力花费在如何设计流畅的交互体验上。开发可以简单的抓取已经写好代码的组件并使用它们。设计系统的主要目标是降本增效。设计系统是设计产品所需的必要产品。

三、设计和开发应该是密不可分的

和设计师相似的是，开发可以通过设计系统抓取已经准备好的组件来提升它们的工作效率。真正的挑战是如何保持这两方对设计系统定义及使用规则的一致性的认知。

终端用户并不是和设计工具（例如 figma，zeplin，invision 或 sketch）做交互，但是她们的确会接触到设计系统的益处。他们可以分辨什么页面看上去和这个产品不符，尤其是有了设计系统之后。功能一致性同样是有所关联的。终端用户想要预测组件是怎么工作的。如果组件不以他们的预测锁行动，用户会感到沮丧或者丧失对此产品的信心。开发和设计需要在所有阶段都一起工作来保证产品的一致性，合作是成功完成设计系统的唯一秘诀。

四、帅气的命名并不一定有用

当我第一次设计我的设计系统，我对我出众的色盘设计非常自豪。我设计了帅气的风格名称：牛仔, 蓝调, 孔雀石和朱砂。我觉得这已经足够灵活了，但是当我们设计黑夜模式时翻车了。我们所面对的第一个问题是缺少标准来确认在不同的场景下应该使用什么样的颜色来设计我们的组件。设计师和开发不知道什么时候应该用什么颜色。有一些框线是灰色的而有另一些是蓝色的。同样的颜色设置在黑夜模式场景下并不适用。

我们通过与上下内容没有什么关联性的方式，命名 color token （颜色密钥），从而解决这个问题，简化了主题融入 design system （设计系统）的过程。目前，标记色值的方式有很多种。每个公司其实都有属于自己的命名结构。比如：Assna 使用【sentiment-sage-prominence-interaction】；Material Design 建议使用【design-system-type-purpose】。而我个人认为，随着业务场景不同，我们需要深入研究并应用最为合适的语义或全局命名，从而满足当前和未来设计系统的需求。

五、原子设计帮助你记忆基础的魔法

在我开始设计我的第一版设计系统前，我调查了一些业界优品来帮助我打基础。我找到了一个叫做由 Brad Frost 提出的“原子设计”的方法帮我来划分系统结构。它的重点是组件如何被拆分成更小的可以替换，优化，交换的颗粒，而不会破坏整体结构。遵循这种方法，我们可以更快地组装设计，并自动更新多个设计中的组件。这改变了游戏规则！我建议将此应用于任何设计系统。

六、合作可以提升质量以达到商业目标

一个设计系统团队不可能独立于他们的用户之外。设计系统和产品团队之间的交互方式并不只有一种。随着产品的发展，设计系统不断成熟。但是如果公司成指数级成长，来自其他不同团队的需求和报告将不可抵挡地迅速增多。

向跨部门贡献者展开设计系统并帮助他们自己使用系统满足自身的需求是一种始终与商业需求共前进的好战略。其中一个主要的担忧可能是担心有突破性的改变出现。可以创造一个工作流程来保证一致性。为贡献者提供明确流程和材料可以使得他们对流程更有把握。跨部门合作者提供新的思路来帮助设计系统成长并推动商业目的的达成。

七、一个具有持续性的设计系统需要产品和开发保持合作

继续上一个话题，大公司把设计系统看作他们的品牌核心以及产品视觉方向。规则并不仅仅影响软件产品，还建立了统一的品牌体验。一个设计系统团队应该持续对利益相关者和目标使用者的反馈保持回应。产品，市场，品牌，用户体验，管理和设计系统团队的合作推动着设计系统的变革。除此之外，当你是其中一员或对它很熟悉的时候会比较容易接受一些事情。能够提供给消费者一致的用户体验的最优战略即为列下利益相关者的名字然后明确设计系统将如何帮助他们优化工作流程。

八、最有挑战性的部分就是采用环节

在是否采用时通常会产生各种担忧。找到一个找到坚实的基础，为相关团队创建培训材料是一个很好的策略。可以是视频，玩乐学习，研讨会或课程，或者是任何你们可以想到的方式。培训的方式取决于公司和它的能力。最终目标是让人们意识到采用设计系统的好处。如果你的利益相关者不能理解如何将设计系统应用于他们的工作流程，他们是不会使用的，这就会导致消费者的不一致体验。如果你的利益相关者接受了设计系统但是不懂得怎么样持续保持更新，他们会自己找到一套方法使得设计系统可以为他们工作，即使这意味着他们会脱离规则独立使用设计系统里的内容。

九、可访问性是非常必须的

交流技术和平等的机会是人类的权利，设计系统的可访问性是每一个团队都需要的基础功能。这为流程增加了更多步骤，但提高了产品的商业价值，满足了更多客户的需求。在指南中，公司改进了所有用户的可访问性，提高了一致性，并优化了用户体验。我发现你不需要成为这个领域的专家，但包容心会让你成为一个更有职业道德且更有同情心的人。

十、设计系统是无限的

就像是其他一些产品，一个设计系统在它上线之后会经历一个高强度迭代的过程。产品设计师会发现 bug 和新需求并需要设计系统团队持续的支持。随着公司的发展，产品团队的优先事项也会随之改变，因此他们将依靠设计系统及时满足新的需求。在准备培训材料的同时，跟踪工作和改进，以便您可以跟踪谁做了什么以及何时做了什么。为了避免风险，我建议独立发布修复 bug 并增加新的功能来保证设计系统主体拥有回归可能。别忘了，赋能于你们的同事是保持设计系统持续发展的关键。

在我创建设计系统的经验中，有很多内容不停的推翻并重复。为了避免浪费时间，在开始之前思考如何创建模版，衡量体系和灵活的方案来促进未来的发展。设计系统可能听上去像是一套你可以直接跟随的过程，但是实际上，它是一个不停轮转的包括无限迭代的，周期性维持的，并且跨功能的项目。