我们在某个网站上查找信息出现困难时，通常会尝试进行搜索。毫无疑问，搜索框是一个网站的重要组成部分。如果你正在运营一个以内容为主的网站，那么这个问题就更为突出。有时我们也会考虑放一个搜索框在页脚，以便让用户更方便进行搜索。

(图片来源： Shutterstock)

自从Web 1.0后我们走了很长一段路，网站搜索不再仅仅是一个“输入关键词”加上“点击搜索”。开发者们通过改进与增加功能，努力让搜索能够给用户带来更好的体验——搜索过滤能获取更精准的结果，提供搜索关键词或曾经输入过的搜索历史。

这篇文章中，我们将介绍一些既漂亮也具备实用功能的搜索框。不论你是正在改进自己的网站，或是仅仅希望找到一个更好的搜索框解决方案，这篇文章都会很适用。让我们一起来看吧！

PlaylistNow

伴随着输入前缀“ I am ”，这个搜索模块就会开始智能匹配并根据你的输入实时列出结果。

Scroll Search Module

这个极富创意的搜索框出自设计师 Nico Nuzzaci ，它允许用户通过输入或滑动字母面板进行搜索。

TextboxList

这个搜索模块集成好几项功能：它能根据高亮搜索结果，可以直接将搜索结果选中并添加，也能删除某个指定的结果；当然，它也具备自动匹配。是不是觉得挺眼熟？Facebook就用了类似的模块。

Remember The Milk

类似像YouTube的搜索，如果有了匹配的搜索结果时，搜索框就会马上提示你。当然这也是搜索建议功能智能化的一个范例。

Authentic Jobs

我想在Google之前，Authentic Jobs 就已经让他们的搜索用上了即时结果。

Kontain

Kontain的搜索框允许用户进行普通搜索，或是通过过滤器选择只搜索“更新”或“用户”。

New York Magazine

与Kontain类似，NY Magazine的搜索可以进行更复杂的过滤。

ThemeForest

而这一种搜索模块中的过滤方法则能帮助访问者更快找到他们想要的结果。

Search, Sort & Filter

这个则是用了很漂亮的方法呈现了一个比较复杂的高级搜索模块，用户可以通过它在点击搜索按钮前先选好自己想要的搜素结果。

Tumblr

Tumblr在今年锋芒毕露，它在侧栏上就有这样一个非常精巧的搜索模块。

MenuPages

如果你想要一个完整的搜索模块，但界面又受限制，那么或许可以考虑这个方案。

Quotezuki

搜索框与Logo结合在一起……

C Spire Wireless

当鼠标移到Search的标签上，才会展开一个完整硕大的搜索框，这也是一种有效利用界面空间的方法。

Spokeo

很清爽漂亮的条件过滤型搜索框。

VoucherCodes

出于商业目的，他们的搜索框设计得非常活泼。

iStockPhoto

iStockPhoto则为其读者们提供了有多重筛选条件的搜索框。

TasteBook

简约但不简单的搜索框。

Grooveshark

Grooveshark允许用户在线收听及分享音乐。首页上，什么都没有，只有一个搜索框以帮助用户找到想要的音乐。

Gamers with Jobs

这是直接使用Google自定义搜索的典型范例:)

David Torondel

这样深色背景的搜索框，搭配这个网站的整体设计，效果很不错。

 

译者注：

简单总结一下搜索框设计的几个要点：

• 功能上要考虑与业务相关，资讯类、电商类网站在提供过滤器时要慎重考虑分类方法。
• 界面要注意与网站整体风格契合。
• 当界面空间有限时，需要适当变化以寻求合适的表现方法，不能走寻常路。

【原文：Showcase of Beautiful Search Box UI Designs ，译者：Summer 】