什么是设计系统？

设计师喜欢优秀的UI套件已经不是什么秘密了。然而，除了将工具包和样式指南放在一起之外，UI设计师越来越关注设计旨在将整个产品捆绑在一起的系统，开始意识到系统设计的重要性。这是令人鼓舞的。谁知道，也许有一天我们会有一个设计工具，假设我们每次打开一个新文件都是从头开始......？

设计系统（与技术产品相关）不仅仅是框架，UI工具包或组件库。它不仅仅是一种风格指南或一套代码指南。它甚至超过了这些部分的总和。设计系统是管理产品组成的不断发展的规则集。

任何优秀的设计系统都有很多方面， 从公司文化/使命开始，一直到品牌，文案，组件库和其他设计语言。更高级别的点可以说是任何设计系统中最重要的方面，但就本文而言，我将假设作为一家公司 - 您知道自己是谁，您的使命是什么以及您的产品应该如何看待，感觉和功能。

一旦掌握了这些关键因素，就可以将这些知识转化为一种有凝聚力的设计语言。

设计样式调色板

在我们开始设计闪亮的组件之前，我们需要为这些组件奠定基础。我们需要将产品分解成最简单的形式。

即使是最简单的标题组件也是多个可重用样式的集合......

我们需要将事情分解，直到达到不可减少的最小值; 最基本的款式。一个好的起点是CSS样式属性的完整列表。这些属性中的大多数只接受固定值，因此可以在互联网上的每个网站上重复使用。接受自定义值的属性最终将使我们的产品与其他产品区分开来。这些自定义值将定义我们的全局样式调色板。我们的全球风格调色板将用于设计和构建我们所有产品的每个方面。

当我们完成时，我们的产品中不应存在尚未在我们的全局样式调色板中预定义的单一样式。

颜色

让我们从最明显的样式属性开始 - 现代设计工具理解的唯一样式属性可以命名，存储和重用：颜色。

对于我们的主要品牌颜色，让我们选择蓝色。对于我们的二级品牌颜色，让我们选择它的互补品牌：橙色。

                                                        品牌颜色

利用颜色来传达成功和失败是一种常见的设计模式，所以让我们为我们的调色板添加绿色和红色。黑色和黄色等颜色也可能效果很好。

                                                  成功和失败的颜色

最后，我们需要一些灰色。大多数UI至少需要以下灰色：

1、浅灰色的背景

2、边框，线条，笔划或分隔线的灰色略深。

3、副标题和支持身体副本的中灰色。

4、主要标题，正文和背景的深灰色。

当然，您可能需要更多灰色。您可能需要三种不同的阴影进行正文复制。您可能更喜欢两种不同的笔触阴影。随你（由你决定。这里的要点是，您可以预先定义您需要的任何样式，以便在以后的阶段可以在整个产品中重复使用。

最后，我们可能还想为每种颜色添加色调或阴影变化。在设计用于添加浅色背景或深色笔划的组件时，这些功能非常有用。

                                                  我们的最终调色板

阴影

阴影是大多数UI中另一种常用的样式属性。从我所看到的情况来看，许多设计师在设计组件时只是想出了袖口上的阴影。实际上大多数样式属性也是如此。像这样隔离设计通常会导致UI不一致。

让我们退后一步，考虑一下我们想要用阴影实现的目标。我们显然试图为UI添加一些视角，但很多组件可能会受益于相同的效果。因此，让我们将样式从单个组件抽象到我们的全局样式调色板中。

这四个阴影应足以为我们系统中的每个组件设置样式：

一个微妙的阴影，以提高交互式组件和增加可用性。

悬停效果对组件的影响更明显。

一个强大的阴影，为下拉/弹出窗口和其他类似组件提供视角。

模态组件的遥远阴影。

                                              我们的范围从微妙到遥远。

类型比例

为了在每个屏幕上创建适当的可视化层次结构，我们需要定义许多不同的字体大小。

下一步是粗略决定我们需要哪些字体大小。

标准文本的默认值（1em）将出现在我们的营销网站，UI等许多地方.16px是默认的浏览器字体大小。 例如，博客中的大型正文副本稍大一些。 标题和小标题有两个较大的尺寸。 部分标题的大小非常大。 例如，定价页面上的价格可能非常大。 对于较小的正文副本，输入提示和其他辅助文本，我们还需要一些较小的尺寸。

                                                      类型比例

边界半径

现在只需将相同的流程应用于接受自定义值的每个样式属性。对于圆角，我们需要以下角半径值：

复杂，标签和标签等微小组件的小边框半径。 按钮和输入以及类似组件的中等边界半径。 卡片，模态和其他大型组件的大边界半径。 2px，4px和8px边框半径

注意：我们还需要50％的边界半径来构建像头像等圆形组件。

间距规模

几乎任何设计中最常用的样式属性是空格。我们是否将标题中的链接间隔开，将网格中的项目间隔开，在化身和链接之间添加一些距离或填充下拉组件 - 我们的产品中没有任何空格应该是任意的或无意的。

与类型一样，通过坚持间距比例，我们可以确保我们的每个组件和布局都是统一的。我最喜欢的间距尺度是Material design的8dp网格。

坚持8dp增量，我们可以绘制出一些间距值，我们可以使用它们来设计我们的产品套件中的每个组件和布局。

我们还可以使用这些间距值来定义一组宽度，高度和线高，我们可以重复使用它们来调整按钮，表单输入，头像和其他类似组件。由于这些组件通常在整个网络产品中彼此并排显示，因此如果它们遵循相同的大小规模以避免任何不必要的差异，则会有所帮助。

字母间距

正如我之前提到的，字体大小不是我们定义文本组件所需的唯一样式属性。字母间距是另一个有用的属性，我们可以用它来收紧大标题或允许较小的标题呼吸。

3或4个字母间距值应该可以解决问题。

构建组件库

现在我们已经定义了全局样式调色板，我们可以使用这些构建块并开始构建组件库。在大多数情况下，设计组件不是一个创造性的过程 - 我们只是将预定义的样式映射到组件。

在这个阶段，我们不应该需要一个尚未在我们的样式调色板中定义的单一样式。创作过程发生在样式调色板设计阶段。从这一点开始，无论是颜色，字体大小，边距/填充值，宽度/高度还是其他方面，我们用来设计组件和布局的每个样式都应该从我们的样式调色板中提取。几乎没有什么新东西需要引入。这可能听起来极端或不合理，但恰恰相反，这是我认为很多人误入歧途的地方。

设计一个组件是为了全局重用它，然后在产品的一个特定部分修改该组件，这是矛盾的。这首先打败了创建全局组件库的目的。每当我看到覆盖其他样式的样式时，通常要么是为了使其适合在狭窄的空间中而对组件进行黑客攻击，要么是在组件的变体上进行修改，因为在早期的设计阶段没有进行足够的规划。

每次在产品的一个区域中覆盖全局组件时，也会削弱设计系统的一致性。当您对分散在产品中的组件进行足够的零星修改时，您将不再拥有一致的设计系统。你只是有一个设计系统，其中有一个不一致的混乱。

让我们来看几个常见的组件，并使用我们在上面的调色板中定义的样式来演示如何构建它们。

简陋的按钮

让我们从一个简单的按钮组件开始，说明如何仅使用我们在样式选项板中预定义的样式来构造组件。

更多组件

同样，这些颜色，字体大小，阴影和填充值都是直接从我们上面预定义的样式调色板中获取的。

当我们设计和构建了一些组件时，我们就可以开始组合多个组件来创建更复杂的组件，例如此下拉组件。这样让我们的设计库组件更加智能，用起来更加方便。