创建设计系统的好处

Styleguides 已经存在多年，并且一直对公司的视觉形象很重要，但该术语的重新命名为整个概念赋予了新的维度。

在过去，UI 设计师会对基础知识进行松散的解释。 颜色、字体、按钮以及可能的图标样式的概述，它会保存在硬盘驱动器上，只有在发送给需要查看视觉方向的外部机构时才会打开项目，或设计团队的新手，但对于实际使用它的内部设计师来说，它很少受到重视。

主要的知识财富通常牢牢地存放在设计师大脑的最前沿。 这将意味着围绕试图记住某个视觉模式是否在某个地方之前使用过的问题不断出现。 10 次中有 9 次最终会导致混乱的不一致。

近年来，样式指南得到了更新，并引入了设计系统或设计语言的概念。 随之而来的是一种全新的方法，可以极大地影响产品团队如何作为一个整体来处理设计。

有了一个坚实、一致、充分解释和深思熟虑的系统，创建设计的视觉方面变得完全模块化。 Craft by Invision 或 Brand.ai 等产品在一定程度上让视觉设计阶段几乎是拖放。

在您使用的元素与团队中的其他所有设计师一致的情况下创建安全性。 他们消除了视觉设计阶段的任何敌意，几乎到了创建低保真原型已成为过去的程度。

“风格来来去去。 好的设计是一种语言，而不是一种风格。” ——马西莫·维涅利

我不会用这篇文章来解释如何准确地创建一个设计系统。 我已经写过一篇文章：创建设计系统语言。 这更像是关于设计团队如何从投资设计系统中受益的单向讨论。

我们的设计系统介绍 – QUIK

在过去的几年里，从初创公司到成熟的组织，我一直在大量参与创建各种公司的设计系统。 我最近的一次冒险是为 Qstream 创建我们的设计系统。

从我在 Qstream 的早期开始，我就意识到尽快向我们的设计团队引入一个全新的、可工作的系统是多么重要。 不一致和糟糕的设计选择一直困扰着产品，随着产品和设计团队的扩大，稳定船舶并创造一种每个设计师都能完全掌握的语言至关重要。

有了这个，我们开始创建我们的新设计系统，恰当地命名为QUIK - Q流用户界面K它。

第 1 步：不一致

同样，我不会对我们如何创建系统的过程进行深入探讨，但我将简要介绍一下我们是如何摆脱困境的。

首先要做的是对产品中的视觉组件进行全面审核。 Brad Frost 整理了一篇很棒的文章，如果您有兴趣，您将如何进行 UI 审核。

这可能是一项可怕、耗时、单调的任务，但它非常有益。 它a)让您全面了解主要的不一致之处b)让您真正了解哪些元素是重要的并在整个产品中始终如一地使用c)为您提供有关产品如何工作的速成课程d )允许您向更广泛的企业展示现有视觉系统的弱点，以及为什么需要新的、一致的设计系统。

我们的 UI 审核的片段显示了跨平台 UI 的不一致。

第 2 步：创建元素

我们将系统分解为 3 个不同的实体。

1. 品牌——产品的品牌标识由创建视觉标识的关键元素组成。 颜色、排版和图像是任何平台的核心。
2. 元素——元素由系统中最小的可重用部分组成。 这些元素在系统的所有区域中不断循环使用。 （按钮，输入）
3. 组件– 组件是元素的集合，它们通常彼此并排使用，以识别流程中的常见模式。 （警报、表格、卡片等）

下一步是根据 UI 审核确定产品中最常用的元素的优先级。 这些将是您首先解决的第一个领域。

一旦我们确定了系统的关键元素，就该开始围绕每个区域创建样式和规则了。 我们首先处理了颜色、排版、间距和一般图标，然后再处理更成形的元素，如按钮、输入等。

迄今为止我们整个系统的鸟瞰图。

显然，系统越深入，元素的使用频率就越低，但这都是系统发展和使整体语言在产品的各个方面尽可能一致的一部分。

（我们还有另一个围绕我们的插图风格进行的项目，但我会将其保存在另一篇文章中，您可以在此处查看更多内容）

我们在整个平台上使用的说明性样式示例。

第 3 步：实施

我们目前正处于这个阶段。 老实说，我们可能永远不会走出这个阶段。 在你接受这样的挑战之前，你必须意识到的一件事是它永远不会结束。 你正在开发一个产品，它不是一个最终会结束的项目。 它将不断发展和成长。

您所要做的就是看看产品团队如何进行重组以迎合设计系统团队，许多人选择只专注于直接在他们的设计系统上工作的设计师，别无其他。 该系统已成为产品核心的组成部分。 如果创建得当，设计系统会创建焦点、清晰度和信心，进而会在整个产品中创建一致性，并会加快产品开发的周转速度。 不去爱的种种！

“设计系统不是一个项目。 这是一种为产品服务的产品。” ——内森·柯蒂斯

捆绑系统

创建一个适用于整个产品的设计系统是一回事。 我们还在制定品牌指南并概述我们的设计原则。 （同样，关于我们的流程的更多文章要关注）。

我们认为，在我们进一步推进之前，在设计的各个方面打下坚实的基础是关键，因为如果没有适当的脚手架，它将导致问题发生。 当我们开始扩大规模时，制定一套可靠的指导方针和原则将有助于指导我们朝着正确的方向发展。

一旦我们将QUIK提高到我们认为可以消费的水平，我们的计划是创建一个剧本，其中将包含我们产品核心个性和实体的关键特征。

• 品牌指南——一套指南，将介绍我们的品牌个性，并概述关键特征，如语气、颜色、徽标限制等。
• QUIK –一个将我们平台上的设计理念和方法统一到一个中心位置的系统。
• 设计原则——这些原则的目的是确保我们始终坚持对 Qstream 和我们的客户真正重要的事情。 他们将帮助我们做出符合他们目标的决策。

向前走

我们将努力在我们的平台上创建一致性。 我们还有很长的路要走。 从产品团队的各个角度来看，每个人都充分意识到这是一个巨大的挑战，但我们也同样意识到它对产品可扩展性的重要性。