搜索功能的设计和易用性就会显得尤为重要

　　搜索功能的设计和易用性就会显得尤为重要

　　看到这个标题，你可能会觉得搜索不需要设计，毕竟它只是一个文本输入框和一个搜索按钮的组合。

　　然而，在信息爆炸的互联网时代，搜索框已经成为我们每天必须使用的功能。当用户面对复杂的网站，发现自己想看的东西很难找到时，他们会立即找到并使用搜索框快速达到目的。这时候，搜索功能的设计和易用性就显得尤为重要。这次我将从“搜索框（一）”和下一期“搜索结果（二）”）中分享正确的做法。

　　1.使用放大镜图标

　　在用户界面中，放大镜图标和搜索功能就像一个影子。图标是操作对象、动作或想法的视觉表达。用户拥有一个普遍认可的图形元素，我们通常称之为图标。放大镜就是这样的图标之一。

　　

　　

　　提示：尽量使用最简单的图形，少用细节修饰会提高识别效率。

　　2.显示搜索栏

　　如果你设计的产品中搜索是高频操作功能，你应该把它放在一个比较明显和方便的位置，让用户可以快速找到并使用。

　　

　　

　　显示完整的搜索提示栏很重要，因为隐藏在图标中的搜索会使搜索功能不那么明显，增加无效交互的成本。

　　

　　

　　尽量避免这种形式的设计，因为它隐藏了搜索提示

　　3. 为搜索框设计一个搜索按钮。

　　搜索按钮可以在激活搜索框后清楚地通知用户其他操作，即使他们决定按 Enter 键。

　　

　　

　　提醒

　　4.每页都会出现搜索框

　　您的用户应该能够在每个页面上使用搜索功能，无论他们在网站的哪个位置，当他们找不到想要的东西时，他们都会尝试使用搜索功能。

　　5.设计一个简单的搜索框

　　使搜索框尽可能简单。根据可用性研究，默认情况下不显示高级搜索是一个更友好的选项。在下面的例子中，高级搜索会让用户感到困惑。

　　

　　

　　6.把搜索框放在用户喜欢看的地方

　　也就是说，搜索框的位置应该尽可能满足大多数用户的心理预期。

　　A.Dawn Shaikh 和 Keisi Lenz 进行了一项研究。研究结果（如下图所示）表明了 142 名参与者期望搜索功能出现在调查中的网页上的位置。研究发现，将搜索功能放在网站的左上角或右上角是最佳选择。用户可以使用常见的“F形”扫描方式轻松找到它。

　　

　　

　　因此，将搜索框放在页面的右上角或中上区域是用户期望出现的位置。

　　

　　

　　提醒：

　　7.确保输入框能容纳足够多的字段

　　将输入框设计得太窄是设计师的一个常见错误。如果输入框不够宽，当用户在输入框中输入长文本查询时，意味着部分文本将看不到，用户无法轻松查看和编辑其查询内容，可用性将很穷。当输入框只允许输入有限的可见文本时，用户将被迫使用简短、不准确的查询，因为较长的查询难以阅读。根据用户希望输入的文本来调整输入框的大小是一个很好的做法，这样用户阅读和查询会更容易。

　　研究表明，27 个字符的搜索框可以满足用户 90% 的搜索需求。

　　

　　

　　提示：考虑使用宽度可变的搜索框（激活输入框后输入框变宽），这样可以节省屏幕空间，并为用户提供足够的视觉提示以快速查找和执行搜索操作。

　　

　　

　　8.启用“搜索关联”机制

　　“搜索关联”（自动建议）可以帮助用户根据他们输入的文本预测他们可以找到的搜索结果。搜索关联的目的不是加速搜索过程，而是帮助用户建立正确的搜索查询机制。一个常见的场景是：当用户第一次搜索没有得到想要的结果时，他们以后会使用较少的搜索，这意味着成功率较低。事实是，用户只会放弃搜索。所以搜索联想会帮助用户更好地构建搜索路径。

　　Google 从 2008 年就掌握并实现了“搜索关联”。由于搜索引擎会记住用户每次拥有的相同搜索记录，因此 Google 节省了时间，为用户创造了更便捷的体验。

　　提醒：

　　

　　

　　9.描述用户可以搜索的内容

　　您可以在输入框中添加搜索示例，告诉用户可以搜索哪些内容以及如何使用该功能。如果用户可以搜索多个条件，请使用输入提示方式说明。

　　（Html5技术非常容易在输入框中添加文本占位符）

　　

　　

　　提示：简要概述，否则会增加用户的认知负担。

　　结论

　　搜索是构建内容繁重的应用程序或门户网站 的最基本和最关键的功能。即使是最小的变化，例如输入框中可输入的字段大小或搜索框中的提示字段信息，也能有效提高搜索的可用性和整体用户体验。