构建完美设计系统的 5 个关键步骤

构建设计系统的基本步骤

设计系统是可重用项目、元素和规则的集合，作为整个项目设计团队的指导方针。 它现在被广泛认为是 UX 设计过程的重要组成部分，在为用户提供成功的体验方面发挥着重要作用。

在过去的几年里，这个系统为许多国家的产品设计策略带来了一股清新的空气，它远远超过了典型的 UI 指南。

考虑到它为我们提供的一致性和其他好处，我们听到了很多关于创建这个系统的必要性。

IBM 和 Airbnb 等著名公司也加入了自己的设计系统，以加快和促进团队内部的创作。

记住这个简短的介绍，让我们开始对设计系统进行更详细的描述，并找出它可以帮助我们的方式。

究竟什么是设计系统？

设计系统是由各种元素组成的多合一信息源，可帮助团队成员进行产品设计和开发。

它使您可以针对多个应用程序处理与产品设计相关的所有事情。 这组指南的总体结果是系统中的连贯顺序，涵盖从操作按钮到登录页面的每一个步骤。

 

设计系统和样式指南有什么区别？

通常，设计系统由各种元素组成，使其成为不同应用程序的可靠来源。

您在风格指南中发现的是品牌的各种颜色、徽标、字体和其他必要属性。 设计和营销团队大多使用风格指南，但设计系统高于视觉和呈现方面。

它是风格、声音和组件的组合，对于创建系统的体现至关重要。

考虑一下主要关注公司应如何与受众交谈的指南。

这与常规的风格指南不同，因为它告诉您应该做什么和应该避免什么，以便向人类传达更好的感觉，从而留下更有价值的体验。

简而言之，您可以在一个称为设计系统的地方找到原则、指南、模式、组件和协议。

公司为什么要有设计系统？

设计系统是信息的动态集合，随着公司的扩张或客户需求的变化，这些信息会随着产品的发展而发展。

提高生产力，更轻松 合作 是团队合作中设计系统不可分割的两个结果。 它们可以通过多种方式帮助企业实现增长，以下是一些最重要的方式：

持续一致

公司通常需要针对多个平台进行设计，同时保持它们之间交互和行为的一致性。

您的资源越一致，设计师和开发人员就越容易实现高质量的 UI。

这样，他们将能够将特定产品或页面视为已知元素的组合。 考虑到您需要在登录页面上有一个 CTA 按钮。

您无需描述有关字体、填充、颜色和背景的确切细节，只需要求他们给您一个“主要 CTA”。

这样做可以防止看到产品具有十多种不同类型的按钮样式、多种设计布局以及不同的感觉和外观。

从另一个角度来看，它给出了一个基于组件和 模块化 给你的设计师的心态。 它允许他们定义更易于管理的元素并根据设计需要进行所需的更改。

这种一致性不会留下最终结果，但会产生更高质量的产品，这也有助于对 QA 团队进行监控。

团队合作

您是拥有多个团队同时从事项目的公司之一吗？ 如果你是这种情况，建立一个设计系统可以大大加快团队成员之间的协作。

由于人们可以更好地访问各种资源，因此该信息源可让您节省大量时间从头开始创建新项目或升级现有项目。

此外，设计师和开发人员之间的沟通变得更加高效。 这就是为什么许多人认为设计系统是这些学科之间的桥梁。

拥有一个设计系统不仅可以提高当前团队成员的生产力，还可以加速 入职阶段 的新人。

您团队中的新设计师或开发人员可以更快地熟悉您的价值观，并且能够毫不费力地找到他们需要的东西。

我们需要什么类型的设计系统？

要遵循的设计系统类型在很大程度上取决于您的团队和您想要生产的产品。 我们可以从一些简单的问题开始弄清楚。

• 该系统将由一个小团队还是一个大团队使用？ 他们完全理解这个主题吗？
• 将要对齐的产品总数是多少？ 我们使用什么平台和技术？
• 所有产品的一致性对我们来说是否至关重要？

下面的原则可以让我们对这方面有更好的理解。

 

灵活还是刚性？

首先，您需要清楚地知道是否要为进一步的实验留出空间。

灵活的计划为所有团队成员提供了使用的一般指南，同时为他们提供了一定程度的自由。 这意味着您的设计和开发部分的团队成员可以根据他们的要求使用它。

另一方面，严格的计划涵盖了详细的文档，这为设计人员和开发人员提供了一个同步的计划来遵循。

在严格的系统中，将新的想法或元素输入计划并不容易，因此，首先应该考虑到所有因素。

最好的方法是结合使用灵活性和刚性。 有时，您的设计师和开发人员可能对使用您的设计系统没有那么大的兴趣，强迫他们这样做不会产生任何影响，只会让他们退缩。

然而，一个非常松散的系统，让一切都是可选的，根本不能被认为是一个设计系统！ 因此，请记住通过将您的设计系统与严格和松散的系统计划一起准备，从而获得两全其美。

模块化与集成

模块化系统设计现在被广泛应用于不同的行业。 最好在需要多用户需求并应在短期内扩展的项目中使用。

然而，此类系统的实施通常需要更高的预算，因为制作可以有效协同工作的独立部件是一项具有挑战性的任务。

它通常用于大型在线商店或政府网站等广泛的项目。

另一方面，集成系统主要关注单一上下文。 虽然它是由一些零件组成的，但它们可以更换或互换使用。

它适用于其中没有太多重复元素的系统。

如何构建设计系统？

开始为您的组织创建一个设计系统可能会让人感到非常艰巨。 需要考虑的点非常广泛，一个设计系统不可能一蹴而就。

一般来说，摆在我们面前的有两种情况，开始一个全新的项目或使用我们目前拥有的产品。 总体方法几乎相同，但后者涵盖了更多步骤。

对于一个新项目，您应该首先检查包含元素和概念的不同示例。 寻找能让你感到满意的设计，然后利用现有的流行原则为各个部分提出颜色和形状。

如果您已经在处理一个项目，那么第一步就是创建一个清单 用户界面元素.

通过这样做，您将能够分析它们之间的差异和相似之处，从而减少额外的选择。

现在，您可以根据应用程序有效地对它们进行分组，并使用可用的工具来加快流程。

作为一般程序，创建此类系统的关键步骤如下。

分析你有什么

选择要实施的设计系统的最佳方法是查看您为设计应用的现有方法。 首先弄清楚您遵循的流程以及为此目的使用的工具。

此外，评估您的产品团队理解设计方面的难易程度，以估计引入设计系统所需的时间。

接下来，确定您用于品牌的字母表。

这个通用术语包括产品价值以及您使用的颜色、声音和字体。 您还可以查看您的品牌指南，并在制定设计原则时参考此数据收集。

 

检查视觉方面

您最不想遇到的就是设计重复。 它会给您带来不一致，从而导致项目结果的质量降低。

进行视觉审核以识别重复项并对产品中的所有相关组件进行分类。 此审核不仅可以帮助您发现产品中的不一致之处，还可以帮助您发现产品中最重要和最常用的元素。

在 CSS Stats 工具的帮助下，您可以通过了解 CSS 中独特颜色和字体的数量来开始这个多阶段过程。

现在您对样式有了更好的了解，您可以查找组件。

在这里，您可以使用 Atomic Design 网站，顾名思义，您可以在其中找到网页上存在的最小元素的细分。

创建设计语言和模式

您的设计语言是您打算使用的设计系统的核心。 通过清楚地理解为什么要做出设计决策，可以实现出色的用户体验。

您的设计原则应该对有关您构建的内容、其背后的原因以及您使用的方法的问题给出可以理解的回答。 设计语言应该有四个主要部分。

颜色

通常，使用两种或三种主要颜色来代表品牌的身份。 如果您希望为您的设计师提供更多选择，请包括颜色混合、阴影和色调。

 

字体

一个合适的设计系统通常由两种字体组成； 一种用于标题和正文，另一种用于代码。 避免使用多种字体，因为它只会让您的用户感到困惑而没有任何积极的结果。 还， 为网站选择合适的字体 可能很棘手，所以要足够注意它。

 

间距和尺寸

您在页面上使用的空间和边距在平衡时显得最有利。 在这方面，现在必须选择与智能手机完全兼容的系统。

 

意象

您的图像同样应根据指南进行准备。 为您的品牌制定一些规则和计划，并不惜一切代价坚持下去。

现在是时候深入了解将在您的 UI 中使用的实际组件了。 使用您拥有的零件和片段创建一个库，其中包括每个按钮、图像，甚至您的表单。

根据您的确切需求对其进行评估，合并相似的项目，并删除额外的项目以简化决策过程。

 

制定规则和策略

如前所述，设计系统的最终目标是将创造力提升到更高的水平。

我们在前面的章节中提到，你的规则应该是严格和宽松的结合，这样团队成员的创造力就不会局限于一个方向。

考虑到设计系统的动态特性，您应该定义从长远来看应对变化的方式。

一种流行的模型描述了治理策略的三种方法——单独的、集中的和联合的。

在孤立模型中，负责的个人或团队做出与设计系统相关的所有决策。

集中式模型是指团队负责系统中发生的事情的条件。 而联合模式意味着让来自不同团队的几个人负责系统。

许多人认为单独模型是最冒险的选择，因为一个人决定一切，在许多情况下，这可能会阻止任务完成。

拥有负责升级和更改系统的团队的组织应与他人保持密切联系，以使系统更加通用。

考虑到联合模型中涉及多个团队，人们可以更快地适应变化。 然而，需要一个团队负责人来控制整体进度。

这些选项中的每一个都有优点和缺点，选择模型完全取决于您。

您可以在团队中实施所有方法的组合，但无论您做什么，始终关注团队成员在您的系统中的参与，并鼓励他们讨论他们的想法。

总结

设计系统不再是未来主义的愿景。 设计系统是一整套设计必需品，正日益成为公司产品战略的基础。

它可以为设计人员和开发人员提供更好的集成，从而产生更好的结果。 该系统加强了设计驱动的活动，并随着时间的推移不断发展。

因此，我们应该随着产品的变化和发展不断地更新它。