从宏观到微观,拆解搜一搜的核心流程和交互细节

从零开始学运营,10年运营老司机带路,2天线下集训+1年在线学习,做个优秀的运营人。了解详情

在《设计搜一搜之前,我问了自己7个问题》的文章里,我提出了如果我是微信产品经理的假设。这一篇请继续跟随我的假设,从宏观到微观,拆解搜一搜的核心流程和交互细节。

搜一搜流程图

核心路径原型展示

对整体的流程图和原型图了然于胸后,接下来请跟我一起深入交互细节,看看从微信团队的设计思路上能学习到什么。

全局说明

因为搜一搜是单项需求,所以全局说明里省去了页面切换方式、页面刷新等内容,只是简单说了标识说明和时间格式,方便大家理解我的原型图。

微信教会我新功能提示可以这样玩

有新功能上线,很常见的方式是用Badge(小红点)的方式提醒用户,我的设想也是如此。而当我画完原型图,再更新到最新版本6.5.8,我却「发现」页并没有「搜一搜」和「看一看」,起初还怀疑是不是没更新成功。机智如我,我想应该在设置里面,果然发现了「实验室」。

当我点进「实验室」之后,我惊叹微信团队的高明:

  1. 「允许用户自由选择」:无论微信团队是出于克制还是出于不确定,他们都尽量不引起用户的反感,赋予给用户说“不”的权利。
  2. 「意见反馈」:通常意见反馈只会在设置中出现,而微信为这两个功能都各做了一个反馈入口,足以见微信团队多么在乎这两个功能会不会得到用户的认可和喜欢。

进入搜一搜

在分类方式上,个人认为tabs的方式更高效,只是对于搜索场景频率较低的三个分类:表情、音乐和小说,需要左滑tabs才能出现。视觉上,微信突出了搜索框,没有做热词引导,整个页面更简洁一些。

微信把搜索历史隐藏得很深,我试了好多次才发现:只有当你输入你以前搜过的词,才会以一个icon的方式提醒你,这真是极简。这样做合不合理,涉及到一个场景:微信上到底有多少人会搜以前搜过的东西?

分类搜索

对于带着明确目的查找型用户,我的设想是可以滑动tabs来实现定向搜索,而微信需要进入二级页面,同时输入框里的icon和提示语发生变化,提示用户搜索范围改变。

之所以放上朋友圈和小说两个分类搜索页,是因为微信在这两个类别下,做了一些推荐性质和用户历史行为性质的快捷入口。我认为在文章类别下,也应该做一个最近浏览的入口。

开始输入关键词

输入关键词过程中的交互,我的设想和微信的设计出入不大,这里不赘述。

输入的关键词可能不对?

用户有时候也会犯错,好的产品就是告诉你找到正确的路,同时也不会抹杀掉你情愿错下去的权利:)

显示搜索结果

因为公众号和文章是最高频的搜索需求,所以我把这两个类别放在最前面。又因为不少人搜索的是已关注的公众号,所以公众号类别区里我仅保留了公众号头像和名称两个元素,以曝光更多公众号。

对于少数想要搜索音乐和小说的用户,需要左滑tabs来实现定向搜索。

对比微信的设计,有3点值得我学习:

  1. 不同的关键词,对应的分类排序是不一样的,非常灵活,这也是卡片式分类的好处。小程序的类别排在比较前面,显示了微信对于小程序的重视。文章排在最后,可以不断加载,给用户一种搜索结果很丰富的感觉,尤其是满足了探索型用户的需求。
  2. 细分出资讯类别,而这些资讯的来源也是公众号,这些公众号的特点都是新闻媒体性质的,如南方都市报、腾讯新闻、搜狐娱乐等。
  3. 对搜索结果进行标记,公众号会有“已关注”,小程序会有”使用过”,文章会有“最近读过”、“X个好友分享”,音乐会有“xx人近30天在朋友圈分享”。这些把社交元素和场景化设计都揉在搜索结果里了。

单个类别的搜索结果显示页

在公众号列表页,我加了一个“+关注”的button来吸引用户关注。

微信里的“2个好友关注”标记融入了微信的社交感。给用户一种心理暗示:这个公众号应该不错,我也来关注看看?

微信在文章分类页里的2个细节值得我学习:

  1. 增加了排序功能,用户可按默认排序或者时间排序来查看文章;
  2. 对文章做标记帮助用户快速筛选,用“最近读过”标记来区分读过和未读过的文章;“x个好友分享”标记更能吸引用户阅读。

在前期调研发现,用户很少在微信上搜索音乐,那么为了培养这个习惯,我在音乐列表上加了转发的button,方便用户快捷转发给朋友或者分享到朋友圈。

微信的设计里有3个值得注意的细节:

  1. 对于非QQ音乐平台的音乐,没有播放按钮。用意很明显,总要偏袒自家兄弟的产品嘛;
  2. 统计近30天的朋友圈分享量,来体现歌曲的热度;
  3. 不仅支持歌名匹配,也支持歌手匹配。

对于微信朋友圈的分类页,我只是以同样的内容复制排列,所以这里就只放微信的设计了。

对比之下,我发现其实朋友圈的结果匹配是最需要考虑仔细的,因为朋友圈的分享内容非常多样化,而且朋友圈里的任何元素只要匹配关键词,都可以被搜索到。

从视觉上来说,这里和我们平时刷的朋友圈长得又不一样:

  • 文字信息最多只放两行;
  • 音乐和链接视觉比重明显减小,没有音乐封面图、文章封面图,统一用icon来标明;
  • 对于没有文字,直接分享链接和音乐的朋友圈,会加一句“分享了一个链接”、“分享了一首歌”。

这是典型的场景化设计。平时刷朋友圈是浏览的心情,而搜索时用户带着明确目的,所以应该尽可能地提供有效的信息,减少干扰信息。

总得来说,微信在「搜一搜」上的用户体验花了不少功夫,现在面临的最大难题是:如何培养用户使用搜一搜的习惯?个人猜测是这样:

如果有一天,微信的数据库强大到用户不用打开其他软件,只要搜一搜,就可以发布一条带图文、音乐和视频的朋友圈,那么用户必然会依赖搜一搜,习惯也在不知不觉中被培养起来。

相关阅读

良好体验的微信搜索,背后到底暗藏了多少小心思?

 

作者:小蠢侠,16年毕业,负责ToB端的产品经理,经常在朋友圈搞事情、发红包的问题少女。坐标上海。正在读的书:《腾讯传》、《搜索模式》。个人微信:1545882156

本文由 @小蠢侠 原创发布于人人都是产品经理。未经许可,禁止转载。

原创不易,欢迎赞赏(*^▽^*)
3人打赏
评论
有话不说憋着难受
  1. too young,too simple。我当初想着就是只有一个搜索框,然后搜索全网内容。甚至连标签都没有。

    回复
  2. 关注【创业公司的产品运营圈】,回复【原型】,就可以下载到源文件:)

    回复
  3. 搜索页和搜索关键词那两个原型,有点看不懂,搜索页原则上就可以直接输入关键词,但是下面又有tab标签,有点看不懂,不过作者你的原型是真的超漂亮,我看了好多遍 要模仿你的了!!!

    回复
    1. 关注【创业公司的产品运营圈】,回复【原型】,就可以下载到源文件:)

      回复
    2. 你可以下载个知乎,体验一下知乎的搜索,就知道是什么意思了

      回复
    3. 看了下,在无搜索词时,点击tab标签时,下面的内容都是空,加点热点内容体验会好一点吧,然后你有没有发现,1,不能指定搜索小程序,但是结果里又有小程序,2,有些关键词在全部搜索的结果里,不展示,但是在指定搜索又能搜索到结果,不知道什么原因,比如关键词“时间”只能指定公众号搜索时,才能搜索包含“时间”的公众号

      回复
    4. 我在文章里也提到了,试过很多的关键词,每个关键词下面的分类结果是不一样的,其实我也很想知道这背后的原因,我猜测也许是微信根据一些历史数据来推断用户到底想要搜什么分类吧。大而全和小而准是搜索领域里面一直需要平衡的地方

      回复
  4. 搜索好难啊

    回复
    1. 你是从哪个角度来说很难?你是做技术的吗?

      回复
    2. 嗯技术岗位,百度也是一个搜索引擎啊,至今还不是天天被人喷

      回复
    3. 做搜索的确不容易……

      回复
  5. 忘了夸你分析的很棒!
    这种“我的设想”和“对象实际设计”的对比非常有意思!加油!

    回复
    1. 谢谢~在对比的过程中就会学习到很多呐~你也可以~

      回复
    2. 哈哈,我懒。。

      回复
  6. 就微信文章的搜索结果来看,个人觉得公众号里面文章的社交属性并没有完全打开。
    公众号文章不是有点赞数吗?在按时间排序那里给个汉堡,然后里面加上按热度或者按点赞排序,也给了用户搜索热点文章的选择。这样社交风格岂不是更强。
    现在公众号里面的文章下面留言要找很久才看得到自己评论,很多用户都会有这样一个操作,看自己评论发出去没有,看看有什么错别字没有,或者写错了没有,这样就可以修改。最重要的是不能评论别人的留言,社交感、用户参与度和用户话语权大大降低。
    不过有时候也在想或许微信就是不想设计成那种社交感重的风格,里面有微信自己的考量,但是我个人觉得把上面说的加上去看文章更有动力了吧,用户参与度和话语权都提高了也没什么不好,总之不是很懂龙哥怎么对公众号文章这一块设计成这样。

    回复
    1. 其实业内有人讨论过为什么公众号文章下面的评论不能互相回复,从逻辑的角度看,会增加管理的复杂性。从定位的角度看,毕竟公众号不是垂直的阅读生态,很多资讯文章软件支持用户互相评论的目的,其实是为了引导用户互相关注,增加对产品的粘性,但是微信可能不需要这样。个人见解哈

      回复
    2. 我同意。微信一直定位通讯APP,但搜一搜看一看上线后如果用户反馈良好,我想我说的这些可能会看到改变。
      现在微信正在做改变,加了搜索和信息流之后,它可能还想往社区产品发展,毕竟社交关系有最强的留存,如果是这样的话我们说的用户评论可能会实现了吧,哈哈。。。

      回复
  7. 两篇都认真看了,值得学习,厉害 :mrgreen:

    回复
    1. 毕竟研究了两个星期……

      回复
  8. 更正一下:QQ音乐已收购酷狗、酷我,都是自家兄弟。可能是暂时没有打通而已

    回复
    1. 哦,谢谢更正!

      回复
  9. 不错学习一下

    回复
    1. 结合上一篇看,会更有收获:http://www.jianshu.com/p/177aef0865b0

      回复
  10. 能加微信么?

    回复
    1. 文中有写呀1545882156

      回复
  11. 分析的很细,不错

    回复
    1. 其实这篇分析还有上一篇的,http://www.jianshu.com/p/177aef0865b0

      回复