译者心得：

即使是看起来非常简单的搜索功能的设计，都包含着非常多的细节，每一个细节都可能影响体验。
如何去考虑到这么多的细节呢？除了在设计过程中尽量考虑清楚多场景、多角色和多环境的情况，还有针对每一个领域都多多参考一些经验法则。

搜索就像是用户与应用或者网站之间的一场对话：用户通过查询表达他们的信息需求，应用或者网站以一组搜索结果作为回应。用户在搜索时期待流畅的体验，并且他们往往基于一两组搜索结果的质量就会对应用的价值做出快速的判断。

在设计搜索和搜索结果背后的UI时，有很多事情需要考虑。为了方便阅读，我将这篇文章分为两个主要部分：搜索框设计和结果页布局。虽然根据你的需求和目标的不同（比如，对于你的网站来说搜索可能是个主要的/次要的特性；提供平行选项可能是个不利的或者有利的选择），确切的建议未必适用，但还是有一些适用于很多不同类型的应用和网站的通用技巧。在我们开始之前，先问一个重要的问题：什么时候你会需要搜索？

什么时候应该（或者不应该）在网站上提供搜索

越小的网站，不提供搜索可能越好。对于一个内容有限（比如，少于100-200页）的网站来说，不需要搜索。

当网站变得越来越大和复杂的时候，搜索就变得越来越重要。电子商务网站可能是提供搜索的最常见的例子，因为用户在寻找具备特定属性的产品。在打的电商网站，搜索栏会离开网站头部并在界面中承担一个核心角色。多达30%的访客会使用网站的搜索工具，并且存在完全知道自己想找什么的高动机的购物者。

对于那些通过信息传递提供服务的网站（新闻门户网站），以及提供航班、旅程、交易的预定服务的网站来说，搜索是必要的。

当你访问Skyscanner的主页，注意力会首先集中在搜索框

搜索框设计

搜索框是输入区和提交按钮的组合。有人可能会觉得搜索框不需要设计；无论如何，它只有两个简单的元素。但是因为搜索框已经成为了以内容为主的网站中使用率最高的设计元素，它的可用性就变得尤其重要了。

更明显地展示搜索框

搜索框设计中最重要的规则是，让它可被发现。如果搜索在你的应用或者网站中是一个重要功能，那它就应该足够显眼，因为它是发现内容的最快路径。

保留开放的文本输入区。用户希望可以快速输入搜索词。

将搜索隐藏在按钮下面会带来一些负面结果：

• 让搜索功能不容易被注意到。如果没有使用一个开放的文本输入区，搜索就会占据更少的位置。从视觉上，它就会变得更加不显眼所以很难注意到。
• 增加了交互成本。也就是说，为了进入搜索框用户需要做额外的操作。

不要用渐进展开的搜索按钮因为内容会被遮挡

使用放大镜图标

从概念上，图标是一个物体、动作或者想法的视觉代表。用户对一些图标具有最通用的认知。放大镜图标就是其中一个。即使没有文字标签用户也会认为放大镜图标代表搜索。

Tip：使用最简单的放大镜图标，因为减少图片细节可以加速辨认。

将搜索框放在用户期望的位置

关于网站上的搜索框的最佳位置有一些持续的争论。但是很多著名网站比如YouTube、Amazon、IMDB、BEST BUY都将搜索框放在顶部中间或者页面右上角的位置。A. Dawn Shaikh和Keisi Lenz创建了一个图表，显示了网站搜索框的预期位置，数据来源于他们做的一个包含142个被试的调查。研究发现对用户来说最方便的点是网站每个页面的右上角或者左上角，用户使用一般的F形扫描模式可以很容易地找到。如果把搜索框放在用户不期待的位置，意味着用户需要花费额外的精力去寻找搜索框。

用户在右上角寻找搜索框，如果没有找到，他们就会扫描页面顶部

Tip：使用热图或者眼动追踪工具去研究用户行为。这会帮助你识别出用户注意的地方。你可以把搜索框放在那个位置。

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

虽然通过按下Enter键也能轻易地出发搜索，有一些用户仍然会寻找一个传统的“搜索”按钮。同时这也允许用户通过传统的搜索按钮触发搜索，即使他们最终选择使用Enter键。

Tips：

• 确保搜索按钮的大小合适，别让用户需要精确地移动鼠标或者手指进行点击。更大的可点击区域可以让点击更加容易。
• 让用户通过Enter和点击按钮提交搜索。很多用户仍旧保留着点击按钮去提交搜索的习惯。为了避免键盘可及性问题，需要对表单进行测试。键盘测试的基础很简单——Tab键可以用来在表单控件之间导航，Enter键可以用来选中元素。

明确用户能搜索什么

在输入区中包含一个简单的搜索查询以提示用户可以怎样查询，这是个不错的主意。如果用户可以通过多种条件搜索，可以使用一个输入提示来解释。但是保证限制搜索提示的字数，否则会提高认知负荷。

占位符文本能够很好地提示用户能够搜索什么。

同时，正如Mike Madaio最近提到的，在某些情况下，占位符文本会带来可及性问题：当占位符文本在颜色上被设计得更淡时，会导致对比问题——无法满足网站可及性的通用规范（普通文本保持4.5:1的比例）（译注：在白底上的浅灰色文本无法满足网站对比度要求）。另外，根据W3C，占位符文本不能被辅助技术很广泛地支持，提高了这些用户正确地输入表单的难度。

在每个页面上放置搜索框

Tucker FitzGerald在另一篇文章中强调了让用户在每个页面都能触达到搜索框的必要性。用户最可能在他们找不到自己想要的内容时使用搜索框。对于像404这样的没有出口的页面来说尤其如此。

推特的404

合适的尺寸

输入区域太短是设计师常犯的错误。当然用户在端的输入区中还是可以输入长的搜索词，但是输入框中一次只能呈现文本的一部分，这就是不好的体验，因为用户不能够检查或者修改全部的搜索词。事实上，如果一个输入框能够看到的字符数有限，用户会倾向于使用短的、不精确的搜索词，因为长的搜索词不方便阅读。如果输入区可以根据预期的输入来确定尺寸，对用户来说就会更容易阅读和解释。一个经验法则是在输入框中显示27个字母（将搜索框延伸到27个字母的长度可以满足90%的搜索词）。

谷歌的搜索框足够容纳长句
亚纳逊的输入框很大，因为几乎所有人都会首先使用搜索

Tips：

• 用em设定宽度，不要用px或者pt。一个em就是一个m字母的高度和宽度（不管网站使用什么字号）。

• 如果需要保留空间，同时需要让搜索框明显，使用增长型的输入框，当用户点击的时候会展开。这能够节约屏幕空间，同时给用户足够的视觉线索去发现和执行搜索。

  
  当用户点击时，输入框延伸以保证用户可以输入搜索词

使用自动建议机制

自动建议是一个能够减少数据输入的有力工具。设计师通常认为自动建议机制是为了提高用户输入的速度，但是它实际上能够帮助用户创建他们的搜索语句。典型的用户都很不擅长构思查询内容：如果他们在第一次尝试时没有得到所需的结果，之后的搜索尝试也很少会成功。如果自动补全建议运行良好的话，就可以帮助用户创建更好的搜索查询。

Tips：

• 确保自动建议是有用的。设计得不好的自动建议反而会迷惑和分散用户注意力。所以，使用拼写自动校正，识别跟词以及可预测的文本以提高自动建议工具的效用。

  
  

• 建议的个数不要超过10个（并且不要使用滚动条），不要造成信息过载。

• 建议的列表要允许键盘导航。当用户滚动到最后一项时，应该能够返回到列表顶部。允许使用Esc退出列表。

• 明显区分输入的信息和建议的信息。比如，输入的文本使用标准的字体，而建议的文本使用粗体字。

• 为项目添加图片预览以及文字描述，以增强建议的功能。

LED HUT通过在自动建议中加入了图片预览，从而提高了搜索转化率

结果页布局

在帮助用户尽可能快速、简单和准确地输入数据后，你现在的目标应该是以清晰的和易于阅读的样式去提供最准确的搜索结果。结果页是搜索体验的关键部分：它提供了机会去引发出一个可以引导用户的信息需求的对话。

不要在用户点击搜索按钮后隐藏用户的查询

保留原始的文本。重新输入查询在很多信息旅程中是备受诟病的步骤：如果用户没有找到他们想要找的信心，他们可能会想要通过调整查询词重新搜索。为了让用户更加方便地做到这件事，把原始的搜索词留在搜索框中，这样用户就不需要重新输入完整的查询词了。

为你的信息选择一个合适的布局

展示搜索结果的挑战之一就是不同类型的内容需要不同的布局。两种基本的内容展现布局是列表视图和网格视图。经验法则：呈现细节用列表，呈现图片用网格。

让我们在产品页面的环境中检查一下这个法则。在选择列表视图和网格视图时关键的因素时用户在选择产品的时候需要多少信息。对于像电气用具这样的产品，用户选择产品时最重要的因素时模型数量、等级和维度，这时列表视图最合适。

列表视图更适合细节导向的布局，对于高规格的产品来说在结果页中包含产品介绍可以帮助用户选择

网格视图适用于当用户选择产品需要考虑的产品信息较少时。网格视图对于类似服装这样的产品来说很常用，因为用户通常通过产品的外观而不是文字描述来做决定。对于这些类型的产品，用户在意的是产品之间的视觉区分，而且更愿意在一个单独的长页面滚动而不是重复地在列表视图和产品细节页面之间转换。

网格视图更适合视觉导向的布局

允许用户为搜索结果选择列表视图或者网格视图。这让用户能够选择以自己更喜欢的方式浏览结果。

显示匹配结果的数量

显示搜索出来的结果的数量，以便用户可以决定他们要花费多长时间浏览结果。

匹配结果的数量让用户知道如何再次查询

展示搜索过程

理想情况下搜索结果应该马上呈现，但是如果做不到，应该使用进程指示器作为给用户的系统反馈。你应该让用户清晰地知道他们还需要等多久。

Aviasales网提示用户搜索需要花费一点时间

Tip：如果搜索花的时间比较长（超过10秒）你可以使用动画。好的动画可以分散用户的注意力并且让他们忽视了搜索的时间较长。

不要返回“无结果”

把用户丢在一个显示无结果的页面会令人感到沮丧，尤其是他们已经尝试搜索了好几次时。

在无结果页面上，你可以通过下面的两点帮助用户进行修复：

• 清晰地解释没有匹配的结果。

• 提供继续前进的起点（比如，在线商店可以从相似的类别里提供可选产品建议）。

  
  在HP的例子里一个“无结果”页面对用户来说没有出路。而形成鲜明对比的是亚马逊在无结果页面中使用了内容类别或者搜索词建议。

提供筛选和排序选项

当搜索结果看起来跟搜索词没有关系时，用户是感到崩溃的。筛选和排序可以帮助用户筛选数据。

• 排序和筛选不是相同的。不要把排序功能隐藏在筛选功能中——它们是两个不同的任务。不像筛选，排序不会限制展示什么内容，而是改变了结果呈现的顺序。
• 限制可视的筛选选项数量。因为我们的短期记忆只能将很少数量的信息（一般在7个项目或者更少）保留很短的时间，所以不要使用太多信息让用户超负荷——同时显示不多于7个可视的筛选选项。如果你的搜索需要很多筛选选项，就将其中一些默认折叠起来。此时需要添加一个链接“查看所有筛选器”确保它们都可以被触达。
• 对筛选器排序。定义你的网站的基本搜索标准，并且基于这些发现去组织筛选器。比如，Airbnb知道大多数人使用价格筛选器，所以他们将它放在了顶部。
• 确保排序逻辑对用户来说足够清楚。当展示了大量结果时，用户想要搞清楚的第一件事情就是排序规则。

• 清楚地显示什么筛选选项被应用到了搜索结果中。当用户进行了筛选后，在结果页顶部清晰地展示筛选范围。

  
  

好的搜索就是好的体验

对于创建一个内容为主的应用或者网站来说，搜索是一项基本活动和重要的元素。尽管细微的改动比如输入区的合适大小或者指出可以搜索哪些信息都能明显地提高搜索的可用性以及整体的用户体验。

翻译自：http://www.uxbooth.com/articles/best-practices-for-search/