如何制作Sketch组件库-Chart篇

上次分享了sketch基础组件的组件库设计方法之后，发现很多设计师朋友都非常感兴趣，也问了很多相关的问题。而且我在近一段时间优化组件库设计和我们团队设计师在使用组件库的过程中也会发生一些实际的问题，我之后会尝试整理一篇组件使用问题的文章分享出来，希望能对大家有所帮助。

今天主要是给大家分享我最近刚完成的Chart组件库设计的过程。

数据类后台产品除了基础组件库之外，最重要的就是图表的设计，根据不同的产品需要设计各种类型组合的图表，尺寸也不尽相同，大家经常要频繁的调整图表的大小尺寸和数值内容，所以为了帮助团队内设计师解决这些问题，除了制定图表的规范之外，也制作了可以帮助设计师快速创建图表的组件库，希望能解决一些基础图表的使用效率。

首先、Sktch5.1更新的新功能，可以直接调用已导入的Library组件库中的图层样式，有了这个新功能之后，chart组件库的设计就顺利了很多。所以建议大家如果要制作chart组件库的话，需要将Sketch更新到5.1版本。

一、图表库参考

我们首先还是参考一下各类图表库，第一、可以了解图表的类型，第二、可以了解各类图表的定义和使用方法。然后根据公司产品中常用的图表类型确定要制作的Chart类型。另外AntV的墨者学院有一套图表的定义和介绍，也推荐大家可以去学习。

1、百度的Echarts：https://echarts.baidu.com/examples/index.html

2、AntDesign G2：https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

3、Amcharts：https://www.amcharts.com/demos/

4、Hcharts：https://www.hcharts.cn/demo/highcharts

根据公司产品的实际情况来确定想要制作的图表类型，开始制作图表组件。

二、图表配色

首先还是根据公司的品牌色和整体风格来确定图表的配色，这里就不多说了。我这里参考了一篇国外的文章，但是优设上有一篇译文，里面也有很多图表配色相关的网站推荐，相信大家看了之后都能有所启发。

配色文章地址：https://www.uisdc.com/palettes-for-data-visualizations#

我制定了12个颜色作为图表库的基础色（在实际项目中足够使用），将它们制作成图表中要使用到的图层样式以备后期使用。

    

三、图表拆分

拿一个折线图举例：

大致分为以下几层：

1、常用直方图

2、常用图形组合：

3、常用图例

4、Hover效果  这里不举例了

5、提示信息

四、图表组合

按照上面的步骤将图表元素按照类型分别分类并制作成组件，并且充分利用Sketch的Resizing功能就可以灵活使用了。

另外，我在设计Chart组件库的过程中还制作了一个简单的颜色取色的sketch文件，如果有朋友感兴趣的话，可以直接下载。