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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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