搜索框设计和布局的方法

搜索框设计和布局的方法

　　搜索框是网站上最重要的元素之一。无论您拥有什么类型的业务，拥有精心设计的搜索框都是至关重要的，以便访问者可以轻松找到所需的内容。这并不意味着只要添加搜索功能，甚至不考虑它的外观就足够了。那么在设计搜索框时你需要做什么？下面是小编整理的，欢迎大家阅读！更多相关信息请关注相关栏目！

　　您需要考虑功能，用户友好度，美观性以及搜索框的位置。这样做可以改善您网站上的用户体验，甚至可能导致转化次数增加。

　　虽然根据您的需求和目标，确切的建议可能是主观的，但有一些一般技巧可用于不同类型的网站。所以这里是搜索框设计和布局中的一些最佳做法：

　　1、使它突出

　　搜索框设计中的第一个也是最重要的规则是使其容易引人注目。您可能会专注于设计美学，您可以创建一个与网站其他部分相融合的搜索框。但请务必记住，您正在为想要在您的网站上找到某些内容的人添加一个搜索框。让他们搜索搜索框不会有意义，甚至可能对他们的经验产生负面影响。

　　这并不意味着你必须完全妥协美学。来看看一个设计，看起来对你现有的网站设计，而仍然足够突出，让人们注意到的设计。所以盒子的大小应该很大，但不要太大，因为它占用了太多的页面空间。而颜色应该是对比，但仍然补充页面上使用的其余颜色。

　　在百思买的搜索框是一个很好的例子作为对比的白色对页面的蓝色，同时仍然在网页设计中使用的其他颜色排列。搜索框的大小不是太大，而仍然足够突出，使人们在进入页面后立即注意到。

　　2.突出显示提交按钮

　　如前所述，搜索框的全部目的是让网站访问者更容易。避免使用用户必须关注的微型提交按钮来过度复杂的事情，以便点击。使提交按钮突出提高了搜索框本身的可见性，也使用户更容易点击。

　　您是否选择使用放大镜图标或在提交按钮中拼出“提交”，取决于您。然而，关注按钮的大小和颜色，以确保用户在输入搜索字段后无需找到它。向他们说明他们在输入他们正在寻找的内容后要做什么。

　　一些网站甚至只能放大镜图标，以供访客搜索。这可能证明对于网站美学而言是非常有利的，就像Levi's Strauss一样。但这不是一个最佳搜索框设计的例子。

　　虽然这在设计方面看起来不错，但对于访问者来说这可能是不方便的，因为他们在点击放大镜图标后必须等待搜索框加载。这可能令人沮丧，特别是如果您从连接较慢的地方访问该网站。而不是单独加载，可能会更好的是在放大镜放在相同位置的搜索框展开。

　　当被困在有限的空间，但搜索是重要的，它可以很好地融入到顶部的导航。这正是他们在移动网站上所做的一切。

　　另一方面，Xero鞋子根本没有提交按钮。访问者必须在搜索文件中输入关键字，然后按Enter键才能搜索网站内的某些内容。现在您可能会认为只要按Enter键即可开始搜索，那么其他访问者呢？其中一些可能是专门搜索提交按钮，可能难以使用这种类型的设计进行搜索。

　　亚马逊的提交按钮在橙色中相当突出，而搜索框的其余部分是白色的。提交按钮的颜色也与网站标题的较暗颜色形成对比。因此，尽管他们只使用放大镜图标作为提交按钮，但与Levi的示例不同，它仍然显着地可见。确保图标被填充，因为这将增加可见性。

　　3.放置用户最可能看的地方

　　关于在网站上放置搜索框的最佳位置，正在进行争论。但是，如果您浏览一些最受欢迎的网站，您会注意到，搜索框通常位于页面顶部中心或右上角。这从SLI系统公布的研究中可以看出。分析发现，54％的零售商将搜索框放在右上方，30％位于中心位置，左侧仅占16％。

　　这意味着访问者可能希望在您的网站右上方找到搜索框。将其放置在意想不到的地方意味着用户可能需要额外努力才能找到搜索框。尽管如此，使用热图或眼睛跟踪工具来研究访客活动仍然是个好主意。这将帮助您确定他们最有可能看到的位置，帮助您了解您应该将搜索框放在您的网站上。

　　无论你选择左，右还是中间; 确保它位于页面顶部，因为这是访问者根据NN Group眼动跟踪研究最有可能首先扫描的地方。您可以很好地对不同的搜索框展示进行A / B测试，然后确定哪个位置似乎对你来说最好。

　　以下是Get Plus关注者位于页面右侧的搜索框的示例。

　　EBay的搜索框位置位于页面的中心，它的显着位置是访问者首先注意到的网站之一。

　　4.将图形自动完成

　　您的网站可能在其搜索框中使用自动完成功能的62.5％之中。为了获得竞争优势，您可以通过添加产品的图像预览以及搜索功能中的自动完成建议来进一步增强功能。这是因为只有28.2％的参与网站正在实施此功能。

　　为进一步制作自动完成图形的案例，您可能需要查看LED Hut的情况。在为自动完成建议添加图像预览之后，LED照明提供商将其搜索转换率提高了200％。当您将图像预览添加到搜索建议中时，它将如何显示。

　　5.避免隔离或过度拥挤搜索框

　　第一点提到使搜索框显着的重要性。这意味着您应避免过度拥挤图标或其他元素，从而使访问者从搜索框中分散注意力。搜索框需要优先考虑并专注于此。同时，避免过度使用，因为您可能会最终将搜索框隔离到难以找到的程度。

　　Snow and Rock的搜索框是精心设计的搜索框的一个很好的例子。正如你可以在下面的图像中看到的那样，没有太多的元素挤在被放置的区域。但是，您仍然可以看到页面的中心左侧，并且不会放置在用户将难以找到的位置。提交按钮也与网站上的其余颜色形成鲜明对比，使其脱颖而出。

　　6.选择扩展搜索框

　　当您正在寻找方法来节省空间，同时仍然使搜索框突出显示给用户时，您可以选择不断增长的搜索框。这是搜索可能不太重要的网站的理想选择，但您仍然希望为用户提供搜索内容的选项。而不是仅添加放大镜图标，您将在其旁边添加一个小型搜索框，以作为网站访问者的视觉线索。当用户单击该字段时，该框将展开，并使用户能够输入他们需要的术语。

　　这是Net-a-Porter的一个很好的例子。如果您看网站的右上角，您会看到搜索框是可见的但不是太大。有一个放大镜图标，供用户识别它是一个搜索选项。

　　但是，一旦您点击该字段，搜索框就会展开，您可以输入所需的搜索字词。美观和可用性的这种组合对于需要在主页上包含大量元素的网站是非常好的，因为它可以帮助您节省空间，而不会影响搜索框的可见性。

　　7.考虑添加一个下拉菜单

　　搜索框对于已经有一些想法他们正在寻找的人来说是存在的。但是那些谁不太确定他们在寻找什么呢？您可能拥有自动完成建议功能，但在搜索框旁边添加一个下拉功能可能是一些网站的好主意。它为用户提供了方向感，并为他们提供了寻找内容的线索。

　　这个策略证明是巴西地产公司Casa Mineira成功的。在网站进行的案例研究中，用下拉菜单替换标准搜索框有助于产生更多潜在客户。事实上，这种变化导致的线索比以前高出57.25％。

　　这种变化表现得很好的原因是因为游客被给了一个明确的行动路线，他们能够快速找到他们正在寻找的内容。在以前的设计中，游客必须确定他们正在寻找什么。为了更好地引导游客，他们决定覆盖各种各样的地点和类型的住宿。

　　但请务必记住，此选项可能不适用于所有类型的网站。例如，电子商务店可能无法使用这种技术的访问者更有效地进行搜索。但对于房地产公司和服务相关业务，下拉式搜索功能可能是完美的解决方案。

【搜索框设计和布局的方法】相关文章：

如何个网页设置搜索框11-25

网页设计的布局12-06

php启用sphinx全文搜索的方法03-02

Dreamweaver窗口如何布局的方法02-07

常见的网页布局设计04-21

PHP实现搜索查询功能的方法技巧08-01

自适应网页设计的概念和方法03-17

搜狗输入法关闭自动搜索的方法03-29

网页设计中美丽的布局03-19