Axure：支付宝扫描界面

#交互#   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.

手电筒