为什么需要设计系统

您的前端应用需要一个设计系统。如果您想提供一致的用户体验 (UX)、更快地发布功能、更轻松地进行品牌重塑，并腾出时间专注于棘手的 UX 问题，那么本文正适合您。

首先，什么是设计系统？

设计系统是一种帮助您构建应用程序的工具。它提供了您的团队设计和开发产品所需的所有构建块和指导。简单来说，您可以将设计系统视为一个组件库。在“原子”级别，您可能拥有按钮、头像或工具提示的组件。这些组件就像乐高积木一样，将您的应用程序拼凑在一起，形成“分子”，最终构成完整的页面。

然而，设计系统不仅仅是一个组件库。它还包含关于如何使用组件的设计原则和品牌规则。它包含完善的文档，其中包含模板和注意事项示例。它涵盖了组件库的相关流程、策略和愿景。它可能包含一个用于更新的博客或新闻通讯。并且，它对设计系统的所有者或贡献者有着清晰的治理模型。

设计系统远比我们看到的要复杂得多！

既然我们已经搞清楚了这个定义，那么在构建应用时，为什么要使用设计系统呢？主要有四个原因：

让我们来探讨一下这些想法。

一致性能让用户在浏览应用时产生熟悉感。如果按钮在一个页面上的外观是某种样子，那么在另一个页面上看起来不一样，就会让人感到困惑。对于下拉菜单、模态框或自动完成输入等组件中更复杂的交互，您绝对希望其行为保持一致。如果同一元素在不同页面上的外观和行为不同，您的用户可能会感到沮丧或困惑。

Spotify 提供了一个有趣的案例研究，说明他们如何解决其 UI 中的不一致问题。

回想一下 2009 年，十年前的 Spotify 应用与现在大相径庭！网页、桌面和移动端的体验和设计截然不同。你必须根据不同的设备重新学习如何使用这款应用。甚至在各个页面之间切换都很费劲。主页的体验与播放列表或艺术家页面截然不同。整体体验感觉很不连贯。

Spotify 意识到了这个问题，并寻求一种能够统一跨页面、跨设备和跨平台用户体验的解决方案。从 2013 年开始，他们花了两年时间构建和实施他们的设计系统。这时间可真够长的！但看看结果就知道了：

值得吗？我认为值得。

Web 应用程序充斥着重复的功能。当然，你可能正在构建一个新功能，但该功能是由许多构建块组成的。你的应用中可能到处都有按钮、工具提示、头像和对话框。

那么，如果你的应用中有 20 个模态框，你会选择哪种方案：你可以从头开始构建每个模态框，每个模态框需要一天的时间来构建。或者，你可以在三天内构建一个可重复使用的模态框，然后你可以在任何需要的地方用不到 15 分钟的时间实现这个模态框。

这应该是显而易见的。构建可复用的组件比从头重写类似的代码更有益。使用设计系统可以加快开发生命周期，并在不牺牲质量的情况下更快地发布功能。

每隔几年，一家公司就会进行某种形式的品牌重塑或设计更新，这并不罕见。虽然设计上的改变可能相对简单，但要将样式更新应用到所有需要的地方却可能非常繁琐。

设计系统允许您在一个地方进行更新，然后坐下来观察应用程序各处的变化。

假设有一个简单的更改，将原本圆润边缘的蓝色按钮改为圆润边缘更明显的绿色按钮。此更改需要应用于应用中的每个按钮。

如果您将每个按钮都构建为一次性实现或不一致地使用设计系统，那么这项琐碎的任务很容易变成一场噩梦。

在下面的截图中，第一个按钮是使用设计系统实现的，第二个按钮是独立构建的，但样式与设计系统的按钮相似，第三个按钮则使用了完全不同的样式。当更新应用设计时，只有第一个按钮会受到设计系统更改的影响。现在，应用的外观更加不一致了！

现在，如果应用中的每个按钮都由设计系统提供会怎么样？在设计系统中更新样式非常简单，现在应用中的所有按钮都拥有了相应的新样式。太棒了！

我有时会听到有人批评使用设计系统，大致是这样的：“设计师不需要设计系统。他们不想被束缚。他们希望在设计过程中，能够自由发挥创造力，开发出每个新功能。”

然而，我认为这种想法是短视的。

如果你是一名设计师，正在设计一个新功能的原型，你真的会认真思考下拉菜单应该如何呈现和运作吗？你每次都想设计一个新的按钮吗？你还要重新构思工具提示的样式吗？

或者，你更愿意关注整体用户体验？你更愿意关注这个新功能如何解决用户的重要问题？你更愿意关注页面的整体工作流程，确保它看起来自然且符合逻辑？

我敢打赌大多数人都会选择后者。设计系统不会限制创造力——它能激发创造力。设计系统负责提供构建模块，让你能够专注于最重要的事情：设计卓越的用户体验。

如果您想构建一个可扩展的应用程序，您需要一个设计系统。设计系统使您能够提供一致的用户体验，更快地发布功能，更轻松地进行品牌重塑，并腾出时间专注于棘手的用户体验问题。