每个产品都需要搭建一个设计系统来提高效率和保持产品的一致性，这次临摹我们会用一个微型的设计系统案例让大家了解到搭建设计系统所需的必要步骤。
重点掌握：
本次临摹已经加入 MasterGo 「好设季」系列赛事活动。
参与并完成本次临摹，点击「信息提交」，跳转填写参与信息即可参加 MasterGo 「好设季」。
通过参与「好设季」系列活动，可以解锁相应的「成就勋章」，我们会根据参与者所获得的「成就勋章」量化积分，并最终在「好设季」收官时，根据最终积分排名，发放终极大奖。
下面开始本次微型设计系统的临摹吧！
打开 MasterGo 并创建一个新文件。
MasterGo 使用地址：MasterGo
设计系统是为了统一整个产品的视觉规范，通常来说会由以下几部分组成：设计原则、颜色系统、字体系统、阴影系统、动效系统、间距系统、插画系统、icon 系统、基础组件、功能组件等。
在这个教程当中，我们会选择其中最常用和核心的部分，带大家做一个微型的设计系统，在这个教程中我们主要会学到：
首先，我们要先确定颜色的个数和每个颜色所需要的梯度。
一般来说，颜色系统由以下几部分构成：
其中“灰度色”是用的最多的，一般用在文字、背景等界面的大多数地方；
强调色一般只有一种，属于产品的主色，一般用在需要强调的地方，比如“确认按钮”等；
辅助色一般是功能性的，一般用在错误警告，成功提示等地方，需要选择和主色搭配和谐的一些其它颜色。
我们在这里定义了 4 种颜色，分别是 Gray、Blue、Red、Green。
其中 Gray 是灰度色，Blue 是强调色，Red 和 Green 是辅助色，Red 用于错误警告，Green 用于成功提示。
我们把每个颜色分为 10 个梯度，意思就是每个颜色从最浅到最深有 10 个档。这样可以在颜色使用上有更多搭配的空间。
其中需要注意的是，对于强调色和辅助色来说，可能用不了那么多档，一般来说，3 - 5 个就比较合适了。
首先，画一个 595*842 的容器作为颜色页面，并且在页面中加上标题：颜色 Color。
然后我们在页面下方按左右模式排版：左边是颜色名称，右边用来展示颜色。
先做第一个灰度色：左边我们名字设置为 Gray，右边绘制 10 个圆角矩形作为颜色块，颜色块下面分别写上颜色的梯度值和色值，这样其他人看起来会更清楚。
灰度色的梯度值和色值：
50 #f9fafb；100 #f3f4f6；200 #e5e7eb；300 #d1d5db；400 #9ca3af；500 #6b7280；600 #4b5563；700 #374151；800 #1f2937；900 #111827
接下来，我们需要将这些颜色添加为样式，这样颜色就在其它地方复用且保持同步更改了。
我们先选中刚才创建的名字是“50”的颜色块，在右侧栏的填充部分，找到在加号左边的“样式按钮”（4 个点）。
点击样式按钮，再点击弹窗右上角的“加号”。
在新建样式弹窗中输入颜色的名字，这里我们要输入的是：gray/100。
其中 gray 是颜色类的名字，100 是颜色梯度的名字，中间的斜杠用于将颜色归类。
提示：
在 MasterGo 中，样式或组件名字里面的斜杠前的名字都会自动识别成组名，斜杠后的名字会自动识别成二级名字，建议大家自己动手试一下。
当创建成功后，我们再次点击填充旁边的“样式按钮”就会看到刚刚创建的样式出现在了样式面板中，这时我们就可以通过点击来将它应用到选中的图层上（描边颜色也是通用的）。
最后，我们重复以上操作，将 10 个颜色都添加为样式，灰度色的样式就搭建成功了。
接下来，我们用同样的方式开始制作其它的颜色样式。
先将其它剩下颜色在画布中全部绘制出来，排好版。
然后依次按照上一个步骤的要求和命名方式将所有颜色添加为颜色样式。
打开样式面板，如果看到的是 4 个颜色组，每个组内 10 种颜色，那么所有的颜色样式就都搭建成功了。
接下来，我们就要开始做文字样式了，首先我们先了解下文字样式一般是怎么构成的。
通常来说，文字样式我们需要区分移动端和桌面端的，因为移动端走的是一套范围内的字体，桌面端（网页端）走的是一套范围内的字体，并不能通用。
然后在同一套文字体系下，我们可以按照更语义化的方式来把字体的梯度分开，比如标题、正文、提示等等，在每个梯度下还可以根据需求再分更小的梯度。
语义化命名是一个很好的习惯，有助于我们更直观的判断文字的使用场景，希望大家能够掌握。
了解了文字系统的基本构成后，我们就要开始搭建真正的文字样式了，首先我们要先确定的是文字梯度。
这里我们分了 5 个梯度，分别是：
当然在实际情况中一般是不够用的，在这里我们只是为了示意所以只做了 5 个梯度。
我们将之前做的颜色页面复制出一份，然后将标题改为 排版 Typography。
将下面颜色部分删除，做成三栏的模式：
左边是文字样式名称，右边两栏分别是字号和行高。
然后我们按照右图上的示例，将每行文字的名称部分调整为对应的属性，以便我们后续添加文字样式。
提示：为什么行高需要定义？
选中 “一级标题”文字，在右侧属性栏的文字部分找到“样式按钮”（4 个点），点击样式按钮，再点击弹窗右上角的“加号”。
在新建样式弹窗中输入文字样式的名字，这里我们要输入的是：h1 - 30px。
其中 h1 是文字样式的名称，30px 是为了让使用文字样式的人能第一时间知道文字的字号而不用点开查看特意加的，属于一个小技巧。
当创建成功后，我们再次点击文字旁边的“样式按钮”就会看到刚刚创建的文字样式出现在了样式面板中，这时我们就可以通过点击来将它应用到选中的文字上。
最后，我们重复以上操作，将 5 个文字样式都添加为样式，文字的样式就搭建成功了。
在我们接触了解设计系统时，颜色和文字样式都是最常见的，而对于阴影我们基本不会特别在意，为什么我们需要给阴影做样式呢？
其实阴影的运用在 UI 设计里也是非常重要的。
阴影代表了模块的高度，越高的模块，应该有越大和越浅的投影，越矮的模块，应该有越小越重的投影，我们如果善于利用阴影，可以让界面的层次更加清晰和明显，这也是 Google 所提出来 Material Design 设计规范的一部分，有兴趣的小伙伴可以去了解更多：
https://material.io/design/environment/light-shadows.html#light
一般来说，阴影不需要很多，对于某些类型的设计来说，甚至可以没有，在这里我们将阴影分了 3 个梯度：
需要注意的是二级阴影和三级阴影我们使用了多层阴影来模拟更真实的阴影。
因为在真实环境中阴影模糊和颜色的衰减是非线性的，所以只用一层阴影就会显得有点“假”，阴影越大越明显。
当我们做比较大的投影时，使用两层或多层阴影来模拟真实阴影的衰减效果，会让投影效果看起来更真实。
我们将之前做的颜色页面复制出一份，然后将标题改为 阴影 Shadows。
将下面颜色部分删除，做成两栏的模式：左边是阴影样式名称，右边是阴影的示例效果。
在右边每一列画一个灰色的底，来让阴影看起来更明显，再在灰底上各自画一个圆角矩形。
为每个矩形添加不同级别的投影效果：
一级投影
二级投影
三级投影
首先我们简单先了解下“原子设计”的概念，在原子设计中把设计系统分为了 5 类：
Atoms 原子层、Molecules 分子层、Organisms 有机体、Templates 模版、Pages 页面
组件的划分我们也会基本遵循一个从大到小的原则，当然我们不一定要划分这么细，但需要有意识的将组件按照从小到大的颗粒度来做划分，比如一个按钮就是小颗粒的组件，一个日期选择器就是一个大颗粒度的组件。
一般来说，只要包含了其它组件，那么这个组件就已经不算最小颗粒度了。
首先我们要区分是移动端的组件库还是网页端的组件库。
如果是移动端的组件库，首先包括的应该是系统官方的组件，比如做的是 iOS 应用，那么基本都是要使用到 iOS 的官方组件的，但这个不用我们自己搭建，一般来说我们直接用现成的就好（比如在 MasterGo 资源广场中就可以找到，见示例）。
如果是网页端的组件库，那么大部分就需要我们自己搭建了，除非我们用第三方现成的组件库，比如 Ant Design 等。
一般来说通用的都会包括：图标、按钮、输入框、表格、弹窗、菜单等等。
首先我们先来制作图标组件，因为图标是属于设计系统里的原子部分（图标中不会包含其它更小的组件了），所以我们要最先做。在绘制图标组件时有以下几点需要注意：
这里我们选了 12 个常用的图标，大家可以不用从头绘制，将右侧图标复制到你的设计系统文件中，全选后在顶部组件下拉菜单中找到“批量创建组件”并点击，12 个图标组件就创建成功了。
现在我们要使用更进阶一点的功能，学会用变体功能来组织图标，这样可以让组件数量更少，使用起来也会更方便和灵活。
选中所有之前我们创建好的图标组件，点击右侧属性栏中的“组合为组件状态”，我们会发现这些组件会被一个带有紫色虚线框的容器包起来，这时他们已经形成“组件集”了。
保持选中状态，找到右侧组件状态下属性名字“属性 1”，将其改为“图标名称”。
这时图标就已经组织完成了，我们可以复制出一个新的图标组件的实例，可以在右侧组件属性中找到“图标名称”的下拉菜单，展开后选择就可以更换图标了，是不是方便很多呢。
首先我们先来做主按钮的正常状态。
画一个容器（可以先不考虑大小），将容器填充色改为我们之前做的样式中的：blue/500，圆角改为 6px。
接下来在容器中添加文字“主按钮”，将文字样式设置为之前做的：H3-16px。
然后点击容器，添加“自动布局”上下边距设置为 8px，左右间距设置为 16px。
把上面做的按钮复制出一份，然后将容器填充色改为：blue/600，这个新按钮就是主按钮的 Hover 状态了。
将前面做的 2 个按钮复制一份。将 2 个新按钮容器填充色分别改为：gray/500 和 gray/600，作为二级按钮的正常态和 Hover 态。
将前面做的 4 个按钮复制出一份，点击左侧图层栏上方的组件切换到组件栏，在下方找到我们刚刚创建的邮件图标组件，将它拖入到新复制出的 4 个按钮中。
选中 4 个按钮，将自动布局中的间距统一调整为 8px，将对齐方式改为上下左右居中对齐，这样带图标的按钮就做好了，图标也可以随时进行替换。
将刚才做的 8 个按钮按右面示例的方式放在一起，先将所有按钮做成组件，然后就和刚才做图标一样，将所有按钮组件组合为组件状态。
接下来我们按下图来设置按钮的变体属性，分别来控制按钮的类型、状态和是否带有 icon。
最后我们参考右侧示例在变体容器外侧输入一些文字标识，让其他人也能很快的清楚组件的结构，组件部分就组织好了。
在制作输入框的过程中，会综合用到我们之前做过的字体样式、颜色样式、阴影样式和图标组件。 我们先画一个 178*48 的容器，设置为 1px 的内描边和 6px 的圆角。
在容器中添加一个文字图层，样式设置为“body - 15px”，将容器复制 3 份做为不同状态的输入框，属性分别是：
然后给正常态和选中态容器添加自动布局属性，上下边距 8px，左右边距 12px。
给错误态添加自动布局属性，上下边距 8px，左右边距 12px，将“分布式”开关打开，然后到组件栏中找到感叹号图标拖入到错误态容器中，这样三个不同状态的输入框就做好了。
将刚才做好的三个输入框选中，使用“批量创建组件功能”将它们创建为组件，然后保持选中状态，在右侧属性栏找到“组合为组件状态”并点击，这样输入框的“组件集”就创建成功了。
然后将输入框组件集的属性名和值按下方示意修改。
然后输入框组件就搭建完成了。
将之前我们做的图标、输入框和按钮整理到一个页面中。
然后将之前做的样式页面也检查一下，将四个页面并列放好，看下组件栏里面是不是有三个组件，分别拖出来试试变体功能是否可用。
取消选中图层，在右侧栏切换到样式面板，看看样式是否正常。
如果没有问题，一个微型的设计系统就完成啦。
本次临摹教程也将上线至 MasterGo「每周临摹」板块，请实时关注。
参与学习的小伙伴还可以同步上传临摹作品到 MasterGo「每周临摹」板块，持续参与活动，还可解锁周边奖品！
点击跳转：MasterGo「每周临摹」
Powered by Froala Editor
将伟大的想法变为现实
58
作品
197
粉丝
1
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册