AxureRP8实战手册-案例8(形状:制作环形进度条)

AxureRP8.0教程 小楼一夜听春语 19349℃ 0评论

案例8.   形状:制作环形进度条

案例来源:

中国移动APP-流量管家

 

案例效果:

  • 整体界面效果:(图1-41)

1_41

  • 原型实现效果:(图1-42)

1_42

案例描述:

环状带缺口的背景条与进度条。

 

元件准备:

  • 页面中:(图1-43)

1_43

思路分析:

通过自定义形状功能可以实现环形进度条的制作。

 

操作步骤:

1、拖入一个矩形到画布,转换为带缺口的圆形;(图1-44)

1_44

2、调整圆形尺寸为宽260*高260,缺口为1/4大小;(图1-45)

1_45

3、拖入一个椭圆形到画布,尺寸设置为宽230*高230,将其与带缺口的圆形中心对齐;(图1-46)

1_46

4、先点击选中带缺口的圆形,再点击选中内部的圆形;然后,在属性中点击【去除】的图标将两个形状改变成一个新的环形形状;最后,为圆环设置灰色的边框与背景色;(图1-47)

1_47

5、再次拖入两个矩形,转换成半圆形,尺寸为宽15*高10;然后,将两个半圆形旋转为合适的角度,摆放到环形形状缺口的两端;点击选中圆环,再分别选择两个半圆形,点击属性中的【合并】图标,完成背景形状的制作。(图1-48)

1_48

6、在样式中设置元件的角度{Rº}为225度,变成缺口朝下的效果。(图1-49)

1_49

7、参照步骤1~4完成进度条的制作,并将其放到与背景条重合的位置上。(图1-50)

1_50

8、最后添加其他元件,完成整个案例的制作。(图1-51)

1_51

补充说明:

注意在做形状的合并与去除时,元件的层级顺序不能颠倒。底层为主体元件,上层为被合并或者去除的部分。

~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例8(形状:制作环形进度条)

喜欢 (24)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(19)个小伙伴在吐槽
  1. good
    010453192016-06-22 01:31 回复
  2. 小楼老师,为什么我选中两个图形点去除,两个图形就会一起消失呢
    blueslee2016-07-26 00:47 回复
    • 小楼一夜听春语
      看补充说明
      小楼一夜听春语2016-07-26 09:47 回复
      • 老师,您好,我看了您的教程,我是职场充电宝的峯鸟,我想邀请您来我们平台做次分享
        峯鸟2016-07-26 17:52 回复
      • 老师,我看了补充说明也是会消失,要么就会重叠,怎么弄都不是去除....
        ECHO2016-09-06 14:46 回复
        • 同样的问题~
          MTY_MM2016-09-07 14:22 回复
          • 我刚学,一开始也是,但把图删了重新做就又好了,不明白为什么。。。可能是跟电路设计软件一样软件本身的小bug
            宁尘2016-10-01 20:17
  3. 要把半圆和环形原件完美对齐真是太难了!
    ECHO2016-09-06 15:30 回复
    • 您好,想问您一下这个半圆和环形如何重叠呀? 😐
      S2017-07-25 10:16 回复
  4. 步骤5和6为什么不能颠倒呢?
    Lucy2016-09-13 09:51 回复
    • 个人觉得可以颠倒啊 只是旋转角度计算麻烦一点
      jqseven2017-08-06 14:05 回复
  5. 把3/4圆放在底层后,点击去除后还是一起消失
    极限开水2016-09-27 23:11 回复
    • 同样的问题,要么消失要么重叠,这是不是软件BUG?
      bwcq2017-01-16 13:02 回复
      • 好像重新改变一下图形再设置去除就成功了;不知道是不是没有做好同心圆的问题?可以验证一下
        无恨心2017-01-17 15:35 回复
  6. 第七步 点击去除 俩个图形就合在一起了 做了几遍都是这样 灰色的环形怎么做都没问题 不知道为什么
    小李子2016-09-29 14:39 回复
  7. 制作环形的时候,带缺口的圆缺口部分用软件默认的大小,不要调到90度,然后按老师的方法去除,可以得到一个环形,选择这个环形把缺口两边分别的两个点去掉就可以把缺口加大,最后在一边的缺口手动加上一个点右键设置形状为弧形,这样就可以做成一个环形了。
    葱花豆腐2016-09-30 13:11 回复
    • 亲测有效,多谢
      Tonyhe2017-09-02 16:31 回复
  8. 带缺口的圆形加上两个半圆形合并后一起消失了,层级关系没有错,这是什么原因
    达令2017-03-22 17:24 回复
  9. 好看又实用,谢谢分享!
    irene2017-09-25 16:32 回复