搜索功能仅使用放大镜图标的优缺点

摘要：人们通常认为放大镜图标表示搜索，不幸的是，仅显示图标会使搜索功能更难找到。

关键词：搜索，视觉设计，可用性

搜索功能主要设计原则：

放大镜图标节省空间，因此更多网站使用它。正如我们从发现中看到的那样，仅有图标的搜索功能有一些明显的缺点。

5 个显示近年来按钮和图标变化的搜索工具示例

我们建议不要使用最后一种设计。

使用放大镜图标

随着响应式设计的出现，仅有图标的搜索功能变得特别流行。

应用程序中使用的搜索工具，显示放大镜图标位置的变化

图标占用的空间更少。从视觉上看，它不那么突出，因此也不那么引人注目。

我们不建议桌面网站使用纯图标模式。仅图标搜索在移动设备上很有意义，因为通常屏幕空间较小，图标和标签也较少。但是在桌面上，有更多的东西要看，因此，独立的搜索图标更容易在人群中迷失。

如果图标很明显并且具有足够强大的可点击性，则不需要标有“搜索”的单独按钮。

人们首先查看右上角进行搜索。如果他们在那里没有找到它，他们就会开始扫描页面顶部。

只有一个搜索图标的缺点是用户必须等待搜索框出现，找到开始输入的位置，有时再单击一次以专注于输入字段。这些额外的步骤延长了搜索过程，在搜索过程中，只需单击文本字段并立即开始输入会更快。

图标标签帮助人们更快地做出决定：它们提供了关于接下来会发生什么的良好信息气味。

1、最重要的是，在桌面版网站的图标旁边保留一个打开的文本输入字段。

2、使用最简单的放大镜图标。更少的图形细节可以加快识别速度。

3、使用带有背景色填充的大图标。更大的可点击区域使其更容易被发现和点击。

4、使用大量对比，使图标从背景和周围元素中脱颖而出。

5、将搜索工具放在右上角，这仍然是人们期望找到搜索的第一个位置。

6、让用户使用Enter键并单击图标**提交搜索。**很多人仍然有点击搜索按钮提交搜索的习惯。

7、考虑使用自动变长的搜索框，它会在点击时扩展文本输入字段。

8、不要用其他可能分散注意力的图标将周围区域挤满。给予搜索应有的优先权。

9、不要孤立搜索，这会使搜索变得像拥挤一样难以找到。

10、当用户单击搜索图标时，在该图标附近显示文本输入字段。将其放置得较远会迫使用户在开始输入之前找到该框，从而增加了用户的交互成本。

11、不要让人们点击两次（或根本不点击）。在某些情况下，用户必须先单击图标打开搜索框，然后单击将输入焦点移动到搜索字段中。