axure8.0原型设计实例:商品抽奖

2017年5月4日 阅读:263

抽奖的交互种类有很多,前面也已经讲过两篇关于抽奖的原型设计文章了,分别是《axure原型设计之转盘抽奖》和《axure8.0快速入门新手教程:公司年会抽奖器》,这篇文章,在跟大家介绍新的一种抽奖交互设计,也一样特别常见,不过大多数用于虚拟商品抽奖,比如抽奖话费、优惠券、金币、积分等等。具体如何使用axure8.0来制作,请认真看下文……

第一步:绘制九宫格抽奖盘

一个大的矩形和8个小的矩形排成一个九宫格抽奖盘

第二步:绘制底色动态面板

一个有state1~state8八个面板状态的动态面板,命名为“抽奖底色”,每个面板都有一个一模一样的半透明的浅蓝色矩形,只不过这个矩形放的位置各不一样,分别对应九宫格中的八个位置(中间那个格子除外)。

第三步:放置商品图片以及绘制中间的抽奖按钮

周围的八个格子中分别放上一张待抽奖的商品图片,中间那个格子绘制一个抽奖按钮,其实也就是一个有灰底的矩形和两个文本标签组成的组合。

第四步:绘制抽奖结果

一个矩形,一个确定按钮和一个动态面板的组合,确定按钮命名为“确定”,动态面板命名为“中奖商品”,动态面板有state1~state8八个面板状态,按照顺序依次放置顺时针抽奖的8个商品图片,整个组合命名为“结果”,初始状态为隐藏状态。

第五步:为“抽奖底色”添加状态改变时用例

Case1:如果OnLoadVariable大于0,那么就将OnLoadVariable减1;

Case2:如果OnLoadVariable小于等于0,那么就设置“抽奖底色”为停止循环,并且显示“结果”。

第六步:为“抽奖按钮”添加鼠标单击时用例

设置该组合允许触发鼠标交互

1、隐藏“结果”;

2、禁用“抽奖按钮”;

3、设置OnLoadVariable的值为[[Math.ceil(Math.random()*100)%8+17]];

4、设置“抽奖底色”为next状态,向后循环,循环间隔为300毫秒;

5、设置“中奖商品”为value状态,状态名称或序号为[[OnLoadVariable%8+3]]。

第七步:为“确定按钮”添加鼠标单击时用例

1、设置“抽奖底色”为state1;

2、启用“抽奖按钮”;

3、隐藏“结果”。

点击预览,点击最中间的抽奖按钮就可以看到抽奖的动态效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之商品抽奖
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/05/04/609/

没有评论

评论已关闭。