搜索框设计指南

       搜索框实际上就是输入框与提交按钮的组合。有的人可能会疑问，搜索框也需要所谓的设计吗；毕竟，它里面只有两个元素罢了。然而，在一些内容量大的网站上，搜索框可能是最频繁被使用到的组件了。当用户浏览一个相对复杂的站点时，他们一般都会立刻去寻找搜索框的位置，好让他们能够快速地到达想要的位置。因此搜索框的设计与可用性就变的尤为重要了。

在这篇文章里，我们将探讨如何优化搜索框，以至于能够让用户更快速地找到他们想要的内容。

最佳范例

1. 请使用放大镜图标

请在搜索框后面加上一个放大镜图标吧。图标的定义是，对于一个事物，行为，或者想法的视觉表达。对于一些图标大众是有趋于一致的理解的。放大镜图标就是其中的一个例子。

Tip: 在使用图标时，尽量使用最简洁的放大镜。越少的修饰，可以让用户越容易理解。

2. 请让搜索框更加明显

如果搜索功能在你的应用/网站上占一个很大的比重，你就应该把搜索框放到一个更加显眼的地方，以让用户能够用最快的速度找到它。

一个展开的搜索框是很重要的，把搜索栏藏到图标后会让搜索框更不容易被找到，并且让交互成本上升。

3. 请加上一个搜索按钮

一个按钮可以帮助用户清楚，在输入完内容后还需要额外触发搜索事件。尽管大多数时候人们更想去按回车。

Tips:

• 为按钮选择一个合适的大小，以让用户不用去非要做到精确点击。相对大的按钮可以让用户更容易去点击到。

• 让用户可以同时通过按回车和点击按钮去触发搜索。其实还是有很多用户习惯去点击页面上的按钮。

4. 请为每张页面都加上搜索框

你应该保证用户能够在任何页面上一直可以使用搜索框，因为当用户找不到他们想要的内容的时候，他们会去找搜索框，不管他们在你网站的哪个位置。

5. 请让你的搜索框更加简洁

如果你想设计一个搜索框，请确保它看起来更像一个整体，并且容易使用。根据一些对于可用性的研究，那些默认状态下没那么多高级选项的搜索框具有更高的用户友好度。高级选项（例如：布尔搜索）会很容易让用户犯迷糊的。

6. 请把搜索框放到用户想让他们出现的位置

让用户花时间去找搜索栏的位置，是很不友好的。

下面这张表来自 A. Dawn Shaikh 和 Keisi Lenz 的一份研究中：根据一份142人参与的调查，这张表展示出了人们期待搜索栏所出现的位置。这份研究得出，人们最希望搜索栏出现在页面的左上角或者右上角。在这些地方用户可以更加容易通过F型浏览模式去找到他们想要的。

Tips:

• 理想上，搜索框还是应该适合网页的整体设计，当用户想使用它的时候，让搜索框更加明显。

• 你的内容越多，你就越希望突出你的搜索功能。如果搜索是你网页的重要功能，使用大量的对比，可以让搜索框在背景上或者周围其他元素上看起来更加突出。
  

7. 请选用合适的输入栏尺寸

输入栏太小是很多设计师都会犯的一个错误。当然，用户可以输入一长串内容，但是只能显示一小部分是会让可用性大打折扣的，因为在这种情况下用户很难去检查，或者修改输入。事实上，当搜索框可以显示的字数有限的时候，用户会自动输入较短的内容，因为较长的输入是很不方便阅读的。如果输入栏能够与用户所想输入的内容长短相匹配，可用性就可以被大大提高了。

一种估测是，让输入栏长度大概保持在27个字左右（英文）就可以满足90%的情况了。

Tips: 考虑使用一个可伸缩输入框，当用户点击时，可以加长输入框。这样既可以节省空间，也可以让用户更加方便找到和进行输入操作。

8. 请为用户列出自动候选项

自动搜索候选可以通过用户已经输入的字句，帮助用户找到一个合适的查询。自动候选并不会加快搜索进程，但是却可以指导帮助用户去组织他们的查询语句。一般来说，用户是不太会在搜索栏上问问题的：如果他们不能够在第一次查询里获得想要的答案，之后的搜索结果也不会太让他们满意。事实上，他们会放弃。当自动搜索候选项使用恰当，它是可以帮助用户去问出更加恰当的问题的。

谷歌搜索就很擅长此项，在2008年他们就开始使用这一功能。因为用户很多时候会搜索同一件事很多次，通过记录搜索历史，谷歌为用户节省了时间，并且提高了用户体验。

Tips：

• 确保自动候选栏是有用的。不好的候选项反而会让用户困惑。使用拼写修正，辨别输入，并且预测用户想要搜索的内容以为了提高使用体验。

• 你应该以最快的速度列出建议选项，大概三个字左右，就要快速列出候选项了，以来减少用户后面的输入。

• 控制在十个选项之内，不要用滚动条，以让信息不会过多。

• 支持键盘选择，当用户选到最后一个选项时，下一个选项应该转到第一个。ESC键应该可以让用户离开候选列表。

• 标出输入与建议信息的不同处（例如：输入信息用一般字重，建议信息用加粗字重）。
  

  

9.请让用户更加清楚什么可以搜索

一个好主意是列出一些搜索例子在输入栏中，以来提示用户这个搜索栏具有的功能。如果可以允许用户搜索多项内容，用一些提示会更好（例如：IMDb）。HTML5让我们很容易通过 placeholder 做到这一点。

Tips: 控制你提示内容的字数，否则会增加认知负荷。

结论

搜索是一项很基础的功能，并且在内容繁多的应用或网站里担任重要角色。即使是一些很小的改动，只要能让搜索框更加恰当的显示，使用。可用性和用户体验都会显著的整体提升。

关于本文

译者：@Garrik
译文：https://zhuanlan.zhihu.com/p/25555766
作者：@Nick Babich
原文：Design a Perfect Search Box