图像搜索app结果页优化记录

prologue

前言

这个产品的入口在：百度App-相机icon

这个产品的功能是：图像搜索，用一张图片做为“关键字（query）”发起搜索

我们在2017年10月对搜索结果页的展现方式做了一次重大的更新，使得从发起搜索-->拿到结果这个过程的时间大幅缩短，并且减少进行回退操作的步骤。

改版方案是由我们团队PM等人提出的，而我是主要的施工方，这篇文章是记录这次优化的思路。

---

优化前

before

（点击查看原图）

1 从拍照发起搜索到拿到网页版（H5）结果页的流程：
1.1 拍照页点击拍照按钮
1.2 将图片传到服务器识别，并展示扫描动画，表示正在加载（第一个loading态）
1.3 获得结果页url，跳转至手机百度浏览器，加载url（第二个loading态）
1.4 获得完整的搜索结果

2 编辑图片再次发起检索
当你走到结果页这一步，你对搜索的结果不满意的时候，你还可以编辑一下图片，框选出你想要搜索的内容，再次发起搜索：
2.1 点击按钮发起编辑
2.2 框选区域
重复1.1~1.4，一共6个步骤。

3 退回到拍照页
只能点击相机icon，点击左下角的返回，会回到app首页
？？？

问题来了：

Q1 从1中的流程来看，拿到完整的结果页需要经历两次请求，第一次为请求结果页url，第二次为加载url，等待的时间比较长

Q2 如果需要编辑图片重新搜索，用户再次拿到结果的流程很长

Q3 这里的问题是，点击相机icon其实是重新打开了相机，启动有耗时

Q3.1（可以不看）技术上来说因为我们在加载结果页的时候关闭了相机，所以要重新拍照只能重启相机，至于为什么不在相机上push一个webview出来，是因为这个结果页涉及到很多和相机的交互，存在循环调起并且无法和手机百度账号互通，所以需要使用手百的webview，虽然我认为在拍照页push一个webview出来，点击左下角pop webview才是一个感知上和体验上比较好的方式

优化后

after

（点击查看原图）

4 从拍照发起搜索到拿到原生组件（NA）结果页的流程：
4.1 点击拍照按钮
4.2 弹出NA结果页（此时发送图片到后端，拿到结果的时间同1.2）
4.3 拿到结果，渲染NA页面（非常快，50毫秒左右，远小于1.3的时间）

优化点：
4.2的时间等同于优化前1.2的时间，4.3的过程等同于1.3的过程，但是时间非常短，只有50毫秒左右，1.3的时间得按秒记。这样一来大大的缩短了用户得到完整结果的时间。统计数据来看整体的时间只有原来的40%~50%。

5 编辑图片再次发起搜索
5.1 在结果页上方的编辑框可以像大多数app那样，缩放，拖动
5.2 在缩放或者拖动之后，下方的结果页会自动刷新，重新拿到的结果的时间约等于4.1~4.3

优化点：编辑再次搜索的操作路径和时间大大缩短，按照2所述，原先需要用户操作三步，现在只需要操作一步，并且重新拿到结果的时间等于4.2~4.3的时间。

6 回到拍照页
点击右上角的关闭按钮，或者下拉结果页。

优化点：不用重新打开整个拍照页，只是把暂停的相机重新打开，对比3的时间也会缩短。

总结

对比优化前，优化后的主要收益在于，整体的搜索速度更快，时间降为原来的一半不到，用户的操作路径更短。

当然这么干也是有缺点的：

1. NA结果页的丰富性远不如H5结果页
2. 每次涉及到结果页改版的时候，NA只能发版修改，而H5可以随时发布
3. 编辑的区域有点小了，实际操作起来不是那么方便

针对1和2，这个结果页是可以向上滑动的，我们在底部加了一个按钮，点击以后会跳转到完整的结果页，另外PM经过对应展现/点击的数据分析之后，调出了最有价值的结果做NA化。针对3，可以加大编辑区域的面积，这个会在未来的迭代中实现。