Axure学习笔记：微信扫描4

#交互#   Axure

---

因为上次绘制的黑色遮罩psd文档没有保存，所以这次重新用ps绘制了一次并且很确定的保存了文档！！！记得保存！记得保存！记得保存！重要的事情说三遍，也不多。

第一篇微信扫描文章链接如下：

https://www.jianshu.com/writer#/notebooks/20481395/notes/21492391

第二篇微信扫描文章链接如下：

https://www.jianshu.com/writer#/notebooks/20481395/notes/21768259

第三篇微信扫描文章链接如下：

https://www.jianshu.com/writer#/notebooks/20481395/notes/22078763

继续完善微信扫描中的其他两个场景，封面扫描和街景扫描的界面有点类似，就不详细解释了。

在这里，主要说一下翻译扫描的步骤~~

---

效果如下：

街景扫描

翻译扫描

---

流程如下：

1.  用PS打开微信扫描的翻译截图，开始绘制黑色遮罩图层。使用矩形工具绘制一个750*1334，填充#000000，透明度50%的矩形。绘制完成后先隐藏矩形，这样子比较容易看到背景图

2. 使用矩形工具，绘制一个无填充，边框#FFFFFF，1px的矩形

3. 复制白色边框的矩形，修改边框#2AA124，5px

4. 添加参考线，用于测量扫描框内的绿色拐角

5. 选中绿色边框矩形图层，使用矩形选框工具框选需要删除的绿色边框区域，这时候点击键盘的删除键，会弹出提示框告诉你无法完成请求，图层无法直接编辑。这时候需要栅格化图层（鼠标移到右侧的图层 -> 在选中的绿色边框矩形图层上单击鼠标右键 -> 选择栅格化图层 -> 点击键盘删除键即可删除）

6. 图层栅格化一次就可以了，不用栅格化多次。删除绿色边框矩形的四条边上多余的部分后，效果如下

7. 隐藏背景图，显示最开始绘制的黑色半透明遮罩图层

8. 最后一步~~ 选中黑色遮罩图层，使用矩形选框工具，删除扫描框内的黑色遮罩。导出png图片~~

9. Axure中插入黑色遮罩png图，复制之前绘制的界面，修改底部TabBar的图标以及文字颜色

10. 替换遮罩图层

11. 修改扫描提示语，完成正常情境下的翻译扫描界面

---

接下来绘制光线差时，显示手电筒功能的界面

12. 把上面完成的界面复制一下，绘制一个#000000，50%透明度的矩形，至于扫描框图层下方，营造出光线弱的效果~~（这个矩形也可以不加~~）。在图层最上方添加手电筒图标和文字，水平方向居中

13. 删除绿色扫描框下方的文字，完成！

14. 完成图