sketch中绘制优雅的Donut Chart

原创文章 分类: 教程 版权:
492 6 7 0
2018-04-16
3.3

sketch巧妙的绘制甜甜圈图表

Image title


这样的图表相信设计师们都见过,学名叫「甜甜圈图表」(donut chart),同样还有下面这个apple watch上这个美炸了的表盘,同样也可以被视为「甜甜圈图表」



Image title其实看着蛮简单的,然而,你如果没有掌握绘制它的诀窍,也不是那么的简单。在目前最火热的UI绘制软件 sketch 中该如何巧妙的绘制「甜甜圈图表」呢?


准备

- 初中数学知识

- UI绘制软件sketch

- 从这里看下去的耐心


原理(其实不好太意思讲,太简单了)

- 利用dash线段的两个参数,就sketch里面来说就是「虚线」和「间隙」两个参数配合即可

- 唯一的一个公式:2R * Pi * %(2R-圆的直径;Pi-圆周率取3.14;%-你想绘制的百分数)


演示

Image title

首先新建一个圆形,如下图左图,那么怎么由左图变为右图呢。

以下面这张图为例,公式中的参数分别为R = 92,Pi = 3.14,% = 1/2

这个公式可以直接以表达式的形式输入到「虚线」框和「间隙」框里,sketch会自动帮你计算好

虚线框输入:92 * 3.14 * 0.5

间隙框输入:92 * 3.14 * (1-0.5)

敲击会车,即可得到右图的效果! 

Image title


类似的其他百分数也是一样,只要将响应的%值进行替换即可,请看下图:


% = 0.75


Image title


% = 0.25

Image title


到此主要的教程内容就差不多了。这种方法其实就是巧妙的运用了dash线段的两个参数。至于其他的甜甜圈颜色、端点是否圆角等等都是次要的。
希望能帮到你,谢谢~~

(嘛也,第一次写教程献丑了)


(ps:转载请注明,谢谢)




DeCoder

纯粹的设计不应该只是感性的,有理有据的理性也不可缺少。

1粉丝/2关注

Logo设计的简要可行步骤轻网页

DeCoder

DeCoder

纯粹的设计不应该只是感性的,有理有据的理性也不可缺少。

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN