搜索框设计图片（搜索框效果设计，搜索框的设计搜索框的设计元素）

字符边框搜索框的设计

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

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

一，搜索框的设计要素

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

二、搜索框的功能

对于用户:用户可以快速准确的找到自己需要的(内容)，提高转化率。如果能让用户点击，就不要让用户输入。

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

1.搜索框的位置

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

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

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

3)页面右上方；web业务中有搜索功能，但搜索只是辅助功能。不一定要在中间那么好的位置，放右边就可以看到了。

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

2.搜索框的大小如果搜索框位于页面中央，搜索功能也是极其重要的，所以当然更宽。比如上面提到的百度等搜索页面。搜索框的宽度通常固定在650px以内，确保可以在所有分辨率下显示。如果搜索框位于右上方，那么搜索就是辅助功能，当然更短。具体宽度需要考虑顶部UI的布局。但一般不能低于220px(近似值，自己平衡)，否则不方便输入关键词。然后如果搜索框在顶部居中，可长可短，取决于业务情况和页面布局。搜索框1的内容。默认情况下应显示提示文本。

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

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

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

2.搜索框中的推荐词

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

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

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

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

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

第四，搜索结果的显示

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

对搜索到的结果进行分类，一般采用Tab的风格，比如Google搜索设计，按照全部、图片、视频、新闻等对搜索结果进行分类。

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

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

当用户输入错误词汇时，系统会在判断后向用户显示正确词汇的搜索结果，并善意告知用户正确的搜索方法。特殊状态包括无结果状态、不良网络状态等。

4.特殊状态:异常情况5。搜索引擎目的:更全、更快、更准。准确性是搜索引擎最关键的目标。本质:信息获取的方式。好的搜索引擎:好的搜索引擎应该快速、准确、稳定。1.搜索引擎搜索步骤-(分词)

如果是英文句子“Mike had a dog”，每个单词都用空格隔开，有“Mike”、“had”、“a”、“dog”四个单词，但是中文单词“Mike had a dog”就麻烦了，因为没有分隔符(比如空格)把每个单词隔开。想到分词最简单的方法就是查字典，从左到右读句子(程序员称之为遍历)，每个单词如果出现在字典里就做上标记。

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

2.搜索引擎搜索步骤-(获取关键字)

经过所有的文本切分，我们会发现有很多“的”、“了”、“马”、“也许”等没有很强实际意义的虚词，而“产品经理”、“搜索引擎”等更有实际意义的词就比较少了，应该把后者作为关键词。因此，我们将所有这些功能词存储为停用词。如果某个词出现在停用词中，则不能用作关键字。

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

3.搜索引擎搜索步骤-(获取关键字)

中文分词是几乎所有中文自然语言处理的基础，因此学术界和工业界对中文分词的技术研究已经深入。有高质量的商业分词库，也有像解霸这样的开源中文分词库，可以免费使用。

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

4.搜索引擎搜索步骤-(倒排索引)

现在，我们建立了一个索引，对于每一页，我们都找到了所有出现的关键词。当用户进行查询时，我们从头到尾扫描每一个文档，看哪个页面有用户查询的关键词，然后把这个文档作为搜索结果。

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

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

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