大家都知道,每次在填写问卷调查结束,为了能够留存客户的停留时间或是某个活动要做准备时,可能都要进行一次转盘的抽奖活动,那么我们怎么用原型制作呢。下面就是如何使用axure制作转盘抽奖的交互原型,想要登录注册流程的,坐等我下期出哦~

效果图如下

Axure:转盘抽奖交互原型

抽奖流程

Axure:转盘抽奖交互原型

  • 主要内容
  1. 所需主要原件:动态面板、按钮、文本框(将内容修改为3,不为5哈,不想再改图片了呢)、提示框等。
    Axure:转盘抽奖交互原型
  2. 交互:
    (1) 进入转盘页面,点击“Start”按钮
    (2) 剩余次数进行减少
    (3) 转盘进行随机转动(转动越来越快)
    (4) 随机停止在 任意一个位置上,显示奖品并点击领取提示框
    (5) 点击领取,自动隐藏按钮
  3. 设计函数
    (1)target:目标文件
    (2)text:文本原件
    (3)Math.random():返回0-1之间的一个数字
    (4)rotation:原件旋转角度
  • 交互动作
  1. 为“Start”按钮添加鼠标事件
    鼠标单击时:添加判断,若次数元件值>0,且元件上的元件值设为3,执行转盘旋转,然后次数减1,等待转盘转动完毕后显示指针指向的奖品面板;若次数元件值<0时,显示提示信息,2秒后隐藏。
    Axure:转盘抽奖交互原型
    事件解释:
    (1)旋转角度表达式:[[Math.random()*360+3600]],从0-1中随机产生一个数字(乘以360),既可以在360度中任意得到一个角度,加上3600是让转盘至少能转10圈,然后再任意停止到一个度数上。
    (2)次数文本框的试着:target.text-1,将目标元件(次数文本框的元件值减1,开始元件值设为3)设置如下图
    Axure:转盘抽奖交互原型

(3)在转盘转动时一定要禁止按钮的使用:避免重复单击按钮,影响次数文本递减、以及转盘重复旋转。
(4)等待5010毫秒:为了能在旋转结束以后,再出抽奖结果。所以这个时间可以稍比旋转时间大一点。
(5)显示“奖品动态面板”:将隐藏的奖品(jiangpin)动态面板显示出来。
(6)触发事件:因为需要在旋转结束以后,判断旋转的角度,给出具体的抽奖结果。但因在交互动事件中,没有旋转结束时事件;所以需要把交互写到“奖品动态面板”上,通过触发事件来触发“奖品动态面板”相应的事件,产生抽奖的结果。
(7)启用“Start元件”:才能继续抽奖。

  1. 为奖品的动态面板添加载入事件
    其中将“奖品”动态面板分为四个面板,包含如下入所示的Axure:转盘抽奖交互原型
    添加事件说明
    将动态面板,添加载入事件;因为转盘上有4个奖项区间,每个区间90度范围;停止后,用最终旋转的度数除以360度,取余数,就能判断在转盘相应的位置,然后再输出相应奖项(设置面板状态)。表达式说明([[LVAR1.rotation%360]]):获取转盘旋转角度,得到最终停止的角度。
    Axure:转盘抽奖交互原型
    (1)如果90>角度>0,那么就设置“奖品动态面板”为“手环”
    Axure:转盘抽奖交互原型
    (2)要获取装盘的角度,在做比较。
    Axure:转盘抽奖交互原型
    (3)设置动态面板的状态为“手环”
    Axure:转盘抽奖交互原型
    (3)一下的四个一次类推,同上述操作即可,但是需将else if,转换为if。因为不是如果就的关系。

  2. “确认收下”按钮添加交互
    鼠标单击时:隐藏“奖品动态面板”。如下图
    Axure:转盘抽奖交互原型

原型下载:连接:https://pan.baidu.com/s/1guCjiHjVv4FO6CCSJF8EaQ 密码:lp7n
永久有效,若无法查看请直接私信我哈~

相关文章: