网页设计搜索栏高度(网页设计搜索按钮)

　　前言

　　上周在参加某项目需求评审的时候就有涉及到搜索框的设计，主要是聊到如让用户注意到这个模块以及它所涉及到操作后的数据提示问题。3月9号早读文章来看看由@Garrik的翻译授权分享。

　　正文从这开始～

　　搜索框实际上就是输入框与提交按钮的组合。有的人可能会疑问，搜索框也需要所谓的设计吗；毕竟，它里面只有两个元素罢了。然而，在一些内容量大的网站上，搜索框可能是最频繁被使用到的组件了。当用户浏览一个相对复杂的站点时，他们一般都会立刻去寻找搜索框的位置，好让他们能够快速地到达想要的位置。因此搜索框的设计与可用性就变的尤为重要了。

　　在这篇文章里，我们将探讨如何优化搜索框，以至于能够让用户更快速地找到他们想要的内容。

　　最佳范例

　　1. 请使用放大镜图标

　　请在搜索框后面加上一个放大镜图标吧。图标的定义是，对于一个事物，行为，或者想法的视觉表达。对于一些图标大众是有趋于一致的理解的。放大镜图标就是其中的一个例子。

　　Tip: 在使用图标时，尽量使用最简洁的放大镜。越少的修饰，可以让用户越容易理解。

　　2. 请让搜索框更加明显

　　如果搜索功能在你的应用/网站上占一个很大的比重，你就应该把搜索框放到一个更加显眼的地方，以让用户能够用最快的速度找到它。

　　一个展开的搜索框是很重要的，把搜索栏藏到图标后会让搜索框更不容易被找到，并且让交互成本上升。

　　3. 请加上一个搜索按钮

　　一个按钮可以帮助用户清楚，在输入完内容后还需要额外触发搜索事件。尽管大多数时候人们更想去按回车。

　　Tips:

为按钮选择一个合适的大小，以让用户不用去非要做到精确点击。相对大的按钮可以让用户更容易去点击到。

让用户可以同时通过按回车和点击按钮去触发搜索。其实还是有很多用户习惯去点击页面上的按钮。

　　4. 请为每张页面都加上搜索框

　　你应该保证用户能够在任何页面上一直可以使用搜索框，因为当用户找不到他们想要的内容的时候，他们会去找搜索框，不管他们在你网站的哪个位置。

　　5. 请让你的搜索框更加简洁

　　如果你想设计一个搜索框，请确保它看起来更像一个整体，并且容易使用。根据一些对于可用性的研究，那些默认状态下没那么多高级选项的搜索框具有更高的用户友好度。高级选项（例如：布尔搜索）会很容易让用户犯迷糊的。

　　6. 请把搜索框放到用户想让他们出现的位置

　　让用户花时间去找搜索栏的位置，是很不友好的。

　　下面这张表来自 A. Dawn Shaikh 和 Keisi Lenz 的一份研究中：根据一份142人参与的调查，这张表展示出了人们期待搜索栏所出现的位置。这份研究得出，人们最希望搜索栏出现在页面的左上角或者右上角。在这些地方用户可以更加容易通过F型浏览模式去找到他们想要的。

　　Tips:

理想上，搜索框还是应该适合网页的整体设计，当用户想使用它的时候，让搜索框更加明显。

你的内容越多，你就越希望突出你的搜索功能。如果搜索是你网页的重要功能，使用大量的对比，可以让搜索框在背景上或者周围其他元素上看起来更加突出。

　　7. 请选用合适的输入栏尺寸

　　输入栏太小是很多设计师都会犯的一个错误。当然，用户可以输入一长串内容，但是只能显示一小部分是会让可用性大打折扣的，因为在这种情况下用户很难去检查，或者修改输入。事实上，当搜索框可以显示的字数有限的时候，用户会自动输入较短的内容，因为较长的输入是很不方便阅读的。如果输入栏能够与用户所想输入的内容长短相匹配，可用性就可以被大大提高了。

　　一种估测是，让输入栏长度大概保持在27个字左右（英文）就可以满足90%的情况了。

　　Tips: 考虑使用一个可伸缩输入框，当用户点击时，可以加长输入框。这样既可以节省空间，也可以让用户更加方便找到和进行输入操作。

　　8. 请为用户列出自动候选项

　　自动搜索候选可以通过用户已经输入的字句，帮助用户找到一个合适的查询。自动候选并不会加快搜索进程，但是却可以指导帮助用户去组织他们的查询语句。一般来说，用户是不太会在搜索栏上问问题的：如果他们不能够在第一次查询里获得想要的答案，之后的搜索结果也不会太让他们满意。事实上，他们会放弃。当自动搜索候选项使用恰当，它是可以帮助用户去问出更加恰当的问题的。

　　谷歌搜索就很擅长此项，在2008年他们就开始使用这一功能。因为用户很多时候会搜索同一件事很多次，通过记录搜索历史，谷歌为用户节省了时间，并且提高了用户体验。

　　Tips：

确保自动候选栏是有用的。不好的候选项反而会让用户困惑。使用拼写修正，辨别输入，并且预测用户想要搜索的内容以为了提高使用体验。

你应该以最快的速度列出建议选项，大概三个字左右，就要快速列出候选项了，以来减少用户后面的输入。

控制在十个选项之内，不要用滚动条，以让信息不会过多。

支持键盘选择，当用户选到最后一个选项时，下一个选项应该转到第一个。ESC键应该可以让用户离开候选列表。

标出输入与建议信息的不同处（例如：输入信息用一般字重，建议信息用加粗字重）。

　　9.请让用户更加清楚什么可以搜索

　　一个好主意是列出一些搜索例子在输入栏中，以来提示用户这个搜索栏具有的功能。如果可以允许用户搜索多项内容，用一些提示会更好（例如：IMDb）。HTML5让我们很容易通过 placeholder 做到这一点。

　　Tips: 控制你提示内容的字数，否则会增加认知负荷。

　　结论

　　搜索是一项很基础的功能，并且在内容繁多的应用或网站里担任重要角色。即使是一些很小的改动，只要能让搜索框更加恰当的显示，使用。可用性和用户体验都会显著的整体提升。

　　最后，为你推荐：

　　【第372期】一个特别好用的搜索框必须考虑的五个方面

　　关于本文

　　译者：@Garrik

　　译文：https://zhuanlan.zhihu.com/p/25555766

　　作者：@Nick Babich

　　原文：Design a Perfect Search Box