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

效果图：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/