我们为什么要建立组件库？

作为设计师我们都清楚创建组件库是我们在做UI设计中一个重要的工作，一个合适的组件库不仅能够帮助设计师更高效的设计页面，同时也可以提高开发者的工作效率，让产品整体风格更统一，一目了然，更便于日后维护、整体修改；特别是在多人合作时，一个合适的组件库可以保证产品的统一性，不至于做到最后一个人一个风格，所有页面又需要从新调整统一，不仅费事费力、没有效率，也让加班没有任何意义；由此可见在团队合作中，组件库起到了相当重要的作用。

下面我们就开始讲讲如何建立组件库

定义颜色

一般情况下我们需要：

1、品牌色即主色调

Primary Color (主题色)

2、功能色（功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。）

Warning Color (警示色)

Success Color (成功色)

Danger Color (危险色)

3、中性色（中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。）

黑色：正文、标题等

最浅灰：用做背景等

次浅灰：用作分割线 / 边界线 / 斜线等

中灰：用作次标题、辅助文字

深灰：用作主标题、正文、深色背景

白色：字体、背景

定义字体

选择合适的字体

选配合自己产品风格的字体。用 不同大小、字重表现视觉层级。

所选字体要满足：

易读性：长时间读起来不累。

可缩放：在很大、很小时，仍易读。

丰富性：至少有2种字重。

一般需要这几种字体：

默认字体：整个产品的标准文字。（一般浏览器默认字体是16px，）

大一点的文字：用于大一点的正文。

更大的文字，用于次标题。

再大点，用于标题。

特大字，用于每个部分的标题。

超大字，也许用于价格，举个例子。

小字，用于更小的正文，输入提示、次级辅助文字。

此外，还需要考虑字体的行高、字间距。

每种型号的文字，都需要设置一下几种状态：

Default （默认 ）：黑+白，透明度80-100%。

Secondary（次级）：黑+白，透明度50-70%。

Disabled（不可点）：黑+白，透明度20-40%。

Accent（带颜色的）：主题色+功能色。

在下面我会介绍如何在Sketch中创建字体系统

定义图标

选择合适的图标样式

选配合自己产品风格的图标

所选图标样式要满足：

统一性：线性的统一、圆角、直角的统一、风格的统一等

差异性：在统一性的基础上差异性越大，用户越容易辨认他所代表的不同功能，从而降低用户使用时的辨别成本。

可识别性：一个一眼就能认知的icon大大提升了用户的操作效率，降低了用户操作的辨识成本

趣味性：一组icon应具备提升和侧面传达产品的气质，体现产品的商业特性或属性

定义组件

1、阴影（一般需要4种阴影模式）

微微小阴影：表示一些交互组件z轴升高，增加可用性。

明显一点的阴影：表示组件的 hover 状态。

一个强烈点的阴影：表达 dropdowns / popovers 等组件。

远一些的阴影：用于弹窗。

2、圆角

小圆角：用于极小组件，如checkbox，tags，lables。

中圆角：用于按钮、输入框，等。

大圆角：用于卡片，弹窗，等大组件。

3、间距

比如，头像和名字的间距、dropdown和输入框的间距等等

这些间距最好也都是8px的倍数。保持整个产品的统一

我们也可以根据这些间距，来定义一些组件的高度、宽度。

4、字间距

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

应该有3或4个字母间距值。

让我们从一个简单的按钮开始

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

下面给大家介绍在Sketch中如何去制作组件和字体系统

组件制作方法

1、矩形工具（U）画矩形，定义颜色；

2、创建矩形为组件，命名“color/主色“，最后我们可以在Symbols面板里看到，也可以在组件里查看调用；

3、将刚刚创建的颜色矩形复制一个，然后在创建一个矩形添加圆角半径，再将圆角矩形作为蒙版；

4、把Button创建为组件（命名：Button/medium）

5、创建矩形 — 创建组件 — 制作出Button的几种不同状态（如下图）

6、在Symbols面板下选择Button按钮，添加组件State/hover

7、在页面创建一个Button，可见右侧菜单栏中，我们可以根据不同场景去修改Button的状态、颜色、文字

8、在Button上添加图标表示不同的状态，首先画如下几个图标，按着上面的方法创建组件

9、如步骤6一样，在Button里添加组件glyph/love；在页面创建一个Button可以看见右侧出现如下图所示，可选状态

10、好了我们可以做如下不同状态的Button

好了方法教给大家啦，这里只是用Button做了示范，其他的组件整理方法也是一样的

下面我推荐大家看一篇创建字体系统的文章，结合我所交给大家的组件的创建，相信大家可以在工作中节省一大部分时间，也可以应对各种  改  改  改

从0到1建立sketch字体系统

http://www.ui.cn/detail/366636.html

附件：sketch文件，仅供参考学习

欢迎大家有问题一起交流，我们共同学习进步！

参考网站：https://www.youtube.com/watch?v=_bjqVF7Fvg4&t=905s

https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117

https://medium.com/sketch-app-sources/text-system-mastery-with-shared-styles-9931bea7d085