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

#交互#   Axure

---

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

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

---

功能：

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

历史记录：使用扫描码扫描的历史记录。分为文本、二维码内容（网址链接）、商品条形码；

相册：调用系统相册，打开相册读取数据；

手电筒：调用系统的手电筒开关，点击图标后会切换手电筒的开启与关闭的图标；

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

---

手势：

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

---

---

步骤：

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

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

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

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

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

---

素材：

1. 

扫描图层

2. 

图标