最快30秒,几招用Sketch绘制饼图的方法

夜雨y  IP属地: 广东
0.987字数 1,605阅读 26,834

对数据进行可视化处理时,饼图是常用的图形之一,饼图一般用于体现各个项之间的占比情况,表现为由一组或者多组数值按照百分比扇区组成的圆形图,最终圆形图的比例为100%。今天,我们就来学习几招用Sketch画出漂亮饼图的方法。

1.第一招:布尔运算

我们知道,在设计工具中使用线条勾勒一些规则图形是比较麻烦的,所以通过线条勾勒出扇区去组成饼图的方法显然太过于笨拙。因此,我们可以用布尔运算的法则来对既有圆形进行相交、相减处理,最终得到我们想要的扇区。

具体步骤如下:

首先,使用椭圆工具绘制一个正圆形(小tips:选中椭圆工具后,按住shift键即可绘制正圆形),为了方便区分,我们设置正圆形为蓝色填充,并取消描边。

然后,使用三角形工具,绘制一个三角形,我们也可以通过双击三角形进入编辑模式,把三角形左侧的端点拉到中间垂直的位置,形成一个直角三角形。

再然后,把直角三角形和圆形放在一起,且直角和圆的中心点对齐,选中两者,复制一份,分别进行相减、相交的布尔运算,即可得到3/4和1/4大小的扇区。

最后,把得到的扇区组合在一起,分别填充不同的颜色,即可得到一个饼图,如果想要一个圆环图,很简单,在中间放一个白色填充的正圆形即可。布尔运算这一招的缺点是如果要用三角形划分饼图的扇区比例,则需要把勾股定理、正弦定理、余弦定理了解一下。。。


2.第二招:环形渐变

在Sketch中,一共支持三种渐变效果,分别是线性渐变、径向渐变和环形渐变,其中,环形渐变可以用来实现饼图,具体步骤如下:

首先,依然使用椭圆工具绘制一个正圆形,取消描边,设置填充为环形渐变:

然后,在圆形上任意位置上增加渐变点,注意,每个位置需要同时存在2个渐变点(一内一外,等会用到),设置渐变点时,可以通过按数字键0-9,精确定位渐变点的位置,设置完成后,如下图所示。

最后,选中每个渐变点,并设置渐变点的填充颜色,外渐变点和顺时针相近的内渐变点,设置为同一个填充颜色,代表它们的扇区颜色,可以使用快捷键Tab快速切换渐变点,Control+C组合键进行吸色,即可得到一个下图所示的饼图。这一招的优点是可以快速调整扇区的比例,只要拖动渐变点即可,缺点是扇区分割时会出现锯齿,目前还没有锯齿的解决方案。


3.第三招:Sketchy Pies插件

强烈推荐,用一次就上瘾的Sketchy Pies插件,一键就能生成漂亮的饼图,还支持通过颜色代码和比例设置扇区。具体操作步骤如下:

首先,安装好Sketchy Pies插件,下载地址会在文末放出。

然后,同样需要先使用椭圆工具绘制一个正圆形,并取消描边,选中正圆形,依次选择“Plugins>Sketchy Pies>Conver to Pie Chart”。

接着,当前窗口会弹出一个“User Input”的弹框,其中会包括一些颜色代码,默认有5个,即代表即将生成的饼图有5个扇区,这些颜色代码都是可以修改和增加的,用“,”隔开即可。

不管怎么样,我们先默认点个“OK”,奇迹出现了,刚才选中的正圆已经变成了一个5等分的饼图,而且图层中还规整地用颜色代码做好扇区图层的命名了,真是十分的贴心。

如果我们需要修改扇区的颜色,可以分别选中相关的扇区图层修改填充颜色即可,神奇的是,如果我们想要一个圆环图,不用再像前面两招那样单独弄一个白色填充内圆了,我们只需要选中所有的扇区图层,然后在检查器中,把“Borders”的值变小即可得到一个空心圆环,十分的方便。

另外,Sketchy Pies插件,还支持生成不等分的饼图,重复刚才画正圆的步骤,这次插件选择的路径变为“Plugins>Sketchy Pies>Conver to Pie Chart with Percentage Values”,意思是转换为带比例值的饼图。

依旧会先弹出一个“User Input”的弹框,除了颜色代码之外,我们发现颜色代码后面还跟着比例或者小数点,用“:”隔开,这是因为Sketchy Pies插件支持我们通过百分比(例如20%)或者小数点(例如0.2)定义饼图扇区的大小。

设置好扇区的颜色和比例后,点击“OK”,即可生成一个自定义扇区比例大小的饼图,同理,可以通过之前的步骤得到一个圆环图。


Sketchy Pies插件是不是十分的强大?快来下载体验一下吧。

下载链接:https://pan.baidu.com/s/1OKSAxvzafyD-0eIMu-L4IQ

密码: hkj8


相关推荐阅读:

了解径向渐变——用Sketch画出大自然中最美的渐变色

饼图设计要点——图表交互设计之饼图

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
查看连载目录
19人点赞
更多精彩内容,就在简书APP
"顺手点个喜欢就行,感谢您支持原创作品!"
还没有人赞赏,支持一下
夜雨y  华南理工大学经济学硕士,产品设计师,图书《Sketch交互设计之美》作者,人人都是产品经理网站...
总资产1,103共写了20.6W字获得3,393个赞共9,965个粉丝
文章来自以下连载
6.5W字500,558阅读535人关注

被以下专题收入,发现更多相似内容

推荐阅读更多精彩内容