设计一个完美的搜索框

一次英语翻译练习，不保证准确性。

搜索框是输入框和提交按钮的组合。人们可能认为搜索框不需要设计，毕竟它只有两个简单的元素。然而，在内容繁多的网站上，搜索框是使用最频繁的设计元素。当用户面临一个相对复杂的网站，为了快速且简便地找到最终目标，他们会马上去找一个搜索框。由此可见，搜索框的设计和可用性至关重要。

在这篇文章中，我们将看到为了节省用户到达想去的地方，搜索框有哪些地方可以做得更好。

最佳的处理方法

1. 使用放大镜 icon

搜索框始终搭配放大镜 icon。icon 的定义是物体、行为、概念的视觉呈现。一些 icon 已经成为用户通识的标志。放大镜就是其中之一。

无须文字标签，用户就可以认出放大镜 icon。

Tip：使用具有象征的 icon，最简单的放大镜 icon 版本。图片细节越少，越能加速用户识别。

2. 显示搜索文本框

如果搜索对于你的网站或应用非常重要，那么应当将它放在显眼的位置，因为这是用户发现它的最快途径。

左边的搜索功能隐藏在 icon 上。图片来源：thinkwithgoogle。

显示完整的开放文本输入框非常重要，因为如果搜索隐藏在 icon 上，会导致搜索功能不那么明显，增加了交互的成本：

不要在搜索上使用渐进式的进入方式，因为它会模糊具体操作的上下文情景。图片来源：AntonioJDN

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

按钮帮助人们认识到存在额外的途径触发搜索操作——即使他们还是选择直接按下回车键。

 

Tips：

• 适当调整提交按钮的大小，使用户不必精确操作光标就能点到它。大的可点击范围使得按钮更容易发现和点击。
• 让用户可以同时使用回车键和按钮来提及搜索请求。因为，许多用户仍然保留着点击一个确切按钮来进行搜索的习惯。

4. 在每一页都放上搜索框

你应该在每页都提供搜索的入口，因为当你的用户找不到他想要的内容时，他们就会试着去使用搜索，不管是在网站的哪个页面。

5. 简化搜索框

如果设计一个搜索框，请确保它确实像个搜索框，并且能便捷地使用。根据可用性研究，默认情况下不显示高级搜索选项更具用户友好度。高级搜索选项（例如下面的布尔查询搜索）可能会混淆尝试使用它的用户。

 

6. 把搜索框放在用户期待的位置

不要因为搜索框不够显眼或者不易发现，而使得用户必须费力去寻找它在哪。

下面的图表由A. Dawn Shaikh和Keisi Lenz的一项研究得出：它显示了参与调查的142位参与者对于网站中搜索框所在位置的预期结果。研究表明最恰当的位置是在网站每页的左上角或右上角，在这些位置用户通过 F 形的视觉扫描模式能够轻松地找到它。

 

该图展示了调查参与者想寻找到搜索框的位置。右上角仍然是用户期待找到搜索框的首要位置。

因此，将搜索框放在页面布局的右上角或顶部中心，那样才能确保你的用户在期待的位置找到它。

 

信息量大的 Youtube 把搜索放在顶部中心。

Tips：

• 理想情况下，搜索框应该完美融入网站的整体设计，但在用户需要时又能非常亮眼。
• 内容越多，搜索功能应该越显眼。如果搜索对你的网站至关重要，那就大量使用对比，以便文本和图标从背景和周围的元素中脱颖而出。

7. 恰当的文本长度

输入文本框太短是设计人员的常见错误。若用户键入太长的查询词条，此时只有一部分文本可见，使得用户无法查看并便捷地编辑输入的文本，用户可用性也就相当地差。实际上，当搜索框只显示有限的可见字符时，较长的查询词条就不方便阅读了，用户只能被迫在搜索框中输入短的或不精准的查询词条。如果输入文本框的大小能根据用户的预期输入内容进行调整，那么对于用户的阅读和理解将十分便捷。

一般的经验法则是提供27个字符的文本输入阈值。（这能够覆盖90%的查询输入）

 

Tip：考虑使用可增长的搜索框，点击后扩展文本输入框。这样既可以节省屏占比，同时也能为用户快速查找和执行搜索提供足够的视觉线索。

 

8. 使用自动推荐机制

自动推荐机制根据输入的字符尝试预测搜索词条，以此来帮助用户找到合适的查询词条。自动推荐机制不是加快搜索过程，而是引导并帮助用户构建他们要搜索查询的词条。一般用户并不擅长查询词条的规范化：如果他们第一次搜索没有得到好的结果，那之后的搜索也很少成功。事实上，他们通常会放弃再去搜索了。如果自动推荐机制效果良好，那么就能帮助用户找到更佳的搜索词条。

Google 搜索精通这种机制，并且自 2008 年便开始贯彻实施。由于用户倾向于多次搜索相同内容，通过记录搜索历史，Google 节省了用户时间并创建了更便捷的体验。

Tips：

• 确保自动推荐机制是有效的。设计不善的自动推荐可能会混淆和分散用户的注意力。因此，为了改善这项工具，应当使用拼写自动校正、识别词根和文本预测。
• 你应该尽早提供自动推荐（比如在输入第三个字符时），提供即刻响应的价值并减少用户数据的录入工作。
• 最多提供 10 个条目（无滚动条），使信息不会过载。
• 允许使用键盘方向键，一旦向下滚动到最后一条，让用户能够返回到推荐列表的顶部。Esc 键应该也可以让用户退出推荐列表。
• 通过高亮区分输入信息和推荐信息（例如，输入的文本是标准字重，而推荐的词组则是粗体）。

 

自动补充机制能够节省用户时间，甚至可以建议内容合理的措辞。

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

有一个好的创意是在输入文本框中提供示例词条，提醒用户这个功能可以用来干什么。如果用户可以多条件搜索，使用输入提示的手法来进行功能解释。（例如下方的 IMDb 示例）Html5 可以轻松地将占位符文本添加到文本输入框中。

 

Tip：将你的提示限制为短句，否则事实上你反而增加了认知的负担。

总结

搜索是构建内容繁多的应用或网站的基本功能或关键要素。即时如同恰当的输入文本框大小，或是推荐预测搜索字段这样微小的变化，依然能显著提升搜索的可用性和整体的用户体验。

谢谢阅读！

延伸阅读：设计最佳的搜索结果

---

原文链接：Design a Perfect Search Box 作者信息：Nick Babich，软件开发、技术爱好者、UI/UX 爱好者，babich.biz