你设计的搜索能让用户心甘情愿、直达目标吗？

我们是一群执着于设计的黑马

@大漠飞鹰CYSJ 授权黑马家族发布

文章来源于公众号：能量眼球

https://www.zcool.com.cn/article/ZMTQ3NjY2NA==.html

-------------------------------------------

感谢大家对黑马家族的支持，今天给大家分享如何设计出让用户心甘情愿、直达目标的搜索，希望可以带给大家更多设计思考。

前言

搜索是产品中非常重要的一个功能模块，它通过搜索框给用户提供一个直达目的地的绿色通道，方便用户快速找到自己想要的内容，在引导用户走向方面起到了绝对性的作用。

搜索框的体验如何，决定着产品解决问题的能力、效率以及用户的使用频率。好的搜索框一方面能帮助用户节约时间成本，通过友好的设计细节带来差异化的信息反馈，便于用户在大量且复杂的信息中筛查所需目标，提高转化率；另一方面，还能协助产品搜集用户行为目标并做好数据埋点，为后期的更新迭代提供强有力的依据。

有部分设计师认为，搜索不就是一个矩形框、放大镜图标再加一个占位符不就搞定了吗？可有没有想过，为什么在不同类型的应用中搜索框的交互方式、视觉样式也有所不同，且用户在搜索前、搜索中、搜索后到底有哪些细节需要我们去注意？今天，笔者将和大家一起了解关于搜索框的设计知识。

分享目录

一、基本属性与特征

二、搜索入口的样式及应用场景
三、常见的搜索方式
四、搜索流程状态解析
五、辅助模块/元素的妙用
六、结语

一、基本属性与特征

1. 搜索存在的意义

当界面内容过多、在列表中仅通过视觉扫描很难找到目标，这时能给用户提供最大帮助的一个是筛选、另一个就是搜索，筛选能够缩小查找范围、而搜索却能直到目标。相对来说，对于有明确目标的用户，在关键词较为接近的情况下，搜索比筛选的查找效率、匹配结果的精准度更高。

2. 搜索反馈类型

输入关键信息后，系统会有两种反馈类型，自动即时反馈和手动触发反馈。

1）自动反馈
系统自动检测所有内容中符合关键词的目标信息并罗列出来，随着关键词的持续输入，与之相匹配的结果会逐渐减少、直至找到目标，类似自定义筛选功能。这种反馈方式适合内容不是特别多的列表，避免服务器的压力太大、影响反馈效率，例如地址搜索、查找联系人等。

2）手动触发
关键词输入完成后，需要手动点击搜索按钮向服务器发送指令才会得到相应的搜索结果，这种方式适合内容信息较多的列表。例如商品查找、新闻类搜索等，其搜索结果也可能是海量的，与筛选功能结合使用效果更佳。

3. 搜索的属性特征

1）搜索入口

为了保持界面的一致性，在同一APP中，不同界面、功能的搜索应该具备统一的视觉属性。搜索本属于界面的一部分，需要将其放在关键位置，用户需要使用时能随时找到。

2）状态变化

站在用户体验角度，一个好的搜索应该具备完整的流程，即搜索前、搜索中、搜索后的页面跳转以及搜索框形态的变化，将搜索功能的价值发挥到最大化。

二、搜索入口的样式及应用场景

在大家使用的众多app中，部分搜索框的样式虽然没有多大差别，其实背后都经过了精心设计。针对搜索入口，更具不同的应用场景、等级权重，其搜索入口的位置、样式也有所不同，下面将分别介绍四种常见的类型。

1. Tab栏独立入口

将搜索放在底部Tab栏作为独立的一级入口，很大程度上强化了搜索权重，有利于用户的搜索行为引导、以及产品搜索相关内容的推荐曝光。这种做法为搜索功能拓展提供了很大的空间，相比其他方式，操作起来更便捷，即便用户在其他Tab页时、突然有搜索需求时也触手可及，并使其成为应用重量级的流量入口。

Tab栏搜索入口只适合对于搜索需求极高的应用，具备简洁、高辨识度的放大镜图标让用户一眼就能发现它，需要注意的是控制好Tab功能数量，在3~5个图标时最宜使用，切勿强行加塞而影响操作。

例如：App Store、新浪微博、花瓣等

2. 顶部搜索框

最常见的搜索方式之一，将搜索以输入框的形式居于页面顶部（状态栏或标题栏下方），在视觉上非常醒目，用户进入应用即能快速找到，很符合用户的视觉浏览动线，为最终转化提供了很大的流量支持。

这种搜索框的形态较为复杂，其信息元素的设计有很多方面的考究，它主要由搜索框、图标、占位符以及部分其他元素组成，下面一一介绍：

1）图标
首先，“放大镜”样式的图标主要用于提醒用户这是一个搜索功能，如果搜索框足够明显且有占位符引导，也可以去掉搜索图标；其次，辅助搜索如语音录入、扫一扫、拍照搜索等也会使用图标样式呈现。

2）占位符
提示用户文本输入位置，很多产品会根据自身属性或功能类型提供固定的占位符，例如：请输入xxx搜索、搜索感兴趣的内容...等。

在电商类型的产品中，为了提高占位符的商业价值，将其进行了拓展，系统根据千人千面的算法推荐、提供多个占位符式的商品名称轮播，或者将占位符当做广告位进行出售，不仅让搜索框更个性化，还能潜移默化的提升搜索的转化率。

3）按钮
为了提高用户使用搜索功能的便捷性，键盘的右下角都会有搜索操作，但设计师们依然会毫不吝啬在搜索框右侧多添加一个搜索按钮，一方面在视觉上能起到引导搜索的作用，另一反面给用户多一个选择、避免键盘隐藏后需再次唤出才能发送搜索指令。

4）选择器
对于类型/属性较多且要求较高的产品，为了提高搜索结果的精准度，会增加一些前置条件，让用户设定好之后在进行搜索，得出的结果会与用户目标更匹配，能一定程度的提升用户对产品的满意度。例如：携程旅游搜索的地址选择、酒店搜索日期选择，拼多多的商品、店铺选择等。

3. “放大镜”图标入口

形态相对比较简单，通常以“放大镜”样式的icon出现在界面右上角，视觉上不会过于突出，常用于搜索行为不是特别频繁的场景，需点击后才会跳转至搜索框页面。

Icon搜索入口相较于上述提到的类型在视觉引导方面略逊一筹，相对弱化了搜索功能，但可以节省了更多的导航栏空间，呈现位置比较灵活，可单独呈现、也可与其多个其他功能icon并列组合展示。

4. 隐藏式入口

隐藏搜索入口方式在真实场景中使用的极少，在初始状态下将搜索入口隐藏，需通过交互操作唤醒。例如：有的将其折叠，点击展开才能看到；有的通过下滑才会出现，iPhone桌面就是一个不错的案例。

三、常见的搜索方式

基于信息复杂度的提升，纯文字搜索已无法满足很多产品的搜索需求，为了拓展搜索功能空间、更好的满足用户需求，衍生出了多种搜索方式，如语音搜索、扫一扫、拍照搜索等。

1. 文本搜索

最常用且做主要的搜索方式，点击搜索框激活键盘即可开始，相较于其它方式，码字的操作成本略高，但这种搜索方式极为灵活，对于有目标的用户、其搜索结果的精准度只高不低。

文本搜索可分为模糊搜索和精准搜索。精准搜索即能准确识别所输入的关键词，要么结果与搜索目标极度匹配、要么结果为空，例如订单查询、查找联系人等；模糊搜索可在无法匹配用户目标的情况下，推荐与关键词相似、或相接近的内容，不管用户是否有明确的目标皆可使用，例如商品搜索、新闻资讯搜索等。

2. 语音搜索

语音搜索比文本搜索更为便捷，省去了用户码字的操作，同时也解决了对使用键盘、拼音有难度的老弱用户群体所面临的现实问题。语音录入后，系统会将其转化为文字，然后根据关键词搜索内容，需要注意的是对普通话的标准程度要求较高，不然会影响搜索结果的准确度。

为了给用户提供更好的搜索体验，语音搜索也玩出了新高度。例如：酷狗音乐的哼歌识曲/听歌识曲，用户只需哼出大致的曲调或直接对正在播放的音乐录音就能找出歌曲名字；在高德地图中，直接说出“导航去xxx”,系统即可自动完成搜索、查询路线等多个操作步骤。

3. 拍照搜索

拍照搜索是借助图像识别技术将用户实时拍照、或上传的图片进行相关内容匹配的一种搜索方式，在电商类产品中得到广泛应用。当我们看到一个物品想要够买，不知道叫什么或无法用文字准确形容时，拍照搜索就能很好的解决这个问题。

4. 扫一扫搜索

用户有明确目标且现场有真实样品时，可直接扫描商品条形码/二维码搜索相同的商品。虽然这种搜索方式比上述任何一种方式搜索的准确度都要到高，但受到现实条件的限制，反而使用频率很低。

四、搜索流程状态解析

1. 搜索前-进入“待命”状态

从用户点击搜索框的这一刻起、即便没有任何其他操作，系统就已经开始做搜索前的准备工作了，利用一系列辅助功能为用户提供有效的引导，为搜索转化做足了铺垫，例如占位符提示、热门搜索、历史搜索、猜你喜欢等，后续会对辅助功能做详细的讲解。

不仅如此，与搜索相关的元素也会进入“待命”状态，随着搜索框内放大镜的消失、光标的闪烁、高亮的输入框描边以及自动弹出的键盘，每一个点都在从视觉上告诉用户“我已经准备好了”。

2. 搜索中-关键词联想

在输入关键词过程中，搜索框右侧会出现删除图标，点击即可一键清除输入的内容。这里要注意删除与取消的区别，删除只是清除内容，而取消则是回到上一级页面，切勿将两个操作离得太近，以免用户误触而浪费不必要的时间成本。

系统还会根据所输内容的变化进行关键词联想以提供内容推荐，点击就能进入相应的搜索结果页。关键词联想从很大程度上降低了用户思考时间，还节省了点击搜索按钮的操作步骤，提高搜索效率，这也是一个优秀的搜索框必备的交互反馈。如果关键词联想设计的足够智能，还可以自动拆分一句话中的多组关键词、错字自动纠正、拼音自动转汉字等，搜索的易用性将得到进一步提升。
例如：在京东搜索框输入“电”，就会出现电磁炉、电池、电热毯...等一系列与“电”相关的商品。