搜索框是网站上最重要的元素之一。无论您拥有什么类型的业务，设计精良的搜索框都是必不可少的，以便访问者可以轻松找到他们正在寻找的内容。 这并不意味著设计者只需新增一个搜索功能，而不考虑它的外观。您需要考虑功能，多用户友好，美观，甚至搜索框的位置。这一切都是为了提高您网站上的多用户体验，甚至可以提高转化次数。那么，在设计搜索框时您需要做什么？虽然根据您的需求和目标，确切的建议可能是主观的，但有一些一般的提示可以适用于不同类型的网站。怎么样设计网页的搜索框？以下是搜索框设计和展示位置的一些最佳做法：

　　1. 使它突出

　　搜索框设计中的第一个也是最重要的规则是使其显而易见。您可能过于专注于设计美学，您建立一个搜索框，与网站的其余部分融合。但重要的是要记住，您要为想在您的网站上找到某些内容的多用户新增一个搜索框。让他们寻找搜索框的位置不会有任何意义，甚至可能对他们的体验产生负面影响。

　　这并不意味著您必须在美学上妥协。设计一个搜索框，需要让它看起来美观同时仍然突出，足以让人们注意到。因此，框的大小应该很大，但不能太大，因为它占用了页面上太多的空间。颜色应该是对比的，但仍然与页面上使用的其余颜色互补。

　　下方例子是一个很好的例子，因为白色与页面的蓝色对比，同时仍然与页面设计中使用的其他颜色对齐。搜索框的大小不会太大，但仍然足够突出，以便人们在进入网页后立即注意到。

　　2. 突出显示提交按钮

　　如前所述，搜索框的整体目的是使网站访问者更容易地搜索。避免过度复杂的事情与微小的提交按钮，多用户必须专注于点选。使提交按钮脱颖而出提高了搜索框本身的可见性，也使多用户更容易点选。无论您选择使用放大镜图示还是在提交按钮中拼出 “提交”，都是由您决定的。但是，重点放在按钮的大小和颜色，以确保多用户在搜索栏位中输入后没有问题。一些网站用到放大镜图示为游客搜索的东西，这可能被证明对于网站美学有很大的好处，如在 Levi’s Strauss 的情况。但这不是一个最佳的搜索框设计示例。

　　3. 将它放在多用户最习惯的位置

　　有一个关于在网站上放置搜索框的最佳地方的争论。但是，如果您看看一些最热门的网站，您会注意到，搜索框通常放置在页面的顶部中心或右上角。这从 SLI 系统公布的研究中是显而易见的。分析发现，54％的零售商将搜索框放在右上角，30％在中心，只有 16％在左边。

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

　　无论您选择左，右还是中心; 确保它是朝向页面的顶部，因为这是访问者更可能扫描的位置。您会好的进行 A / B 测试不同的搜索框布局，然后确定这个位置似乎是为您执行最好的。

　　4. 将自动完成与图形组合

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

　　5. 避免隔离或过度拥挤

　　第一点提到了使搜索框突出的重要性。这意味著您应避免使用图示或其他可能会使访问者从搜索框分散注意力的元素来过度拥挤周围区域。搜索框需要确定优先顺序和重点。同时，避免过度使用搜索框，因为您可能最终将搜索框隔离到难以找到的程度。

　　如下图所示，是一个精心设计的搜索框的一个很好的例子，没有太多的元素拥挤它放置的区域。但您仍然可以看到它的页面左侧中心，而不是放置在某个地方，多用户将很难找到。提交按钮也与网站上的其他颜色形成对比，使其脱颖而出。

　　6. 选择扩充套件搜索框

　　当您在寻找节省空间的方法，同时仍然为多用户显示搜索框时，您可以选择不断增长的搜索框。这是一个理想的选择，网站的搜索可能不是太重要，但您仍然想给多用户选择搜索的东西。而不是只新增一个放大镜图示，您会新增一个小搜索框旁边作为一个视觉线索的网站访问者。当多用户单击栏位时，该框将展开，并使多用户能够输入他们需要的字词。如果您有更多关于 WordPress 外贸独立站网站建设（定制网站、 woocommerce 模板网站）、广告设计包年服务 (经济套餐) 、 WordPress 站群网站优化、 logo 设计、品牌设计、印刷、 WordPress APP/WordPress 微信开发等产品服务的需求，欢迎咨询跨飞独立站 WooCommerce 官网，新上线企业 VI 设计套餐和 WordPress 站群网站营销推广系统（强）！

　　7. 考虑新增一个下拉选单

　　在搜索框旁边新增一个下拉功能对于某些网站可能是一个好主意。它给多用户一种方向感，并给他们关于寻找什么的线索。这一策略证明对巴西房地产公司 Casa Mineira 的成功。网站上进行的案例研究中，将标准搜索框替换为下拉选单有助于生成更多潜在客户。事实上，变化导致比以前多 57.25％的潜在客户。

　　现在，您可以借助示例和提示更好地了解搜索框设计和布局。那么您从这学到了什么？您可能已经注意到对搜索框的突出和可见性的压力。这意味著搜索框的颜色对比，美观和尺寸是一些最重要的方面。您的焦点应该让功能与美学结合，这可能不容易执行。有关于搜索框设计的任何问题？ 请随时留下评论。