“搜索”是产品中非常必要的功能模块，搜索就像是给用户提供了一个便捷的绿色通道，让用户可以快速的检索内容。

应用中搜索操作都是依靠搜索框来完成的，一个好的搜索框很大程度上决定了产品的搜索体验。大部分搜索框都是大同小异，但真正好的搜索框会在细节上给用户提供差异化​​的反馈，给人一种温暖贴心的感觉。

搜索框结构分析

从体验层面来说，良好的用户体验需要一个完整的流程，搜索框的使用流程可以简单分为：

使用中涉及到跳转和输入两种不同的状态，我会在下一篇文章中详细分析。

常见的搜索框类型

回顾常用APP的搜索框，看似风格相差不大，但其实每个搜索框的细节都是经过精心设计的，下面总结几种常见的搜索框类型。

1. 搜索图标

页面中只提供了一个放大镜图标，用户通常需要点击该图标才能跳转到搜索页面，例如小红书就将搜索图标放在了页面的右上角。

2. 基本搜索框

基础搜索框由放大镜图标、文字提示、输入框三部分组成。微信首页的搜索框就采用了这种基础形态，文字提示为“搜索”，简洁明了。

3.文字提示搜索框

和基础搜索框唯一的区别在于，该类型搜索框中的文字提示部分不再只是单纯的搜索两个词，而是支持根据产品需求预先设置多组文字提示，并在搜索框中循环显示。

△大众点评网顶部搜索框中，文字提示部分循环显示三组不同的内容，引导用户快速搜索好吃好玩的东西。

4. 功能搜索框

之所以叫功能性搜索框，是因为它在文字提示搜索框的基础上，根据产品功能的需求，添加了扫码图标、拍照图标、语音图标等常用的功能图标，赋予了搜索框更多的功能属性。

△经常用豆瓣看书评的同学可能会注意到，豆瓣首页的搜索框里有一个扫码图标，点击之后可以快速扫描书籍条形码或者二维码，快速识别书籍内容，省去了搜索的麻烦。

△淘宝搜索框的构成较为复杂，除了支持二维码扫描外，还设有相机图标，方便用户拍照识别商品。

搜索框设计现状分析

使用搜索框进行搜索的流程一般可以分为搜索前、点击搜索框、输入内容、搜索后四个部分。在设计分析过程中，首先要理清整体的搜索流程，然后再考虑每个状态对应的交互细节与反馈，保持逻辑清晰。

1. 搜索前-默认状态

地点

搜索框大多出现在页面顶部，作为较大的触控目标，更符合用户的认知习惯，也更容易被用户发现和使用。

△在苹果内置的地图应用中，搜索框被放置在页面的中下位置，相比于顶部的搜索框，这样的位置分布更方便用户单手操作。

风格

除了上面提到的几种常见的搜索框样式外，有些产品还会在搜索前直接在搜索框中添加一个“搜索”按钮。

△包括淘宝、支付宝、闲鱼等阿里巴巴产品在首页搜索框中额外增加了“搜索”按钮，相比点击搜索框再敲击键盘搜索内容推荐，直接点击该按钮简化了搜索流程。

2. 点击后-获取焦点

搜索栏

点击搜索框后，框内的放大镜图标会消失，出现闪烁的光标引导用户输入，同时搜索框右侧会出现“取消”按钮。

△点击大众点评的搜索框后，搜索页面会出现三个选项，点击每个选项都会改变搜索框里的文字提示，有效帮助用户提高搜索精准度，虽然是很小的一个点，但做的很贴心。

键盘

点击搜索框后会弹出键盘，无需输入任何内容，点击键盘上的“搜索”按钮即可在搜索框中查询推荐内容。

搜索页面

搜索页的内容通常包括历史搜索、搜索发现、热门推荐等板块，记录用户的搜索行为，推荐目标产品或服务搜索框下面推荐的叫什么，提高转化率。

△豆瓣在搜索页展示最热门内容，包括实时更新的热门图书和电影榜单、热门团体、热门话题等，为用户提供有效引导。

我们可以进一步分析历史搜索，并思考如何对这些记录进行排序，以及最多显示多少条记录......

△网易云音乐最多可保留10条历史搜索，横向滑动的手势交互可以节省屏幕空间。根据内容长度，一屏最多只能显示2-3条记录，这让用户难以快速找到后面的历史记录。

△ 淘宝的历史搜索可以容纳更多的记录，当搜索记录超过两行时，会有一个小小的扩展按钮，点击按钮可以查看更早的记录，这样可以节省屏幕空间，最大化的保存历史记录。

3. 搜索-输入内容

删除/取消

当你开始输入内容的时候，搜索框右侧会出现一个删除图标，用户可以一键删除输入的内容。这里要注意删除和取消的区别。

△ 点击淘宝里的“删除”图标，页面会返回上一级，即搜索页面；

△ 点击“取消”按钮，页面会直接返回首页，也就是搜索前的状态。

搜索提示

当用户输入内容时，产品会根据用户输入的内容，给出相应的搜索推荐，这是搜索框必不可少的交互反馈。

合理的词条推荐可以大大减少用户的思考时间，提高搜索效率，同时省去了再次点击搜索按钮的过程，减少了用户的操作步骤。

字数限制

我知道的大多数应用程序在搜索时都没有字符限制。

回顾搜索的使用场景，我们会发现用户在搜索框中输入任何内容都是有可能的。尽量不要限制用户的输入内容，无论用户输入多少，基本的搜索操作都可以通过点击完成，这样整个流程就完整了。

△ 当在百度中输入过多字符时，会提示限制查询为38个汉字，超出的字符会被忽略。虽然给出了提示，但并不会打断用户的操作过程，让用户继续完成搜索。

4. 搜索后-显示结果

符合预期

搜索的理想状态是搜索结果符合用户的期待，满足用户的搜索需求，并且把最合适的搜索结果放在最前面，为用户提供一目了然的结果展示。

智能提示

智能提示是对用户输入内容的一种提示或修正，如果用户输入的内容有问题或者不符合标准，则会在搜索结果中给出最合适的搜索结果。

△在淘宝输入“ ”或“ ”时，淘宝会根据拼音给出“手机”的搜索结果，但依然保留原有的标签，方便用户再次点击搜索；输入“手ji”时，会直接给出“手机”的标签。这种差异化的反馈，能更好地服务用户。

无结果提示

如果用户输入的内容没有找到，搜索页面就会显示空状态，提示用户没有搜索结果。关于如何设计空状态，可以参考我之前写的一篇文章：

如何设计好空状态？下面是资深设计师的总结！

大家好，我是。

阅读文章 >

△相比于直接显示无搜索结果的状态，拼多多的搜索结果会先提示相关商品较少，然后将搜索内容拆分成不同的标签，进一步引导用户发现内容。

终于

以上就是搜索框设计的一些基本经验，如果你学会从整体到细节一步步分析，你会发现越来越多细节的设计点。

如何设计一个好的浏览器搜索？我总结了这9条建议

百度百科对搜索的基本解释是：给定一定条件的寻找、搜索。

阅读文章 >