毫无疑问，我被问到最多的就是关于设计规范体系的建立。所以在过去几年里，最多思考的就是如何设计、建立完整的设计体系，像Marvel, Bantam 和 Modulz这样的产品，下面我想分享一些我学到的方法。

什么是设计体系？

设计师们喜欢好的UI模版这已经不是一个秘密了。然而，最近不只是把工具包和风格指南,放在一起了，似乎有越来越多的设计规范体系在把整个产品组合在一起。Shopify和Intercom等公司正在筹建关于设计规范的内部团队。人们开始意识到系统设计的重要性。这是令人激动的。谁会知道呢，也许有一天会有一个设计工具，使我们不再需要每次打开一个新文档…?

设计体系（同样适用于科技产品）不仅仅是一个框架、UI工具包或组件库。它是一个多风格指南或一组代码的指导方针。它甚至超过那些部分的总和。设计体系是一个不断发展的规则管理产品的成分。

有很多方面任何好的设计系统——从公司文化/使命和滴一直到品牌、文案、组件库和其他设计语言。对于本文的目的，关于设计体系更重要的一点是，假设有一个公司，你需要知道你是角色，你的任务是什么，你的产品应该是怎样的风格和特点。

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

设计一个自己风格的面板

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

即使是最简单的标题组件，它是多个可重用的风格的集合…

Image title

我们需要打破思维直到我们到达最低点：最基本的风格。一个很好的起点是建立CSS样式属性。大多数的这些属性只能设置固定值，这样可以重用在每一个网站上。设置特定的属性值是最终会将我们的产品与其他产品区分开来。这些自定义值将定义我们全球化风格模式。我们的风格模式是我们将使用在设计和建造我们产品的每一个方面。

当我们完成设计时，每一个风格都存在于我们的产品预定义的全球化风格模式中。

颜色

让我们从最明显的样式属性入手，这是唯一一个样式属性可以用现代设计工具进行命名、存储和重用：颜色。

我们的主要品牌色彩选择蓝色。辅色选择与其互补的：橙色。

Image title

品牌颜色

色彩搭配的成功与失败是一种常见的设计模式，让我们添加绿色和红色。颜色像黑色和黄色也会看起来很好。

Image title

成功配色和失败配色

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

一个非常浅的灰色背景。
一个稍暗的灰色作为边界、线条、分隔线。
一个中度的灰色作为小标题，支持附加内容。
一个深灰色作为主标题、内文和背景。

当然，你可能需要更多的灰色。可能在内容上需要三个不同的色调。你可能喜欢两个不同的深度。这完全取决于你。重点是，预先确定的任何风格它们需要是可重用的在整个产品在稍后的阶段。最后一个点，我们还需要为每个颜色添加色调或阴影。这些在设计组件或者添加背景或深色线条中可能是有用的。

Image title

最终的色板

阴影

阴影在UI中是另一种常用的样式属性。我们所看到的许多设计师仅仅是在设计的组件中加入阴影。这适用于大多数的样式属性。孤立地设计常常会导致不一致的用户界面。

让我们退一步想想到底想要实现怎样的阴影。我们显然试图在UI中添加了一些阴影，但很可能许多组件可以受益于同样的效果。所以让我们从风格模式中分离出单个组件的样式。

这四个阴影样式应该足以满足系统中的每个组件：

一个淡淡的阴影用来表示交互式的组件。
一个稍明显的阴影表示悬停效果。
很大很深的阴影用于视角的下拉/弹窗和其他类似的组件。
一个长阴影表示模态组件。

Image title

从近距离到远距离的阴影

类型规范

为了在每个屏幕上创建一个适当的视觉层次,我们将需要定义不同的字体大小。

就像一段音乐中的音符，类型应该坚持规模化。这有助于维持平稳的节奏。乍听起来有点吓人，但幸运的是非常聪明的人已经找到了方法。Tim Brown已经建立了一个很棒的网站来显示各种类型。Adam Morse已经实现了开源的全音阶类型。我通常找适用于大多数web产品的“主要的三个”规模。

默认(1 em)标准文本用在网站、界面等的许多地方。浏览器默认字号是16px。
博客为例，内容用更大一些的字号。
标题和副标题用不同大小的字号。
段落标题用一个很大的字号。
价格定价页面为例，会使用很大到大的离奇的字号。
还需要一些较小的字号作为内文、输入提示和其他二级文本。

Image title

类型规范

边界半径

现在只是相同的过程把样式属性值应用到每一个特定的对象。关于圆角，我们需要以下圆角半径值：

小的边界半径适用于小型组件，如复选框标记和标签。
中等大小的半径为按钮和输入和类似的组件。
大半径的适用于卡片、动态窗口和其他大型组件。

Image title

2px，4px，8px的边界半径

注意：我们还需要50%的边界半径为构建组件的头像等。

间距规范

在任何设计中最常用的样式属性是留白。是否间隔分开标题中的链接，间隔网格中的项目网格，添加一些副本或者在链接之间的距离填充下拉组件——在我们的产品中空格应该是有意义的。

对于类型，通过坚持间距的范围，可以确保我们的每个组件和布局都是规范的。我最喜欢的间距尺度是MD的8dp的网格设计。Elliot Dahl写了一大篇关于8pt网格系统和好处的文章。

坚持8dp增量，我们可以画出许多间距值，可以使用它来设计每一套产品组件和布局。

Image title

我们也可以使用这些间距值来定义一组宽度、高度并且可以设定按钮的大小，表单的输入、副本和其他类似的组件。因为这些组件通常出现在网络的产品中，如果他们都遵循相同的大小规范，就可以避免很多不必要的差异。

字符间距

如前所述，字体大小并不是唯一的样式属性，还需要定义文本组件。字符间距是另一个有用的属性，我们可以使用它来平衡大标题和小标题。3或4字符的间距值应该足够了。

Image title

创建一个组件库

现在我们已经定义了全局样式面板，可以开始创建一个组件库。在大多数情况下，组件设计不是一个创造性的过程，我们只是把预定义的样式映射到组件。

在这个阶段，不需要在风格模版中已经定义面板。创作过程是在样式面板的设计阶段。从这个观点上看，无论是颜色、字体大小、边界/填充值、宽/高或其他，每个用来设计组件和布局的面板都应该是我们的风格模式中的。几乎没有什么新的需求。这听起来很极端或不合理的，但是正相反，这就是我认为很多人会误入歧途的。

Dave Rupertz最近在Twitter上进行民意调查，例如，如果那个按钮是一个模型组件，如何用代码设置样式。

Harry Roberts在自己的文章中解释了他的想法。在那之后，Jonathan Snook 增加了他自己的想法。虽然我同意Harry和Jonathan的想法，但最终我认为这整个辩论是不必要的。

为了更加全球化的重用组件设计是相互矛盾的，只需修改一个特定的产品组件。最开始的目的是创建一个全局组件库。每当我看到这个样式覆盖到其他的风格，通常是因为黑客在早期设计阶段没有足够计划的情况下为了让空间紧凑或附加一些组件的一种变体。

每次在你的产品组件全球化的同时，你也在破坏设计系统的一致性。当你有了很多零星的产品组件，你不再有一个一致性的设计系统。你的系统会变得很不一致很混乱。

让我们看一些常见的组件和如何用上面的面板中定义的组件构建样式。

按钮

让我们先从一个简单的按钮组件，解释如何只使用我们预设的样式定义组件。

Image title

更多的组件

同样，这些颜色、字体大小、阴影和填充都是上面我们预设的样式。

Image title

让我们发散一下思维

当我们设计并实现一些组件，就可以开始结合多个组件来创建更复杂的像下面这样的下拉组件。

Image title

这个下拉组件不能单一的使用我们前面定义的风格的基本样式。使用这种方法，我们可以设计一个完整的组件库，然后转移到更广泛布局，最后再应用到全屏幕。

小贴士

在我们的样式模版中没有定义的特定组件需要设定值，例如，侧栏的宽度。有时这些值只是1/3的视窗宽度或大概值。其他时候，这些值将是任意的或不可重复使用的，这样就可以了。关键是考虑哪些风格是可重用的(大部分)，哪些风格不可以的。
让组件有意义。不要试图增加选项而增加按钮、输入标题或其他组件。对于组件的级别，应该只定义出现在每个实例中的组件。由于选项在不同的项目中，最好使用div包。Harry Roberts 写了一篇很好的涉及这一点的文章。

原文地址：https://medium.freecodecamp.com/how-to-construct-a-design-system-864adbf2a117#.clxjy3297

作者地址：https://medium.freecodecamp.com/@colmtuite