建立组件库的重要性

组件库是设计系统里的一个重要分支，我们应该不会陌生。一个合适的组件库可以帮助设计师和开发者提高工作效率且让产品的可用性更高、风格更统一等等，那么今天我们就来聊聊应该如何建立适合的组件库。

发现问题

首先思考一个问题，什么样的情况下会需要建立组件库呢？建立组件库的目的是什么？带着这两个问题我们来看看下面的工作场景：

设计师：xxx把你之前的设计稿发我下，我要用里面的一个组件。

设计师：xxx为什么你的稿子里的颜色和我的不一致，到底应该以哪个为主？？？

设计师：xxx为什么组件不统一？？？

设计师：多个稿子用到了同一个组件，想做修改但是工作量很大怎么办呢?

产品经理：这次需求跟上次没有什么大的变化，很多组件都可以复用，为什么设计师需要那么多的时间？？？

开发小哥：为什么每次给的设计稿样式，颜色，组件都不同，我又要写新的样式表进去。

......

分析问题
这些问题会让人头大，上面的问题我们可以通过建立适合的组件库来解决（因为文章标题已经告知了答案，所以不做过多分析）。那么如何建立组件库呢，我们先来归纳下常规的组件库里面都会有那些常用的组件存在：颜色、列表、文字、图标、弹层、按钮等等，这些最基本的都是组件库必不可少的组成部分。我们通过Sketch的Symbol功能进行组件设计，利用Libraies进行团队协作。下面我针对几个最基本的组件模块教大家如何设计组件库：

1-颜色

颜色就是产品的气质，赋予什么样的色彩就会传达出什么样的气质，一般来说每个产品会有一种主色、3-5个辅助色、再加上文字的颜色 、背景色、分割线颜色等构成产品的设计系统。

背景颜色

字体颜色

状态颜色

2-列表

在建立列表组件时我们要充分考虑使用场景，列表的使用场景太丰富。      还要考虑响应式的方案，因为一个列表可能在ios端 、安卓端、ipad端    以及其他端都会使用，所以在做列表的时候我们用Resizing这个功能，    根据需要来进行调整。

3-文字

在一个产品中我们会有很多文字样式，例如：大标题、副标题、正文、提示等等。

4 -按钮

按钮也是组件库基本的组件之一，但是按钮的颜色、大小在不同的场景      下会不一样，例如下图：

5-模态对话框

一个对话框是一个覆盖层，需要用户与其进行交互，并设计得要引起用户的响应对   话框通知用户关键信息，请求用户做决定，或是用于多项任务。在应用程序和网页   上，移动对话框被越来越多地应用于指引用户注意到一个特定的任务，而不使他们   离开当前页面。

...

通过上面几个组件模块，我们应该对组件库的建立有了一些认识。它并不复杂，只要根据产品的实际情况出发，然后考虑到几个通用的点以及每个产品特殊的情况即可。当我们把一些常用的组件建立好之后，组件库的第一阶段也就相应的完成啦。