如何构建设计系统

如何构建设计系统

设计和构建一致的设计系统技巧

什么是设计系统？

设计师喜欢好的UI Kit已经不是什么秘密了。但是比起把工具和样式规范放在一起，最近人们越来越重视能把整个产品联系更加紧密的设计系统了。像 Shopify 和 Intercom都正在建立专门针对设计系统的内部团队了。大家逐渐意识到了设计系统的重要性。这是令人振奋的，但是也有可能将来我们会有一个设计工具并不认为每打开一个文档工具都是从头开始。

一个设计系统不仅仅是原型图、UI Kit或组件库，它更像一个样式规范或者代码指导，甚至是超过两者的总和。设计系统是管理产品组成不断优化的规则。

任何好的设计系统都有很多特点。从公司文化一直延续到品牌、文案、组件库和其他设计语言。按理说，更高水平的观点是任何有关设计系统文章最重要的方面，所以针对此文，默认将要建立设计系统的公司是知道自己的目标，了解自己的产品形式、感受和功能的。

一旦有了以上关键因素，就可以将知识转化成有力量的设计语言。

设定色调风格

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

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

我们需要分解到最基础的样式。整个CSS样式属性的列表就是一个好的开始（注：通常设计在与开发交接规范时，会让开发做出来规范里的代码样式，待校检完毕再继续之后的工作）。大多数这些样式属性数值都是固定的，可以在每个网站上重复利用，而正是这些属性区分了我们和其他产品的不同。这些作用促使我们定义自己的全局色调风格。我们的全局色调（调色板），将用于设计和构建我们所有产品的每一个方面。当我们完成后，产品中不应该出现标准色以外的颜色。

颜色

我们从样式属性最明显的颜色开始。

我们选择蓝色作为主要品牌色，第二品牌色我们选择其补色：橙色。

品牌色

使用颜色来进行反馈操作成功或失败，是常见的设计模式。所以我们添加绿色和红色到标准色，黑色和黄色也是不错的选择。

安全色和警告色

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

• 作为背景的浅灰色

• 稍微灰一点的，用作边框、直线、描边、隔断

• 中等灰作为副标题和辅助文本

• 重度灰作为标题和主要文本和背景

当然，还可能需要更多的灰色，用于3中不同主要文本的阴影或者选择2中用来描边；这取决于你。重要的是设置好任何你需要的形式，以便在整个产品中重复使用。

最后，我们需要为每一种颜色添加色调或者明暗上的变化，这对添加浅色背景和深色描边很有用。

最后得到的标准色

 

阴影

在大多数UI中，阴影是另一种常见的样式属性。有很多设计师在设计组建过程中是临时设计的阴影，而且大多数其他样式属性恐怕也是如此。这种设计的孤立旺旺导致UI的不一致性。退一步思考一下我们想用阴影实现什么目标？很明显是想为UI增加另一个视角。但是其他组件也很可能受用用样的效果，所以我们不要单独设计组件，要从全局样式中去提取。

以下阴影应该足以应对对梓潼中每一个组件进行调整：

• 一个微妙的阴影用来提升交互组件和增加可用性

• 一个明显的阴影作用徐悬停组件

• 更强的阴影给予下拉列表或其他相似组件独特的视角

• 模态组件的长投影

从微妙到长投影

 

字体大小

为了在一个屏幕上创造合适的视觉层级，我们需要定义一些不同的字体大小。

下一步是大致决定那些字号是我们需要的，然后绘制出来。

• 标准默认文本（1em）出现在UI和营销网站的很多地方，16px是浏览器默认文本字号

• 例如博客中大多数文本字号偏大

• 标题和副标题有两个较大的字号

• 部分标题字号非常大

• 价格方面的字号可能非常大

• 还需要一些小字号用于次级文本、提示性文字和辅助文字

不同的字号

圆角（边界半径）

对于圆角，我们需要以下数值：

• 微小组件的圆角，入复选框、标签和列表

• 按钮和输入框以及类似组件的中等边框半径

• 卡片、摩天台和其他大型组件的大边框半径

2px、4px和8px的圆角

 

间距（留白）

在任何设计中最常用的样式属性是留白。无论是辩题间距、网格中内容间距、或是在某些板块中间增加一些拘留，这些间距都不应是无意的。

像字体一样，遵循一定的间距，才能保证每个组件和布局的统一。作者最喜欢的间距数值是Material design’s 8dp grid. Elliot Dahl 曾写过让人受益匪浅的 great article about the 8pt grid system 。

根据8dp增量，我们得到一些间距上的数值，可以用来设计整套产品中的每一个组件和布局。

我们还可以使用这些间距值来定义一些宽、高和线；可以重复使用可是配按钮、输入框或其他相似组件。由于这些组件经常并排出现在网络产品中，保持相同尺寸可以避免不必要的差异。

字间距

如前所述，字号并不是我们定义文本组件的唯一样式属性。字间距是另一个非常有用的属性，其可以让大标题之间收紧，让小标题之间有呼吸。

3或4个字母间距诀窍：

 

构建组件库

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

在这个阶段，我们不应该需要一种在我们的全局样式中没有定义过的单一样式。创意过程发生在全局样式设计阶段。从这一点上，无论是颜色，字号，间距/填充值，宽/高或其他样式，我们用于组件和布局的每种样式都应该从我们的全局样式中提取。

设计一个组件的目的是在整个产品中都可以重复使用，然后在该产品的某个特殊部分修改该组件是矛盾的。首先，这打破了创建全局组件库的目的。每当我看到一些风格中夹杂另一种风格，通常都是修改全局组件的结果，大多是因为在早期的设计阶段没有足够的规划。

我们来看几个常见的组件，然后逐步介绍如何使用我们定义的样式来构建它们。

 

小按钮

我们从一个简单的按钮组件开始，以说明如何使用我们在全局样式中预定义的样式来构建组件。

 

更多组件

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

 

尝试做一些更复杂的

当我们设计和构建几个组件时，我们可以开始组合多个组件来创建更复杂的组件，如下拉组件。

此下拉组件不是我们之前定义的基本样式之外的创建的单一样式。使用这种方法，我们可以设计一个完整的组件库，然后应用到更广泛的布局，最后到全屏幕。

人工翻译，纯手工码字，如有收获别忘点赞哦