Axure学习笔记：闲鱼扫描界面

闲鱼APP的扫描界面，可以支持扫描二维码/条形码，访问相册读取照片，调用系统手电筒功能。

顶部的Navigation使用透明背景色，直接在可使用的按钮下方添加半透明的背景黑色，营造了简洁、宽广的视觉效果。

---

在扫描界面中出现了二维码或条码时，并非在扫描框内出现，扫描框会自动对焦到二维码上，这个功能比较有趣，但是如果同时在扫描界面上出现多个二维码的时候这个自动对焦功能就有点尴尬了。

意外的发现了在扫描界面中可以进行缩放手势操作，以及上下滑动缩放手势操作~~

---

发现了一个小Bug：若二维码/条码是一个网页链接，扫描后弹出提示是否跳转到相对应的连接上，点击“取消”后，无法继续扫描二维码了。直接卡顿在界面上。

若扫描的二维码是文本，则直接显示文本内容后仍可以继续扫描。

，

步骤：

1.  PS中打开截图，使用矩形工具绘制白色边框矩形（480*474，#FFFFFF，5px）

2. 栅格化白色边框矩形图层

3. 使用矩形工具绘制矩形后点击鼠标右键，选择建立选区。选中白色边框矩形图层，点击键盘删除键，删除白色边框矩形图层中选区的部分

4. 删除完白色边框矩形图层多余部分后的效果图

5. 选中白色边框矩形图层，在右侧的图层中鼠标放在白色边框矩形图层上，点击鼠标右键选择“混合选项”，选中“投影”设置参数

6. 

设置投影前 设置投影效果图

7. 使用矩形工具绘制白色边框矩形中的扫描矩形

8. 设置扫描矩形内的填充效果

9. 设置不透明度为20%，导出png

效果如下

10. 在Axure中绘制界面的背景、状态栏、顶部按钮

11. 插入图片、扫描图片

12. 添加文字说明

素材：

1.

扫描图层

2.

图标