axure8.0快速入门新手教程:摇铃提示

2017年4月17日 阅读:287

当有新邮件时,有新回复时,有新动态时等等,设计者都会想方设法让用户注意到这些变化。而有什么办法能引起用户的注意力呢?我们平常所见过就有红点和摇铃两种方式。例如产品100中用的就是红点的方式,而人人都是产品经理中用的就是摇铃的方式。这里就模仿着设计一个类似的摇铃提示的原型。

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

为了让原型形象点,这里模仿着做一个页头,有网站logo,网站标题,网站副标题,以及搜索、投稿、提示和用户头像四个功能按钮,其中提示按钮就是一个红色的摇铃icon。

第二步:设置页面载入时用例

当页面载入时,设置全局变量OnLoadVariable等于15。

第三步:为摇铃添加载入时用例(角度小于0时)

当摇铃载入时,如果摇铃的角度小于等于0时:

1、当前元件顺时针相对旋转30度,锚点为顶部,动画为线性,时间为300毫秒;

2、全局变量OnLoadVariable增加30;

3、等待0毫秒;

4、触发当前元件的载入时用例。

第四步:为摇铃添加载入时用例(角度大于0时)

当摇铃载入时,如果摇铃的角度大于0时:

1、当前元件顺时针相对旋转-30度,锚点为顶部,动画为线性,时间为300毫秒;

2、全局变量OnLoadVariable减少30;

3、等待0毫秒;

4、触发当前元件的载入时用例。

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

效果图:axure原型设计之摇铃提示
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

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

2条评论

  • 晓艳 2017年6月9日在上午11:34

    楼主,分享一下我的不用全局变量不判断摇铃角度的笨办法:
    1. 设置页面转入时用例。
    – 顺时针旋转摇铃30度,锚点为顶部,动画为线性,时间为150毫秒;
    2. 设置摇铃载入时用例。
    – 逆时针旋转摇铃60度,锚点为顶部,动画为线性,时间为300毫秒;
    – 顺时针旋转摇铃60度,锚点为顶部,动画为线性,时间为300毫秒;
    – 等待0ms
    – 触发当时元件载入时用例。

    • 维度 2017年6月9日在下午9:26

      不错不错,也一样,条条大路通罗马