如何设计出正确的搜索模式？

注：如果你正在阅读这篇文章，那么你一定正在设计一个有搜索功能的网站或应用程序。在这篇文章中，我将介绍 5 个最佳实践，这些实践可以帮助大家设计了更好、更实用的搜索机制。

最佳实践

1.视觉线索

无论创建任何类型的用户界面，为用户提供快速扫描屏幕所需的工具是你设计的一部分。这样做可以确保你的用户知道在什么地方找到他想要的东西，何时需要使用以及与其交互后会发生什么。

放大镜图标

使用放大镜图标，我无法保证这样会加快了搜索栏查找的速度。但是图标越简单越好，较少的细节可以让用户更快地浏览。虽然，一个图标本身没有输入容器或按钮，实际上会使搜索更加困难。

极简主义搜索图标的示例

人们通常认为放大镜图标表示搜索工具，即使它没有标签说明。但是，只显示图标的搜索框会使搜索变得更加困难。(言论来自NNG凯蒂谢尔文的“搜索设计中的放大镜图标”)

一个实际的搜索按钮

不是所有用户都是资深网民，这也就意味着并不是每个用户都知道，一旦在输入框里输入查询内容，按下回车键就可以得到相关信息。因此，在搜索输入旁边设计一个实际的按钮可以帮助用户确认他们的下一个动作，从而减少用户所需的认知负荷。

注意：避免将按钮放在输入框的左侧，上方或下方。

提示：

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

确保按钮的大小适中，以便点击起来感觉自然。

2.输入特性

有时候，越是闪亮，强大或面积大的东西也不一定能引起人们的注意，搜索模式也一样。不如将它改为你理想的风格！但切记搜索框的设计必须与你的网站或应用程序的主题相吻合，并同时确保它足够引人注目。

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

“搜索框也并不是越长越好”

但也要确保输入长度也不要过短。据NNG的研究表明：拥有能够容纳 27 个字符的输入，可以满足90％的用户的需求。

如图：一个常见的 5 词 26 个字符搜索的例子。

3.透明占位符

为输入的占位符文本使用适当的副本很重要，它们通常是暗示用户可以搜索的内容。 这确保了他们知道要搜索什么，并且不会因编写错误导致查询失败而感到沮丧。最近，Web工具可以通过在HTML5 中添加提示作为占位符来轻松完成此操作。

添加占位符可以帮助用户过滤查询的内容。