1、打开axure原型工作,创建一个新的空白页面,在工作区域拖入椭圆、标题、横线等元件元素,如下图所示。
2、对准备好的元件进行样式的调整,包括大小、颜色和文字描述等,同时可以加入一些图标,如下图所示,制作第一步的样式。
3、按照上述的方式,复制一份元件,再把第二步、第三步、第四步的样式调整出来,如下图所示,并将这四步组合。
4、按照上述流程,在制作出三份步骤条,也就是第二步进行中的样子,第三步进行中的样子,第四步进行中的样子,如下图所示。
5、元件样式设置完成后,将第一组步骤条转换成咿蛙匆盗动态面板,这里从元件库拖入动态面板,然后把步骤条加入到动态面板也可以,但还得调整动态面板的大小,很不方便,所以直接转换最好,如下图所示。
6、同样的方式,我们将其他三个步骤条也都复制到动态面板中,如图所示。
7、然后在页面中拖入两个按钮,改名为上一步,下一步,用于控制步骤条使用,如图所示。
8、然后开始设置两个按钮的交互事件,主要是鼠标单击的交互事件,下一步的单击事件就是幼榍嘈酾判断当面板状态是第一步的时候,点击变成第二步,当面板是第二步的时候点击变成第三步,以此类推。
9、按上述的方法,将上一步的鼠标单击时的交互事件设置好,如下图所示。
10、好了,这些工作完成之后,f5预览一下,点击下一步和上一步的时候是不是步骤条在变动,其实这就是使用了动态面板的切换效果,当然还有其他方法可能比较复杂,可以自行研究一下。