大家都知道,每次在填写问卷调查结束,为了能够留存客户的停留时间或是某个活动要做准备时,可能都要进行一次转盘的抽奖活动,那么我们怎么用原型制作呢。下面就是如何使用axure制作转盘抽奖的交互原型,想要登录注册流程的,坐等我下期出哦~
效果图如下
抽奖流程
- 主要内容
- 所需主要原件:动态面板、按钮、文本框(将内容修改为3,不为5哈,不想再改图片了呢)、提示框等。
- 交互:
(1) 进入转盘页面,点击“Start”按钮
(2) 剩余次数进行减少
(3) 转盘进行随机转动(转动越来越快)
(4) 随机停止在 任意一个位置上,显示奖品并点击领取提示框
(5) 点击领取,自动隐藏按钮 - 设计函数
(1)target:目标文件
(2)text:文本原件
(3)Math.random():返回0-1之间的一个数字
(4)rotation:原件旋转角度
- 交互动作
- 为“Start”按钮添加鼠标事件
鼠标单击时:添加判断,若次数元件值>0,且元件上的元件值设为3,执行转盘旋转,然后次数减1,等待转盘转动完毕后显示指针指向的奖品面板;若次数元件值<0时,显示提示信息,2秒后隐藏。
事件解释:
(1)旋转角度表达式:[[Math.random()*360+3600]],从0-1中随机产生一个数字(乘以360),既可以在360度中任意得到一个角度,加上3600是让转盘至少能转10圈,然后再任意停止到一个度数上。
(2)次数文本框的试着:target.text-1,将目标元件(次数文本框的元件值减1,开始元件值设为3)设置如下图
(3)在转盘转动时一定要禁止按钮的使用:避免重复单击按钮,影响次数文本递减、以及转盘重复旋转。
(4)等待5010毫秒:为了能在旋转结束以后,再出抽奖结果。所以这个时间可以稍比旋转时间大一点。
(5)显示“奖品动态面板”:将隐藏的奖品(jiangpin)动态面板显示出来。
(6)触发事件:因为需要在旋转结束以后,判断旋转的角度,给出具体的抽奖结果。但因在交互动事件中,没有旋转结束时事件;所以需要把交互写到“奖品动态面板”上,通过触发事件来触发“奖品动态面板”相应的事件,产生抽奖的结果。
(7)启用“Start元件”:才能继续抽奖。
-
为奖品的动态面板添加载入事件
其中将“奖品”动态面板分为四个面板,包含如下入所示的
添加事件说明
将动态面板,添加载入事件;因为转盘上有4个奖项区间,每个区间90度范围;停止后,用最终旋转的度数除以360度,取余数,就能判断在转盘相应的位置,然后再输出相应奖项(设置面板状态)。表达式说明([[LVAR1.rotation%360]]):获取转盘旋转角度,得到最终停止的角度。
(1)如果90>角度>0,那么就设置“奖品动态面板”为“手环”
(2)要获取装盘的角度,在做比较。
(3)设置动态面板的状态为“手环”
(3)一下的四个一次类推,同上述操作即可,但是需将else if,转换为if。因为不是如果就的关系。 -
“确认收下”按钮添加交互
鼠标单击时:隐藏“奖品动态面板”。如下图
原型下载:连接:https://pan.baidu.com/s/1guCjiHjVv4FO6CCSJF8EaQ 密码:lp7n
永久有效,若无法查看请直接私信我哈~