互联网和产品 · 2018年07月30号 0

“搜索功能”拆解:小功能,大细节

“这有个搜索功能要加一下,样式我给你。”

“好。”

“这搜索框连个提示也没有怎么搜?历史记录呢?模糊匹配呢?还有…..balabala”

“你也没说啊!”
——来自设计狮与程序猿的日常

搜索作为大部分互联网产品都具备的功能,直接影响着产品的用户体验。在进行搜索功能的设计时要以简单、高效为核心目标,每一步的细节设计都要反复验证是否脱离了需求和核心目标。

根据搜索的行为,可将其拆分为五步:搜索入口-搜索触发-内容输入-点击搜索-反馈结果。

“搜索功能”拆解:小功能,大细节

一、搜索入口

搜索入口具有提示和引导操作的作用,主要类型有四种:主页搜索、搜索框、多条件搜索、搜索icon。

“搜索功能”拆解:小功能,大细节

1. 主页搜索

将搜索作为独立的页面,以搜索为导向,整个产品的使用围绕搜索这一核心功能功能展开。比较典型的如百度、谷歌等,搜索框功能强大,用户可以进行各种尝试。谷歌主页中的手气不错以及百度搜索的个性化推荐和新闻,为产品引进更多的流量,增加了用户黏性。

“搜索功能”拆解:小功能,大细节

2. 搜索框

这种是在网页中最为常见的,应用也最广泛,大多居于页面内容区域的上方,有的出于节省空间和搜索需求的考量,也内嵌在导航栏中。搜索框内会有文字的提示,提示用户搜索的方式,还有一些产品在搜索框内放置当前的热词、活动、新功能等,将搜索框做成了运营的入口。

搜索框的后面一般会伴有搜索按钮或放大镜的icon,可点击按钮和键盘回车进行搜索。在页面滑动时,搜索框一般会固定在页面的顶端,用以提示用户目前搜索内容,同时也方便重新搜索。

“搜索功能”拆解:小功能,大细节

3. 多条件搜索

多条件搜索的方式常见于旅游、出行类的网站,如猫途鹰、携程、东方航空等,需要输入时间、地点、人员等信息,单一的搜索框不能满足用户的需求,多条件的搜索框一般置于页面中较醒目的位置,引导用户操作

“搜索功能”拆解:小功能,大细节

4. 搜索icon

页面中仅仅展示搜索的icon,一般放在页面的导航栏中偏右侧的位置,点击icon会拉出搜索框,典型的如站酷、UI中国等,还有的点击icon会在页面中唤醒搜索功能,如Behance。

“搜索功能”拆解:小功能,大细节

搜索icon的形式虽然可以节约导航栏的空间,但相对搜索框来说对用户的引导性较差,因此比较适合以搜索为辅助功能的产品。

二、搜索触发

1. 搜索框触

点击搜索框或搜索icon,呈激活状态,光标在框内闪动,引导信息淡化或消失;有的搜索框还会伴随弹出辅助区域,区域内包含热词、搜索历史等信息,典型如腾讯视频、淘宝等。

“搜索功能”拆解:小功能,大细节

2. 搜索形式

第一种是有搜索/确定按钮或icon的搜索框,用户输入完成后可点击按钮进行搜索,也可点击键盘回车搜索;另一种是无搜索按钮的搜索框,用户需键盘回车搜索。

在网页设计中,第一种应用比较广泛,第二种国外网站应用较多,如dribbble等。还有一些搜索框内添加了拍照、上传图片、语音输入等功能,使得搜索方式更加多元化

3. 辅助区域

辅助区域的信息主要有热词推荐和历史记录,用以提高搜索的效率作为推广的入口

热词推荐:热词推荐主要为当前时段内比较热点的词汇或产品的新功能,能够为产品带来流量导入和收益,如电商类网页中的热词一般为新产品或高销量产品,视频类网站的搜索热词一般为最新视频或点击量较高的影视剧。

历史记录:历史记录能够在用户重复搜索时提高效率,一般会在数目上做限制,腾讯视频的历史记录最多展示10条,百度搜索最多展示9条,由于受页面空间和时效性的限制,尽量不要展示10条以上。此外,考虑到用户隐私的问题,历史记录还需要支持删除。

随着用户体验的不断优化,历史记录衍生出了收藏、订阅、关注等功能,让用户免于搜索,可持续接收关注的内容。

“搜索功能”拆解:小功能,大细节

三、内容输入

1. 输入触发的交互

输入内容时,引导信息消失,有的还会伴随在搜索框中出现清除的icon,清除的icon主要方便用户进行二次搜索时一键清空当前信息,省去了逐字删除的麻烦;根据输入内容,进行关键词的匹配。

匹配形式一般有两种,一种是正常的关键词匹配,按照一定的规则进行推荐并排序;还有一种是包含历史记录的匹配,会将包含关键词的历史记录置顶,与正常的匹配做区别并支持删除(如淘宝)。

2. 关键词匹配的作用 

关键词匹配的作用主要有三个:引导、纠错和高效

  • 引导:在用户无法准确记忆搜索的名称时,关键词可以作为引导,帮助用户完成搜索;
  • 纠错:减少用户输入的错误,会自动在匹配区域更正;
  • 高效:用户直接点击匹配出的结果,减少输入,提高搜索效率。

3. 关键词匹配的条数

各产品匹配条数上限不一致,淘宝为10条,爱奇艺为10条,一般来说不会超过10条,过多的选择会给用户造成记忆负担,并且占据空间,有损用户体验。

四、点击搜索

点击搜索一般有两种机制:

  • 一种是输入完成后,点击搜索按钮、键盘回车进行搜索;
  • 一种是边输入边显示搜索结果,每输入一个字符即进行一次数据检索并将结果展示出来,这种搜索方式也被称为“即时搜索”。

即时搜索的方式简化了搜索的操作路径,更快的引导用户查询到结果,能够给用户带来良好的体验。

但即时搜索对服务器的运算能力要求较高,如果服务器运算能力跟不上,会出现较长时间的等待,有损用户体验,因此这种搜索机制在产品中并不多见。

五、反馈结果

触发搜索之后,搜索框失去焦点,框内保留搜索关键词,显示多条搜索结果,每条搜索结果中对搜索的内容飘红展示。如何能让搜索结果更清晰的展示,让用户更快的找到所需,针对搜索结果的交互设计需要注意以下几个问题:

1. 结果分类

将搜索到的结果进行分类处理,一般采用Tab的样式进行归类,如谷歌搜索“设计”,将搜索结果按照“全部”“图片”“视频”“新闻”“更多”等进行了分类。

“搜索功能”拆解:小功能,大细节

2. 排序筛选

排序与筛选的维度因产品性质而异,常见的排序方式有时间、价格、销量、距离、好评等;筛选可以算做个性化的需求,不同产品间存在较大差异。排序和筛选的功能一般放置在搜索和结果之间,一是符合用户的认知和使用习惯,再者便于用户切换。尤其在电商类网站中,排序和筛选功能尤为重要,占到了首屏空间的三分之一。

“搜索功能”拆解:小功能,大细节

3. 自动纠错

用户在搜索时输入了错误的词汇,系统经过判断后会展示正确词汇的搜索结果给用户,并友好的告知用户正确的搜索方式。

4. 特殊状态

特殊状态包含无结果状态、网络不佳状态等。

出现无结果的状态可能是:

  • 用户输入错误;
  • 搜索结果无。

针对第一种情况,可以提示用户正确的搜索方式,并自动帮用户纠错;对于第二种,需要有好的提示用户无搜索结果,尝试其他搜索方式或者更换关键词等。

六、结语

以上对于搜索功能进行了拆解和细化,设计师在进行搜索功能要根据产品的定位以及目标用户、应用场景、业务需求等因素进行设计,仔细推敲交互的每一个细节,提升产品的用户体验。