创建设计系统的分步指南

介绍

在这个随处可见的时代，无处不在已经成为一种常态。然而，众所周知，一致性就是可信度。用户现在更清楚。不管是什么界面，快速而流畅的体验是一个基本的期望。

此外，时间是你不能浪费的资产。所有这些应该足以让你争先恐后地对你的网站或界面做更多的工作。然而，试图在设计中与50个不同的组件保持一致而不出错是一个很高的要求。

为 "设计系统 "提示鼓声，使你的生活变得简单。

什么是设计系统？

设计系统是一个由清晰记录的可重用组件组成的广泛档案，产品团队可以利用它来创造数字体验。换句话说，把设计系统看作是公司在设计方面的唯一真理来源。

比起风格指南或模式库，设计系统是不断发展的。这个与各种实体相关的指导方针的生态系统，包括用户体验设计，可以被用作任何项目的构件框架，以确保所有的组件都是一致的，并且与品牌相匹配。

虽然对初创企业、成长中的企业和企业都有帮助，但随着产品的发展，设计系统成为一个必不可少的、不可谈判的资产。它还可以积极地影响商业目标、工作流程、团队工作、用户体验和整体品牌体验。

设计系统的好处是什么？

实施系统设计的一些优点是

1. 在减少时间的同时提高效率 -任何设计系统的一个主要好处是能够快速创建和重新创建设计和开发工作。团队可以使用预先制作的元素来减少不断重新发明轮子的需要，并减少不一致的风险。
2. 提高各页面和渠道的视觉一致性 -缺乏一个组织范围内的设计系统会导致不一致的视觉效果，零散的用户体验，或与品牌的隔离。一套有凝聚力的标准也有助于管理大规模的重新设计或视觉重塑。
3. 促进统一的语言--共享的设计语言减少了由于跨职能团队内部和之间沟通不畅而浪费设计或开发时间的可能性。
4. 允许更好地专注于更复杂的问题--当简单的UI组件被创建和明确时，团队可以更好地解决复杂的问题，如信息优先级，旅程管理等。
5. 作为贡献者的参考和教育工具--设计系统可以在人事变动的情况下使入职过程更加顺畅。它还可以帮助新的个人贡献者轻松进入 UI UX设计或内容创作。
6. 有助于建立一个强大而永恒的品牌 -一个设计系统的目的是传达一个特定的身份和它所代表的产品背后的设计。它有助于创造有影响力的品牌，并帮助人们记住品牌体验。这使人们感到与一个品牌有更多的联系，并更加信任它。

构建设计系统的十步指南

我们阐述了一个十步骤的过程，以帮助你的公司创建一个设计系统。

1.彻底分析你现有的设计过程。

制定战略和启动任何程序的第一步是了解你目前所处的位置。回顾和分析你的组织目前的设计流程可以帮助你更好地理解最适合你的品牌的系统设计。问自己以下问题：

• 你的组织目前的设计方法是什么？
• 你们组织利用的现有工具是什么？

确保你评估产品团队的设计成熟度水平。这将有助于你粗略地获取在你的组织中实施新系统所需的时间。

2.确定你的品牌的字母表

一个品牌的字母将导致品牌识别，即品牌和产品价值以及品牌语言。品牌语言包括形状、字体、颜色、动画、声音和语气。

设计师将采用由品牌字母定义的视觉语言。回顾品牌指南和与利益相关者交谈可以帮助你理解品牌识别和语言。

3.对当前产品AI进行审计

对当前产品进行UI审计将帮助你解决一个主要的产品设计挑战：设计重复。The audit aims to achieve two goals -

• 提请注意产品中存在明显不一致的地方。
• 辨别产品中最常用和最基本的元素。

UI审计是一个多步骤的过程。识别和分析主要的UI属性以及它们在组件中的使用情况是至关重要的。你可以使用现有的工具来查看你的样式表中的独特颜色和字体的数量。然后，你可以进一步将每个网站的设计 分解为单个元素。

4.建立你的系统的设计原则

为了创造一个优秀的用户体验，了解设计决策背后的原因是非常必要的。此外，一套明确的目标使定义设计原则和与团队的协调更加容易。

想拥有一个设计系统流程吗？从这些问题开始：

• 你在创造什么
• 你为什么要让它
• 你将如何建造它

设计原则需要反映你的品牌价值和愿景。

5.建立一个组件库

这也被称为模式库，它应该包括你的用户界面的所有功能和装饰性元素。根据项目、用户需求和商业目标来评估这些组件，并保留你需要的组件。

6.制定规则

设计系统的建立不是为了将设计师限制在一个特定的设计方向上。相反，它只应该为设计者和开发者提供一个基本的框架，以扩展创造性的方向并为创新留出空间。

他们是设计系统规则的两种方法，正如Alla Kholmatova的书中提到的：

• 严格的规则 -设计师和开发人员遵循严格的程序来引入新的模式或组件。
• 松散的规则--这些规则允许设计师和开发者在不遵守严格的约束条件的情况下进行创作，如果他们认为这样做可以获得更好的设计。

像生活中的许多其他方面一样，必须在这些规则之间找到适当的平衡，这样产品才能在具有创造性的同时保持一致。

7.选择你的治理模式

动态的、不断发展的设计系统需要一个简单明了的批准和实施变化的过程。有三种治理模式：

• 孤独模式--一个人或一群人直接 "统治 "设计系统过程。
• 集中模式--一个团队负责并指导系统的发展。
• 联合模式 -来自几个小组的多人领导系统设计过程。

虽然这些模式各有利弊，但孤独的模式尤其会导致负责的一个人成为执行许多任务的瓶颈。最好的办法是根据你的需要，使用不同模式的组合。

8.定义组件结构

功能组件的重复是设计系统中的一个重大挑战。这导致了系统的不灵活，并要求设计者（和开发者）在每次有新的场景时都要创建新的元素。

成功的系统设计是高度可重复使用的，并允许用户将其作为其产品的基础。因此，建议开发可在不同内容中重复使用的元素。

可重复使用和可扩展组件的标准：

• 模块化 -独立的组件和可互换的元素。
• 可组合 -融合现有组件以创建新组件
• 可定制 -可定制的组件，可在多种情况下使用。

9.确保所有团队使用统一的语言

一个设计系统的目的包括促进无缝的团队工作。因此，将该系统整合到团队的工作流程中是至关重要的。它在为团队成员提供价值的同时提高了生产力。

在最初的整合过程中，更好地了解各种人如何使用设计系统，可以帮助你相应地修改系统。

10. 定期传达变化

一个设计系统的过程是随着组织的发展而发展的，不可能是静态的。因此，在将系统引入你的组织后，必须沟通所有的变化并保持组织的更新。

简洁和维护良好的更新日志可以帮助用户了解各种升级以及它们将如何影响他们的工作。

三个示范性的例子让你入门

阿特拉斯设计系统

(https://atlassian.design/)

澳大利亚著名的企业软件公司Atlassian设计系统，旨在为全球范围内的敏捷、分散的团队提供无缝协作。

Trello和Jira是Atlassian广泛使用的两个协作工具，充分体现了该公司的设计理念。这种理念就是利用数字体验来提高团队和个人成员的生产力和整体潜力。

说到这里，Atlassian设计系统提供了敏捷的技术和对项目的每个阶段的有效跟踪，从产品规划到交付。这最终产生了产品创建和交付的有益结果。他们的设计系统主要包括：

1. 设计指南
2. 品牌标准
3. 产品
4. 插图
5. 原型设计
6. 市场营销
7. 人格

IBM设计系统

(https://carbondesignsystem.com/migrating/guide/design)

IBM是一个大型IT企业的典型例子，它在全球范围内运作，并遵循自己的设计体系。

他们的能力包括从商业咨询和融资到软件创建、IT托管/管理以及连接软件和硬件的解决方案。

IBM的基本原则是不断推动进步，无论是人类社会还是一个品牌，都要用科学、理性和智慧。

根据IBM的说法，拥有一个好的设计不仅仅是一种需要，也是对用户的一种承诺。下面是他们的Carbon设计系统的一些突出特点，它为使用Adobe、Axure和Sketch的开发者和设计师提供了丰富的工具和资源：

1. 数据可视化
2. 模式
3. 组成部分
4. 准则
5. 教程

Uber设计系统

(https://baseweb.design/)

我们都至少坐过一次Uber。这家美国科技公司依靠运动，包括送餐、叫车、点对点骑行，以及使用滑板车和电动自行车的微型移动。

Uber需要一个高效的系统设计，使这种服务在所有子品牌、内部的、产品和项目中都能完美地运作。

Uber设计系统的主要属性是：

1. 品牌架构
2. 构成
3. 语气
4. 运动
5. 插图
6. 摄影
7. 图形学
8. 颜色
9. 徽标
10. 排版学

创建你的第一个设计系统之前需要知道的要点

1.早期清晰的沟通是你最好的新朋友

让你的内部消费者立即参与进来可能很复杂。事实上，如果他们的反馈不明确，在alpha或beta发布周期中提供得太早，或者没有帮助，可能会阻碍这个过程。

告诉你的客户，即设计系统的使用者，你需要什么，以确保你收到建设性的反馈。如果你处于早期的预发布周期，要诚实而清楚地说明你想要的确切输入。这表明你正在寻找产品的最重要的缺陷，而不是高保真的批评。

要注意过度思考，凋零你的思想，但不要犹豫，要过度沟通。

2.你的脚步声不是你唯一需要追踪的东西

在确定优先次序方面，一个关键的缺失是经常跟踪设计系统的使用情况。了解系统在哪里被使用，被谁使用，多长时间使用一次，以及更新的频率是非常必要的。

实施一些关于哪些团队正在使用哪些版本的库的日常统计收集工作，可以公平地理解采用、升级和降级的速度。

当你确定了那些很少更新的团队，你就可以着手了解阻碍升级的问题，并随后纠正它们。

3.反馈机制和《GOT》中的Rhaeghal一样被低估了

为了确保你的系统不仅对用户有价值，而且让他们感到自己是其中的一部分，并为之作出积极贡献，拥有简单而直接的方式让人们提供反馈（Slack、电子邮件等）并为系统作出贡献将是一个关键因素。

总是在尽可能多的地方提供关于如何和在哪里提供反馈的说明，永远不要假设任何事情，特别是假设用户会在你认为最明显的位置找到它。

设计系统是你的组织需要的北极星

一个成功的、精心设计的设计系统会成为公司骨干的一部分，从而产生一致的、放大的体验。此外，设计师和开发人员有机会更好地沟通产品的目的，而不是停留在把基本的构件放在一起。

任何通才都可以成为你提供设计的伙伴，但只有设计专家才能确定当前的问题、挑战和愿望，特别为你精心设计一个设计系统。现在不是等待的时候了。有了这个关于如何创建设计系统的广泛指南，你离彻底转变你的生产过程只有一个举措。

参考文献

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081