#交互# Axure
支付宝扫描界面，顶部Navigation和底部的TabBar以黑色背景色填充，其中又有一定的透明度，悬浮在相机取景的背景图上方。Navigation左侧是返回键，右侧具有相册按钮，可以获取相册照片进行读取。底部的TabBar具有扫描按钮和AR按钮，进入支付宝扫描界面默认打开扫描功能。
进入支付宝扫描界面后，扫描框下方文案提示二维码/条码放入扫描框内进行扫描。
继而扫描框下方的文案变为“请对准二维码/条码，耐心等候”。
若支付宝扫描框中长时间没有扫描识别到二维码，会在下方显示“未扫描到二维码？获取帮助”，点击文案后跳转客服帮助界面。
光线弱时，扫描框居中位置下方显示手电筒按钮，并提示轻点图标即可使用手电筒功能。
效果如下：
流程如下：
1. PS中打开支付宝扫描界面，绘制750*1334，填充#000000，不设置边框，透明度50%的矩形。
2. 添加水平方向、垂直方向的参考线。绘制515*515，不设置填充，边框#2E88D8，2px的矩形。（扫描框外侧的蓝色矩形）
3. 黑色遮罩矩形图层栅格化
4. 绘制515*515矩形，点击鼠标右键，选择“建立选区”。
5. 选中黑色遮罩矩形图层，点击键盘删除键。删除遮罩图层上扫描框内的区域
6. 复制蓝色边框矩形图层，修改矩形参数。边框改为8px
7. 栅格化8px边框的“蓝色边框 拷贝”图层，使用矩形选择工具删除多余的蓝色边框。导出png图片
8. Axure中，绘制扫描界面的基本元素。背景图+Navigation
9. 绘制TabBar
10. 添加背景图片，导入黑色遮罩png图
11. 绘制其他场景的界面~~
素材：
1.
支付宝黑色遮罩图
2.
手电筒
