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

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

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

[[400070]]

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

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

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

 

▲ 搜索功能逻辑

 

可以通过上图看到,在不同的产品形态上,用户在搜索功能展示的结果没有区别。但操作、逻辑、功能复杂度是有区别。比如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:产品小白怎么入门站内搜索设计

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

 

▲ 搜索结果背后的数据

 

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

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

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

责任编辑:未丽燕 来源: 今日头条
相关推荐

2017-09-06 08:12:43

OpenStack功能模块

2010-06-30 12:50:56

Linux SNMP

2018-09-29 04:53:37

IoT网关物联网IoT

2021-03-10 13:42:27

笔记本双屏设计

2023-05-22 13:27:17

2021-09-11 10:41:27

PythonPickle模块

2024-02-19 13:11:38

门面模式系统

2022-09-21 16:56:16

设计模式微服务架构

2024-02-26 11:52:38

代理模式设计

2024-01-29 12:22:07

设计模式策略模式

2023-06-13 10:08:21

汽车设计

2021-05-06 05:38:48

Python文件操作异常模块

2019-09-12 10:25:39

系统WindowsLinux

2017-05-12 14:39:01

互联网

2022-07-20 10:29:07

自动驾驶控制器安全

2024-02-04 12:04:17

2024-02-27 11:59:12

享元模式对象

2011-10-08 16:59:42

2024-02-21 12:24:33

模板设计模式框架

2024-02-23 12:11:53

装饰器模式对象
点赞
收藏

51CTO技术栈公众号