对于表单较长的页面,需要通过步骤条的方式实现是最好的效果,那么Axure如何制作步骤条呢,方法有好多种,小编使用的是动态面板控制的方法来实现这个效果,具体怎么做的,下面详细介绍一下。
工具/原料
1
电脑
2
Axure
方法/步骤
1
打开axure原型工作,创建一个新的空白页面,在工作区域拖入椭圆、标题、横线等元件元素,如下图所示。
2
对准备好的元件进行样式的调整,包括大小、颜色和文字描述等,同时可以加入一些图标,如下图所示,制作第一步的样式。
3
按照上述的方式,复制一份元件,再把第二步、第三步、第四步的样式调整出来,如下图所示,并将这四步组合。
4
按照上述流程,在制作出三份步骤条,也就是第二步进行中的样子,第三步进行中的样子,第四步进行中的样子,如下图所示。
5
元件样式设置完成后,将第一组步骤条转换成动态面板,这里从元件库拖入动态面板,然后把步骤条加入到动态面板也可以,但还得调整动态面板的大小,很不方便,所以直接转换最好,如下图所示。
6
同样的方式,我们将其他三个步骤条也都复制到动态面板中,如图所示。
7
然后在页面中拖入两个按钮,改名为上一步,下一步,用于控制步骤条使用,如图所示。
8
然后开始设置两个按钮的交互事件,主要是鼠标单击的交互事件,下一步的单击事件就是判断当面板状态是第一步的时候,点击变成第二步,当面板是第二步的时候点击变成第三步,以此类推。
9
按上述的方法,将上一步的鼠标单击时的交互事件设置好,如下图所示。
10
好了,这些工作完成之后,f5预览一下,点击下一步和上一步的时候是不是步骤条在变动,其实这就是使用了动态面板的切换效果,当然还有其他方法可能比较复杂,可以自行研究一下。
注意事项
1
喜欢的话可以关注小编
2
我们一起学习
上一篇:axure如何设计单选高保真原型