一些分享

axure教程之画百分比环形图

阅读

最近,一直在画原型,遇到问题解决问题,有时间我会记录一下分享给大家,希望能帮到你。在app原型设计时,百分比环形图是我们经常要用到的一种图形,那么用axure如何设计呢,可能你会去网上截个图代替一下,其实没必要,用axure可以很轻松的画出环形图,下面分享给大家。


软件版本:Axure RP 8

先看下效果

canvas.png

完成此图,一共分三层:

火狐截图_2017-01-03T03-19-03.151Z.png

看到这里,我想很多人应该已经明白如何画了;下面看下步骤!


第一步,画个圆形:

火狐截图_2017-01-03T03-52-12.008Z.png

尺寸暂定200px *200px;去掉边线,填充颜色#E4E4E4



第二步,复制这个圆形,然后将圆形设置为自定义形状:

QQ截图20170103115622.png

调整开口大小,用鼠标

图片.png

填充颜色渐变,颜色自己可以选择一下

图片.png


第三步,再复制一个原型,将圆形大小设置为160px * 160px,颜色设置为白色,再加个0*0 10像素扩展黑色35%透明度的阴影

图片.png


最后,将三张图上下左右居中对齐,再填入文字,大功告成!你可以将形状组合起来,这样方便进一步使用!

图片.png



多种形态风格

1483416471380185.png


很简单吧,希望能帮到您!




推荐阅读

Axure教程之巧用动态面板
Axure教程之巧用动态面...
Axure教程之制作一个滑动
Axure教程之制作一个滑...
Axure教程之美化单选框复
Axure教程之美化单选框...
Axure RP 8.0函数手册
Axure RP 8.0函数手册