如果您正在阅读本文，那么您必须设计具有搜索功能的网站或应用程序。在本文中，我将介绍五种可以帮助您设计更好，更有用的搜索机制的最佳实践。

最佳实践

　　1.视觉线索

无论是创建任何类型的用户界面，快速扫描屏幕所需的工具都是您设计的一部分。这样做可以确保您的用户知道在哪里可以找到他们想要的内容，何时需要使用它，以及当他们与之交互时会发生什么。

　放大镜图标

使用放大镜图标，我不能保证这会加快搜索栏搜索速度。但是图标越简单，其允许的细节越少，浏览速度越快。虽然图标本身没有容器或按钮，但它实际上使搜索更加困难。

　极简主义搜索图标的示例

人们通常会想到一个放大镜图标来表示搜索工具，即使它没有标签描述。但是，仅显示图标的搜索框使搜索更加困难。 （来自NNG Katie Sherwin的“搜索设计中的放大镜图标>”的评论）

　一个实际的搜索按钮

并非所有用户都是经验丰富的网民，这意味着并非每个用户都知道，一旦您在输入框中输入查询，请按Enter键获取相关信息。因此，设计搜索输入旁边的实际按钮可以帮助用户确认他们的下一个动作，从而减少用户所需的认知负荷。

　注意：避免在输入框的左侧，顶部或底部放置按钮。

　提示：

您可以在文本输入获得焦点之前隐藏输入按钮。

确保按钮尺寸适中，以便在点击时感觉自然。

　2.输入特性

有时候，更有光泽，更强大或更大规模的东西不一定会吸引人们的注意力，搜索模式是一样的。最好将它改成你理想的风格！但请记住，搜索框的设计必须与您的网站或应用程序的主题相匹配，同时确保它足够引人注目。

Youtube的新（令人惊叹的）黑色主题通过保持搜索模式与其他元素保持一致来完美地说明这一点。

“搜索框不是尽可能长的 

但也要确保输入长度不要太短。根据NNG的研究，它有27个字符的输入，可以满足90％的用户的需求。

图：常见的5字26字符搜索示例。

　　3.透明占位符

对输入的占位符文本使用适当的副本非常重要，这通常是用户可以搜索的内容。这可以确保他们知道要搜索的内容，并且不会因查询写入查询失败而受挫。最近，Web工具可以通过在HTML5中添加提示作为占位符来轻松完成此操作。

添加占位符有助于用户过滤查询内容。

　提示：

众所周知，人类短期记忆容量有限。因此，尽量保持占位符文本的副本简洁明了。使用较长的提示会增加用户的认知负担并影响用户体验。您可以在此处找到有关有害标签和占位符的更多信息。

在某些项目中，可能需要设计更具体的搜索功能。在这种情况下，您可以使用悬停工具提示来确保提示始终可见，以便用户可以将其短期内存用于其他任务。

在此示例中，工具提示可帮助用户使用正确的查询格式并查找可搜索的内容。

　4.引导查询，即自动提示

很多时候，用户正忙于考虑搜索结果，而不是专注于构建适当的搜索查询。当用户无法找到他们期望的结果时，这也是一种负担。这个用户的操作错误也是设计师的错误。在这里，自动提示可以派上用场。

使用自动提示的目的不是为了使搜索更快，而是在构建用户查询时提供一些帮助。您可以通过执行预测的搜索模式来完成此操作。例如，用户想问这个可怕的单词是什么？预测的搜索模式基于用户正在编写的所有字符，猜测输入的单词，预测他们的查询将是什么并弹出自动建议。

由Jakob Nielsen领导的团队研究过，大多数用户无法从第一个查询中收集他们期望的搜索结果。因此，通过设置引导查询，除了大大减少用户执行的工作量之外，还可以增加他们找到所需内容的次数。

提示：

不要给他们任何虚假的自动建议。确保您使用的所有机制都合理并满足您的用户需求。

为您的用户提供最近搜索历史的视觉提示，这对于重复搜索尤其有用;

尽量保持简单，并使用最少的元素来分隔不同的建议（即填充和边框）;

将您提供给用户的搜索建议数量限制在5到9之间。记住Miller在用户体验设计中的法律应用。

　5.不要忘记定位

用户对AD Shaikh&K。Lenz在2006年发现的某些UI元素和模式的位置有一定的要求。搜索是所需模式之一，大多数用户希望在顶部中心或右上角找到它。界面，如上面提到的研究结果和下图所示。

“许多参与者希望找到“网络搜索引擎”。在页面的右上角或靠近左上角;

尝试根据这些知识找到搜索模式，这将确保您的用户可以轻松找到它。

　结论

我认为每天我们都会处理很多所谓的最佳实践，但通常很容易忽略一些简单的主题，比如我在本文中提到的那些主题。搜索是一种不断发展的模型，我知道本文并未涵盖所有现有指南。考虑到这一点，我希望本文能够帮助一些初学者，甚至是UX和UI设计的老手。

作者：Bruno Charters

地址：https://uxplanet.org/getting-the-search-pattern-right-e71dbb59dc67

本文由@Mockplus团队发布，未经许可不得复制。

该地图来自unsplash，基于CC0协议