轮播图是现在网页应用或APP应用使用频率较高的交互展现方式,Axure可以使用动态面板进行交互用例的编写即可实现自动轮播或点击轮播的效果。
第一步:新建一个页面,命名为“轮播图”,再添加一个“动态面板”,添加3个状态,分别是State1、State2、State3。
第二步:先打开State1,添加左右箭头(命名为左、右)和3个显示圆点(命名为1、2、3),并将第1个和2、3设置不同颜色区分,以表示当前处于第一张图。 再添加一张图片(可事先调整好大小800*449),位置在边框内即可。 为让圆点显示更加突出,可添加一条框,设置透明度(50%);
第三步:重复第二步,分别把State2和State3设置好,注意所在状态对应的圆点和另外两个做好区分。可以直接使用格式刷进行操作,方便快捷。
第四步:在完成所有状态内容的添加和修改时,我们现在来添加用例脚本。