一文秒会|搜索功能模块设计

小Q聊产品

共 2916字,需浏览 6分钟

 ·

2021-05-21 22:26


用户使用产品,享受功能服务前首先要学会在产品里学会如何获取信息,而信息的获取入口是搜索。新用户是简单浏览和消费内容,而老用户对搜索的需求会越来越高。

一个用户从刚接触产品到频繁的使用产品最终成为忠实用户

一个搜索功能分为前后端,复杂的搜索功能还有算法介入。由于搜索是用户的集中必经路径,不少产品经理都会把搜索当作一个广告转化入口落地页。

如下是搜索功能背后的逻辑和用户路径。


  搜索功能逻辑 



可以通过上图看到,在不同的产品形态上,用户在搜索功能展示的结果没有区别。但操作、逻辑、功能复杂度是有区别。比如app和pc展示的信息数量就有非常大的区别,用户操作也是十分不同,手指与移动端的交互需要更加宽度区域,而鼠标则可以进入到区域小的面积进行操作。

抛开产品形态,产品经理还需要抓住用户搜索下的场景列举,这里我会分4个部分来讲解。只要一个搜索功能满足了这4部分就算以一个简简单且实用的搜索功能。

搜索功能的场景:

用户在搜索功能的使用中,会出现3个场景,搜索前、搜索中、搜索结果页、搜索数据记录4个纬度。分别对应的是:提问题、找答案、阅读答案、系统记录。


  搜索下的用户场景 






app、PC端的搜索前端设计




以下在各个形态下如何完成简易设计。

APP的前端设计:

在app里一个搜索也会有前面的3个场景。

1.搜索前

这个场景是解决用户如何高效提问、解决问题的场景
搜索入口是用户访问搜索的关键,同时适当给予用户提供搜索关键词引导。

搜索入口分为:直接展示、功能布点、独立tab、特殊类型

以下图中 Amazon 为例。搜索功能以输入框的形式直接展示在屏幕中。这是最为常见的一种设计方式,也是大型电商类应用通常会采用的形式。

功能布点,以下图虾米音乐为例。它与功能外露型类似,只不过是将搜索功能弱化成了一个 icon,点击后才会展开搜索框。


独立 Tab,以下图 Snapguide 为例。它是将搜索功能放得最重的一种形式,很多应用会把它命名为 Discover 或 Explore。这个 tab 除了包含基础的搜索功能,还增加了很多运营的内容在里面。


特殊类型,以下图中 Airbnb 为例。搜索功能会作为一个 icon 放在页面中间,在 Android 的设计中经常会作为 FAB 出现在屏幕右下角。



  4类搜索入口 




如下案例在搜索功能直接提供了引导版块,面对新用户在搜索页面可以增加toast引导,或直接增加固定搜索导航栏,完成引导。


  搜索引导导航栏版块 



  微博的搜索前引导 

如果用户有过历史数据,还能基于数据维度提供搜索引导,增加用户搜索转化。或者运营推进相关搜索关键词

  基于用户习惯的搜索关键词 




2.搜索中

这个过程是为用户快速匹配想要的具体内容,减少用户输入的痛点


搜索中是用户正在输入内容场景,有的产品会提前在用户输入中场景下可以提前给与搜索结果展示。比如在百度搜索中,提前判断出用户需要的搜索结果,可以减少用户查找内容的时间成本,同时快速匹配系统中最合适搜索的答案。

基于用户实时输入提供搜索结果,需要有数据、系统架构支撑,不仅是产品经理做产品设计的问题,还有业务需要、用户规模的要求。

  输入中的用户引导 



在app里,有天然的系统体验优势,所以可以为用户提供选择单独的搜索内容输入页面;但搜索中到底是单独切换一个页面、还是直接在搜索输入框中展示,实际上还是产品经理需要根据用户画像、用户需求来定。但在简易设计中,我建议不要纠结,任意选一个方案就可以了,因为重点是提供内容查找的入口。


  搜索页面和搜索输入框 



在搜索框输入适合短的内容搜索,在单独的搜索页面适合长内容搜索。

3.搜索结果页

内容筛选、重要信息展示成为这一环节产品设计的重中之重。比如搜索结果的排序、关键词的匹配、同时搜索的内容类型分类也是相当重要的。

  搜索结果页面 



比如在搜狗、头条app的搜索结果页首先展示内容分类、再展示结果顺序。同时结果里突出了匹配关键词,方便用户方便筛选搜搜索结果。

搜索结果也要因为内容类型做单独设计,比如视频类的搜索结果,如抖音的搜索结果页,会直接播放短视频;在简书、知乎上的搜索结果页,基于文本内容特点做搜索关键词的匹配,再匹配内容类型。默认优先匹配全部内容类型。

  视频类内容搜索结果页 



  简书、PMTalk搜索结果页 





在web端形态设计




在web端搜索由于PC屏幕较大,在同样搜索前、搜索中、搜索后3个场景下相比app就会有较大的不同。

1.搜索前

和app一样,同样目的是要增加搜索的点击、转化率,因此常见的产品设计方法是增加搜索引导。


  图搜索引导设计 


文案引导可以增加活动文案、以及曝光搜索内容优势,来显示活动。

2.搜索中

PC端有足够大的操作展示区域,可以在搜索框直接展示搜索内容的答案即可。如果有数据、系统架构支持可以展示实时结果。

和app一样,搜索需要突出搜索中的交互状态,包括按钮点击、内容输入、内容为空的状态。

3.搜索结果页

搜索结果页仍然是以展示重要内容、信息筛选快速、内容展示简单。PC因为面积大,可以展示的结果数量相比app多;但没有结果时候页面体验也要更差,需要产品经理设计。

4.数据采集

做搜索功能还是要做埋点,方便做搜索的数据迭代需求。同时我建议在产品逻辑上,建立每一次搜索都要采集用户数据ID的机制,比如要在搜索前建立用户登录注册条件判断,用户登录后才能使用搜索功能


  搜索背后的数据关联设计 



搜索系统有词典和内容索引库(数据库),词典里的词关联匹配内容索引库。当用户输入关键词后,如果词典里有这个词,线上会快速召回内容文档。如果词典里没有这个词,那这次的搜索行为就没有结果。
假设内容索引库一共只有3个内容文档,分别是:
  • doc1:站内搜索从0到1全流程设计

  • doc2:搜索应该怎么设计才是对的

  • doc3:产品小白怎么入门站内搜索设计

用户输入关键词“怎么设计站内的搜索”,经过分词后,词典里有这个词,系统会召回对应的索引文档。索引库如下图所示。


  搜索结果背后的数据 



同时用户每次输入的关键词做高频词记录,词语范围、违规词处理都是可以利用后台来采集。

搜索页面的点击、停留时间、访问次数,同时需要统计,如果在搜索中增加了第三方广告位那么搜索还需要打通业务转化。

漏斗图、时间柱状图展示数据可视化,观察用户使用搜索功能的规律以及喜好再优化搜索功能。

以上就是今天的分享。
浏览 18
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报