适合您电子商务的完美搜索框设计

您是否曾经浏览过在线商店或 Marketplace 以搜索产品但无法找到搜索框？ 我们确定你有。

不用说，您在主页上的站点搜索越突出，您的站点搜索就越有可能被使用。 这意味着您的访问者无需在您的电子商务网站上浏览不同的类别，而是直接使用站点搜索来更快地找到他们想要的产品，而不必浪费时间查看他们不需要的东西。

因此，在搜索是最常见的产品查找方式的行业中，以醒目的设计“推广”搜索字段并将其放置在战略位置，尤其是在首页上，可能是一个好主意。

分类导航

这通常是更有针对性的价格比较网站的情况，只要用户知道他们想要购买的产品的确切品牌名称和型号（换句话说，他们甚至在访问您的网站之前就知道他们想要什么）电子商务网站）。

另一方面，在用户喜欢按类别浏览的领域（因为他们不知道他们想要的确切产品、名称或拼写方式），或者在网站层次结构扁平的情况下，不太显眼的搜索字段设计可以用于鼓励按类别浏览而不是通过搜索。

例如：时尚和家居装饰行业，尤其​​是从用户的初始偏好和随后的成功率（搜索后转化率）来看，都非常喜欢按类别浏览。

在设计和实现方面，有多种方法可以使搜索字段在整体设计中脱颖而出。 因此，要使用的确切格式因网站而异，很大程度上取决于搜索字段出现的上下文（换句话说，整体网站设计）。

搜索字段的设计元素

搜索字段有多种设计元素可用于使其脱颖而出，具体取决于您希望鼓励用户使用搜索功能的程度。 搜索框设计中影响最大的三个主要元素是：

位置

看看下图中的亚马逊。 如您所见，搜索其市场符合亚马逊的利益，因为它销售更多，并且在您使用其站点搜索而不是按类别浏览时可以更好地指导您。

由于它拥有数以百万计的产品，并且考虑到用户通常在访问其网站后就已经知道他们想要什么类型的产品，他们将站点搜索放在一个优先的位置，就在中心，几乎占据了整个屏幕的宽度。

更重要的是，如果你想突出站点搜索并鼓励用户使用它，它必须正常工作。 换句话说：

• 立即显示结果：您不能让站点搜索在产品被搜索后加载太长时间。
• 按您想要的任何顺序列出结果：请记住，越靠上和越靠左，结果与您的访问者越相关。
• 体面的图像质量：请不要像素化图像！
• 显示您的产品规格：尺寸、折扣或促销、可用颜色……所有这些都在您自己的搜索中。
• 为用户提供在站点搜索本身内添加到购物车的选项：这样他们就可以购买多种产品，而无需在站点搜索和购物车之间来回切换。

您的网站搜索样式

最重要的是，一旦单击搜索框，您的网站图像就会受到尊重。 为此，必须考虑相当多的因素。

• 颜色：您应该使用与您网站上相同的企业颜色。 尝试在站点搜索中的某处添加徽标。
• 字体：字体是另一个重要元素； 使用您在网站上使用的相同字体，用于数字、标题、按钮……
• 按钮：尝试在购买或“添加到购物车”按钮中使用与您网站上的按钮相同的样式。
• 其他元素：例如折扣、边框、使用您在电子商务网站上的相同类别……

尺寸

通过使搜索字段相对较小，其视觉显着性显着降低。 许多在线商店寻求提高站点搜索使用率的一件事是增加标题和站点搜索之间的对比度。 例如，正如我们在上面看到的， Amazon的标题为黑色，但站点搜索居中且为白色。

当您结合大小、位置和对比度时，您可以让搜索框真正脱颖而出，鼓励搜索成为在您的电子商务网站上查找产品的首选方式。 然而，这需要一个智能的站点搜索，例如 Doofinder 来降低您的跳出率。 如果没有，这可能成为一把双刃剑。

主页上的搜索框设计

尤其是首页，搜索框的设计更为重要，因为大多数用户往往一访问网站就想出他们的产品搜索策略。

根据Baymard Institute的数据， 60% 的用户会立即将搜索作为移动网站首页的首选策略。 因此，首页的搜索栏设计越醒目，用户就会越多地将其作为搜索的动力，而不是按类别浏览。

此外，如果您希望鼓励在站点搜索中浏览而不是按类别浏览，则在主页上为站点搜索提供额外的视觉效果是一个好主意。

主页的差异化站点搜索设计可以通过多种方式完成：从更大胆的搜索字段边框、更具对比的背景颜色、更大的框和字体大小、更生动的“搜索”按钮……甚至可能使字段键盘具有焦点默认情况下。 任何使搜索字段本身脱颖而出的设计修改，而不从根本上改变其位置或视觉风格，都将有助于它脱颖而出。

通过这种方式，搜索字段保持完全可识别，而不会将焦点从其他页面上移开，但会在主页上为您提供更多的视觉对比。

这种额外的视觉对比不应该将搜索推广为网站上的“唯一选项”，而是应该帮助用户在访问网站时更容易地看到搜索字段。

如您所知……主页通常包含许多不同的图形和视觉元素，争夺用户的注意力，这意味着后续页面（例如类别页面、产品列表或产品页面）上的内容可能是主要的搜索字段，主页可能不够。