嘿，你们好！在之前的一篇关于网站搜索简介的文章中，我们研究了网站搜索框的重要性，以及需要和不需要搜索框的网站的类型。继续“搜索框系列”，在第二部分中，我们将研究如何设计搜索框。

常见问题和最佳实践

许多设计师不确定如何设计搜索框--放在哪里，应该有一个放大镜图标，搜索栏的大小应该是多少等等。让我们用设计的最佳实践来解决这些问题。

搜索框放在哪里？在寻找放置搜索框的理想位置时，问问你自己，你的访问者首先会在哪里寻找。A.Dawn Shaikh和Keisi Lenz的一项研究结果从142名参与者的调查回复中显示了网站搜索的预期位置。根据这项研究，最方便的位置是网站每个页面的左上角或右上角。

该图说明了参与者期望找到搜索结果的区域。右上角仍然是用户期望找到搜索结果的第一个位置。

虽然顶角可能是理想的位置，但如果网站内容繁多，你认为搜索栏可能会丢失，可以像YouTube和Flipkart那样将其放在页面中央来突出显示。这真的取决于搜索栏对你的业务和网站有多重要。亚马逊、eBay和谷歌都在顶部中央有搜索栏，因为在这些情况下，搜索对访问者的导航体验很重要。

提交行动号召的名称是什么？您应该将搜索提交按钮命名为什么？甚至应该有一个按钮吗？我可以用放大镜图标代替吗？这些是我们在设计时考虑的一些问题，为了回答这个问题，是的，你确实需要一个按钮。原因有三个：

许多用户仍然习惯于点击提交按钮。

这让搜索领域变得更加突出。

搜索栏上的放大镜意味着用户必须准确地将鼠标指向搜索栏。较大的可点击区域使用户更容易使用，尤其是在智能手机上。

此外，您可以将提交按钮命名为提交或输入、继续或搜索。

搜索框应该出现在每一页上吗？这是一个很大的问题。如果你的网站首先足够大，可以有一个搜索框(你的网站需要搜索框吗)，那么是的，每个页面都应该有一个搜索框。如果不是，用户将很难找到他们想要的东西，最终会离开。

在设计每个页面上的搜索时，一个好的做法是保持一些东西不变：

搜索框的位置-如果它位于主页的中心，则在所有页面中保持该位置

样式、框大小和提交按钮-同样，保持与主页相同

以下是IMDB的一个示例。

他们的主页：

网站内的一个展示页面有相同的搜索栏-样式、大小、长度等。

这样做的原因是，一旦用户能够定位并熟悉主页上的搜索框，如果用户必须重新定位并熟悉每一页上的框，则后续页面中的框中的改变将中断UI流并造成不愉快的用户体验。

搜索栏应该有多大？这可能是搜索框最容易被忽视的设计方面之一。通常情况下，搜索栏都很短。虽然它们仍在发挥作用，但当输入冗长的查询时，只能看到文本的一部分，这导致可用性不佳。当我需要编辑或查看查询时，我发现这在我的手机上特别烦人。

再说一次，参考知名品牌。亚马逊就是这样一个很好的搜索条长度的例子。

我自己对我头顶上的几个流行网站的搜索长度(以我输入的数字字符1-x来衡量)做了一点研究，结果如下：

亚马逊-75个字符

Flipkart-54个字符

Google-33个字符

Mashable.com-33个字符

雅各布·尼尔森(Jacob Nielsen)的推荐(2002年--我知道它很古老)建议搜索至少27个字符宽。

我应该有自动建议/搜索提示器吗？自动建议是一种功能，通过尝试根据输入的内容预测用户正在寻找的内容，来帮助用户进行搜索。其目的与其说是为了加快搜索过程，不如说是为了指导用户，因为用户历来不擅长输入搜索查询。

许多电子商务网站很好地利用了这一功能。以下是Flipkart的一个例子：

另一种替代方法是示例搜索建议，同样用于指导用户搜索的相同目的。

搜索框设计中的常见错误

使搜索框很难找到

不在内容密集的网站上放置搜索栏

使搜索字段太短

在输入查询后使搜索字段不可编辑

为单个搜索框提供多个行动号召

根本没有提供行动号召

过度设计搜索框，以至于很难找到

我希望这篇文章能对你在设计网站搜索时有所帮助。我将在搜索框系列的第三部分中介绍设计搜索的技术方面，包括技术、索引和算法，因此请继续关注。

最后，我想带给你一个有趣的阅读，关于为什么维基百科移动了他们的搜索框，以及他们自己在文章Usability：为什么我们移动了搜索框？

在下面的评论中告诉我们你的想法！