搜索栏，对网站来说必不可少，因为它通常是用户访问的第一个地方。确保有效和高效的搜索输入，可以提高2-3倍的转化率。我们列出了创建最佳搜索框的关键性原则。

1. 解剖搜索栏

搜索栏由多个元素组成:

  • 容器 Container：输入表单字段的边界区域
  • 占位符 Placeholder / 输入文本 Input text：在实际文本输入之前，用来引导用户的文本
  • 搜索按钮 Search button
  • 内部上下缩紧 Padding top and bottom
  • 内部左侧缩进 Padding left

构建输入时考虑的要点：

明确用户可以搜索什么：Placeholder 文本应表明用户可以搜索什么，这将有助于管理他们对即将呈现的结果的期望，试着把这条信息浓缩成尽量少的文本。

输入字符长度：让搜索字符足够长，以便用户输入适当宽度的信息或数据，并保持可见。如果空间不足，可以添加一种机制，使输入框在选中时展开。

2. 使用放大镜图标

你应该总是用放大镜配合搜索框。放大镜是一个被普遍认可的搜索标志，用户会找到它。不要让设计过于复杂，否则用户需要花更多的时间来理解图标。

如果仅使用放大镜，很难确定搜索的位置，还需额外多一次点击，用户才可以输入他们要查询的内容。

3. 自动完成

自动完成是一个强大的功能，它指导用户应该搜索什么。当你输入搜索字符时，它会根据你输入的字符来预测你的查询。通过提供选项和单击，可以节省用户的时间，并支持输入正确的拼写或完整的数据字段。

前缀匹配，是最常见的自动完整类型，它是搜索输入匹配词的初始字符。你还可以使用中缀（字符中间）匹配，其中匹配可以在搜索字符中的任何位置。

还可以为用户提供实际的结果。这也是电商网站在输入时出现实际购买选项使用的一种技术。在实现自动完成时需要考虑以下几点:

  • 对数据进行相应的样式设置——明确数据输入如何匹配显示的结果；
  • 确保支持键盘箭头导航；
  • 考虑如何分解返回的信息并适当地设置样式，例如，你可能希望显示最近的搜索和前缀匹配

4. 自动更正

自动更正，是一种数据验证方法，可以用最可能的匹配来更正用户的输入。它通过支持阅读困难或有拼写问题的用户，来节省时间并支持可访问性。我有诵读困难，当一般的拼写检查器无法发现某些错误时，我经常使用自动纠正。这并非偶然——谷歌拥有一个巨大的虚拟词典，包含了人们在网上搜索时输入的所有单词，而且它在不断地学习。

5. 搜索栏的位置

Dawn Shaikh 和 Keisi Lenz 对143名参与者进行的一项研究发现，参与者希望看到搜索栏出现在页面的右上方，或者通常只出现在页面的顶部。无论你把它放在哪里，都要保持明显，并始终把它放在所有页面的相同的位置。

结论

随着用户体验的发展，你应该考虑加入新的机制，如语音命令。当你在页面上进行搜索时，首先要考虑用户想要的是什么，以及你如何使体验尽可能无缝。我们的工作是让用户尽快找到正确的内容。

本文翻译自：https://makeitclear.com/insight/ux-ui-tips-a-guide-to-the-principles-of-search-inputs?ref=webdesignernews.com