axure原型设计之二维码扫描框

2017年3月21日
6+
阅读:1,417

效果图:axure原型设计之二维码扫描框

自从二维码流行起来之后,二维码成了移动端的一种很关键的入口,随时随地只需要扫一扫,既可以打开某个网页,下载某个APP,特别方便。因此,现在很多APP都支持扫一扫功能,比如QQ、微信、支付宝,饿了么等等。这一章就教大家如何使用axure原型工具制作二维码扫描框。

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

1、一个300X395的黑底黑框矩形,不透明度为20%,命名为“背景框”;

2、一个150X150的白底白框矩形,不透明度为70%,命名为“扫描框”,放在“背景框”的中上方;

3、一条宽为131的绿色水平线,不透明度为30%,命名为“扫描条”,初始状态设置为隐藏,放在“扫描框”的顶部;

4、一个文本标签,白色文字,文字内容为“将二维码/条码放入框内,即可自动扫描”,放在“扫描框”的底部往下一点的位置;

5、由4条短的的垂直线和4条短的水平线组成的组合,均为绿色,宽或高均为15,分别将“扫描框”的四个角围起来。

第二步:为“扫描条”添加载入时用例

在该用例中只需添加一个动作,即显示“扫描条”。

第三步:为“扫描条”添加显示时用例

在该用例中添加如下5步动作:

1、相对移动当前元件y轴150的距离,动画为线性,时间为3000毫秒;

2、等待0毫秒;

3、隐藏当前元件;

4、相对移动当前元件y轴-150的距离,没有动画;

5、显示当前元件;

可以了,点击预览即可以看到绿色透明的“扫描条”在循环地扫描着。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

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

7条评论

  • Sophie 2017年10月17日在下午3:47

    为什么我这里动画中没有相对移动的选项,也没有y轴的选项,你用的是什么版本的?我用的是8

    • 维度 2017年10月26日在下午2:43

      我用的也是8

  • hh 2017年8月10日在下午5:28

    扫描条动 不了,楼主请补充下属性的截图。case1 和case2 是挂在哪个控间上

  • 卖血的蚊子 2017年7月22日在下午3:38

    楼主的东东讲的非常实用,非常感谢~

  • 晓艳 2017年4月27日在上午11:29

    楼主,看起来少了最后一步Fire OnPageLoad 事件来实现扫描条重复扫描。
    我加上后就可以重复扫描了。不然扫描线就只走一次。

    • 维度 2017年4月27日在下午3:45

      不需要啊!这个案例没有fire触发事件,检查下步骤有没有全。。。还有扫描条的初始状态为隐藏状态。。。

      • 晓艳 2017年4月27日在下午4:11

        你是对的。我当时没注意是显示时用例。用的是页面加载用例来实现的。所以最后需要Fire On Page Load.

发表评论

电子邮件地址不会被公开。 必填项已用*标注