Axure学习笔记：淘宝扫一眼界面

#交互#   Axure

---

点击底部TabBar按钮的切换动画很酷炫，但是对于扫一眼的功能，研究了好久~~本来以为是普通的扫描功能，但是一直扫描都没反应。扫描二维码、商品都没反应，点击底部的广告，跳转新的界面后发现了类似于合作商家的广告栏。选择具体的一个商家点击进入后，发现了活动详情，包括识别图、活动介绍，所以是要扫描列举的识别图扫描后才可以？？

这个互动，对于用户来讲学习成本有点高。

---

效果如下：

---

流程如下：

1. 在Axure中绘制界面背景、顶部的返回按钮、手电筒按钮

2. 使用矩形工具绘制顶部的提示语，设置矩形圆角、透明度。#000000，50%透明度

3. 使用PS，使用椭圆工具绘制圆形。无填充颜色，边框颜色#00e7ff，5px。栅格化椭圆图层，并使用矩形选择工具删除多余边缘。导出png，插入Axure中，放置于圆角矩形边缘

4. 插入背景图、绘制界面中央的对焦圆形

5. 插入图标icon，绘制底部TabBar

6. PS中打开图标，把鼠标移动到右侧图层上，点击鼠标右键选择混合选项。勾选外发光，设置参数。颜色#00e7ff，不透明度50%。导出png

7. 添加界面底部的广告栏

8. 用PS打开界面截图，绘制TabBar的渐变选中背景图。使用矩形工具绘制矩形

9. 矩形中填充渐变效果。导出png

10. 在Axure中插入渐变背景矩形

---

素材：

1.

渐变矩形

2.

广告栏图标

3.

其他图标