搜索框UI设计精彩案例大集合

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

search box design Showcase of Beautiful Search Box UI Designs
(图片来源: Shutterstock)

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

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

PlaylistNow

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

playlistnow Showcase of Beautiful Search Box UI Designs

Scroll Search Module

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

scroll search module Showcase of Beautiful Search Box UI Designs

TextboxList

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

textboxlist Showcase of Beautiful Search Box UI Designs

Remember The Milk

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

remember the milk Showcase of Beautiful Search Box UI Designs

Authentic Jobs

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

authentic jobs Showcase of Beautiful Search Box UI Designs

Kontain

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

kontain Showcase of Beautiful Search Box UI Designs

New York Magazine

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

ny magazine Showcase of Beautiful Search Box UI Designs

ThemeForest

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

themeforest Showcase of Beautiful Search Box UI Designs

Search, Sort & Filter

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

search sort filter Showcase of Beautiful Search Box UI Designs

Tumblr

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

tumblr Showcase of Beautiful Search Box UI Designs

MenuPages

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

menu pages Showcase of Beautiful Search Box UI Designs

Quotezuki

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

quotezuki Showcase of Beautiful Search Box UI Designs

C Spire Wireless

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

c spire wireless Showcase of Beautiful Search Box UI Designs

Spokeo

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

spokeo Showcase of Beautiful Search Box UI Designs

VoucherCodes

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

vouchercodes Showcase of Beautiful Search Box UI Designs

iStockPhoto

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

istockphoto Showcase of Beautiful Search Box UI Designs

TasteBook

简约但不简单的搜索框。

tastebook Showcase of Beautiful Search Box UI Designs

Grooveshark

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

grooveshark Showcase of Beautiful Search Box UI Designs

Gamers with Jobs

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

gamers with jobs Showcase of Beautiful Search Box UI Designs

David Torondel

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

david torondel Showcase of Beautiful Search Box UI Designs

 

译者注:

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

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

【原文:Showcase of Beautiful Search Box UI Designs ,译者:Summer 】

 

搜索框UI设计精彩案例大集合》有1个想法

  1. zena

    Hi,

    I realize this is an odd question, but I came across your page “https://www.84tt.com/web/2011/12/458.html”, and I wanted to see if you’d be willing to add a link to my website, Mamma.com.

    It’s a coupon search engine that allows users to search for coupons on most online retailers.

    I realize this is a massive inconvinience for you, and I’d be happy to make a donation via PayPal for your troubles!

    I hope to hear from you!

    Zena

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注