Axure学习笔记:淘宝扫描码界面

#交互#   Axure


从淘宝APP左上角“扫一扫”进入扫描界面,底部的TabBar显示三种扫描情景,每一个情景的界面布局风格不完全一致,默认选择“扫描码”。

使用扫一扫功能,扫描二维码/条码的操作概率比较大。



功能:

顶部的功能栏,显示了四个按钮:历史记录、相册、手电筒、帮助。

历史记录:使用扫描码扫描的历史记录。分为文本、二维码内容(网址链接)、商品条形码;

相册:调用系统相册,打开相册读取数据;

手电筒:调用系统的手电筒开关,点击图标后会切换手电筒的开启与关闭的图标;

帮助:提示无法扫描二维码/条码的解决方法;


手势:

扫描框内可进行手势缩放操作,以及上下滑动缩放操作。




步骤:

1. 从上一个练习中把完成的淘宝扫一眼界面直接copy过来,修改底部TabBar的选中功能为扫描码(直接移动选中背景矩形即可)

2. 导入功能图标icon,完成顶部的按钮。修改顶部提示文字

3. 在PS中,把之前完成的咸鱼扫描的黑色遮罩源文件修改一下扫描白色边框的尺寸,以及加上黑色遮罩图层,导出png图片。

在Axure中导入扫描png图片,以及背景图

4. 调整图层位置,界面完成~~



素材:

1. 

扫描图层

2. 

图标
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • #交互# Axure 闲鱼APP的扫描界面,可以支持扫描二维码/条形码,访问相册读取照片,调用系统手电筒功能。 ...
    篱落LY阅读 5,211评论 0 0
  • 由于最近公司的产品要做扫码功能以辅助web端完成订单支付,所以就研究了一些主流APP中的扫码页面,这里就从页面元素...
    停停走走UP阅读 12,548评论 1 5
  • #交互# Axure 支付宝扫描界面,顶部Navigation和底部的TabBar以黑色背景色填充,其中又有一定...
    篱落LY阅读 4,386评论 0 0
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,196评论 4 61
  • 过年烧香是持续了不知多少年的传统活动,从小到大二十多年来年年跟着父母后面看着他们买香烛;看着他们将香点起,青烟袅袅...
    你好达达尼安阅读 3,294评论 0 1