2019-09-05 UI设计培训

UI设计培训 | 五秒创建精致图表组件库

要说现在UI众多子领域中哪个最火,数据可视化绝对要占一席之地。不管是大数据、云计算还是金融、健身等,相关行业的产品都需要大量的数据展示类页面,所以各类图表就成了页面设计中必不可少的元素。以往各位小伙伴设计这些图表时需要整理数据、确定配色,然后拿钢笔一笔一笔画出来,浪费了大量的时间和精力。今天UI设计培训像素妹儿给各位小伙伴推荐一款专业的Sketch图表绘制组件库,以后再遇到这类问题分分钟轻松搞定!

那有没有好的方法解决这个问题呢?UI设计培训

这款名为Charts for Sketch的组件库由Ruslan Latypov 和 Anton Mishin 所创建,用来全面而便捷地在 Sketch 中定制图表和表单,它具有以下特点:

类型丰富

Charts包含了折线图、柱状图、直方图、散点图等多种图表样式,每个样式里面又细分为不同类型,例如单单一个折线图下面就有九种不同风格,完全可以满足小伙伴日常工作需求;

兼容PC和移动端

Charts提供PC端和移动端两种类型尺寸的图表,所以不管你是做网页设计还是移动端设计,Charts都可以很好地胜任;

定制化程度高

Charts充分利用sketch的symbol功能,支持自定义调整图表,每一个图表的颜色都可以根据用户需要自行修改,保证你所做的图表是独一无二的存在。

当然最最重要的还是它完全免费,你不需要任何代价就可以轻松使用该款组件库。

简单介绍完下面像素妹儿教大家如何使用这款插件。

首先我们需要在Sketch中引入该组件库,打开Sketch软件,点击屏幕菜单栏左上角Sketch选项进入首选项;

UI设计培训

在首选项中选择组件库选项,点击弹窗左下角“添加组件库”按钮;

UI设计培训

然后在弹出的资源管理器中找到Charts的三个文件,点击打开;

UI设计培训

再次回到首选项会发现组件库多出了三个文件,证明Charts已经安装成功。

UI设计培训

接下来我们以一个小案例来演示一下如何使用该组件:

首先我们打开一张APP页面,这是一款金融类产品的账单页面,我们需要在页面中创建一个图表,告诉用户消费的大致情况。

UI设计培训

我们点击左上角的置入,选择组件里面的Charts [Standart]组件,然后依次选择Mobile Mobile / Charts [Grid and Legend] / Donut Charts / Pie Chart,将选中的饼状图移动到页面中合适的位置;

UI设计培训

调整图表位置后的效果如下:

UI设计培训

接下来我们修改图表的图例,找到sketch右侧的组件面板,依次在空白的文案输入框内输入饮食、出行、通信、缴费,然后点击页面空白处;

UI设计培训

可以发现图表下面的说明文字已经变为了我们输入的文字。

UI设计培训

如果各位小伙伴对图表的颜色不满意,我们同样也可以在组件面板进行更改。

首先选中我们的图表,在组件面板中找到Shape选项,点击第一个选项,在展开的选项中将鼠标移动至我们选中的Charts [Standart]文档,接着会展开该文档下的诸多颜色设置,我们将鼠标移动至“Accent”后会展开5个色系,每个色系中包含四种颜色,选择你中意的颜色点击,然后就会发现图表中该模块就会变成你选中的颜色了。

UI设计培训

我们选择橘红色里面的第一个,会发现图表中第一个紫色已经改为了橘红色。

UI设计培训

如果文件内置的颜色依然无法满足你的需求,小伙伴们也可以将图表从组件分离,这样的话就可以在填充中设置你想要的任何颜色了。

需要强调的一点是,各位小伙伴在将Charts导入Sketch组件库之前最好将文件保存在你平时储存重要文件的地方,不然当你移动或删除Charts文件时就无法正常使用了。

像素妹儿已经将组件文件进行分享,有需要的小伙伴可以点击文章下方的原文链接进行下载哦~


林老师:0371-5556 6060