axure8.0原型设计实例:中奖动态

2017年5月3日 阅读:270

中奖动态、评论动态、接单动态……这类型的设计其实都是一样的,都是为了给访客一个动态的气氛或者营造一种紧张的氛围。常见于外包平台、广告联盟平台、彩票网站……这种设计表现是:由下往上不断循环递推,每往上递推一行文字,就停顿一下,然后再递推一行……如此循环。这里,就教大家如何制作这种动态的原型设计。

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

首先,一个灰底圆角正方形的奖字,一个中奖动态文本标签,一个动态面板和两个灰边的矩形组成一个中奖动态栏目的背景(其中,动态面板的初始状态为隐藏状态);

然后,在动态面板中,放置一个组合“动态”,它是由两个组合组成,每个组合均为多行文字组成,分别命名为“动态1”和“动态2”,其中“动态2”紧贴着放在“动态1”下面。

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

1、显示动态面板;

2、设置全局变量OnLoadVariable为6。

第三步:为动态面板添加显示时用例

Case1:如果OnLoadVariable为1

1、绝对移动“动态1”到“动态2”的底部;

2、“动态”Y轴相对移动-30,动画为线性,时间为200毫秒;

3、OnLoadVariable的值减1;

4、等待1000毫秒;

5、隐藏动态面板;

6、显示动态面板。

Case2:如果OnLoadVariable为-5

1、绝对移动“动态2”到“动态1”的底部;

2、OnLoadVariable的值设置为6;

3、“动态”Y轴相对移动-30,动画为线性,时间为200毫秒;

4、OnLoadVariable的值减1;

5、等待1000毫秒;

6、隐藏动态面板;

7、显示动态面板。

Case3:如果OnLoadVariable为其他值

1、“动态”Y轴相对移动-30,动画为线性,时间为200毫秒;

2、OnLoadVariable的值减1;

3、等待1000毫秒;

4、隐藏动态面板;

5、显示动态面板。

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

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

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

没有评论

评论已关闭。