「框」交互基本功：如何设计一个好用的搜索框？

框

搜索框一种常见的交互控件，用于精准提取海量的信息中的准确内容。本文作者分享了设计一个搜索框的几个要点，希望大家从中可以有所收获。

1.什么是搜索框？

搜索框一种常见的交互控件，用于精准提取海量的信息中的准确内容。搜索框几乎存在所有的网站和APP中，尤其是海量内容为导向的产品之中，例如音乐库、电商类网站，做好搜索（框）尤其重要。

2.搜索框的应用场景

设计过那么多的搜索框，你所不知道的是，它还有以下几种细分应用场景。

（1）作为搜索引擎入口

说到搜索，我们一般人首先会想到的是搜索引擎，例如谷歌，而在搜索引擎中，首页十年始终如一的搜索框最深入人心。反过来说，正是因为搜索引擎巨头的成功，搜索才越发备受重视，搜索框也是几乎成为网站或者APP的标配。

（2）用于查找内容

典型的应用场景，放在网站顶部之类的显眼位置，用于查找网站中的内容，一触即达。

（3）用于快速定位

查找内容的变种，例如，在手机“设置”中，当设置的选项较多时，通过搜索框进行搜索，可以快速定位到想要的设置项。

（4）用于活动推荐

一些电商网站，巧妙利用搜索框中预置的词，可以达到活动推荐的效果，例如下图中搜索框内置“油烟机”一词，用户只需通过点击搜索即可直达结果页或者活动页面。

3.搜索框的类别（APP）

什么？搜索框还分类别？不是都是放大镜+线框组合么？但是，搜索框还有以下这些类别区分。

（1）隐藏式搜索框

只提供一个放大镜图标，需要再点击图标跳转到搜索页面；或者是需要下拉时才出现，例如微信首页的搜索框。

（2）普通搜索框

通常固定在页面顶部，包含搜索框的普通要素（放大镜+线框）。

（3）有提示搜索框

此类搜索框的特征是，中间有提示语，通常这类的都可以复合搜索，例如可以搜名称或者代码。

（4）含图片搜索框

顾名思义，与普通搜索框相比，增加可以“以图识图”的搜索功能，例如淘宝就可以通过上传图片，搜索与图片同类的商品。

（5）带语音搜索

语音交互是新的交互热点，相比普通搜索框，带语音搜索框可以明显减轻用户手工输入文字的烦恼，现在语音识别的成功率已经达到了很高的地步。

（6）精准分类搜索

与其他搜索框相比，此类搜索框可以先选择分类，再输入关键词搜索分类下的内容，亚马逊的习惯做法，在商品分类较多，但又需要分类检索的时候适用，日常生活中可见超市日用品、食品等分类法。

4.搜索框的交互设计（APP）

设计一个搜索框，不比设计一个页面简单，甚至可能更复杂，它涉及到用户的精准转化，属于看起来简单，但是实现复杂的功能之一。

（1）样式

使用约定俗成的样式（