axure原型设计之二维码扫描框
来源:互联网 发布:java 指定jdk 编辑:程序博客网 时间:2024/05/09 20:21
效果图: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/
- axure原型设计之二维码扫描框
- 原型设计之Axure RP
- axure原型设计之轮播图
- axure原型设计之弹幕
- axure原型设计之进度条
- axure原型设计之翻牌
- 原型设计之Axure RP pro
- Axure快速原型设计之杂谈
- axure原型设计之获取验证码
- axure原型设计之tab选项卡
- axure原型设计之播放控制条
- axure原型设计之水泡导航栏
- axure原型设计之语音按钮
- axure原型设计之侧滑菜单
- axure原型设计之转盘抽奖
- axure原型设计之tab选项卡
- axure原型设计之抽屉列表
- Axure RP原型设计
- Python filecmp库
- SpringMVC详细实例
- Reactor模式和Proactor模式
- C++ 内存问题
- Spark SQL来读取现有Hive中的数据
- axure原型设计之二维码扫描框
- JSP 页面传值方法总结
- ueditor和springmvc集成
- EditText密码可见与隐藏,EditText光标位置设置在内容后
- autossh
- 3 创建一个kotlin新工程
- Spark-特征抽取(TF-IDF)
- 辩论2如何说服聪明人
- php命名空间:非限定名称、限定名称、完全限定名称实例详解