Sketch绘制美观可维护的数据图操作实例

0 2021-07-07 14:45 内容校对:海绵宝宝手里的锅铲
收藏(0) 共有 110 人学习了本教程

《Sketch绘制美观可维护的数据图操作实例》是一篇关于Sketch的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Sketch技巧;你可以通过此加强操作实例,绘制,Symbol,定位,元素,标轴等多维度案例或实操来进行更多的学习;此教程是由蜡笔xiaoxin在2021-07-07发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Sketch技巧;请给他一个赞吧。

怎么用Sketch绘制美观可维护的数据图?下面就手把手教你用Skecth 生成数据图的坐标轴、实现数据节点、制作波峰波谷,绘制散点图等等,都是动图演示,简单易懂,赶紧来学。

不瞒你说,我可是设计过很多图表的人了。甚至我都觉得该拿个数据科学荣誉博士学位~或者,至少在胳膊上纹一个对数散点图什么的。

「图表」是数据产品重要的一环,可以优雅地展示可视化信息。我对于「如何」以及「何时」使用它们,有着非常强烈的看法,不过,这块还是改日再聊~

今天我想跟你们聊聊图表设计,如何使得它们不仅好看,更重要的是,便于维护。杂乱的图表绝对能闪瞎你的好眼,而且很多看起来都像是95版PPT做出来的,每次我都觉得特别Old School。

1. 用「复用样式」生成坐标轴

如果你正在设计一款含有大量图表的产品,客户突然说“坐标轴貌似用虚线比实线更好一些~”,听到这你恨不得大嘴巴抽自己,按时回家又没戏了。

除非你用样式实现!瞧:

Sketch绘制美观可维护的数据图操作实例

2. 用「Symbol」实现数据节点

Symbol的妙用自然不必多说了,一换全换,我觉得我奶奶都能干这事儿。

Sketch绘制美观可维护的数据图操作实例

3. 用通用的命名规则以快速找到你需要的元素

假设你的图表里有很多个数据节点,你可以用Rename it(插件)批量将图层名修改为“Data Points”。这样你分分钟就能搜到,然后快速全选它们。我都不好意思告诉你这能节省你多少时间。

Sketch绘制美观可维护的数据图操作实例

4. 图表元素与标签成组

特别是在柱状图或条形图的情况下,将图表元素与标签成组是更合理的做法,维护起来更直观、方便。

Sketch绘制美观可维护的数据图操作实例

5. 点与点成组,线与线成组,便于重新定位

这么做的好处自然不言而喻了。听上去简单,但我下了好多图表素材,里面的线或点都直接散落在侧栏中就像是公园里跑丢的小猫小狗~

Sketch绘制美观可维护的数据图操作实例

6. 利用「平均分布」打理好你的数据节点

说真格的,做线性走势图一般都挺苦的。但当我发现可以将锚点平均分布时,我湿润了。

Sketch绘制美观可维护的数据图操作实例

7. 为每个元素设置好Resizing的规则

Sketch 39 加了Resizing属性,默认情况下,组内的每个元素Resizing属性为「Stretch」(拉伸)。但如果你想更改该图表的尺寸,内容元素就会因此而变形。

在这介绍一些基本规则,但只有你亲自试了,才能让图表怎么拉都不怕拉:

  • 如果你在做走势图,那么靠近边缘的两个节点应设置为「Pin to corner」,这样它们能固定住。而内部的所有节点应设置为「Float in place」,这样它们会随着整个图表的拉伸而等比移动且不失真。
  • 图表内部区域(刨除首尾2个)的数据也需要设为「Float in place」,道理同上。
  • 坐标轴可以设置为「Stretch」或「Resize object」都行,但我还是习惯于后者。

Sketch绘制美观可维护的数据图操作实例

8. 使用cmd+k缩放,确保等比

如果你想改图表尺寸,最好用cmd+k来实现。而不是选中图表然后shift+拖拽手柄。这样能使比例和大小更精确,包括文字也是。

Sketch绘制美观可维护的数据图操作实例

9. 用「Mirrored」(对称曲线)来制作波峰波谷

用「钢笔」工具,按住shift,将鼠标沿水平方向划动…还是看图吧!

Sketch绘制美观可维护的数据图操作实例

10. 使用「铅笔」制作散点图!

这一条绝对是我的得意技,一周前我才琢磨出这招~

当时我正在做一个散点图,但一点一点的拖动复制实在太烦了。然而急中生智的我想出此招,简直了~

首先你用「铅笔」乱画一气,别斌着。

画爽了之后,给这堆线条加个描边,还得设置成超大间隙的虚线。

Boom!——亲生散点图!

Sketch绘制美观可维护的数据图操作实例

以上就是Sketch绘制美观可维护的数据图操作实例的全部内容介绍了,关于更多Sketch教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。

0

赠人玫瑰,手有余香

本内容由蜡笔xiaoxin原创发布,小编仅对内容版式进行调整,如有侵犯你的权利,请联系我们。

如果你觉得好,你可以将本课程转发给你的朋友!

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

蜡笔xiaoxin

教程讲解详细,通俗易懂

共发布了201个文章 共获得3个赞

最新发布的教程

查看更多此作者的教程

文章中所使用的软件

您可能会帮助到他

查看更多
用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员