aure8.0 原型设计实例：抢购秒杀倒计时

阅读：1

1+

购物，女人的最爱，嘻嘻嘻……相信女人都见过这一章所做的原型——抢购秒杀倒计时。一般都是商家在管理后台设置好某商品或者某活动抢购秒杀的时间长度以及开始时间，然后在前台页面上即显示一个倒计时电子钟，给购物者营造一种紧张的抢购氛围，以达到商品促销的效果。具体如何使用axure8.0来制作呢？请往下看。

第一步：拖拉摆放好相关控件

1、一个灰色背景矩形；

2、五个文本标签，文字分别为：“距活动结束”、“天”、“时”、“分”和“秒”；

3、八个白底小矩形，分别展示时间倒计时的天、时、分和秒的，每个单位展示两位数，全部小矩形以及组合分别命名为：

(1)“秒个位数”

(2)“秒十位数”

(3)“分个位数”

(4)“分十位数”

(5)“时个位数”

(6)“时十位数”

(7)“天个位数”

(8)“天十位数”

(9)(1)和(2)组合命名为“秒”

(10)(3)和(4)组合命名为“分”

(11)(5)和(6)组合命名为“时”

(12)(7)和(8)组合命名为“天”

(13)(9)(10)(11)和(12)全部组合并命名为“倒计时”（“倒计时”的初始状态设置为隐藏）；

4、一条水平线，线条颜色和背景矩形同色，叠在“倒计时”上方。

第二步：添加页面载入时用例

1、设置全局变量OnLoadVariable为172800，为什么是这个数字？其实这是两天的秒数，即2X24X60X60，这里只是以2天的抢购倒计时为例而已；

2、显示“倒计时”。

第三步：为“倒计时”添加显示时用例

1、设置全局变量OnLoadVariable为OnLoadVariable-1；

2、设置倒计时的文本

（1）设置“秒个位数”的文本为：[[(OnLoadVariable%60)%10]]

（2）设置“秒十位数”的文本为：[[Math.floor((OnLoadVariable%60)/10)]]

（3）设置“分个位数”的文本为：[[Math.floor(OnLoadVariable/60)%60%10]]

（4）设置“分十位数”的文本为：[[Math.floor(Math.floor(OnLoadVariable/60)%60/10)]]

（5）设置“时个位数”的文本为：[[Math.floor(OnLoadVariable/3600)%24%10]]

（6）设置“时十位数”的文本为：[[Math.floor(Math.floor(OnLoadVariable/3600)%24/10)]]

（7）设置“天个位数”的文本为：[[Math.floor(OnLoadVariable/86400)%10]]

（8）设置“天十位数”的文本为：[[Math.floor(Math.floor(OnLoadVariable/86400)/10)]]

3、等待1000毫秒；

4、隐藏“倒计时”；

5、显示“倒计时”。

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

效果图： axure原型设计之抢购秒杀倒计时

更多原型案例： http://weidublog.com/index.php/2017/03/20/181/

来源：维度

关键字：产品经理, 产品设计, math

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！