请输入您要搜索的内容(请输入搜索词高清)

编辑导语:搜索是每个APP应用的基本功能，搜索框的设计也直接影响用户的体验和留存率。介绍了搜索框设计的相关内容，分析了搜索框的设计元素、功能、内容、结果显示和搜索引擎。让我们一起学习。

搜索是用户经常使用的功能。搜索框的设计关系到用户的搜索展示和产品体验。所以搜索框虽然看起来很简单，但是它的设计不可小觑。

一、搜索框的设计元素

主要有:搜索框、搜索图标和搜索文本内容。

二、搜索框对用户的作用:用户可以快速准确的找到自己需要的(内容)，提高转化率。让用户点击，不要让用户输入。

对于产品本身:我们可以根据用户的搜索轨迹优化相应的功能或模块，尤其是电商产品，用户搜索到的数据非常重要。

1. 搜索框的位置

目前大部分网站在布局搜索框位置时一般遵循以下规则:

1)页面居中:搜索功能是页面的核心功能。如果没有搜索功能，业务几乎无法开展。这是最重要的事情！一般用在搜索平台。

2)页面顶部居中:因为在网站业务中，搜索是一个重要的功能，但不是全部。不要夸大显示，但是顶部的中心位置要留给它。一般适用于电商平台和信息平台。

3)页面的右上角；它在网页业务中有搜索功能，但搜索只是辅助功能。这么好的位置不一定要居中，放右边看就行了。

4)页面顶部靠左:页面有搜索功能，方便用户准确搜索到所需内容，所以将搜索框放在第一页的左侧，以切换位置。

2.搜索框的大小。如果搜索框位于页面中央，搜索功能也是极其重要的，所以当然更宽。
搜索上面提到的百度等网页。搜索框的宽度通常固定在650px以内，因此可以在所有分辨率下显示。如果搜索框位于右上方，那么搜索就是辅助功能，当然更短。
具体宽度要考虑顶部UI布局。但一般不低于220px(近似值，自平衡)，否则不方便输入关键词。如果搜索框在顶部居中，它可以长也可以短，这取决于业务情况和页面布局。三、搜索框内容1。默认情况下，应显示提示文本。在输入框中，可以提示搜索实例，告诉网站支持什么内容，如何使用该功能。防止用户看起来很傻，优化用户体验。通常适合内容类型较多的网站。

比如上面的腾讯视频，默认显示的是提示文字，可以帮助用户根据演员、片头或者导演来搜索自己想看的电视剧。

比如QQ音乐的搜索框默认显示提示文字，用户可以根据歌单、MV、音乐精准搜索到自己喜欢的音乐或MV。

2. 搜索框内推荐词

基于业务需求，搜索框中往往会有推荐词，方便用户无需输入关键词直接到达结果。同时也是一种商品和信息的推广。根据不同的需求，可以有不同的显示方式。

比如上面的淘宝搜索框会有最近的热门商品名称推荐，方便用户快速找到当季的热门商品。这样的搜索框也是对商品的隐形推荐，增加了推广力度。

1）单个推荐词交替显示：例如上面是京东搜索框，大概3秒换一个推荐词。因为商城就是挑选的。交替显示的方式有利于用户看到更多种类的物品。1)单个推荐词交替显示:比如上面是JD.COM搜索框，一个推荐词大概3秒变一个。因为商场是选的。交替显示有利于用户看到更多种类的项目。

2)多个推荐词同时显示:比如上面列出了全球顶级法律数据库中国站LexisNexis。与JD.COM不同，单个推荐词的动态交替显示是由于不同的用户场景。

因为LexisNexis的用户是律师，所以工作时时间很宝贵。所有网站都是用来快速查询数据的，没时间等了。所以可以一次显示2-3个推荐词，方便用户直接看到核心类目，直接点击。

四、搜索结果展示

搜索被触发后，搜索框失去焦点，搜索框中保留搜索关键词，并显示多个搜索结果，每个搜索结果中的搜索内容以红色显示。如何更清晰地展示搜索结果，让用户更快地找到自己需要的东西，针对搜索结果的交互设计需要注意以下几个问题:

对搜索结果进行分类，一般使用Tab风格，比如Google search for design，将搜索结果按照全部、图片、视频、新闻等进行分类。

2.排序和筛选:如何排序和筛选规则。分类和筛选的维度根据产品的性质而有所不同。常见的排序方式有时间、价格、销量、距离、好评等。筛选可以看做是个性化需求，不同的产品有很大的差异。排序筛选的功能一般放在搜索和结果之间。一是符合用户的认知和使用习惯，二是方便用户切换。尤其是在电商网站中，排序筛选功能尤为重要，占首屏的三分之一空。

3.自动纠错:用户搜索词出现错别字。当用户在搜索中输入错误词汇时，系统会在判断后向用户展示正确词汇的搜索结果，并善意告知用户正确的搜索方法。特殊状态包括无结果状态、网络不良状态等。

没有结果的状态可能是:用户输入错误；搜索结果为无。在第一种情况下，可以提示用户正确的搜索方法，并且可以自动纠正用户。对于第二种，需要有很好的提示用户没有搜索结果，尝试其他搜索方式或者改变关键词等。

4. 特殊状态：异常情况五、搜索引擎目的：更全、更快、更准。更准是搜索引擎最关键的目标。 本质：信息获取方式。好的搜索引擎：好的搜索引擎要快、要查的准、搜索引擎要具有稳定性。1.搜索引擎搜索步骤——(分词)如果是英文句子“Mike had a dog”，每个单词用空隔开，里面有四个单词:“Mike”、“had”、“a”、“dog”，但是中文单词“Mike have a dog”因为没有，想到分词最简单的方法就是查字典，从左往右读句子(程序员的术语是遍历)。如果每个单词都出现在字典里，就标记出来。

以“迈克有一只小狗”为例。比如字典里一出现“Mike”这个词，就把“Mike”当成了一个词。一旦“你”出现在字典里，它就把“你”当成一个词，以此类推。最后可以分为“迈克，你，一只狗”。这种最简单的方式可以解决一些问题，但也有大问题，比如整体上是“小”“狗”还是“小狗”？程序员使用统计学来解决这个问题:

2.搜索引擎搜索步骤——(获取关键词)经过所有的文本切分，你会发现有很多“的”、“了”、“马”、“也许”等没有很强实际意义的虚词。相比之下，像“产品经理”、“搜索引擎”这样的词更实用，但应该很少有人把它们作为关键词。因此，我们使用将所有这些功能词保存为停用词。如果某个词出现在停用词中，则不能用作关键字。

所以，我们从分词结果中得到了关键词。下面是一个简单的非索引字表。可能看出来基本都是我们经常用的词，没有很强的实际意义。

3.搜索引擎的搜索步骤——(获取关键词)中文分词是几乎所有中文自然语言处理的基础，因此学术界和工业界都对中文分词进行了深入的研究。有高质量的商业词库，也有像街霸这样开源的中文分词库，可以免费使用。

通过提取每个网页的关键词，每个网页与关键词的对应关系如下:需要注意的是，获取关键词不仅用于网页处理，还用于输入搜索框。当我们搜索一个中文句子时，搜索引擎会进行分词，去掉停用词，得到关键词，然后进行后续处理。

4.搜索引擎搜索步骤——(倒排索引)现在，我们已经建立了索引。对于每个网页，我们已经找到了所有出现的关键词。当用户查询时，我们从头到尾扫描每一个文件，看哪个网页有用户查询的关键词，把这个文件作为搜索结果。

但问题是:网页太多了，从头到尾扫描一遍需要很长时间，根本满足不了正常需求，更别说快速响应了。

所以我们可以想:能不能把关键词放前面，网页放后面？这样我们在搜索关键词的时候，不需要遍历整个系统，只需要寻找对应的关键词，就可以找到需要的网页！

这样一来用户搜索“关键词1+关键词2”，那么搜索引擎需要找到“网页1，网页2，网页5，……网页N”，“网页3，网页4，网页5，……网页M”，找到同时出现的“网页3、网页5，……”。这样就大大加快了呈现排名的速度。这样，当用户搜索“关键词1+关键词2”时，搜索引擎需要找到“网页1，网页2，网页5，…网页n”，“网页3，网页4，网页5，…网页m”，找到同时出现的“网页3，网页5，…”。这大大加快了排名的速度。

本文从搜索框的基本元素、位置、内容三个方面介绍了搜索框的构成和特点，然后从搜索引擎和搜索结果的介绍展示了搜索框在搜索过程中和搜索后的交互结果，希望对大家有所帮助。

本文由@隔壁老王原创发布。人人都是产品经理，未经作者允许，禁止转载。

题目来自Unsplash，基于CC0协议。