axure8.0原型设计实例:抢购秒杀倒计时

2017年5月6日 阅读:335

购物,女人的最爱,嘻嘻嘻……相信女人都见过这一章所做的原型——抢购秒杀倒计时。一般都是商家在管理后台设置好某商品或者某活动抢购秒杀的时间长度以及开始时间,然后在前台页面上即显示一个倒计时电子钟,给购物者营造一种紧张的抢购氛围,以达到商品促销的效果。具体如何使用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/

作者:维度
%

3条评论

  • vincy 2017年6月22日在下午2:01

    说的是事例图,在手机上观看很累

  • vincy 2017年6月22日在下午2:00

    博主,如果这些事例如能放大观看就更好了

    • 维度 2017年6月23日在上午12:55

      博客程序应该是自动优化了图片了,我上传的图片本身是大图来的