搜索功能是我们日常生活中接触最多的功能之一,它更够很好的提高用户使用产品的效率,用户对搜索功能的依赖性也比较大,所以设计好搜索功能将会很大程度上提高用户体验。本文作者通过分享这篇文章,帮我们搞懂产品中的搜索设计。

搜索是一个常见而且使用频率极高的功能,因为产品的定位和业务场景不同,搜索承载的价值也不同。在某些产品中,它只是一个辅助功能,但是像谷歌和百度,它是整个产品的核心。所以对于不同的产品,搜索的交互设计形态也是不同的。

我们可以把搜索的使用过程,想象成朋友间的一次提问,首先朋友要先找到你,接着向你提出问题,最后你根据现有资源或者知识储备给出答案。

一、找到搜索入口

朋友想要提问,需要先找到你。有可能你就一直待在他身边,他可以随时提问,有可能他需要先把你找出来再去提问。对于搜索的展现形式,也可以分为显式和隐式两种情况。

1. 显式搜索
1)搜索输入框

输入框一般固定在上方导航栏或者页面最上方,也是目前使用最广泛的一种搜索样式。当搜索功能会被用户高频使用时,可以这样去展示搜索入口。

大部分电商类、知识类以及信息分享类的App和Web都会采用这种样式,比如淘宝、网易云音乐和微信读书。

2)搜索 tab

这种搜索入口是移动端特有的一种交互形式,它占据页面底部的一个独立tab位置,点击后同样进入搜索页。

和搜索输入框相比,除了表现形式上有所差异,它的搜索功能在整个产品中权重会更高。从信息架构的角度来说,这种方式让搜索模块更加突出。典型的例子可以看新浪微博,点击后进入的搜索页,内容非常丰富。

2. 隐式搜索
1)搜索图标

很多产品的搜索路径都是从一个小图标开始的,它一般都悄悄的躲在页面顶部的左上角或者右上角,点击后展开搜索样式。

这个设计主要是为了弱化搜索,突出页面中的信息流内容,比如知识星球,还有抖音,为了强化信息流或者推送,而弱化了搜索功能。

2)手势下拉搜索

现在很多的App都在用这种方式,不占用页面顶部位置,其实是比用图标更进一步的弱化了搜索功能,它配合了用户最常用的下拉手势,隐藏的深了一点,有一定的学习成本。

这也是配合产品的战略去设计的,比如微信中的订阅号列表页,就是用了这种方式,去凸显下面的订阅号文章列表的,在感官上尽量让用户沉浸在推送文章的列表中一个一个的往下看,而不是去搜索特定的某一篇文章。

搜索入口在设计的时候尽量做到简洁,在兼顾产品调性和页面布局的前提下,让用户尽快的找到搜索功能,不需要花费过多的学习成本。好了,找到了搜索的入口,就像朋友已经找到了你,接下来看看提问过程中会发生什么情况吧。

二、开始搜索

朋友要开始抛出问题了,首先要让他知晓你能解决问题的范围或者类别,也可以给他一些问题库,或者甩给他一些历史问题,看能不能从中直接找到答案。

用什么方式提问、问题是模糊的还是具体的,在他提问前你一无所知,但你却可以做些准备来应对这些不确定情况,让朋友可以在你这高效又准确的找到问题答案。

上述疑问在搜索的过程中也存在,接下来去真正的搜索页面一一攻破。

1. 搜索范围
1)搜索提示词

在搜索框中可以加入一些默认文字,用来提示用户可以去输入哪些方面的搜索词,比如可以搜索的范围是用户名、地址、联系人信息,那搜索框中的默认文字要显示“请输入用户名/地址/联系人电话“等,这样就告诉用户,可以输入以上这几项之一去进行搜索。

现在大部分产品的搜索框中都会显示搜索提示词,这样会有更好的引导,同时用户体验感也会提升。很多电商平台会把搜索框中的默认文字用做广告营销去做活动转化,比如淘宝、京东的首页搜索框,还会轮播默认文字,所以搜索框也可以承载竞价广告的价值。

还有一种分类方式,在搜索前必须先选择一个固定的分类,再去搜索,减小搜索范围。

这样设计的好处一是会减轻平台的搜索功能性能方面的压力,二是会减少全局搜索后,无关搜索结果对用户的干扰。比如贝壳上的搜索,都是在某一个分类下去做的,这种也有可能是和数据库表设计是有关系的。

2)搜索标签

搜索标签的出现,是搜索分类的一种优化,提前在搜索页像分类一样,预设一些标签,可以是热门推荐、热门搜索,也可以是活动运营转化入口,快速触达活动页面。这种比较适合当进入搜索页,不知道要搜什么的时候,给出一些建议,比较典型的就是微博的热搜页面。

3)历史记录

可以在搜索页中设置历史记录,显示之前搜索过的关键词,这种方式现在也被广泛应用,可以在一定程度上提升用户体验,减少输入。大部分的电商平台都会支持历史记录搜索。

无论是搜索分类、搜索标签还是历史记录,都可以减少用户在搜索过程中的操作成本,并且可以起到丰富搜索页面的效果,如果做为营销转化入口,还能贡献GMV。

2. 搜索方式
搜索方式在最初只有文字搜索,后来又出现了语音和图片搜索方式,但大部分的情况,它们都是做为文字搜索的补充。

1)文字搜索

这是大部分人最熟悉的搜索方式,同时也是玩法最多的,接下来我们要介绍的内容,大部分都是围绕着文字搜索展开的。

2)语音搜索

顾名思义,就是通过声音去搜索,这是一个发展趋势,现在的年轻人越来越喜欢用语音搜索,同样因为门槛特别低,老年人也比较青睐这种方式,不需要打字,直接通过声音识别去找到想要搜索的内容。

像微信的搜索也是支持语音,还有所有的音乐类App,也都支持语音搜索歌曲的。

3)图像搜索

图像搜索是近年来比较流行的搜索形式,一种是通过扫描条形码或者二维码,识别其中的明码后进行搜索。另一种是通过图片匹配其他类似图片的方式。

这两种方式广泛应用在电商平台中,比如淘宝,扫一扫、拍立淘,还有AR试穿,都是图片搜索的优化应用,AR直接扫描识图还减少了用户的拍照的操作。

3. 搜索帮助
1)模糊搜索

模糊搜索是指输入搜索词后,显示的搜索结果是该搜索词的扩展信息,可以包含搜索词的内容,也可以是和该搜索词相关的信息。所以模糊搜索能给用户展现丰富多彩的选择。

模糊搜索也是要考虑使用场景的,如果要求精准搜索快速定位时,模糊搜索反而起到了反效果,因为搜索结果中会包含太多的干扰信息,还要花费时间去筛选真正的结果。

2)自动补全

输入搜索词后,搜索框下方会出现下拉列表,其中包含该搜索词的其他扩展词。这种方法可以帮助用户扩展联想,提供丰富的选择,也会减少用户的输入操作,帮助用户更快的定位精准搜索词,引导用户一步步更精确的找到想要搜索的内容。

如果应用场景支持,可以很大程度的提高用户体验,同时减少用户对查询结果的筛选时间。

扩展词一般是已经设置好的词库,比如在淘宝等电商平台中,搜索的扩展词也会包含历史搜索记录,比如之前搜索过“这是什么东西呢”,当第二次输入“这是”的时候,下方就会显示出“这是什么东西呢”。

对于扩展词的来源,可以依据自身业务,比如加入一些营销词,做为转化入口。

以上是搜索过程中的一些设计,但并不是越灵活越好,还是要依据具体的用户场景去设计最适合的搜索方式。

4. 显示搜索结果
朋友抛出问题后,你要给出答案,为了更好的解答疑惑,也许你会提供很多可选择的答案。每一次搜索也会得到很多结果,这时需要对结果做下处理,在提供海量丰富选择的同时,也让用户更快速的找到自己想要的结果。

1)结果排序

搜索结果的显示都要有一个默认的排序规则,同时也可以提供排序选择,比如搜索结果默认按照销量由高到底排序,也提供其他排序选择,比如时间由远及近排序、价格从高到低排序等。

现在越来越多的电商都会在结果中加入广告位,这也是一种转化方式,但是广告位不宜太多,一般就是第一个搜索结果,这样既可以达到营销目的,又不会太显眼打乱之前的排序。

比如下图中,在淘宝中搜索“产品经理”,结果列表中第一个是当当网的广告,这就是一种广告转化方式。

2)结果筛选

当搜索词是一类有相同标签的事物,并且搜索后结果过多时,也可以进一步以标签做为条件做筛选处理,比如搜“牛奶”,可以通过对品牌、产地、容量等属性去做进一步的筛选。

筛选在电商平台是很常见的,因为电商平台的商品数量多,品类丰富,而且每个商品都会具备几种属性。所以,在初步搜索后,再通过属性去进一步缩小搜索范围,会帮助用户更快更精准的找到自己想要的商品。

3)关键词高亮

在搜索结果中,如果文本过多,用户很难快速的看出搜索词,这个时候对关键词进行高亮显示,快速定位搜索词,可以帮助用户更快的判断这条结果是否有用,节省用户的决策成本。

大部分的知识类产品,因为文本过多,在搜索结果中都会高亮搜索词,像微信读书就是一个很典型的例子。

4)结果分类

之前说了在搜索前进行分类,可以缩小搜索范围,更快找到匹配结果。但还有另一种方式是先进行全局搜索,针对得到的搜索结果是分类显示的。

结果分类的好处是,减少用户搜索前的操作,并且可以给用户提供更丰富的展示结果,用户可以直接选择预想的分类,如果没有想要的,还可以扩展看下其他分类下的结果。这种特别适合内容生态产品,比如下面的网易云音乐。


5)结果建议

在搜索的时候经常会出现结果较少,甚至是结果为空的情况,这个时候就需要缺省页面。

除了放空页面,其实还可以选择加些建议或者推荐。比如淘宝中,搜索词没有对应的结果,系统做了分词,并根据分词去搜索显示结果。还有一些平台不会提示没有搜索结果,直接显示分词搜索结果,可以看下得到的无结果显示方式。

关于缺省内容,可以制定不同的策略,但还是要根据产品定位去进行权衡,避免画蛇添足。

以上是搜索结果在显示时的一些设计方式,其实还有很多没有总结到的,比如搜索结果的展示方式是文字还是图片、为了提高响应时间可以做本地搜索和全网搜索,等等。这些也都可以和使用场景及产品定位结合考虑,就不一一介绍了。

三、最后

注重搜索功能虽说是交互设计的目的,但本质上还是以提升用户体验为首位,要尽可能多的考虑用户的使用场景,实用是最关键的。结合不同的产品类型,搜索功能承载的意义也是不一样的。

比如内容型产品的搜索,不论是在精准搜索还是扩展结果方面,更多的是提高搜索效率,电商型产品除了要提升效率外,也会也承担一些营销活动导流或转化的运营需求,如果设计合理,其实是可以直接让企业获利的。

最后的最后,谨记“奥卡姆剃刀原则”,以简洁易用为主,不要为了设计而设计,太复杂的操作或者繁重的搜索结果,都会给用户增加学习成本,适得其反。

一文搞懂产品中的搜索设计相关推荐

  1. 一文搞懂Qt中的颜色渐变(QGradient Class)

    一文搞懂Qt中的颜色渐变(QGradient Class) 1, 快速开始! Qt中与颜色渐变有关的类是QGradient 其中它又有三个子类:QLinearGradient.QRadialGradi ...

  2. 一文搞懂Java8中表示当前的时间类Date、Instant、LocalDateTime、ZonedDateTime

    1. 概述 Java8中的时间类主要有:Date.Instant.LocalDateTime(LocalDate.LocalTime).ZonedDateTime,除去Date,java.time包下 ...

  3. python中row是什么意思_一文搞懂Python中的yield

    关注公众号「Python七号」,及时 get Python 技能. yield 可以实现生成器,可以实现协程. 什么是生成器,什么是协程,如果还不了解,可以继续往下看,概念可以不懂,只要理解它的作用和 ...

  4. 服务器千兆网卡接百兆交换机不通_一文搞懂监控工程中百兆交换机和千兆交换机的区别在哪?...

    安防监控系统工程现在都是用的网络摄像机,那么就肯定会经常和网络设备--交换机打交道,很多人在做监控方案的时候犯难,多少台摄像机该选用百兆交换机还是千兆交换机呢?关于这个问题除了需要掌握理论知识还是结合 ...

  5. 【NLP】一文搞懂NLP中的对抗训练

    本文主要串烧了FGSM, FGM, PGD, FreeAT, YOPO, FreeLB, SMART这几种对抗训练方法,希望能使各位大佬炼出的丹药更加圆润有光泽,一颗永流传 简介 对抗训练是一种引入噪 ...

  6. 一文搞懂css中精灵图如何使用

    文章目录 前言 一.精灵图是什么? 1.概念: 2.图片示例: 二.为什么使用精灵图? 1.用户体验而言: 2.就开发者而言: 3.就服务器而言: 三.怎样使用精灵图 1.background-pos ...

  7. 一文搞懂matplotlib中的颜色设置

    欢迎关注"生信修炼手册"! 在matplotlib中,颜色设置有以下多种方式 1. 常用颜色的字母表示及缩写 最常用的颜色表示方法,有以下几种常用颜色 1. red,表示红色,  ...

  8. 一文搞懂SQL中的各种联结——内联结、自然联结、自联结、交叉联结

    一.概述 所谓" 联结 "指的是数据表和本身,以及不同数据表之间的" 联结关系 ".常见的联结有自连接.自然连接.内连接.外联结.完全连接等等.本文以SQLit ...

  9. html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)

    在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...

最新文章

  1. 通过配置NFS使Ubuntu和海思3559A板子共享目录
  2. vue :src 文件路径错误
  3. android通用的UUID唯一标示符
  4. ​2022年中国医疗信息化研究报告
  5. 内网通不用软件改积分_软件项目为什么不能够如期交付?
  6. 美丽联合与腾讯云签署战略协议 全面借助腾讯云打造智慧时尚电商平台
  7. leetcode5 Longest Palindromic Substring 最长且为回数的子字符串
  8. 【情感分析】基于Aspect的情感分析模型总结(PART IV)
  9. 去掉字符串最后一个字符
  10. 逆波兰表达式java_采用JAVA对逆波兰表达式解析浅见
  11. 《鸟哥 Linux 私房菜》560 页新书首发!完整中文版 PDF 下载
  12. SPI全双工模式下收发字节的理解
  13. gin binding方法汇总
  14. 小议中国人的乡土情结
  15. 阳谷机器人编程_阳谷实验幼儿园绘本故事《机器人阿泰》
  16. 企业微信小程序_获取准确定位的方法及解决定位不准确的问题
  17. 如何用python画出自己喜欢的表情包
  18. 优秀架构师必须掌握的架构思维 - 菜鸟架构(转载)
  19. AMOS从模型到分析
  20. 计算机中毒症状简介,电脑中毒的八大表现,第五个大多数人都不知道!

热门文章

  1. [LightOJ1070]Algebraic Problem
  2. 激情个P—leo看赢在中国第三季 2
  3. Unable to negotiate with 123.4.47.238 port 29418: no matching host key type found. Their offer: ssh-
  4. 我院HIS系统中的医嘱频次字典数据
  5. mysql8.x 使用IP登录 Access denied for user
  6. AgBioEn赞助库扬精英赛,宣扬绿色发展理念
  7. 20155314 2016-2017-2 《Java程序设计》第6周学习总结
  8. JavaWeb仿twitter个人社交网络及微博服务网站
  9. Docker服务正常运行一段时间后突然无法访问问题排查
  10. Flink SQL 批处理使用HOP详解