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

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

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

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

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

您的网站需要搜索栏吗?

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


搜索栏设计最佳实践

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 毫米。 确保接近最小尺寸的触摸目标被少量的非活动空间包围。 这些准则适用于所有触摸屏设备,无论屏幕尺寸如何。 

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

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


返回观点列表
本文标签:

相关专题

  • 品牌官网设计
    品牌官网设计

    杭州派迪科技为高端客户提供品牌官网咨询策划,品牌官网设计,品牌官网建设开发服务,以国际化视野和标准为基础,为各行业领军品牌提供高端企业网站定制、策划、设计、互动与制作

    查看详情
  • 大策略营销门户网站
    大策略营销门户网站

    杭州派迪科技有自己的营销型网站CMS系统,适合白帽SEO网站。特别对大策略的营销型门户网站制作有一定的经验,曾经为上海天擎外贸行业网站、浙江兆龙营销型门户、先临三维门户营销网站提供全程的技术支持及SEO优化指导

    查看详情
  • 集团/上市公司网站
    集团/上市公司网站

    杭州派迪科技为杭州本地集团公司提供网页设计、制作、开发服务,为集团公司网站建设提供了响应式、营销型、品牌型、门户型网站建设需求,欢迎广大集团公司客户咨询

    查看详情
  • 外贸网站建设
    外贸网站建设

    杭州派迪科技为高端客户提供外贸网站咨询策划,外贸官网设计,外贸官网建设开发服务,以谷歌搜索引起算法为基础,为各行业外贸公司提供高端企业外贸网站定制、策划、设计、互动与制作

    查看详情
  • 企业网站建设
    企业网站建设

    高端专业、令人印象深刻的用户界面、易于访问——企业网站必须反映一切,因为派迪科技在这里提供帮助,凭借精湛的技术、丰富的经验、与客户的持续沟通以及对每一个细节的关注,我们确保在快速的周期时间内提供优质的服务。

    查看详情
  • 半定制网站
    半定制网站

    杭州派迪科技模板网站建设专题_各行业方案专题栏目提供各行业产品适合的网站建设方案,帮助企业了解派迪科技建站效果等信息,您可以通过本站了解各行业网站建设方案,如需要获取本行业定制网站建设方案,可以联系在线客服或拨打电话咨询

    查看详情

体验从沟通开始,让我们聆听您的需求!

开始您的数字化品牌体验! 15158117070 期待您的来电!

[ 网站建设×品牌官网设计×大策略营销门户×微信小程序开发×微信公众号开发]

派迪业务总监微信号

派迪业务总监微信号

了解最新项目报价

派迪产品经理微信号

派迪产品经理微信号

免费获取项目策划

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》

Cookie 偏好

如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》

管理cookie偏好

基本 cookies

始终允许

这些 cookies 是网站运行所必需的,不能在我们的系统中关闭。它们通常仅针对您所做的相当于服务请求的操作而设置,例如设置您的隐私首选项、登录或填写表格。您可以将浏览器设置为阻止或提醒您有关这些 cookies 的信息,但网站的某些部分将无法运行。这些 cookies 不存储任何个人身份信息。

性能 cookies

始终允许
这些 cookies 使我们能够计算访问量和流量来源,以便我们可以衡量和改进我们网站的性能。它们帮助我们了解哪些页面受欢迎和不受欢迎,并了解访问者如何在网站上移动。这些 cookies 收集的所有信息都是汇总的,而且是匿名的。如果您不允许这些 cookies,我们将不知道您何时访问了我们的网站,也无法监控其性能。

功能性 cookies

这些 cookies 收集信息用于分析和个性化您的定向广告体验。您可以使用此拨动开关来行使选择不获取个人信息的权利。如果您选择关闭,我们将无法向您提供个性化广告,也不会将您的个人信息交给任何第三方。

定位 Cookies

这些 cookies 可能由我们的广告合作伙伴通过我们的网站设置。这些公司可能会使用它们来建立您的兴趣档案,并在其他网站上向您展示相关广告。它们不直接存储个人信息,而是基于唯一标识您的浏览器和互联网设备。如果您不允许使用这些 cookie,您将体验到较少针对性的广告。

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》