假如我是微信的交互设计师,我会怎么设计搜一搜?

作者:jcmp      发布时间:2021-05-08      浏览量:0
上一篇 中,我提出了设计搜一搜之前

上一篇 中,我提出了设计搜一搜之前思考的7个问题。这一篇请继续跟随我的假设,落实到具体的页面上,看看从微信团队的设计思路上能学习到什么。

一、搜一搜流程图

二、核心路径原型展示

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

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

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

四、现在来对比我的设想和微信的设计

五、全局说明

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

六、进入搜一搜

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

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

七、分类搜索

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

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

八、开始输入关键词

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

九、显示搜索结果

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

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

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

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

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

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

对于微信朋友圈的分类页,我只是以同样的内容复制排列,所以这里就只放微信的设计了。对比之下,我发现其实朋友圈的结果匹配是最需要考虑仔细的,因为朋友圈的分享内容非常多样化,而且朋友圈里的任何元素只要匹配关键词,都可以被搜索到。

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

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

正在读的书:《腾讯传》、《搜索模式》。

坐标上海。

十一、彩蛋