搜索是用户经常使用的功能，搜索框设计的好坏关系到用户的搜索展示、用户的产品体验等，因此搜索框虽然看上去简单，但其设计却不容小觑。

1. 搜索框的设计元素

主要有：搜索框、搜索图标、搜索文字内容

2. 搜索框的功能

对于用户来说：用户可以通过它快速准确的找到自己需要的内容，提高转化率。不要让用户输入可以点击的内容。

对于产品本身：我们可以根据用户的搜索历史来优化相应的功能或模块。特别是对于电商产品来说，用户的搜索数据非常重要。

1. 搜索框的位置

目前大多数网站在布局搜索框位置时一般遵循以下规则：

1）页面居中：搜索功能是页面的核心功能，没有搜索功能，业务就难以开展，这是最重要的！一般用在搜索平台。

2）页面顶部居中：因为搜索是网站业务中的一个重要功能，但不是全部。没必要太夸张的展示，但应该为其保留顶部居中的位置。一般适用于电商平台、资讯平台。

3）页面右上方；网页业务中是有搜索功能的，但是搜索只是辅助功能，没必要放在这么好的居中位置，放在右侧能看得见就行。

4）页面左上方：页面具有搜索功能，为了帮助用户精准搜索到自己需要的内容，因此在进入时将搜索框放在页面的左侧。

2. 搜索框大小

如果搜索框位于页面的中心，那么搜索功能就极其重要，所以当然应该更宽。

例如上文提到的百度等搜索页面的搜索框宽度通常固定在100以内，以保证在所有分辨率下都能完整显示。

如果搜索框位于右上角，那么搜索就是辅助功能，所以当然会更短。

具体宽度需要根据顶部UI布局来考虑。但一般不小于（近似值，自行权衡），否则输入关键字不方便。

如果搜索框位于顶部中央，则可以长可以短，这取决于业务情况和页面布局。

在输入框中，可以提供搜索示例，告诉网站支持哪些内容以及如何使用该功能。这可以防止用户产生困惑，并优化用户体验。这通常适用于内容类型较多的网站。

例如上图的腾讯视频就默认显示提示文字，可以帮助用户根据演员、片名或导演等搜索自己想看的电视剧、电影。

例如上图QQ音乐搜索框显示的默认提示文字，可以让用户根据播放列表、MV、音乐等精准搜索到自己喜欢的音乐或MV。

2. 搜索框中的推荐词

基于业务需求，搜索框中经常会有推荐词，让用户无需输入关键词就能直接获取结果，同时也是对产品和信息的推广，可根据不同需求采用不同的展示方式。

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

1）单个推荐词交替展示：比如上面是京东的搜索框，每3秒换一个推荐词。因为商城是一个选择项。交替展示的方式，可以帮助用户看到更多种类的商品。

2）多个推荐词同时展示：比如上图是全球顶级法律数据库的中文站，并没有像京东一样动态的展示单个推荐词，因为用户场景不一样。

因为用户都是律师，工作时间宝贵，用网站快速查询数据，没有时间等待，所以每次展示2-3个推荐词，让用户直接看到核心分类内容，直接点击。

4. 搜索结果展示

触发搜索后，搜索框失去焦点，框内保留搜索关键字，并显示多条搜索结果，每条搜索结果中的搜索内容以红色显示。如何让搜索结果展示得更加清晰，让用户更快的找到呢？因此搜索结果的交互设计需要注意以下问题：

1.结果分类：如何筛选结果

搜索结果是分类的，一般是Tab形式，比如在搜索“设计”，搜索结果分为“全部”、“图片”、“视频”、“新闻”、“更多”等。

2. 排序和过滤：如何对规则进行排序和过滤

排序和过滤的维度根据商品性质不同而不同，常见的排序方式有时间、价格、销量、距离、好评等。过滤可以看作是一种个性化需求，不同商品之间差异较大，放在搜索与结果之间，一是符合用户的认知和使用习惯，二是方便用户切换，尤其在电商网站，排序和过滤功能尤为重要，占据了首屏三分之一的空间。

3. 自动纠错：用户搜索词出现拼写错误

当用户在搜索时输入了错误的单词，系统会经过判断，将正确单词的搜索结果展示给用户，并以友好的方式告知用户正确的搜索方法。特殊状态包括无结果状态、网络状况不佳状态等。

无结果的状态可能是：用户输入错误，没有搜索结果。对于第一种情况，可以提示用户按照正确的方式搜索，并自动帮助用户纠正错误；对于第二种情况，需要很好的提示用户没有搜索结果，尝试其他搜索方式或者更换关键词等。

4.特殊状态：异常情况5.搜索引擎

1.搜索引擎搜索步骤-（分词）

假如是英文句子“Mike had a dog”，每个词之间都有空格隔开，一共有“Mike”、“had”、“a”、“dog”四个单词，但是中文句子“麦克”就是“ is a dog”，因为没有分隔符（比如空格）把每个词分开，有点麻烦。分词最简单的方法就是查字典，从左到右读这个句子（程序员叫它遍历），每个词如果在字典中出现就进行标记。

以“Mike has a ”为例，比如说，如果“Mike”这个词出现在字典中，那么“Mike”就被当做一个单词，如果“have”出现在字典中，那么“have”就被当做一个单词。就这样一直做下去，最后就可以分成“Mike,have,one,dog”。这个最简单的方式可以解决一些问题，但是也存在很大的问题搜索框下面推荐的叫什么，比如到底是“”，“dog”，还是整个“”呢？程序员利用统计学来解决这个问题：

2.搜索引擎搜索步骤-（获取关键词）

文本全部分词之后，我们会发现，其中有很多诸如“的”、“了”、“吗”、“可能”等实用意义不强的虚词，相比之下，诸如“产品经理”、“搜索机”等虚词则较少，实际意义更强烈的词，后者应该作为关键词，因此，我们将这些虚词全部作为停用词来存储，如果某个词出现在停用词中，则不能作为关键词。

这样，我们就从分词结果中得到了关键词。下面是一个简单的停用词列表。你可以看到，它们基本上都是我们经常使用但实际意义不强的词。

3.搜索引擎搜索步骤-（获取关键词）

中文分词是几乎所有中文自然语言处理（ ）的基础，因此学术界和工业界对中文分词技术进行了深入的研究。有高质量的商业分词库，也有像这个一样的开源中文分词库。免费使用。

通过提取每个网页的关键词，每个网页与关键词的对应关系如下：需要注意的是，获取关键词不仅仅用在网页处理中，在输入搜索框时也会用到，此时搜索引擎会进行分词，去除停用词，获取关键词，然后再进行后续处理。

4.搜索引擎搜索步骤-（倒排索引）

现在我们建好了索引，就把每个网页上出现的关键词全部找出来了，当用户查询的时候，我们就从头到尾扫描每个文档，看看哪个网页里包含了用户查询的关键词，并把这个文件作为搜索结果。

但问题是：网页数量太多，从头到尾扫描需要很长时间，根本无法满足正常需求，更谈不上快速响应。

那么我们可以这样思考：能不能把关键词放在最前面，网页放在最后呢？这样，我们在搜索关键词的时候，就不用遍历整个系统了，只需要搜索对应的关键词，就能找到需要的网页了，就完成了！

这样，当用户搜索“关键词1+关键词2”时，搜索引擎就需要先找到“第1页，第2页，第5页，……第N页”，“第3页，第4页，第5页，……第M页”等等，再找到同时出现的“网页3，网页5，……”。这样就大大加快了排名的呈现。

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