axure教程之七进度条效果:[7]进度条的制作

2025-04-18 11:45:07

1、打开axure PR工具,从左侧元件库中拖拽两个元件分别为动态面板和按钮

axure教程之七进度条效果:[7]进度条的制作

2、右键动态面板---》编辑选项-----》管理面板状态

axure教程之七进度条效果:[7]进度条的制作

3、给动态面板添加5个状态

axure教程之七进度条效果:[7]进度条的制作

4、在动态面板的几个状态里都放上两个矩形和一个文本面板,一个做进度条外框,一个做进度条,文本面板做百分比.双击状态1

axure教程之七进度条效果:[7]进度条的制作
axure教程之七进度条效果:[7]进度条的制作

5、然后制作上述三个元件,文本框制作成10%,其它两个矩形框一个制作成有颜色的一个制作边框

axure教程之七进度条效果:[7]进度条的制作

6、把上述三个元件拖拽到动态面板中

axure教程之七进度条效果:[7]进度条的制作

7、其它四个面板状态制作过程和上述一样,只是百分比的大小修改一下

axure教程之七进度条效果:[7]进度条的制作

8、制作好上述五种状态之后,我们就要给按钮添加点击糙怍牢莱事件,整个事件就是每隔1000毫秒,就切换动态面板的状态到下一个状态,具体操作如下图的箭头所示

axure教程之七进度条效果:[7]进度条的制作

9、到现在我们就制作好了进度条了,可以保存生成原型界面的网页查看效果了

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢