原文：https://medium.com/@nynsuthar/space-size-style-aba80f820716

设计系统的构建模块

内容(形状)、空间、大小和样式是设计的基本要素。无论设计多么简单，这些元素总是存在的。我们来看一个圆。

正如我们所看到的，它有一个特定的形状，一个特定的大小，一个特定的样式(白色填充)和它周围的空间。如果我们去掉这些元素中的任何一个，这个圆就不存在。想象一下移除这些元素，你会发现所有这些元素都是相连接的。

在这篇文章中，我想分享我对这些基本元素的理解，以及如何在设计系统中系统化这些元素。所以就让我们一探究竟吧

内容(形状)

内容是我们用来传达信息的任何东西。简单的形状，图标，图形，图片，字符，文字，段落等。

内容是由产品目标和必须传达的信息来定义的。我不会过多谈论内容，因为它不能被标准化来重用。接下来会有一些UX指导方针，但内容主要取决于产品目标。

空间

空间的本质是内容之间的间隙。这是你正在阅读的字符、文字、线条和段落之间的间隙。这是这一页边上的排水沟。一旦我们看到它，我们就会意识到超过80%的画布都是空白的。空间和内容一样重要。就像音乐一样，音符之间的停顿和音符一样重要。

要使内容清晰，需要间隔。它还定义了元素的关系和分离。更接近的元素被认为是相关的，而远离彼此的元素被认为是不相关的或分开的。让我们举一个简单的例子来理解这个效果。

在图像中，我们看到了白色的圆圈，我们也看到了这些圆圈。尽管所有的圆都有相同的尺寸和样式。我们仍然可以看到这些组。这是因为它们之间的空间。

在UI设计中也可以看到间距。让我们以一个表单为例。每个字段的标签、输入和描述相互靠近，与两个字段之间的间隙比较。我们这样做是为了确保用户能够清楚地看到每个表单字段，并且不会混淆。间距还可以通过嵌套组呈现信息结构。这有助于用户理解复杂的界面。

有多种方式向用户传达组和信息架构，但空间是最简单有效的提示。特别因为它不需要对原始内容进行任何修改，也不需要添加任何其他元素。想象一下，如果键盘上没有空格键，我们改变颜色来区分每个单词的情况。

大小

尺寸只是大小，不需要任何解释。

它通常影响内容的视觉层次结构。更大的元素在层次结构中被认为是更高的，而较小的元素被认为在层次结构中更低。为了理解这个效果，我们来看看这个例子。

我们大多数人都会看到父母和孩子。即使只是一个缩小版的同一个人。我们认为更大的东西比小的更强大，更有统治力。所以每当我们看到这种大小的差异时，我们就会自动把它们放在不同层次上，并定义关系。

在UI中，这种效果通常用于排版。题目、标题和段落的大小分别减少。

在UI中创建一个视觉层级结构非常重要。它帮助用户在深入了解内容之前，在高水平浏览内容。这提高了可发现性，让用户在不阅读所有内容的情况下跳转到他想要的内容。大小是实现这一目标的最佳元素，因为它可以在不改变其含义和与其他元素的关系的情况下使内容被注意到。

样式

样式是颜色，边框，阴影，字体和其他视觉效果。样式化内容是一个选择，但我们不能完全消除它。至少内容会有一些颜色。

样式主要影响内容的意义和重要性。不同的颜色和视觉效果有不同的含义。不同的颜色对比也可以改变元素的重要性。

交通信号就是最简单的例子。所有的灯都有相同的形状，相同的大小和相同的间距，但是颜色是不同的，这就是定义每个光的意义的东西。

同样，我们在UI中使用这些颜色来区分错误、警告和成功消息。

UI设计中另一个常见的样式例子是按钮。我们使用样式来传达按钮的不同状态，我们也使用样式来创建不同类型的按钮。例如，初始动作的不透明按钮，二级动作的空心按钮和危险动作的红色按钮。

区分内容对于帮助用户理解不同UI元素的意义、重要性和行为非常重要。样式是一种正确的方式，不影响我们设计的其他方面。而且因为我们的朋友——空间和大小都忙于其他事情。

简言之，空间定义了关系，大小定义了层次结构，样式定义了内容的意义和重要性。

设计系统中的空间、大小和样式

设计系统提供了设计师直接用于设计产品的可重用组件。它负责通用的UI/UX标准，并给予设计师更多的时间专注于解决实际问题，而不是担心单个组件和微小的细节。

但是设计组件，保持一致性和构建和谐的系统也是一个挑战。这就是对基本元素空间、大小和风格的理解可以帮助我们的地方。所有的设计都是由这些基本元素组成的。因此，我们设计系统中的所有组件都是由这些基本元素构建的。我们还发现，每个元素都有一个或两个主要的影响。因此，让我们看看如何使这些基本要素系统化，并控制它们对改进我们的设计系统和设计过程的影响。

大小和空间系统

网格和规模

要定义大小和空间系统，我们首先需要一个基础。否则，我们将有大量的值可供选择。所以我们遵循4x4和40x40的网格，定义了4和40的倍数的倍数。我们将只使用这些值来定义大小和间隔规则。

选择网格大小有多种理论。我们现在不用担心这个。一旦我们建立了系统，我们就能完全控制它，我们也可以随心所欲地调整这些数字。

大小

要定义系统的大小，我们必须根据用户的使用情况对UI元素进行分组。经常一起使用的元素，我们把它们放在一个组中。例如，复选框和字体应该在同一个组中，因为我们经常会把它们放在表单的旁边。这将确保我们有合适的大小用于我们想要一起使用的元素。

为了说明这个系统，我们将研究两个类别——元件和组件。

元件是原始的UI元素，如字体、图标、单选按钮、复选框和切换开关。

组件是用元件组成的，有时只需在元件中添加一个框架。像按钮，输入框，下拉菜单，表格单元，边栏项目，标签和标注。

然后，对于每个组，我们定义一组大小，并定义为默认值。对于元件，body的行高(本例中为20px)是默认大小的良好参考。对于组件，让我们选择40px，因为它是体行高度的倍数(它也与我们正使用的较大网格相匹配)。

空间

为了定义空间系统，我们根据UI元素的组成对所有间距进行分组。例如，由元件和组件组成的表单字段而不是由多个表单字段组成的表单将在一个不同的间隔组中。这将确保用户能够清楚地看到和理解内容的架构。

为了说明这个系统，我们将研究三个组:小部件、模板和布局。

小部件仅仅是元件和组件的组合。如表单字段、导航栏等。

模板是小部件的组合，如表单、列表等。这个类别还包括用于在UI中分组和分开小部件的框和分隔线。

布局是指页面布局、列、空隙和页面之间的间距等，是最高层次的组成。

现在，对于每个组，我们定义一个默认大小，并定义一个较小和更大的尺寸，我们可能需要不时地进行细微的视觉修正。对于布局，我们不需要细微的变化，但是我们需要不同的值来区分列(20px)、gutters (40px)和section & pages (80px)之间的间隙。

我们故意选择了与默认模板和布局相同的大小。因此，当我们在UI中创建多个列时，它看起来很和谐，并创建了一个统一的网格。

这里要注意的另一点是，我们没有为组件内部的微间距定义任何规则。例如，输入中的内边距。因为在这个尺度上，匹配元件的尺寸和在网格上使它们适配比那些微型空间更重要。我们可以根据内部内容的大小和我们想要的组件大小来计算间距。

下面是一个使用大小和间距系统创建的UI示例:

这个系统有什么帮助?

所有UI元素和页面都完美地遵循网格。

间隔看起来是一致和和谐的。

当我们使用这个系统时，UI会自动形成一个视觉层次结构。

同时决定大小和间距时较少的选择和认知负荷。

创建新组件时的认知负荷更少(需要的大小是已知的)。

样式系统

这样设计真的很简单，也很有趣。但它很强大。

为了创建样式系统，我们创建一个表，其中每个列表示一个状态。我们定义了一组通用的状态，比如默认、禁用、高亮、错误、警告、成功等等。我们可以通过在现有的设计系统中查看不同的组件状态来轻松创建这些状态。然后，我们在每一行中放入不同的组件，并在最相关的列中添加不同状态的样式。

为了表示样式，我们将样式做成正方形(以及用于框架和内容的同心方形)。我们将原始组件的所有样式应用于背景、边框、圆角半径、阴影等。

这个系统有什么帮助？

我们可以看到我们对用户的认知负荷有多大。

我们可以轻松地最小化认知负荷并简化UI。

我们可以控制我们在整个产品中使用的颜色的意义和重要性。

在创建新组件时，我们已经准备好了样式的引用。

我们可以发现异常值并提高一致性。例如，在上面的系统中，空心按钮的悬停样式与其他按钮不同。