一个搜索框多个按钮_搜索体验设计指南（一）

搜索框是输入字段和提交按钮的组合。有人可能会认为搜索框不需要设计，毕竟这只是两个简单的元素。但是在内容密集的网站上，搜索框通常是最常用的设计元素。当用户遇到相对复杂的网站时，他们将立即寻找搜索框以快速而轻松地方式到达目的地。搜索框的设计及其可用性变得很重要。 在本文中，我们将看到如何改进此元素，以节省用户前往所需位置的时间。

1.使用放大镜图标

搜索框框始终带有放大镜图标。顾名思义，图标是对象、动作或想法的直观表示。有一些图标得到了用户的普遍认可，放大镜图标就是这样的图标之一。

2.突出显示搜索字段

如果搜索对您的应用/网站很重要，则应突出显示它，因为它可能是用户发现信息的最快途径。

显示完整的文本字段很重要，因为隐藏在图标后面的搜索会使搜索功能不那么引人注目，并增加了交互成本：

3.为搜索框提供搜索按钮

按钮可以帮助用户认识到即使他们决定通过按Enter来执行此操作，也需要执行其他步骤来触发搜索操作。

提示：

适当调整提交按钮的大小，以便用户不必非常精确地指向鼠标。较大的点击区域使查找和单击更加容易。

4.在每个页面上放置搜索框

应该始终提供对每个页面上搜索框的访问权限，因为如果用户找不到他们要查找的内容，无论他们在网站中的位置如何，他们都将尝试使用搜索功能。

5.使搜索框简单

如果设计一个搜索框，请确保它看起来像一个搜索框，并且使用起来尽可能简单。根据可用性研究，默认情况下不显示任何高级搜索选项更加用户友好。高级搜索选项(例如下面示例中的布尔搜索查询)可能会使尝试使用它的用户感到困惑。

6.将搜索框放在用户希望找到的位置

当用户必须使用搜索框时，因为它不突出并且不容易发现，导致它的效果不佳。 您在下面看到的图表是由A. Dawn Shaikh和Keisi Lenz进行的一项研究得出的：它显示了在142位参与者进行的调查中，站点搜索表单的预期位置。研究发现，对用户来说最方便的位置是站点上每个页面的左上角或右上角，用户可以使用常见的F形扫描模式轻松找到它。

因此，将搜索框放置在布局的右上角或中上角区域，可以确保用户可以在期望的位置找到它。

提示：

• 理想情况下，搜索框应完全适合网站的整体设计，但在用户需要时可以稍微突出一些。
• 您拥有的内容越多，您想要显示的搜索功能就越突出。如果搜索对于您的站点至关重要，请使用大量的对比，以便字段和图标从背景和周围的元素中脱颖而出。

7.适当的字段大小

使输入字段太短是设计人员中的常见错误。当然，用户可以输入长查询语句，但是一次只能显示一部分文本，这意味着可用性很差，因为用户无法轻松查看和编辑其查询语句。实际上，当搜索框的可见字符数量有限时，由于较长的查询语句将很难且不方便阅读，因此用户被迫使用简短且不精确的查询。如果输入字段根据其预期输入的大小而定，则它们既易于阅读，也便于用户理解。

提示：考虑使用不断增长的搜索框，该搜索框会在单击时扩展文本输入字段。这样可以节省屏幕空间，同时仍然为用户提供足够的视觉提示，以快速查找并执行搜索。

8.使用自动提示机制

自动建议机制可以通过尝试根据输入的字符来预测查询来帮助用户找到合适的查询。自动建议机制不是要加快搜索过程，而是要指导用户并帮助他们构建搜索查询。典型的用户在查询表述方面非常差劲：如果他们在第一次尝试中没有获得良好的结果，那么以后的搜索尝试将很少成功。实际上，他们经常放弃。当自动完成建议有效时，它们可以帮助用户更好地表达搜索查询。

Google搜索从2008年开始实施，就掌握了这种模式。由于用户往往会通过记住搜索历史来多次搜索相同的内容，因此节省了时间，并提供了更为便捷的体验。

提示：

• 确保自动建议有用。设计不当的自动建议可能会使用户感到困惑和分心。因此，请使用拼写自动更正，词根识别和预想性文本来改进工具。
• 您应该尽快提供自动建议，例如在输入第三个字符之后，以提供即时价值并减少用户数据输入的工作量。
• 提交的内容少于10个(并且没有滚动条)，因此信息不会变得混乱
• 允许使用键盘导航获取建议列表。用户向下滚动到最后一项之后，他们应该返回列表的顶部。 Esc键应允许用户退出列表。
• 突出显示输入信息与建议的信息(例如，输入文本具有标准的粗细，建议的术语具有粗体)。

9.明确说明用户可以搜索的内容

最好在输入字段中包含一个示例搜索查询，以向用户建议该功能的用途。如果用户可以搜索多个条件，请使用输入提示模式进行解释(即下面的示例中的IMDb)。 HTML5使得在输入字段中包含占位符的文本变得容易。

提示：将提示的内容限制为几句话，否则实际上会增加认知负担。

结论

搜索是构建内容繁多的应用程序或网站的一项基本活动，也是至关重要的元素。即使是很小的更改，例如输入字段的适当大小或指示搜索字段中包含哪些信息，也可以显着提高搜索的可用性以及整体用户体验。

原文链接：https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c