设计网站时需要考虑功能,用户友好性,美观性以及搜索框的位置。如此一来,你就可以改善网站上的用户体验,甚至可以带来更多的转化。那么在设计搜索框时你需要做什么?尽管根据你的需求和目标,确切的建议可能是主观的,但仍有一些通用技巧可适用于不同类型的网站。因此,以下是搜索框设计和放置的一些最佳做法。

1.突出

搜索框设计中的第一个也是最重要的规则是使其易于注意。你可能过于关注设计美学,以至于创建了一个与网站其余部分融合在一起的搜索框。但请务必记住,你正在为希望在你的网站上找到东西的人添加搜索框。让他们搜索搜索框毫无意义,甚至可能会对他们的体验产生负面影响。这并不意味着你必须完全放弃美学。提出一种外观设计,使其与你现有的网站设计完美融合,同时又足以引起人们的注意。因此,框的大小应该较大,但不要太大,以免占用页面上太多的空间。颜色应该是对比色,但仍应与页面上使用的其他颜色互补。

2.突出显示提交按钮

如前所述,搜索框的全部目的是使站点访问者更轻松。避免使用用户必须关注的微小提交按钮来使事情复杂化。使“提交”按钮突出显示可以提高搜索框本身的可见性,还可以使用户更轻松地单击。选择使用放大镜图标还是在“提交”按钮中拼出“提交”。但是,请注意按钮的大小和颜色,以确保用户在搜索字段中键入后可以轻松找到它。输入他们想要的内容后,向他们明确说明他们必须做什么。

突出显示提交按钮

甚至有些网站甚至只放放大镜图标,以供访问者搜索某些东西。与Levi's Strauss的情况一样,这可能对网站的美观性很有帮助。但这不是最佳搜索框设计示例。尽管这在设计上看起来不错,但对于访问者来说可能很不方便,因为他们必须在单击放大镜图标后等待搜索框加载。尤其是当你从连接速度较慢的地方访问该站点时,这可能会令人沮丧。与其单独加载,不如将搜索框扩展到放置放大镜的相同位置,可能会更好。

3.将其放置在用户最有可能看到的地方

关于在网站上放置搜索框的最佳位置的争论一直在持续。但是,如果你浏览一些最受欢迎的网站,就会发现搜索框通常位于页面的顶部中心或右上方。从SLI Systems发布的研究中可以明显看出这一点。分析发现,有54%的零售商将搜索框放在右上角,将30%放在中间,只有16%放在左侧。

这意味着访问者可能希望在你网站的右上角找到搜索框。将其放置在意外的地方意味着用户可能需要付出更多努力才能找到搜索框。尽管如此,使用热图或眼动追踪工具来研究访客活动仍然是一个好主意。这将帮助你确定它们最有可能出现的位置,并帮助你了解应在网站上放置搜索框的位置。无论你选择左,右还是居中;请确保它位于页面顶部,因为根据NN Group眼动追踪研究,这是访问者更有可能首先扫描的地方。你最好对不同的搜索框位置进行A / B测试,然后确定哪个职位表现最适合你。

4.避免隔离或拥挤搜索框

第一点提到了突出显示搜索框的重要性。这意味着你应避免使用图标或其他可能使访客分散搜索框注意力的图标使周围区域人满为患。需要对搜索框进行优先排序并集中精力。与此同时,请避免过分这样做,因为最终可能会将搜索框隔离到难以查找的程度。没有太多的元素拥挤它所放置的区域。但是你仍然可以在页面的左上方看到它,并且它不会放在用户很难找到的地方。提交按钮也与网站上的其他颜色形成鲜明对比,使其脱颖而出。

5.选择扩大的搜索框

当你在寻找节省空间的方式同时仍使搜索框对于用户而言突出时,你可以选择不断增长的搜索框。对于那些搜索不太必要但你仍希望为用户提供搜索内容的网站,这是一个理想的选择。你将在其旁边添加一个小搜索框,而不是仅添加一个放大镜图标,以作为站点访问者的视觉线索。当用户单击该字段时,该框将展开并允许用户输入所需的术语。


搜索框适用于已经知道要寻找的人。但是对于那些不太确定自己在寻找什么的人呢?你可能具有自动完成建议功能,但是对于某些网站,在搜索框旁边添加一个下拉功能可能是个好主意。它为用户提供了方向感,并为他们提供了寻找内容的线索。