搜索设计

前言：无论设计任何类型的用户界面为用户提供这种快速扫描屏幕所需的工具是设计的一个部分，而且是搜索设计是一个用户会常用到的控件，有了搜索控件才可以确保用户知道在什么地方找到他想要东西，以及何时需要，以及使用了以后会发生什么。

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

搜索框的应用场景

作为搜索引擎入口

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

用于查找内容

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

用于快速定位

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

用于活动推荐

一些电商网站，巧妙利用搜索框中预置的词，可以达到活动推荐的效果。

搜索框的类别

隐藏式搜索框：只提供一个放大镜图标，需要再点击图标跳转到搜索页面;或者是需要下拉时才出现。

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

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

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

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

精准分类搜索：与其他搜索框相比，此类搜索框可以先选择分类，再输入关键词搜索分类下的内容。

搜索过程及状态

搜索的过程共分为四种状态：默认 - 获取焦点 - 输入中 - 结果展示

交互设计的工作就是要清晰展示各种状态对相应的反馈及具体页面细节呈现。

默认状态：默认展示搜索提示词。

获取焦点：跳转到搜索页，并展示热门候选词，最近搜索记录。

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

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

搜索结果

交互设计的工作就是要清晰展示各种状态对应的反馈 及具体页面细节呈现。 下面4个要点能让搜索结果更专业，也能体现交互设计师在细节方面的把控能力。

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

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

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

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

搜索的位置

顶部入口

通常一般产品会把搜索框放在顶部。有些产品搜索功能特别重要，那么让它固定吸顶显示，便于用户随时的使用。如果搜索行驶的功能不是特别重要的时候，是可以把搜索框隐藏起来，这样还节省了屏幕的空间。那么怎么把它放出来还是收起来，完全取决于搜索控件在当前页面的权重。

底部导航

除了放在顶部以外，也有把搜索放在底部的。就把它作为一个独立的搜索的导航标签，整个App页面可能整个都是围绕着搜索功能进行展开的。他可以为搜索功能拓展很大的空间，比较适合将搜索作为主要流量入口的一个App，这个同样也取决于产品需求以及搜索的权重分配。

悬浮入口

工具类的App通常会出现悬浮式的按钮的搜索入口，因为工具类的产品它的搜索功能说重要也其实非常重要，但是他不可以阻挡整个页面上行驶的功能，所以设计这种悬浮式的搜索入口是比较合适的。它可以在整个页面上任意的位置去新建悬浮的搜索入口，而且不会阻挡整个主屏幕上其他内容。

搜索的图标

放大镜的图标是设计搜索时候的固定样式的图标，因为人们通常会认为放大镜图标表示的搜索工具，这已经形成了一个很成熟的心智模型了，即使它没有标签说明。对于这个搜索的图标建议是越简单越好，越少的细节可以让用户更快的使用和浏览它。

web搜索

在网站上在空间允许的情况下，搜索的空间旁边设计一个实际的按钮以帮助用户确认他的这个搜索的动作，从而减少用户所需的这种认知负荷。根据用户的心智模型，只能把它放在右边。那么唯一需要做的就是确保这个按钮的大小适中，然后点击起来感觉比较自然就ok了。

手机搜索

但是手机屏幕这种寸土寸金的情况之下，大部分情况下会把搜索按钮集成在软键盘上，在app的搜索框尽量保持简洁，只有图标和取消以及提示文本。

搜索辅助

添加功能

搜索可以根据这种各种的产品进行一些特殊功能的设计，比如说像这个百度的搜索，它会加一个小相机的图标（可以直接把图片拖拽进去搜索），这个搜索框根据产品的特性去设计一些特殊的功能是ok的。

反馈

当用户是把鼠标或是手指选中这个搜索框时需要给到用户一个反馈，比如闪烁的这个光标。

搜索框的长度

要控制的搜索框的长度，但是也不能让它过短，基本上能够容纳27个字符的输入就可以大概满足90%用户的需求了。

搜索框的提示文本

提示的文本一方面展示了一个可操作的样本，使用不会因为编写错误而导致查询失败，另一方面也可以暗示用户可以搜索到的内容。人类的短期记忆容量是非常有限的，所以在设计提示文本时尽量的简短而直接。如果提示文本太长会造成用户的认知负荷，反而是损害用户体验。

目前越来越多的APP会把搜索框作为一个运营的入口，放一些热词活动或者新功能。

热搜

热搜的作用类似于搜索框中的预设文案，能够起到一定的引导作用。那么还需要注意的一个热搜的规则，没有搜索结果的词是不能进入热搜的。如果你需要在后台建立热搜的黑名单（像一些违禁词或者恶意刷量的进行一些管控），当然也可以建立白名单方便运营对热搜进行排序的调整，或者是手动的添加某些热搜词。有多种内容提供的时热门搜索展示的内容还要进行类型的分布。（类型的分布：比如说热门搜索里面有作者，事件或者是作品。如果不管哪一种都需要进行展示，那么就需要根据产品的方向或者业务对不同的类型的占比进行内容排布）

搜索历史

就是用户曾经搜索过的内容，一般关于历史都是按照时间来进行排列，通常十条的展示的基本就可以满足基本的用户需求了。有了历史搜索记录是可以提升重复搜索时的效率，但是不是所有的搜索都需要历史记录（如果搜索结果是非常简单的，而且通过一次操作就可以完成了，那么就可以不设置这个搜索历史的功能了）。

考虑到隐私的问题，设置这种搜索历史的时候一定要支持删除，删除一种是逐条删除，一种是清空所有。

联想

联想功能是为了帮助用户节省输入时间的成本。有的时候，用户不清楚他需要搜索内容的精确名称，那么给他一个关键词作为引导，系统就可以根据已有的搜索数据进行匹配关联的分类，是大大提升了用户的这个使用效率，联想功能对于用户的体验上来说他是觉得非常贴心的。

猜你喜欢

根据用户平时产生的行为进行个性化的推荐以提升用户的搜索体验，产品能够给到这样的用户体验的话，用户就觉得这个产品做的真是很贴心，很省事儿。

总结：设计搜索的时应该从功能出发，综合考虑产品的业务类型、产品的定位、目标的用户和使用场景。选用一个最合适的形式提升搜索的体验，让用户怎么样速度更快，更准。

那么设计搜索的时候要记住3个目标：一个是速度。速度指的是让用户更快的得到搜索结果，完成他整个的搜索过程。二是温度。搜索过程设计得更加人性化，易于用户的理解和操作，让用户感到很贴心甚至是惊喜。这个其实很难。但是可以改变搜索的这个文案的提示，可以让搜索的方式更有创意性，更符合产品定位，让它做成一个有温度的设计。三是准确度。准确度指的是结果准确，搜索出来的结果准确符合用户的期望。设计搜索的时候一定要记住这三点，速度，温度和准确度。