一对一免费咨询: 13913005726 025-66045668

  这个原型实现了任何你能想到的轮播交互,enjoy~

  

  一、前期准备

  APP端的轮播效果,适合于banner的展示,在实战中有很多的用处。首先我们应该想一想,轮播样式在界面上都应该有什么,无非是两点,一是banner,二是轮播的dot。第一步我们就应该在Axure中搭出来banner和dot的样式。这里我设置的是三个banner的轮播样式。对于banner和轮播用的dot而言,牵扯到不同的状态之间的切换,这里我们用到的是动态面板,动态面板可以有多种不同的状态,通过添加交互用例实现面板之间的切换。

  针对banner和轮播点,我们分别建立动态面板,并命名为banner和dot,方便之后的操作。Banner面板里面建立三个状态,命名为123,每个状态里面放一张需要展示的banner。

  这里需要注意的两点细节:

  三个状态的banner尺寸必须相同;

  三张图片最好都加上浅色的边框,这样做的原因一是美观,二是防止你的banner底色和界面底色重合,不能很好的分清两者之间的边界,这里我的边框颜色选用的是#F2F2F2。

  同样的,dot也建立三个状态,命名为123,每个状态对应的是不同的banner,红点表示的是当前的状态被选中,灰点表示的是当前状态未选中。

  这里的红色我没有选择#FF0000这个最红的颜色,而是选择了弱一点的#DD0000,颜色上要好看一些,同样的,灰点选的颜色依然是浅灰#F2F2F2。

  具体样式如下图所示:

  

  搭好了架子之后,我们这里要思考一下轮播会有哪些交互。现网中的常见轮播交互,我进行了一个列举:

  常规状态下的循环滚动。

  手指往左往右滑动的样式改变。

  手指点击dot之后的样式改变(这个交互由于dot现在做的越来越小,已经不是很常见了)。

  三点之间由简入繁,接下来,我们就依次的实现这三种交互。

  二、常规状态下的循环滚动

  这个交互在现网中的原型教学中比比皆是,但对于初学者来说,只是知其然不知其所以然,很多细节没有注意到,不能举一反三。具体的操作步骤,我们可以先想一下APP端轮播的效果,都是载入页面之后,banner就会开始轮播,所以我们在页面载入时这块加一个交互用例,选择设置面板状态,对dot和banner分别进行设置。对于banner和dot面板,都要在状态选择里面勾选next,next表示针对面板当前的状态的下一个状态。并且勾选下面的向后循环,向后循环的意思是:如果当前面板是最后一个状态,next会跳到面板的第一个状态。有些同学会误认为向后循环勾选了,面板就会一直轮播下去,其实不然。要想让面板轮播,还需勾选上循环间隔,这样才能保证面板的循环轮播。

  接下来就是细节上的优化,通常的轮播,banner会有一个从左到右的一个路径,而dot的交互样式是红点逐渐的变为灰色,灰点逐渐的变为红色。所以针对banner和dot有不同的动画效果,banner选择向左滑动,dot选择逐渐。完成之后点击保存,运行一下我们会发现,刚进入页面的时候面板就已经开始轮播,第一个状态我们都没来得及看就变成第二个了,这时我们应该在页面载入时加一个等待一秒钟的交互,再运行一遍效果就好了很多。

  

  具体的操作如上图所示,用Axure实现APP端的轮播,就完成了。

  三、手指往左往右滑动的样式改变

  这是APP端最常见的交互,这样的交互需求,来自于这样的一个场景。用户还没有看清楚之前的一个banner展示的具体细节,就因为时间的关系换到下一个banner了,用户想翻回去看之前的一个banner,于是就出现了手指左滑右滑的交互。

  对于面板的左右滑动,Axure里面给出了向左拖动结束时和向右拖动结束时的交互案例,向左相当于滑到下一个banner,向右相当于滑到上一个banner,理清了这个,我们就可以添加交互了,在向左拖动结束时,选中设置面板状态,分别勾选banner和dot,因为是要展示下一个banner,选择状态中,选next,并勾选向后循环。这里,由于是滑动到下一个banner,所以不需要勾选循环间隔。向右滑动也是同理,唯一的区别是向右滑动是滑到上一个banner,所以选择状态,要选previous。具体的操作如下图所示:

  

  面板的动画效果和刚才的轮播相同,banner选择向左滑动/向右滑动,dot选择逐渐。完成之后保存,手指左右滑动的效果就实现了。

  四、手指点击dot之后的样式改变

  这个需求出现的原因和手指滑动的类似,如果banner很多的话(超过了五个),手指左右滑动找某一个banner就显得很低效,点击dot会直接转到指定的banner。

  具体的做法就是对dot面板里面的不同状态进行交互案例的添加。Dot面板里面有三个状态,每一个的样式对应着不同的banner,拿第一个banner对应的dot来说,我们对dot里面的三个点分别增加交互案例。我们选中第二个点(表示要跳转到第二个banner),鼠标单击时添加交互案例,选择设置面板状态,分别勾选banner和dot面板增加交互,由于是1跳到2,我们在选择状态时,选择2,然后分别为banner和dot设置动画效果,又由于1跳到2是下一个banner,所以banner动画效果是向左滑动。具体的操作如下图所示:

  

  同理我们设置3的鼠标单击时的交互效果,对于1的状态下点击1本身,我们这里给了一个等待的交互效果。状态1的交互设置好了,我们再照葫芦画瓢,设置状态2和状态3的交互。

  这里需要注意的一个细节就是,2跳到1,是上一个banner,动画效果要选择向右滑动,2跳到3,是下一个banner,动画效果选择向左滑动,状态3的动画效果交互以此类推。

  这样设置完成之后,我们运行一下,发现点击dot的点之后,可以成功的完成banner的切换,但是随后就没有静止下来没有轮播了。出现这个现象的原因是,我们是在动态面板里面添加的操作,并没有像banner面板那样在首页,对动态面板整体添加交互案例。这样会导致首页没有变动,只是dot动态面板内部的改变,首页的变动才会触发我们在页面加载时的交互案例设置(进行轮播),动态面板内部的变动会使进程停留在动态面板,而忽视了页面加载时的交互案例设置,所以banner就不会在轮播了。

  想要让banner继续轮播,我们的办法也很简单,在dot面板内部的交互中再加上一条,继续轮播即可,如下图中蓝框所示(图中红框是之前的操作)。

  

  点击完成之后运行,点完dot的点之后,也可以实现轮播了,这样一来,手指点击dot的交互样式也实现了。

  资源共享:

  Axshare:http://rjsu3g.axshare.com

  网盘链接: https://pan.baidu.com/s/1qYlzebU 密码: uf4m

*请认真填写需求信息,我们会在24小时内与您取得联系。
致力于为客户创造更多价值
13913005726 025-66045668