Axure教程:用Axure实现晚会抽奖程序

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

wanhuishoujiang

雷迪丝and枕头们,欢迎来到星光大道……sorry,拿错题词卡了,重来

(XX公司年会暨春节联欢晚会现场)女士们,先生们,接下来就是万众期待、摩拳擦掌、蠢蠢欲动、心惊胆战、激动万分、哀号遍野……的幸运大抽奖环节……废话不多说,请看大屏幕(下图)……

a

OK,不卖关子了,想必看到这里,小伙伴们已经明白我说的这个Axure原型是个何方妖孽,竟能登上春晚(我可没说是央视)舞台了吧。是的,就是一款年会抽奖程序,你可千万别把它当成是只会招摇撞骗、摆摆架子的低能原型。它是真的可以在年会现场作为抽奖系统来用的,当然年会用的功能可能要比我展示的原型复杂一些,但是只要是类似的工作原理,基本也能实现;另外如果这个抽奖原型功能上可以满足你的需求,那么只需要替换一下抽奖数据库(其实就是中继器里的数据项,换成你所需要的)就可以了。

预览地址

说到这里,先给大家奉上原型预览地址:http://www.raedme.cn/axurelab/006_choujiang/,接下来我再和感兴趣的小伙伴细细聊这原型中的子丑寅卯。

工作原理

这个抽奖程序的工作原理其实非常简单,并且大家应该都见过类似的东西,不过在此我还是再赘述一下。

首先打开抽奖页面,然后按下键盘上的任意键(也可设置为指定键)开始抽奖,此时屏幕上会快速闪现被抽奖人信息;

然后再次按下键盘上的任意键或指定键,抽出中奖者(此时被抽奖人的信息不再闪烁切换,而是固定显示为中奖人信息)。这样就完成了一轮抽奖。

如果进行下一轮抽奖的话,只需要执行相同的操作即可。但这其中会有一个过程,就是下一轮抽奖会排除掉之前的中奖者,为了防止同一个人重复中奖。

根据这个原理,我们可以明确在制作原型的过程中需要解决哪些问题,如下:

  1. 被抽奖人信息如何存放
  2. 如何实现被抽奖人信息的快速闪烁切换
  3. 如何从被抽奖人信息中删除中奖人信息
  4. 按下键盘任意键开始/停止抽奖的逻辑判断

带着这些问题,我们开始原型的制作过程。

制作过程

用到的axure元件:中继器、文本框

PART1:创建被抽奖人数据库(中继器)

用中继器来存储被抽奖人的信息,这个操作非常简单,只需要添加一个中继器元件,然后在中继器中的数据集中添加相应的被抽奖人数据即可。不过本案例中被抽奖人的数据并不是一开始就存放在中继器中,而是动态添加进去的,也就是在抽奖页面加载的时候,向中继器中添加数据,并且为中继器中的数据进行排序,排序字段是一个随机数。这样就保证了及时向中继器中插入数据时候是有顺序的,但是中继器一排序,就会将之前原有的顺序打乱,因为对于抽奖程序,这个是必须的。

QQ截图20160316092837

QQ截图20160316093006

PART2:实现被抽奖人信息的快速闪烁切换(中继器、文本框)

闪烁切换的效果通过中继器的分页来实现,对中继器进行分页,每页显示一项数据,也就是一条被抽奖人信息。另外由于中继器的翻页动作需要有触发事件,而连续的翻页则需要连续的触发事件,这里我采用一种可以循环执行的事件来实现,就是通过文本框的文本改变时事件,文本框内容改变时执行一个动作,这个动作设置文本框的内容使其发生改变,这样就形成了一个循环。

① 设置中继器分页

QQ截图20160315141732

② 在文本框上设置文本改变时对中继器翻页的事件及动作

QQ截图20160315142028

这里需要注意一点:当翻到最后一页的时候,需要再使其翻到第2页(本案例中第1也为空白页,不参与抽奖),所以这个过程需要一个单独的判断,就是 Case2 的内容,当然这个是基于 Case1 的判断条件之外的条件,也就是当中继器中数据项的页码=总页数的时候。

另外等待时间50ms用来控制闪烁切换的快慢,这个肯根据需要自行调整。

③ 如何连续触发“文本改变时”这个事件

因为文本框显示的是中继器中的数据项,而中继器中的每一条数据都是不同的,所以当中继器翻页的时候,就会触发文本框上的“文本改变时”事件,也就是上述第②步的过程;但是还需要一个动作来触发第一次,第一次之后就可以进入循环,这个动作其实就是按下键盘上的任意键,我放在后面讲。

PART3:从被抽奖人信息中删除中奖人信息(中继器)

其实这个过程就是通过删除中继器中的数据项来实现的,即删除当前抽出的中奖人数据;这个在进行删除操作的时候需要做一个判断,即被删除的数据项的值等于当前显示的中奖人的数据,这里需要用到局部变量来获取当前显示在文本框上的中奖人信息。

QQ截图20160316100013

另外这个“删除”的动作也是在按下任意键的时候执行,在后面要介绍按下任意键的逻辑的时候也会看到相应的设置。

PART4:按下键盘任意键开始/停止抽奖的逻辑判断

按下任意键的场景基本可以分为三种情况:

  1. 第一次开始抽奖时:Case1,此时主要是启动抽奖程序,显示被抽奖人信息并快速闪烁切换
  2. 停止抽奖时:Case3,此时主要是停止抽奖程序,并固定显示中间人信息
  3. 第N次(N>1)抽奖时:Case2,此时是删除Case2过程抽出的中奖人信息后,再进入下一轮抽奖

QQ截图20160315142616

以上就是抽奖案例的主要逻辑及实现过程。

总结

本案例的核心其实是“中继器”结合“文本框”的用法。在该案例中文本框除了用于显示中继器中的数据项,还有一个重要的功能就是利用“文本改变时”这一事件来实现循环,而且很多地方都可以用到这种方式。那么我的经验就是要了解不同部件所特有的一些事件,然后加以利用,实现想要的效果。

 

本文由 @W.YiFAN 原创发布于人人都是产品经理 ,未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。

评论( 8

登录后参与评论
  1. 作为一个用了axure多年的产品狗也放弃她了,现在有好的新工具好用多了
    比如mockplus、Principle等等。

    http://www.8kvv.com 上面特别全 :grin: :grin: ,建议看看

    回复
  2. 如何将中继器的第一项设置为空,我看源代码,并不是空啊,求科普

    回复
    1. 回复

      设置一个 空格放在第一页就行了

  3. 请收下我的膝盖,真心给跪了,怎么那么牛呢,让我重新认识了Axure

    回复
  4. 当时我就跪下了

    回复
  5. 对函数不是很熟,不很看得懂。感觉直接用程序还简单些~

    回复
  6. 牛人,大神

    回复
  7. 牛人 :grin:

    回复
加载中