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

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

1.什么是搜索框？

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

2.搜索框的应用场景

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

（1）作为搜索引擎入口

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

（2）用于查找内容

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

（3）用于快速定位

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

（4）用于活动推荐

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

3.搜索框的类别（APP）

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

（1）隐藏式搜索框

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

（2）普通搜索框

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

（3）有提示搜索框

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

（4）含图片搜索框

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

（5）带语音搜索

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

（6）精准分类搜索

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

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

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

（1）样式

使用约定俗成的样式（🔍+线框），不要增加额外的“搜索”按钮，巧妙利用手机提供的键盘的自带“搜索”按钮。

(2）位置

放在页面顶部位置，而不是页面中部，更符合用户的认知习惯。

（3）搜索过程及状态

如图所示，搜索框搜索的过程共分为四种状态：默认、获取焦点、输入中、结果展示。交互设计的工作就是要清晰展示各种状态对应的反馈及具体页面细节呈现。

1.默认状态

默认展示搜索提示词

2.获取焦点

跳转到搜索页，并展示热门候选词，最近搜索记录

3.输入中

根据输入的内容展示联想结果，如果候选词包含在多个分类中，例如，烟花可能是一个歌手的名字，还有可能是一首歌曲的名称，还需要提供分类展示页面。

4.结果展示

用界面或者文字描述按照何种排序规则展示结果，如何展示。

（4）搜索结果

下面4个要点能让搜索结果更专业，也能体现交互设计师在细节方面的把控能力。

1.给用户想要的预期结果

用户搜索的目标就是想得到预期需要的东西，搜索结果要符合用户预期，且最吻合的结果排在最靠前。

2.保留用户输入

保留用户输入的内容，就像记住朋友的名字一样，这是最基本的礼节。

3.自动纠偏

当年搜狗输入法其中一个制胜点就是自动纠正用户输入的错误拼音，给出和错误拼音最贴切的（正确）结果。搜索结果同理。

4.无结果提示

需要提示用户输入的内容无结果，比“无结果”更好的方式是“给用户推荐其他内容”，例如，在下图中，“无结果”提示语下方可以根据用户口味、或者当下热门推荐一些歌曲。

最后，请思考一个问题：为什么带语音/图片搜索的按钮通常放在搜索框的最右侧？而不是最左边？

本文由@夜雨 原创发布于人人都是产品经理，未经许可，禁止转载。