如何设计一个完美的搜索框

看到这个标题(ti)，何设你(ni)可能会认为搜索是完美不需要设计的，毕竟只是索框一个文字输入框和搜索按钮的组合。

1.使用放大镜图标

在(zai)用户界面中放大镜图标(biao)和搜索功能如(ru)影随行，何设图标是(shi)完美对于(yu)操作对象、动作或想法可视化(hua)的索框表达，用户具(ju)有普遍认知的图形元素，我们通常(chang)也称之为(wei)icon。放大镜就是这(zhe)样的图标之一。

提示:尽量使用最简单的图形，较少的使用细节装饰会提高识别效率。

2.显示搜索字段

如果你设计的产品中搜索是一个高频操作(zuo)的(de)功能，你应该将它(ta)放在相对明显和(he)便捷的位(wei)置，便于用户快速找到并使用。

尽量避免这(zhe)种形(xing)式的设计(ji)，因为它隐藏了(le)搜索提示

3.为(wei)搜索框设计一个搜索按钮。

一个搜索按钮可以明确的告知用户，激活(huo)搜索框后(hou)的额外操作，即使他(ta)们已经决定了按下Enter键。

提示

适当的调整提交按钮触发区域的大小，使用户不必精(jing)确的指向就可以操作，更大的点击区域使(shi)其更容易被(bei)发现和(he)便于点击。

虽然大部分用户会通过Enter键提交搜索结果，但是依然(ran)有不少用户习惯于使用鼠标点击实际按钮来完成操作，俩个操作方式应当同时(shi)存在。

你的用户应该在每个页面都可以使用搜索功能(neng)，不论他们在网站的什么位置，当他们找不到他们正在查找的内容的时候，他们将尝试使用搜索功能。

5.设计(ji)一个简单的搜索框

让搜索框看起来尽可能的简单。根(gen)据可用(yong)性研究，在默认情况下不显示高级搜索是(shi)更友好的选择。在下面的例子中，高级搜索会使用(yong)户感到疑惑。

6.将搜索框放在(zai)用(yong)户更希望看到的(de)地方(fang)

也(ye)就(jiu)是说，搜索框的位置要尽可能(neng)符合大部分(fen)用户的心理预期。

A.Dawn Shaikh和Keisi Lenz做了一个(ge)研究，研究结果(如下图)表(biao)示了142位参与者(zhe)在调查中预期搜索功能在网页中出现的位置。研究发现，将搜索功能放在(zai)网站的左上(shang)角或者右上角是最好的选择，用户可以使用常(chang)见的“F形”扫描模式轻松找到。

因此(ci)，将搜索框放在页面的(de)右上角或者(zhe)中上部区域(yu)，是用户预期出现的位置。

提示：

理(li)想(xiang)情况下，搜索功能应该匹配于网站的整体设计，在用户需要的时候出现。

网站的内容越多(duo)，搜索功能(neng)显得越重要，如果搜索对你的网站至关重要，就要从视觉、尺寸、位置、颜色等方面增强搜索的权重，以便搜索功能在复杂的内(nei)容中(zhong)脱颖而出。

7.确保输入框可以容纳足够的字段

输入框设计的太窄是设计师常见(jian)的错误做(zuo)法，如果输入框不够宽，当用户在输入框内输入较长(chang)的文本查询时，意味着有一部分(fen)文字将不被看到，用户无法轻松的查看(kan)和编辑他查询的内容，可用性将非常差。当输入框仅允许输入有限可(ke)见的文本时，用(yong)户将被迫用短的(de)，不精确的查询，因为较长的查询难以(yi)阅读。有好的做法(fa)是输入框根据用户预期输入(ru)的文本调(diao)整大小，那么他们将(jiang)更容易帮助用户阅读和查询。

研究表明，可容纳27个字符的搜索框可以满足90%用户的搜索需求。

提示：考虑使用可变化的宽度的搜索框(激活输入框后(hou)输入框变宽)，这样既可以节省屏幕空间，也可以为用户提供足够的可视化提示，以便快速查找和执行(xing)搜索动作。

8.启用“搜索联想(xiang)”机制

“搜索联想”(自动建议)可以(yi)帮助用户通过已输入的文本来预测可以找到的查询结果(guo)。搜索联想的目的不是加(jia)快搜索的过(guo)程，而是帮助用户构建正确的搜索查询机制。常见(jian)的场景是：当用户第一次搜索没有得到想要的(de)结果时，稍后会更少(shao)使用搜索，意味着更低的成功率。事实是用户会(hui)就此放弃搜索。所以搜索联(lian)想会帮助用户更好的构建搜索路径。

Google字2008年(nian)以来掌握并实施“搜索联(lian)想(xiang)”，由于搜索引擎会记住用户每多一次且相同的搜索记录，所以Google为用(yong)户节省了时间并创造了(le)更加便捷的体验。

提(ti)示：

确保搜索联想是有(you)效的，设计不完善的搜索联(lian)想会混淆和分(fen)散用户的注意力，所以使用拼写自(zi)动更正、词根识别、语义识(shi)别和预测，可以改进搜索体验。

尽可(ke)能快速的提供搜索联想，例如输入(ru)到第三个字的时候，就给用户提供相(xiang)匹配的联想词汇，以此(ci)减少用户数据录入的工作，

只提供少(shao)于10个项目的联想词句(不建议使(shi)用滚动条)，否则信息将(jiang)会(hui)变得难以承受。

允许用户通过(guo)键盘的上下键(jian)控制选择列表，当(dang)滚动到最后一个项目，如果继续向(xiang)下翻动则自动返回到列(lie)表顶部，用户也可以使用Esc按键关闭搜索联想列表。

已输入文本和建议文本视觉上(shang)保持差异(例如，通常情况下建议的词汇通过加(jia)粗表示)

9.描述用(yong)户可以搜索的内(nei)容

在输入框中可以添加搜索示例，告知用户那(na)些内容是可以搜索的，以及如何使用功能。如果用户可以搜索多个条件，请使用输入提示模式(shi)说明。

(Html5的技术将文本占位符添加到输入框中是极其容易的)

提示：简要的概述，否则会增加用户的认知负担。

结论

搜索是构建内容繁重应用程序或门户网站最基本和最关键的功能。即使最小的变化，例如输入框可(ke)输入的(de)字段大(da)小或搜索框中的提示字段信息可有效的提升搜索的(de)可用性以及整体的用户体验。

内容(rong)来源：

1.Design a Perfect Search Box 【Nick Babich】

2.A.Dawn Shaikh和Keisi Lenz 的研究数据

*注：原文是英文，笔者翻译，并根据中文语境下的设计做了适当的(de)演绎。

文 / 胡兵兵 站酷ID/微信公众号：HolyhiLab