Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法

Axure中想要制作动态步骤条效果,该怎么制作呢?下面我们就来看看详细的教程。

软件名称:
Axure RP v8.1.0.3382 Enterprise 中文特别版(附注册机+汉化包+安装教程)
软件大小:
83.2MB
更新时间:
2019-04-26

1、打开Axure,今天教大家使用Axure制作动态步骤条效果,如下图所示。

Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法_第1张图片

2、首先将本次需要使用的元件拖入到工作台中,如下图所示。

Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法_第2张图片

3、然后调整元件的大小和样式,制作出如下图所示的步骤条,如下图所示。

Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法_第3张图片

4、同样的方式,我们再制作出更多的步骤条,便于下面做动态效果使用,如下图所示。

Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法_第4张图片

5、制作完成后,我们右击其中一个步骤条,将其转换为动态面板,如下图所示。

Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法_第5张图片

6、然后复制出3个状态,将其他的步骤条放到不同的状态中,如下图所示。

Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法_第6张图片

Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法_第7张图片 

7、然后进入到步骤条中,给每一个按钮做交互事件,如下图所示。

Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法_第8张图片

8、同样也给其他状态中的步骤条里的按钮做交互事件,如下图所示。

Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法_第9张图片

Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法_第10张图片

9、最后f5预览一下效果,如下图所示。

Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法_第11张图片

Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法_第12张图片

以上就是Axure制作动态步骤条效果的教程,希望大家喜欢,请继续关注脚本之家。

相关推荐:

Axure RP 8中怎么制作移动页面原型?

Axure中怎么制作动态倒计时的原型?

axure拖动动态面板怎么设计? axure给动态面板添加拖动条的两种方法

你可能感兴趣的:(Axure网页怎么制作动态步骤条效果? Axure进度条的制作方法)