最近由于工作需要,调研学习各类产品的搜索功能,于是准备做个笔记和大家分享,也督促自己总结抽象。
首先思考一个问题,什么是搜索?我对搜索的定义是主动表达,与之相对应的是被动表达,比如推荐系统。由于工作经历,对推荐系统不熟,平常主要做主动表达相关的产品工作,今天分享的重点也是这部分。
第二个问题,为什么需要搜索?我想很多人心里有答案,有限的呈现空间无法将产品内容和数据都到达用户,换句话说,我们当前没有办法在用户不做主动表达的情况下给用户需要的内容,所以需要用户通过一系列的行为帮助我们去理解他自己。
第三个问题,常见的搜索有哪些类型?从搜索输入的角度看,最常见的是文本搜索,其次是语音、图片、扫码等;从搜索覆盖的对象来讲,百度、谷歌、搜狗属于通用搜索,搜索对象覆盖互联网上的各类信息,音乐、视频、购物等搜索属于垂直搜索,搜索对象为某一领域的内容。
这次调研覆盖的对象是通用+日常使用各领域的产品,大概40个左右,后面会有比较详细的列表。梳理了一遍现有各类主流产品,搜索产品从外观上,基本可以抽象为几类组成要素:
入口
即输入框,依据搜索产品的地位不同,入口位置明显差别,也有个别有意思的设计,典型入口位置有首页顶部搜索框(豆瓣、知乎)、右侧搜索button(QQ阅读)、底部第三个tab键(bilibili);入口展示的信息也各有不同,淘宝、携程、微博内置热搜词,不搜即得,多数app内置搜索范围,少数app搜索框文案作为摆设(乐视。。。)
点击入口后的默认搜索界面
这个界面依据产品想表达给用户的不同和产品类别,差异非常明显,这一步会给用户带来体验差异的部分包括:
是否调起输入法,调起输入法代表期望用户更多表达(百度地图),但会有遮挡下方展示问题,不调起输入法代表期望在这个页面推给用户更多内容(半糖)
默认搜索页面希望呈现给用户哪些信息,这个页面可选择内容包括用户的历史搜索记录(历史记录是否支持单条删除和批量删除,点击批量删除是否有确认提醒都会带来体验差异,淘宝和京东有误操作提醒,其他app基本都没有),热门搜索(呈现方式包括排行榜、大家都在搜、换一换等,代表app为视频类,搜狐视频有分类排行榜)、分类搜索内容(蘑菇街支持开始就区分类别,淘宝、脉脉和微信支持在一开始就选择搜索内容,比如文章、公众号等)、推荐模块(旅行类产品常见猜你喜欢模块)等
输入过程
这个过程中主体是引导模块,即suggestion,suggestion设计上的几个点包括是否有命中态,是否支持特型,是否对suggestion进行分类,是否支持直达特定结果,是否和搜索结果联动
常见为区分产品主色表达命中态,缺省色为非命中态(蚂蜂窝、微博),比较推荐的做法为命中态削弱(QQ浏览器顶部搜索框),部分产品不区分是否有命中态
特型suggestion比较常见的如QQ浏览器的天气、应用特型,微博的人物特型,知乎的话题及人物特型
Suggestion分类和产品关联度很高,比如视频类产品中标明为电视剧、电影、综艺,音乐类产品标明专辑、MV等
直达特定结果在酒店预订类产品中常见,比如去哪
搜索结果联动,是指输入过程未终结,搜索结果已经展示出来,同时随着输入内容的删减而变化,代表app有半糖、知乎
搜索结果呈现
本以为搜索结果的呈现会非常多样性,调研完主流产品后发现基本元素一致,原因可能是这个页面都需要解决一个核心问题:告知用户,这条结果为什么会在这里出现
结果页基本都以列表形式组织,上下翻页,目前以自动加载为主流,这几个组合应该是当前效率最高的决策方式
根据内容是否分类,搜索结果分为纯列表和分tab两大类,纯列表代表为多看阅读,分tab代表为新浪微博、知乎、腾讯视频、乐视视频等,分tab又分为两类,一类产品主tab包含了其他副tab的内容,支持跳转(新浪微博、乐视),一类产品各tab间内容互斥(知乎、QQ音乐、半糖)
结果页依据类别不同支持二次排序和筛选:作为结果页的重要组成元素,依据产品类别不同,排序和筛选也有明显差异,比如酒店预订和购物类产品中,这类功能尤为重要
从决策效率上讲,结果页最好支持命中态展示,能更好的帮助用户了解为什么给到他这条结果
上面是可见部分的搜索功能,背后的工作有许多,搜索是典型的“台上一分钟,台下十年功”产品,每一个展现在前台的元素及筛选项,都需要建立索引并参加排序,搜索产品要到达用户,最粗粒度的流程:数据集建立->倒排索引->召回->排序->结果呈现,还有一个一直存在的议题,如何衡量搜索效果,也是我目前工作的主要组成之一,后续找时间总结。
附各APP简单分析list(没时间做表格,大家凑合看吧):
1.搜索类:
a.百度
a.点击后上推页面,调起输入法,页面list形式展示历史sug,支持查看更多历史,不支持单条删除,右侧为取消
b.页面清爽
b.搜狗
a.同百度,点击后上推页面,调起输入法,页面list形式展示历史sug,不支持单条删除,右侧为取消
c.谷歌
a.H5动效很好,技术牛X
d.神马
a.设计较好:人物、新闻
2.浏览器:
a.UC
a.浏览器自己的sug,和神马不同,命中标蓝,未命中黑色
b.点击后线上推页面,调起输入法,右侧有取消
c.下方仅有历史搜索记录,支持全部清空
d.支持语音搜索
e.资讯交互流畅
b.QQ
a.热词+语音+扫码
b.点击后线上推页面,调起输入法,右侧有取消
c.默认为热门(支持换一换)+历史搜索list
d.资讯是下拉后分tab
e.sug有特型:天气、剧情、应用、网址等,选中灰色,未选中黑色,未选中应该突出,支持清除
c.Safari
a.内置默认百度+书签历史搜索+当页查找(类似word,其他产品都没见到类似效果)
3.招聘类:
a.脉脉
a.默认有引导窗格,和微信很像
b.点击后为右侧进入的新页面,调起输入法,左侧为返回箭头
c.好友+人脉+聊天记录+实名动态+匿名八卦+职位,list,分别支持查看更多
d.搜索结果命中态有强调
b.拉勾
a.强调搜索功能,有热门搜索,历史记录+在线sug
b.点击后为右平滑过渡的新页面,调起输入法,右侧为取消,左侧支持筛选地域
c.命中态拉勾蓝色+未命中黑色
d.支持筛选
e.list方式
f.自动加载
4.新闻类:
a.腾讯
a.搜索功能弱化
b.点击后为右侧进入的新页面,调起输入法,无取消
c.默认有提示,可搜到腾讯新闻、全网新闻、腾讯微博
d.新闻、微博、查看更多
e.左图右文
f.历史记录
b.网易
a.右上角有搜button
b.点击后为右侧进入的新页面,调起输入法,右侧为取消
c.默认搜索结果页:阅读历史+近期热点
d.搜索结果list方式,无图仅文字
e.命中红
c.今日头条
a.右上角有搜索button,
b.点击后为右侧进入的新页面
c.点击后有推荐模块界面,点击后进入搜索结果页,各类混排
d.再点击进入搜索页,历史记录+在线sug
e.结果页混排+自动加载
f.无筛选和二次排序
d.Zaker
a.右上角搜索button,支持搜索文章+频道
b.点击效果为打开新页面,右侧进入,不调起输入法
c.精选+频道推荐为默认界面
d.再次点击进入热门搜索
e.搜索结果页list,订阅+结果,单条结果左文右图、左右结构
f.自动加载
e.一点资讯
a.顶部显著搜索button
b.点击效果为当页展开的动画,搜索框变长,右侧为取消
c.在线sug+分类特型(频道+自媒体)
d.结果页:混排,相关搜索,订阅,单条结果,热门问答,自动加载
5.社交类:
a.微博
a.正文顶部框+底部有搜索tab,点击后效果一致,调开新页面,右侧为取消
b.历史搜索(默认展现两条)+微博热搜榜(默认十条)
c.在线sug:历史+在线文本+用户,命中为微博色+未命中缺省色
d.搜索结果:默认综合结果+分tab
i.综合:用户+精选+关注人微博+转赞人数多的微博穿插为主+热图+相关文章+微博印象+相关搜索,tab内结果混排
ii.tab包含综合+用户+精选+实时+关注人+印象+主页+文章+图片+视频
iii.每一个模块都可进行下一步操作:转发、回复、点赞等,
e.搜索系统呈现复杂
b.陌陌
a.以推荐为主,搜索功能很弱,比微信目前搜索功能收的更紧
b.联系人处支持搜索:好友可搜索,添加好友支持通讯录、微信、QQ和默认推荐,支持模糊搜索
c.豆瓣
a.顶部显著搜索框,搜索框内默认植入文案说明可搜索范围
b.点击效果为平滑过渡,当页替换,右侧为取消
c.默认展示热门搜索,说明在此处可搜到的八类结果(电影、图书、唱片、小事、用户、小组、群聊、游戏)
d.搜索结果分类list展示:电影电视+群聊+小组等,每个list支持展开更多,部分结果默认收起,点击进入单独垂搜页
e.支持实时搜索
f.无sug
d.知乎
a.顶部显著搜索框,搜索框内默认植入文案说明可搜索范围
b.点击效果为平滑过渡,当页展开,右侧为X取消
c.点击后区分内容和用户,默认显示历史搜索记录,可清除
d.支持实时搜索内容,
e.分tab,话题+问题tab1,用户tab2
f.知乎需要解决的一个问题是全部回答和单个回答的逻辑关系,目前title进全部,正文答案区块进该答案,支持通过顶部切换
g.自动加载
6.阅读类:
a.QQ阅读
a.右上角搜索
b.点击效果为打开新页面,右侧进入,右侧为取消
c.点击后进入默认搜索界面,调起输入法,提供热门搜索+历史搜索
d.在线sug:优先书架内容+sug特型(分类、标签、作者、出版社)+一般sug
e.搜索结果:list+推荐+筛选
f.交互体验平滑过渡
b.搜狗
a.显著顶部搜索栏,内置搜索范围
b.点击效果为打开新页面,下方进入,右侧为取消
c.热门搜索,支持换一换
d.点击搜索框后展示历史
e.在线sug不流畅
f.搜索结果:搜狗书库+来自互联网,list方式
c.多看
a.右上角搜索button
b.点击效果为打开新页面,右侧进入,右侧为取消
c.点击后展示搜索范围,下方正文搜索历史+热门搜索
d.在线sug:本地书架+在线sug提示文本
e.搜索结果:list,无选中态
7.视频类:
a.优酷
a.默认顶部搜索框+搜索历史记录,向下滑动时变为搜索框,交互独特
b.搜索框内置近期热词,同携程
c.点击效果为平滑过渡,右侧按钮为取消
d.点击后调起输入法,历史搜索记录+搜索排行,历史搜索记录支持单条删除和全部删除
e.在线sug:带标签的在线sug+纯文本
f.搜索结果:完整片源+非结构化片源(应该是这么区分的),非结构化部分支持排序和筛选,有顶部固定的交互
g.自动加载
b.搜狐
a.顶部tab下方搜索栏,滑动后消失,内置推广热词
b.点击效果为打开新页面,从右侧进入
c.点击后调起输入法,历史搜索记录+分类别的搜索排行,历史搜索记录支持全部删除
d.在线sug:直达特型+带类别的文本sug
e.搜索结果:完整片源+非结构化片源(应该是这么区分的)
f.自动加载
c.腾讯
a.顶部tab下方搜索栏,滑动后消失,内置搜索范围
b.点击效果为打开新页面,从右侧进入,右侧为取消
c.点击后调起输入法,历史搜索记录+搜索排行,历史搜索记录支持全部删除,热门搜索30条
d.在线sug:命中红+默认缺省色,无特型
e.搜索结果:分tab方式,类似新浪微博,全部+分tab,支持筛选和排序,完整片源+非结构化片源(应该是这么区分的)
d.爱奇艺
a.顶部tab下方搜索栏+右侧搜索button,滑动后消失
b.点击后调起新页面,调起输入法,右侧为取消
c.有个奇怪的logo写着搜全网
d.搜索历史+热门搜索,搜索历史支持全部清空
e.搜索结果分tab,支持筛选,唯一在搜索结果list中有广告乱入的视频app,结构化+非结构化结果,页面结构较为复杂
e.Bili
a.底部搜索tab,点击后直接打开页面,不调起输入法
b.默认热门搜索+排行引导
c.再次点击搜索框调起输入法+历史搜索记录list,支持全部清空
d.在线sug仅有文字类别
e.搜索结果分tab:综合、番剧、专题、up主,综合中番剧穿插,支持筛选
f.乐视
a.中间位置有搜索框,上翻后不消失,位置略奇怪
b.点击后打开新页面,右侧进入,调起输入法,
c.页内展示搜索历史(支持全部清空)+热门搜索
d.在线sug有特型前置+普通文本样式
e.搜索结果分tab,全部+分类(电影、电视剧、娱乐、体育、动漫、音乐、综艺等)
8.音乐
a.QQ音乐
a.右上角搜索button+内置默认推广词
b.点击后打开新页面,比较平滑过渡+调起输入法,右侧有取消
c.页面内热门搜索+历史记录(支持单条和全部删除)+唱两句识别歌曲
d.在线sug支持用户+普通文本sug,区分在线和本地歌曲
e.搜索结果分tab:单曲+MV+专辑+歌单+歌词,支持滑动
b.酷狗
a.搜索框固定,显著位置
b.在线sug,纯文本,10条
c.搜索结果分tab:同QQ
c.虾米
a.右上角搜索button
b.点击后不调起输入法,右侧取消,
c.热搜词+搜索历史,支持单条+全部清除
d.在线sug分类别,有直达
e.搜索结果分tab:歌曲、专辑、艺人、精选集
f.自动加载
d.酷我
a.右上角搜索button,点击后右侧加载新页面,不调起输入法,搜索栏内展示搜索范围,支持语音搜索
b.默认页面为热门搜索词+换一换
c.再次点击展示历史搜索记录,支持清空
d.在线sug纯文本10条
e.搜索结果分tab:歌曲+MV+歌手+专辑
9.购物
a.淘宝
a.顶部显著搜索框,搜索框内默认植入文案,支持搜索
b.点击后打开新页面,直接出现无动画,调起输入法,支持语音搜索、拍照搜索,右侧有取消
c.默认展示历史搜索记录,支持一次清空,难得有清空提醒,避免误操作,好评,历史记录支持细分筛选,左侧支持筛选宝贝、天猫、店铺
d.在线sug10条纯文本,支持细节筛选
e.搜索结果尽可能的支持筛选和排序,有活动页
b.京东
a.顶部显著搜索框,搜索框内默认展示搜索范围
b.点击后有动画,调起输入法,支持语音搜索,右侧取消
c.下方为热搜+历史搜索,清空提醒
d.在线sug分类,结果条数前置
e.搜索结果list,支持筛选,自动加载
c.蘑菇街
a.顶部显著搜索框,搜索框内默认植入文案,支持搜索
b.点击后打开新页面,右侧进入,搜索框默认分tab,调起输入法,右侧有取消
c.默认展示历史搜索记录,支持一次清空,下方为热门搜索
d.在线sug 10条纯文本,支持细节筛选
e.搜索结果尽可能的支持筛选和排序,大图list
f.有推荐
d.唯品会
a.奇怪的交互,无搜索,仅支持各种点击选择
e.小红书
a.没有特别特殊的交互
f.堆糖
a.
g.半糖
a.搜索功能弱,下拉展现搜索
b.点击后不调起输入法,页面右侧进入,下方为分tab推荐,顶部搜索框
c.再次点击打开新页面,调起输入法,上方历史搜索,支持全部清除,下方热门搜索
d.实时联动的搜索结果,无sug
e.搜索结果分tab,单品、清单、帖子、用户
10.旅行类:不断提升转化
a.去哪
a.顶部显著搜索框
b.历史记录+猜你喜欢(推荐)
c.搜索输入时:在线sug+特型+结果前置
d.酒店搜索
i.List+地图
ii.排序+筛选+优选+日期选择
iii.排序和筛选的因素:关系到使用场景和需求
iv.自动加载
e.机票搜索
i.类似的日期选择+筛选因素+组合模式
ii.单程往返
iii.国际国内
b.阿里
a.顶部显著搜索框,搜索框内默认植入文案说明可搜索范围
b.热门搜索+历史记录+清除历史
c.结果分类:度假产品+景点+签证+wifi电话卡+机票+酒店
c.穷游
a.顶部显著搜索框,搜索框内默认植入文案说明可搜索范围
b.历史记录+热门搜索
c.在线sug,无特型
d.搜索结果分tab:目的地+帖子+折扣+用户,list方式,无命中态
e.搜索结果与底部栏对应
f.自动加载
d.蚂蜂窝
a.顶部显著搜索框,搜索框内默认植入文案说明可搜索范围,默认界面展示历史搜索3 query
b.点击后历史记录(支持清除)+国内热门+国际热门
c.在线sug,命中态蚂蜂窝色+缺省色,有特型:目的地+景点+酒店+游记+当地游+餐厅+购物+问答
d.搜索结果
i.目的地
ii.问答
iii.游记
iv.list方式,每个都有查看更多
e.携程
a.顶部显著搜索框,搜索框内默认植入文案,支持搜索
b.热门搜索+历史搜索
c.搜索输入时:在线sug+特型+结果前置
d.与去哪非常类似
11.O2O
a.美团
a.顶部显著位置搜索栏+搜索范围说明
b.点击后调起输入法,右侧进入打开新页面,左侧为返回按钮
c.新页面顶部为热门搜索,下方为历史搜索记录,支持清除
d.搜索结果支持筛选,排序
e.图+文
f.搜索结果内置推荐
b.大众点评
a.与美团比较类似
b.不支持地图模式
c.百度外卖
a.顶部显著位置搜索栏+搜索范围说明
b.点击后调起输入法,右侧进入打开新页面,右侧为搜索按钮,左侧为返回
c.新页面顶部为热门搜索,下方为历史搜索记录,支持清除
d.搜索结果支持筛选,排序
e.搜索结果内置推荐
f.便捷发起二次搜索
12.出行类:
a.百度地图
a.顶部显著位置搜索栏+搜索范围说明
b.点击后动画引入新页面,左侧返回按钮,调起输入法
c.上方为推荐泛搜索,下方分tab历史搜索+收藏的点
d.在线sug分类别,支持直接发起线路搜索
e.搜索后半图半文
b.嘀嘀
a.起终点选择,历史sug+调起输入法,前置城市筛选
13.其他
a.安居客:跟酒店搜索流程接近
b.Appstore
a.底部搜索tab
b.点击后不调起输入法,展示热门搜索10query
c.点击搜索框调起,在线sug
d.搜索结果以list方式呈现