【网站建设】如何为您的网站设计实用且好看的搜索栏

您是否曾登陆网站寻找某些东西，但不确定在哪里可以找到它？

您可能浏览了菜单并向下滚动了一点页面，但最终您无法找到您想要的确切产品/帖子/文章。对吧？在这种情况下，

您可能会做两件事：退出页面，或寻找可信赖的搜索栏。

如果您决定留下来，一个适当的搜索功能应该会接受您的查询并将您发送到目的地。问题解决了。这不是一种高端的体验，但在根本无法链接到主页上的所有内容的大型网站上，这是一种很难避免的体验。这就是为什么在为您的网站打造用户体验时，搜索功能的设计必须直观。如果访问者正在使用它，则意味着他们正在执行特定任务。而且，作为杭州网站建设专业公司派迪科技，我们的任务是帮助他们实现目标。我们的设计选择可以决定导航体验的好坏，这会转化为转化率或跳出率。在本指南中，我们将学习如何为您的网站创建不错的搜索栏。通过实施这些设计准则，您将帮助用户快速顺利地找到他们想要的内容。

您的网站需要搜索栏吗？

虽然对于包含搜索功能没有硬性的“是”或“否”，但较大的网站通常比较小的网站更能从搜索中获益。这是因为用户在面对广泛的点击导航时更可能依赖搜索。此外，如果用户登陆您的主页时想到了特定的内容、类别或产品，他们可能更愿意将其输入，而不是依赖主要和次要的点击导航。如果您仍然不确定，您可以添加搜索功能并跟踪用户活动以确定您的搜索栏是否被使用（如果是，是否被有效使用），然后决定是保留还是废弃它。

搜索栏设计最佳实践

1. 包括一个文本字段和一个搜索按钮。

2. 放置在预期位置。包括搜索图标。

3. 尺寸适当。

4. 考虑添加占位符文本。

5. 考虑添加自动完成功能。

6. 隐藏高级选项。

7. 为手机设计。

通常，网站搜索是访问者在浏览您的网站时的最终或唯一选择，因此糟糕的用户体验可能会导致他们保持兴趣和将他们发送给竞争对手之间的区别。您需要将他们的期望和舒适度放在设计的——方法如下：

1.包括一个文本字段和一个搜索按钮。

大多数搜索栏由两个元素组成：用户在其中输入查询的搜索框和用户单击以启动搜索的搜索按钮。元素通常水平相邻放置在一条线上，如下所示：

您可能偶尔会看到此演示文稿的变体，但大多数以这种方式出现是为了简单和可访问性。搜索框应该只是一个框。您可以采取一些设计自由，例如添加背景对比度、颜色或圆角，但文本字段应该是一个文本输入元素，其高度为一行文本。用户很容易认识到这一点。至于搜索按钮，强烈考虑包括一个。

它作为提交查询的视觉提示，因此如果没有它，用户可能会感到困惑。将此按钮放在输入字段的右侧，因为这是一种惯例，对于那些从左到右阅读的人来说是合乎逻辑的。还要写简洁的按钮文本——“搜索”一词或放大镜图标就可以了。当搜索框处于焦点状态时（即，文本光标在其中处于活动状态），访问者还应该能够通过单击搜索按钮或按“Enter”/“Return”/“Go”键来启动他们的搜索。

经典搜索栏上的一个常见替代迭代是放大镜图标，单击该图标会扩展为完整的搜索栏和按钮。这是国外网站-世界野生动物基金会的一个例子：

这种设计节省了页面空间，看起来更干净，但要谨慎使用。有些人可能很难看到它，如果用户在显示文本框后需要再次点击以聚焦文本框，则会增加交互成本。但是，如果搜索玻璃按钮在页面上足够醒目，这是一种可行的替代方法。

2. 放置在预期位置。

允许站点搜索的网站倾向于将搜索栏放在网页的右上角或顶部中央。这两种放置方式都确保了搜索功能对那些需要它的人来说是可见的并且随时可用。 一些网站可能会选择在右上角放置其他链接、菜单或图标——登录提示、设置或购物车图标。

在这种情况下，可以将搜索栏向左移动以适应它们。 但是，不要将搜索栏专门放在页面底部，也不要将其隐藏在菜单中。除了在页面顶部放置一个搜索栏之外，还可以在页脚 放置一个搜索栏，但是您不应该让用户搜索您的搜索功能。

此外，您的用户可能希望在您主页以外的其他网页上进行搜索。将搜索栏放置在大多数页面的标题中可确保用户可以从任何站点位置执行此操作。         如果搜索对于您网站的导航至关重要，并且您希望用户主要通过查询进行导航，请将搜索栏置于页面中央并将其置于标题下方以更加强调。

3.包括搜索图标。

设计师使用图标来直观地传达按钮或其他页面元素的作用。图标节省空间并且比文本更容易识别。放大镜图标是一种广泛使用的搜索符号，因此我们建议您将其放置在您的界面中。有几种方法可以将此图标添加到您的栏中，您可以将其放在搜索按钮上：

您可以将其放在搜索框中：

或者你可以把它放在一个隐藏/显示整个搜索栏的按钮上，我们在世界野生动物基金会的例子中看到过。这是来自国外网站的另一个示例：

还有一点要注意：如果放大镜出现在搜索框外，许多用户会认为它是一个按钮，所以如果图标本身不可点击，请避免这样做。

4.大小合适。

搜索栏的大小取决于它在您网站上的重要性以及典型查询的预期长度。         如果搜索是您的主要导航工具，请将其放大并以页面加载为中心。如果放置在页眉中，栏的大小应根据其同类页眉元素确定：大到足以在页面的视觉扫描中看到，但又不能大到引起注意。

酒吧的长度是另一个重要的设计选择。一方面，您希望您的文本字段足够长以显示更多或所有用户输入的查询——这让用户可以查看他们的查询并修复任何拼写错误。另一方面，搜索栏不应该占用其他标题元素的空间。         一个好的起点是查找或估计平均搜索查询的字符长度。用户是只输入了几个词，还是问了更长的问题？如果是后者，您可能需要加长搜索框或将其设置为在单击时展开。

5. 考虑添加占位符文本。

当搜索框未获得焦点时，占位符文本将显示在搜索框中。它旨在提示用户采取行动。占位符可以通过列出示例查询（如“尝试帽子、牛仔裤、包……”）或简单地说明“搜索……”来为用户提供有用的提示。         如果要添加占位符，文本应显示为较浅的阴影以将其与键入的查询区分开来，并且当用户将注意力集中在框上或开始键入时应消失。

6. 考虑添加自动完成功能。

自动完成是帮助完成搜索的另一种方式。当用户键入时，自动完成功能会在搜索下方的菜单中提供建议。预测可以根据您网站的特定内容进行定制，因此用户可以确信他们找到了他们想要的内容。         不要用过多的建议淹没用户——虽然这取决于您网站的大小和索引内容的数量，但 1 到 10 通常是一个不错的范围。 以下是Patagonia电子商务网站搜索的自动完成示例：

允许用户单击建议，或者为了使您的界面更易于访问，让他们使用箭头键在建议列表中上下移动并使用“Enter”/“Return”键选择一个选项。

7.隐藏高级选项。

除非您希望您的用户群通常比普通互联网用户更精通技术，否则最好隐藏高级搜索选项，例如类别、过滤器和精确匹配。这使UI保持清洁和可访问性。         如果您必须包含高级选项，请考虑将它们放在选择搜索栏时出现的隐藏菜单中，或者提供附近的“高级搜索”页面链接。

8. 移动设计。

智能手机和平板电脑的兴起全面影响了 UI 最佳实践，其中包括站点搜索栏。确保您的搜索框和按钮足够大以供查看和选择。W3C提供了两个相关的可访问性指南： 确保触摸目标至少高 9 毫米，宽 9 毫米。         确保接近最小尺寸的触摸目标被少量的非活动空间包围。 这些准则适用于所有触摸屏设备，无论屏幕尺寸如何。

此外，由于空间不足，在移动设备上更容易接受将整个搜索栏隐藏在搜索玻璃图标后面，并在点击该图标时显示出来。同样，这个图标需要引人注目——一些用户测试有助于确保这一点。 通过搜索保存转化         设计站点搜索可能具有挑战性，因为作为互联网用户，我们已经被这个功能宠坏了。您经常访问的大多数网站很可能已经掌握了它们的搜索功能和设计，因此门槛很高（双关语）。即使是最流行的网站实际上也是一个搜索界面。         这就是为什么最重要的是，您的搜索栏需要简单、明显且易于使用。

如果它运作良好，您的用户就不会考虑它。您将保持他们对您的网站和业务的信任，并促使他们更接近转化或购买。