搜索框的设计与用户的搜索显示和产品体验有关

无需加好友免费技术支持

编辑导语:搜索是每一个APP应用基本都具备的功能，搜索框的设计也直接影响到用户的体验感和留存率等。本文作者介绍了有关搜索框设计的相关内容，从搜索框的设计元素、功能、内容、结果展示、搜索引擎等展开分析，一起来学习一下吧。

搜索是用户经常使用的功能。搜索框的设计与用户的搜索显示和产品体验有关。因此，虽然搜索框看起来很简单，但其设计仍不容低估。

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

对于用户：用户可以快速准确地找到他们需要的东西（内容），并提高转换率。如果用户可以点击，请不要让用户输入

对于产品本身：我们可以优化用户的搜索轨迹或模块，特别是对于电子商务产品，用户搜索的数据非常重要。

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

1）页面中间：搜索功能是页面的核心功能。如果没有搜索功能，业务几乎无法发展。这是最重要的！它通常用于搜索平台。

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

3)页面顶部右侧；在网页业务中有搜索功能，但搜索只是一个辅助功能。没有必要在中间有这么好的位置。把它放在右边就可以看到了。

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

如果搜索框位于页面中间，搜索功能也极其重要，当然要宽一点。

比如上面提到的百度等搜索网页。搜索框宽度通常固定在650px以内，保证在所有分辨率中都能显示全。如果搜索框位置在顶部居右，那搜索就是辅助功能，那当然短一点。

具体宽度需要考虑顶部UI布局一般不小于220。px(大概值，自己平衡)，否则输入关键词就不方便了。如果搜索框位于顶部，可以根据业务情况和页面布局来判断。

在输入框中，可以提示搜索示例，告诉网站支持搜索什么内容，以及如何使用功能。防止用户看起来困惑，优化用户体验。它通常适用于内容类型较多的网站。

例如，上述腾讯视频默认显示提示文本，可以帮助用户根据演员、标题或导演搜索他们想看的电影和电视剧。

根据业务需求，搜索框中经常有推荐词，方便用户不输入关键词就能直接达到结果。同时，它也是对商品和信息的推广。根据不同的需要，可以有不同的显示方式。

例如，上述淘宝搜索框将推荐最近流行的商品名称，方便用户快速找到当季流行的商品。这样的搜索框也是对商品的无形推荐，以增加促销力度。

1)单个推荐词交替显示:比如上面是JD.COM搜索框，3秒左右换一个推荐词。因为商场是选择的。交替显示有助于用户看到更多种类的物品。

2)同时显示多个推荐词:例如，以上是LexisNexis，世界顶级法律数据库中国站。由于用户场景不同，单个推荐词的动态交替显示与京东不同。

因为LexisNexis用户都是律师，工作时间宝贵。使用网站是为了快速查询数据，没有时间等待。因此，一次显示2-3个推荐词，方便用户直接查看核心分类容量并点击。

触发搜索后，搜索框失去了焦点，保留了搜索关键字，显示了多个搜索结果，并在每个搜索结果中显示了搜索内容。如何使搜索结果更清晰地显示，以便用户能够更快地找到他们需要的东西，并注意以下问题：

将搜索到的结果进行分类处理，一般采用Tab对风格进行分类，如谷歌搜索设计，将搜索结果按全部、图片、视频、新闻、更多等进行分类。

排名和筛选的维度因产品性质而异。常见的排名方法包括时间、价格、销售、距离、好评等；筛选可视为个性化需求，不同产品之间存在很大差异。排序和筛选的功能一般放置在搜索和结果之间一是符合用户的认知和使用习惯，便于用户切换。特别是在电子商务网站中，排名和筛选功能尤为重要，占第一屏空间的三分之一。

用户在搜索时输入错误的单词，系统在判断后向用户显示正确单词的搜索结果，并友好地告知用户正确的搜索方法。 特殊状态包括无结果状态、网络状态差等。

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

目的:更全面、更快、更准确。更准确是搜索引擎最关键的目标。 本质:获取信息的方式。好的搜索引擎:好的搜索引擎要快，准确，稳定。

假如是英语，Mike had a dog，每个字都是用空格分开的，里面有Mike”、“had”、“a’、“dog这四个字，但是中文麦克有一只狗，因为没有分隔符(比如空格)把每个字分开有点麻烦。 最常见的分词方法是检查字典，从左到右阅读句子（程序员称为遍历）。如果每个单词都出现在字典中，请标记它。

以麦克有一只小狗为例。比如麦克这个词出现在字典里，就把麦克当成一个词，有出现在字典里，就把有当成一个词，一直这样做，最后可以分为麦克、有、一、狗。 这种最简单的方法可以解决一些问题，但也有很大的问题，比如小、狗还是整个狗？程序员使用统计学来解决这个问题：

在所有的文本分词之后，你会发现有很多功能词，如、、、也许，没有很强的实际意义。相比之下，产品经理、搜索引擎等词更具实际意义，后者应该作为关键词。 因此，我们使用所有这些功能词作为停用词保存（stop word），如果一个词出现在停用词中，就不能用作关键词。

因此，我们从分词结果中获得了关键词。 以下是一个简单的停用词表。可以看出，它们基本上是我们经常使用的，没有很强的实际意义。

几乎所有的中文自然语言处理（Natural Language Processing）的基础，所以学术界和产业界对中文分词的技术研究已经很深入了，有高质量的商用分词库，也有像jieba这种开源中文分词库可以免费使用。

通过提取每个网页的关键字，每个网页与关键字之间的最终对应关系如下：需要注意的是，获取关键字不仅用于网页处理，还用于输入搜索框。当我们搜索中文时，搜索引擎将分割单词，删除停止单词，获取关键字，然后进行后续处理。

现在，我们已经建立了索引，我们已经找到了每个网页的所有关键字。 当用户查询时，我们从头到尾扫描每个文件，查看用户查询的关键字出现在哪个网页上，并将该文件作为搜索结果。

但问题是：网页太多，从头到尾扫描需要很长时间，不能满足正常需求，更不用说快速响应了。

所以我们可以思考:关键词可以放在前面，网页可以放在后面吗？ 这样，当我们检索关键字时，我们就不需要遍历整个系统，只需要找到相应的关键字，就可以找到所需的网页！

这样，用户就可以搜索关键 关键词2……网页N……网页M同时发现网页3，网页5，…….这大大加快了呈现排名的速度。

本文从搜索框的基本元素、位置和内容介绍了搜索框的组成和特征。后来，从搜索引擎和搜索结果的介绍展示了搜索框的互动结果，希望能对您有所帮助。

本文由 @隔壁老王讲产品 大家都是产品经理，未经作者许可，禁止转载。

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