axure教程之七进度条效果:[7]进度条的制作
1、打开axure PR工具,从左侧元件库中拖拽两个元件分别为动态面板和按钮
![axure教程之七进度条效果:[7]进度条的制作](https://exp-picture.cdn.bcebos.com/0d2fe5f202b375d72f773d40515872dadf49d8a0.jpg)
2、右键动态面板---》编辑选项-----》管理面板状态
![axure教程之七进度条效果:[7]进度条的制作](https://exp-picture.cdn.bcebos.com/604e9556ad042e68a8e5d75585f85856d43dd1a0.jpg)
3、给动态面板添加5个状态
![axure教程之七进度条效果:[7]进度条的制作](https://exp-picture.cdn.bcebos.com/d47cb624d8e9ccd27c6ad7ed0e40102a05e2c9a0.jpg)
4、在动态面板的几个状态里都放上两个矩形和一个文本面板,一个做进度条外框,一个做进度条,文本面板做百分比.双击状态1
![axure教程之七进度条效果:[7]进度条的制作](https://exp-picture.cdn.bcebos.com/05a320a23a42a07a6f1c3a87673834bb18efc1a0.jpg)
![axure教程之七进度条效果:[7]进度条的制作](https://exp-picture.cdn.bcebos.com/35fa07efa25f0c14147754360d89a146b6b138a1.jpg)
5、然后制作上述三个元件,文本框制作成10%,其它两个矩形框一个制作成有颜色的一个制作边框
![axure教程之七进度条效果:[7]进度条的制作](https://exp-picture.cdn.bcebos.com/a007a9b1eef97fbd9170b207b74133bad24133a1.jpg)
6、把上述三个元件拖拽到动态面板中
![axure教程之七进度条效果:[7]进度条的制作](https://exp-picture.cdn.bcebos.com/3d002dbad341037d023b4fc2a9bc7dc5ce672da1.jpg)
7、其它四个面板状态制作过程和上述一样,只是百分比的大小修改一下
![axure教程之七进度条效果:[7]进度条的制作](https://exp-picture.cdn.bcebos.com/c8373cbc7dc5cf67c35353f28e96b814f5d026a1.jpg)
8、制作好上述五种状态之后,我们就要给按钮添加点击事件,整个事件就是每隔1000毫秒,就切换动态面板的状态到下一个状态,具体操作如下图的箭头所示
![axure教程之七进度条效果:[7]进度条的制作](https://exp-picture.cdn.bcebos.com/2a1ecb460596b81418dc33b743d246fe464e22a1.jpg)
9、到现在我们就制作好了进度条了,可以保存生成原型界面的网页查看效果了
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:72
阅读量:55
阅读量:94
阅读量:74
阅读量:35