Axure正版代理
北京口耳相传科技有限公司旗下网站

axure教程之画百分比环形图

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

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

赞(10)
转载请注明出处:Axure中文网 » axure教程之画百分比环形图

评论 10

评论前必须登录!

 

  1. #7

    牛逼。

    爱新觉罗·阿哥血4周前 (07-20)
  2. #6

    这也需要教学吗。。。。。

    尹帅4周前 (07-20)
  3. #5

    怎么能确定我弄出来的一定是73%呢

    小郭4周前 (07-18)
  4. #4

    很不错,学习了,谢谢

    Xiaoyi1个月前 (07-12)
  5. #3

    能不能让环形和数字一致变化呢

    Akcox1个月前 (07-09)
    • 那样意义不大,本身是静态原型;如果实在想动,可以通过动态面板的状态来实现,将百分比均分为10个等份(等份越多,动画越流畅),然后切换状态的时候增加百分比数值就可以了!

      skyline4周前 (07-17)
  6. #2

    学习了,谢谢分享

    KASHING嘉城2个月前 (06-09)
  7. #1

    为什么我找不到开口器圆的自定义形状呢

    那个不会笑的2个月前 (06-07)
    • 随便拖一个方形或圆形,然后再属性面板里有个形状–>选择形状

      skyline2个月前 (06-08)

购买Axure RP正版授权 终身可用

购买专业版购买团队版