作为网页设计中常见的UI控件之一，搜索框的组成非常简单：输入框+触动按钮，不少设计师也因此没有对它给予足够的重视。其实搜索框在网站中扮演的角色不容小觑，途必科技设计师认为：“一个可用性较高的搜索框往往可以有效节省用户获取信息和内容的时间，大大提升用户的浏览体验。”尤其是在内容为主的网站中，当用户面对复杂的内容时，他们时间就会寻找搜索框，输入关键词以获取想要的内容。所以在网站建设过程中我们应多花些时间思考搜索框如何设计。如果您没有什么头绪，不用担心，和途必科技小优一起来看看搜索框设计的几个要点吧！

        1. 使用放大镜图标 

       现在，一看见放大镜图标，用户自然而然就会想起搜索功能，这种联系是在长期使用过程中逐渐形成的，是为大家所广泛认可接受的。因此在网站中设计搜索框时，我们可以多使用放大镜图标，毕竟它是常使用、易于辨认的(即使没有文本标签，用户也能轻松识别)。当然也要注意，放大镜图标应该简洁直观，尽量减少一些不必要的细节，提高图标的可辨识度。

        2. 让搜索框足够显眼

       搜索框设计有一条重要的准则就是：让搜索框足够显眼，清晰可见的搜索框能让用户快速发现并使用。

        3. 提供搜索按钮

       在搜索框中设置按钮是为了让用户能够明白搜索的触动方式，带有按钮的搜索框更易吸引用户点击进行搜索。不过，在设计搜索按钮时，我们要注意控制它的尺寸大小，选取合适的区域，让用户可以移动光标或手动轻松点击。另外，设置回车键提交搜索的功能也是有必要的，因为现在很多用户仍然保留着点击回车键触动按钮的习惯。

        4. 每页都保留搜索输入框

       网站的每个页面好都有搜索框。这样一来，当用户在特定的页面找不到想要的内容时，可以立即通过搜索框获取内容，这种设置是快速便捷的，是能够显著提高用户对网站好感的。

        5. 让搜索框尽量简单

       搜索框设计还有一条原则，那就是简单易用。研究表明，一个没有显示选项的搜索框看上去更加友好，可用性也更强。所以，一般情况下，在给用户提供搜索框时好不要提供复杂的搜索选项。

        6. 让搜索框处于用户预期的位置

       当用户想要使用搜索框，却需要花费不少精力去找时，用户的体验就已经大大降低了。网站上的搜索框好易于察觉，放在用户预期的位置。通过调查大多数用户会在网站的左上角和右上角寻找搜索框，这主要是因为用户在浏览网站时使用F型扫视法，而网站右上角是大多数用户的优选区域，因此在设计搜索框时我们好把它放在顶部靠右或顶部居中的位置。

        7. 合理的输入框尺寸

       输入框尺寸太小是常见的搜索框设计错误。不少网站的输入框都太小，虽然可以容纳较长的内容，但部分内容却是不可见的，这种设计的可用性很差。由于视觉范围的限制，用户在输入内容可能会下意识觉得只能采用短的、不精确的查询方式，或是输入了较长的关键词，却在修改时遇到麻烦。因此，建议使用能够根据输入关键词长度而变长的输入框，这不仅可以节省屏幕空间，还能给予用户充分的视觉提示。

        8. 使用自动搜索推荐机制

       什么是自动搜索推荐机制?以Google为例，当我们在搜索框中输入"Apple Watch 2"，它会自动出现相关词条推荐搜索，这就是自动搜索推荐机制的表现形式。谷歌在这方面拥有的发言权，从2008年开始，它就开始统计用户的搜索历史，整理词条推荐，以帮助用户节省时间，创造更佳的用户体验。自动搜索推荐机制能够动态地预测用户的搜索方向，帮助用户更快完成搜索。不过，在使用这种机制时我们也要注意以下几点：

       确保自动搜索的推荐内容是有价值的。如果输入框中出现不恰当或无用的搜索推荐，这非但不能为用户的搜索提供便利，反而容易混淆和分散用户的注意力。自动搜索的推荐内容一定要基于用户的搜索历史数据来决定。当用户在输入框输入关键词时，尽快给予用户推荐信息，比如在第三个字符之后，为用户开始提供即时、有价值的建议，降低用户的输入难度和工作量。尽量为用户提供少于10个搜索结果，避免信息过载。

       总体而言，虽然搜索框看似简单，其背后却蕴藏着大量的设计知识。由于一点点变化也会对整个网站的用户体验造成很大的影响，我们在改动搜索框时一定要足够谨慎。如果你网站目前的转化率还不错，搜索框就不要做什么大的改动了；但如果你网站的转化率很低，其他区块设计也没有发现什么问题，记得看看搜索框的设计是否存在缺陷。

责任编辑：途必设计部

版权所有：http://www.uweb.net.cn (优网科技) 转载请注明出处