原作者：Nick Babich

原文地址：Nick Babich

搜索栏是一个输入区域和确认按钮的集合。有人会认为搜索框不需要设计。毕竟，这只是两个简单的元素。但是，在一内容为中心的网页中，搜索框经常是最频繁被使用的设计元素。当用户突然进入一个相对复杂的站点时，他们会立刻寻找搜索框来快速地、不费力地来找到他们的最终目标。搜索框的设计和它的可用性变成了一个大问题。

在这边文章中我们将会看到（设计）这些元素如何改善来节省用户去到他们想去到的地方的时间。

最好的实践

1、使用放大镜按钮

放大镜按钮总是陪伴着搜索框。按钮是通过定义对一个物体、时间或想法的视觉阐释。有一些按钮是最被用户普遍认知的，放大镜按钮正式其中之一。

用户不需要文字标签能够认出放大镜按钮

Tips：使用一个示意图标，最简单的放大镜图像。更少的图标信息能加快辨识。

2、显著地展示搜索区域

如果搜索是你的app活网页的重要功能，那它就应该被显著地放置，使它能够成为用户最快捷的探索路径。

左边：搜索功能被隐藏在一个按钮后面

图片来源：thinkwithgoogle

将搜索文本区域完全展示放置使很重要的，因为如果搜索被隐藏在按钮中的话会使搜索特性难以被注意到，并增加交互成本。

不好的案例

不要给搜索加入使用一个逐渐展开的交互效果，因为这会隐藏掉后文（搜索框要点击之后展开呈现）。

图片来源：AntonioJDN

3、为搜索框提供一个搜索按钮

一个按钮能帮助人们之别这里还有一个附加步骤来处罚搜索动作。哪怕他决定通过按回车键来这么做。

独立按钮

Tips：设计确认按钮时给予适当的尺寸，使用户不需要很精确的去点击鼠标。一个更大的可点击区域可以让用户更容易认出并点击。

让用户适应使用回车键和点击按钮来进行搜索。很多用户有点击一个真实按钮来确认搜索的习惯。

4、把搜索框放在每一个页面上

你应该总是在每个页面上提供找到搜索框的途径因为当你的用户不能找到他们在找的内容时，不管他们在你网页的哪个位置，他们会尝试用你的搜索框。

5、让搜索框简单

当你设计搜索框时，保证它看起来只有一个并尽可能容易使用。根据可用性研究，没有系统默认的进阶搜索选项时会对用户更加友好。紧接搜索选项会使想要用它的用户感到困惑（例如下图的布尔查询搜索框）。

布尔搜索

6、将搜索框放置在用户希望找到它的地方

当用户需要去寻找搜索框时，这不是件好事，因为这意味着搜索框不引人注目并且不容易认出。

你在下方可以看到A. Dawn Shaikh and Keisi Lenz研究得出的图表，通过对142名参与者的调查，这个表格展示了一个网页中搜索最被希望出现的地方。这个研究发现了用户最方便认出的地方时每个页面的顶部两侧，也就是用户们常用的“F型扫描模式”最容易找到的地方。

右上角的位置依然是用户最想找到搜索功能的地方

这个图表阐释了参与者希望找到搜索功能的地方。因此，将搜索框放在你的设计的右上角和顶部中央，你可以确保你的用户可以在他们希望的地方找到它们。

顶部的搜索框

Tips：在理想情况下，搜索框应该完美适应网站的全局设计，但是当用户需要它时，搜索框需要稍微突出一些。

你有越多的内容，你越需要显著地放置你的搜索功能。如果搜索功能对你的网站来说是必要的，你需要使用足够的对比使搜索区域和搜索按钮从背景和周围元素中突出。

7、 适当的区域大小

把输入区域做的过短是设计师通常会犯的错误。当然，短的输入区域也能让用户输入长的搜索内容，但是当只有一小段文本可以被看见时意味着糟糕的用户体验，因为用户将不能回看并编辑自己的输入内容。事实上，当搜索框有一个可视字符的数量限制时，用户会被迫使用短的、模糊的问题，因为长问题会导致难以阅读。如果输入区域根据用户所想输入的内容来决定尺寸，将会更方便用户来阅读和解释。

“拇指规则”是27个字符的文本输入（这个范围正好能容纳90%的问题）。

亚马逊使用了一个大小适当的搜索框

Tips：考虑使用一个可伸长的搜索框，当输入的文本内容增长时，搜索框会跟着扩大。这即节省了屏幕空间的同时仍然给用户足够的视觉提示来快速寻找以及精确查询。

8、使用自动建议机制

自动建议机智可以根据已输入的字符来预测并帮助用户找到一个合适的问题。相比加快搜索进程，自动建议机制更注重指导用户并帮助他们构建搜索问题。典型的用户是不擅长构想问题的：如果他们在第一次尝试时得到好的结果，之后的搜索尝试就很少会成功了。事实上，他们经常放弃。当自动建议机制生效时，它可以帮助用户更好的表达搜索问题。

Tips：确保自动建议机制有效。设计糟糕的自动建议机制会使用户困惑与分心。因此，使用自动修正拼写，找出词根，预见文本来提升这个工具的效率。

你应该尽快的提供自动建议，比如输入了三个字符，以此来提供给用户最直接的价值，并减少数据录入工作。

最多呈现十条项目，保证没有滚动条，否则用户会被信息淹没。

允许键盘导航建议列表。一旦用户滚到了列表最后一个项目，他们应该能够回到列表的顶部。退出键应该允许用户推出列表。

高亮区分以输入的信息和建议信息（例如，已输入文本使用标准宽度，建议项使用粗体）。

自动填充模式节省了用户时间，甚至可以对内容和适当的措辞给出建议

9、 弄清楚用户可以搜索什么

在输入区域中放置一条示范搜索问题来建议用户如何使用这个功能是个好的主意。如果用户能够进行多维度搜索，就使用输入提示模式来说明（例如，IMDb 的图例如下）。HTML5 可以使include文本更容易作为一个输入区域中的占位符。

Imbd的进阶搜索

Tips：限制你的提示在几个字数以内，否则会增加认知成本。

结论

搜索是建立以内容为核心的app和网站的一个基本活动和必要元素。甚至像输入区域的合适尺寸或预示搜索区域要呈现什么内容这样细小的变化都会显著增加搜索整个用户体验的可用性。

Thank you!