很抱歉断更了！！！这段时间一是因为工作上的原因导致精力不够用，二是因为在等作者的授权。庆幸的是都已经解决，作者回复同意我继续进行翻译工作——非独家翻译权，其他小伙伴们依旧可以联系作者获取授权。

以后尽量保持一周一更，盼望跟大家互相学习讨论。对文中观点或我翻译有误的地方欢迎大家留言指正。

输入框是由一个输入字段框与一个提交按钮组成。想必有很多人会觉得一个搜索框有什么好设计的，他撑死也就两部分。但是，在内容繁多的网页上，搜索框确是使用频率最高的设计元素。当用户访问一个相对复杂的网站时，他们会立即寻找搜索框，利用搜索来快速便捷的找到想要的东西。所以说搜索框还是得进行设计的。

 

在本文中我们会看到如何优化搜索框，以便节约用户的时间，提高效率。

 

最佳案例展示

1、 使用放大镜图标

时刻为搜索框配一个放大镜图标。就定义而言，图标就是对象、动作或想法的的可视化表现。有些约定俗成的图标，放大镜图标就是此类图标，暗指搜索。

 

小提示：使用概括的图标——最简洁的放大镜图标。视觉元素越少越利于辨识。

 

2、 突出显示搜索字段

如果搜索功能是你的应用或者站点的非常重要的一个功能，那么突出显示它。这样用户能更快的找到它（搜索）。

 

显示展开后的带输入字段的搜索框！简版的搜索图标不易被发现且徒增操作步骤。

 

3、 为搜索框增加一个“开始搜索”的按钮

这个按钮让用户明白可以通过点击此按钮来执行搜索操作——虽然他们可能会选择通过回车来执行搜索。

 

小提示：

按钮的大小要适中，如果太小的话用户点击起来会很费劲。适当增加按钮的点击范围能让用户更方便的查找和点击。

要允许用户可以通过键盘的回车（Enter）键及点击搜索图标来进行搜索。有很多的用户还是习惯通过点击搜索按钮来进行搜索。

 

4、 搜索全局显示

应该让搜索框在每个页面都显示。用户在找不到自己想要的内容时会想通过搜索来找到，而他们不会在意此刻他们正处在哪个页面。

 

5、 让搜索简单易用

如果你设计了一个搜索框，请确保它看起来是一个搜索，并且非常容易操作。据可用性研究显示，默认状态下不显示高级搜索的选项会更加友好。高级搜索选项（例如下图实力中的布尔搜索查询）可能会让用户感到困惑。

6、 把搜索框放到用户希望找到他的地方

当用户需要去寻找搜索框的时候是非常糟糕的。这说明搜索框设计的并不突出也不易查找。

 

以下图表展示了A.Dawn Shikh 与 Keisi Lenz 的研究：展示了在142个参与者的调查中，网站搜索框的期望位置。研究发现，对用户来说最方便使用的地方是网站的左上角与右上角位置。用户可以使用常见的F形扫描模式轻松找到它。

 

所以说，搜索框要放置在网站的左上角或者中间位置，这是用户所期望的位置。

 

小提示：

理想状态下，搜索框应该完全符合网站的整体设计，并在用户需要时略微凸出显示。

你拥有的内容越多，你就越想突出显示你的搜索功能。如果搜索对于你的网站是必不可少的，增加对比度以便让字段和图标从背景和周围元素中脱颖而出。

7、适当的宽度

当今的搜索框宽度太短是一个通病。在这样的搜索框里用户当然是可以输入长问题的，但是输入的问题只能显示一部分。这是非常不好的体验，因为这不利于用户查看及编辑。事实上，当搜索框的宽度较短时，用户会被迫使用简短，不精确的查询。如果在这里输入很长的查询问题会非常不方便。相反，搜索框的宽度若根据预期输入调整大小，则他们更容易阅读与理解。

 

经验法则是使用27个字符的文本输入(它可以容纳90%的查询)。

小提示：可以考虑使用可伸缩的搜索框，就是在输入框获取焦点后宽度变宽的那种。这样既节省了屏幕空间，又能给用户提供足够的视觉提示来快速查找和执行搜索。

8、使用自动搜索推荐机制

自动推荐机制根据用户的输入字符来预测、推荐给用户合适的查询词。自动搜索推荐机制不是为了提高用户的搜索速度，而是为了帮助用户输入正确的搜索词来完成搜索。一个非常有代表性的规律是：如果在搜索时第一次就搜索失败，以后的搜索成功的机率也不大。因为之后他们就放弃了。正是自动搜索推荐建议给用户推荐了合适的搜索问题。

谷歌搜索在2008年的时候开始使用使用这种模式。由于用户倾向于多次搜索同一问题，通过记住搜索历史记录，谷歌可以节省时间并创建更加便捷的体验。

 

小提示：

确保自动搜索推荐机制是有用的，不然的话反而会令用户困惑。可以使用拼写自动更正、词根识别和文本预测等工具。

 

提供搜索推荐的速度要足够迅速，差不多在输入三个字符的时候就应该出现搜索推荐。通过提供及时价值并减少用户的数据输入工作。

 

不要让搜索建议的数量超过10条（不要滚动条）以造成信息过载。

 

允许通过键盘（的上下键）进行条目的选择；当（利用上下键）选中最下方一个选项再点击一次（下键）时，应该再选中第一个选项；点击esc键可以取消建议列表。

输入的词与建议词应该有明显区别（加粗加黑建议词）—自己在百度里输入一下试试。

 

9、搜索内容提醒

在搜索框里简单的提示用户可以输入什么样的内容是个不错的选择。（例如邮箱的输入框里给提示了邮箱的格式）。如果用户可以搜索多个条件，则使用输入提示模式进行解释(即，下面示例中的IMDb)。现在利用HTML5技术，可以在输入框内通过占位符来做提示。

小提示：提示要简短，不然会增加认知负担。

 

总结

搜索时一项基本活动，也是构建复杂应用与网站的关键因素。即便是非常小的改变，例如输入字段的大小或指示搜索字段中的信息也可以显著提高搜索可用性及整体用户体验。

 

多谢观看！！！

硬广：烦请喜欢我搬运的文章的朋友去浏览一下我的个人网站UxBooks，增加点点击量。期望大家能多浏览几页，别进入首页就退出啊。