搜索是每个产品中的基本功能，搜索设计做得如何也会影响着用户对产品的使用体验。在搜索功能中，其交互方式、视觉样式也有所不同，在产品设计前，对于搜索框的设计细节有什么需要注意的？本文就这几点来探讨关于搜索框的设计。

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

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

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

一、基本属性与特征

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. 搜索中-关键词联想

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

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

例如：在京东搜索框输入“电”，就会出现电磁炉、电池、电热毯…等一系列与“电”相关的商品。

3. 搜索后-清晰有效的结果

用户主要是想通过搜索功能来缩短路径、满足自己的查找需求，产品应尽一切能力带给用户符合预期的搜索结果，即便无法与搜索目标相匹配，也应该给予清晰的提示以及合理的视觉引导，搜索结果常见的有三种场景。

1）无相关内容匹配

当系统无法给用户提供相匹配的内容时，会通过缺省页提示，例如让用户修改关键词或将其引导至其他内容页面。电商类产品通常会提供其他模块的商品进行引流，如猜你喜欢、热门推荐、经常购买等。

2）结果内容较少

搜索出的结果内容较少时，会全部显示在同一页面中，但需要注意排序的规则，与关键词匹配度较高的内容靠前展示，用户在上滑浏览的过程中，越往后的其关键词匹配度越低，其阅读量和关注度都不高。

3）结果内容较多

如果搜索出的结果内容较多，且匹配度较高，很多内容都有可能是用户想要的，这时就需要提供Tab分类、筛选等辅助控件来协助用户更快找到想要的结果。

五、辅助模块/元素的妙用

1. 默认提示（占位符）

首先，搜索框内会有默认的占位符提示，以引导用户搜索，这些提示词可以是固定的、也可以是来自运营的营销文案或者系统根据算法推荐，用户不用任何输入也能直接点击搜索提示词相关的内容。

2. 热门推荐

热门搜索主要起到引导作用，特别对那些没有明确目标的用户能给予更多选择，有点类似搜索框中的占位符提示，最大的区别在于占位符可能是用户想要的、但热门搜索却是产品想要提供给用户的内容。

因移动端设备空间有限，为提高资源位利用率，购物类产品的热门搜索内容主要以标签形式展示且不会太多，而新闻资讯类产品大部分则会以完整标题（一行）的形式纵向排列、并增加明显的大标题/Tab分类。

3. 搜索历史

用户够买过的商品（非消耗类）不一定会再买，但搜索过的内容却有极高的几率再次搜索，例如购物前货比三家反复参考、看新闻/视频有内容偏好等。

提供历史搜索，方便用户随时查看搜过的内容，提升重复搜索的效率。不是所有的搜索都需要历史记录，例如订单，用户重复搜索的概率极低。

另外，考虑到界面空间的问题，历史记录的数目和时间范围需要合理的控制，如产品所需保存的记录较多，可以固定显示几行，其他的用展开/收起控件进行控制。如果历史搜索权重较低，只展示了少量的记录，可在新的搜索记录产生时，最后一条后移隐藏，这样为的是保持搜索记录的新老更替，也不至于对其他信息产生影响。

4. 猜你喜欢

猜你喜欢出于营销目的，通过采集用户的行为偏好进行行为预判，提供用户可能感兴趣的内容，或可在用户迟疑的瞬间被这些内容吸引，降低搜索页面的跳出率。在用户眼中，猜你喜欢多少有点“莫须有”的味道，不过这不是本文讨论的重点。

与热门推荐相比，猜你喜欢模块权重在很多设计师眼中持不同看法。在笔者看来其实不分伯仲，这不难理解，同为搜索功能的辅助板块，还得根据产品内容属性来决定。

例如：商品类搜索，猜你喜欢必定比热门推荐的转化率要高，毕竟更接近用户的真实需求，这就是「用户想要的」与「产品想给的」最实质性的区别；而新闻资讯类搜索，热门推荐的权重则更高，它所捕捉到的热点、新奇事件正是吃瓜群众们最要看到的内容。

5. 分类搜索

产品中涉及的业务、类型较多时，搜索结果可能“鱼龙混杂”，可在用户搜索前就提供多个类别，方面目标明确的用户能更快、更精准的搜索出符合目标预期的相关内容。

六、结语

基于对上述内容的理解，大家都知道不管使用什么形式的搜索，其本身并没有好坏之分，在设计之初就需要我们从业务类型、功能定位、使用场景等多维度综进行合分析，才能设计出更合理的搜索形式，用户的使用体验也会更好。

设计师们虽然前期做了很多方面是准备，但要想将搜索功能做的多么完美无瑕，并非那么容易、也不太现实。正所谓没有最好、只有更好，在这个过程中，前期不仅需要大量的样式积累、思考分析，期间还应通过反复的使用、挖掘更多设计要点，以此思考是否还有更优的设计方案，为后续的更新迭代以及提升用户体验做充足的准备。