网站搜索框的设计理论

1、搜索框的意义

用户总是和你想的不一样,用户很多时候是不会按照你设定的导航走的,他们更多的时候是上来就直接输入关键字进行搜索。对于购物者而言,如果清楚的知道想要什么,他们会很明确的使用搜索框,这种情况下购物者显示出了明确的购物意图,因此搜索框能够把该意图转变为真实的购买行为。来自Fast Search的数据显示,30%的购物者进入电子商务网站后会立刻使用搜索框,超过30%的人通过导航没有找到需要的物品后转而使用搜索框。

如果一个网站没有足够合理的信息架构体系,那么搜索引擎不仅仅是有帮助性的,甚至是至关重要的设计功能。有可能比网站的导航更对用户有帮助。事实上,搜索是用户了解在一些综合性网站内容最直接有效的方式。最好的搜索设计就是给用户提供一个简简单单的搜索框在页面显眼固定的位置上,但却有强力搜索的能力和范围宽 广的功能。

所以,如果你的网站没有足够清晰的信息架构体系,那么,请把你的搜索框还给搜索,不要再试图去绑架你的搜索框!

2、被绑架的搜索框


http://www.zghzp.com/

不可否认,右侧的背景很美,但是我是来搜索的不是来欣赏图片的,这个背景搞的我都不知道这个搜索还有上面的频道切换是不是可以点击了(我试图去点击新版上线,未果)。这个设计的用户体验差及了。


http://www.shtimber.com/

搜索跟留言板有什么关系?搞个留言板的按钮跟搜索放在一起是什么逻辑?这让我在想搜索的时候很不爽


http://cn.china.cn/

这个很让我无语,在搜索按钮后面补个按钮就罢了,居然还来个比搜索按钮还大2倍多的按钮……  


http://b2b.hc360.com

这个大概是我见过的最无语的搜索框了。想不清楚为什么现在还有设计师会把“设为首页”、“收藏本页”这样的功能摆出来,而且是摆在搜索框上。


http://www.8035.com/

对于这个,首先视觉完全被放在了那2个“新”、“热”上去了,压根没有想着点前面的东西了;不知道为什么要把这2个东西摆在搜索按钮的后面,还有,这么长的搜索框是否是在告诉我,你们网站的东西很难找,需要很长的关键词呢?

现在很多网站都倾向于搞一个这样会闪的gif图片来突出某些内容,我习惯把这些东西叫小蚂蚁。有的网站搞的很夸张,这小蚂蚁长的胖的出奇,用户的吸引力完全都放在了那只胖蚂蚁上,根本没有想着胖蚂蚁前面的东西;有的网站觉得每个栏目都需要突出于是每个栏目上都搞个“新”、“热点”,最后的结果就是整个网站看着就像个蚂蚁窝。个人觉得要想用这个小玩意赢得好的用户体验,至少要保证3点:小、简、少。小,不至于让我感觉感觉突兀;简,能表达意思就可以了;少,不至于搞的我想点了不知道点哪里。

3、把搜索框还给搜索

把搜索框还给搜索!搜索就是搜索,不要给搜索背上太多的东西。一个搜索频道、一个搜索输入框、一个搜索按钮这样就已经足够多了,再多一点搜索框都会受不了!当然,你也可以让你的搜索框更精简,精简到只有一个搜索框。

把搜索叫搜索!搜索的位置要明显到用户第一眼就能看到且随时能够找到;输入框应该让用户感觉可以输入;搜索按钮看上去应该更像是个按钮;不要把无关的东西在搜索按钮边上,它就应该一个人待着!

时间: 2025-01-01 15:42:13

网站搜索框的设计理论的相关文章

网站设计用户体验:网站搜索框的设计

1.搜索框的意义       用户总是和你想的不一样,用户很多时候是不会按照你设定的导航走的,他们更多的时候是上来就直接输入关键字进行搜索.对于购物者而言,如果清楚的知道想要什么,他们会很明确的使用搜索框,这种情况下购物者显示出了明确的购物意图,因此搜索框能够把该意图转变为真实的购买行为.来自Fast Search的数据显示,30%的购物者进入电子商务网站后会立刻使用搜索框,超过30%的人通过导航没有找到需要的物品后转而使用搜索框.       如果一个网站没有足够合理的信息架构体系,那么搜索引

jQuery实现的类似淘宝网站搜索框样式代码分享_jquery

运行效果图:                                                ----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的类似淘宝网站搜索框样式代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

做好站内优化的第一步是做好网站搜索框

很少有人提及站内搜索框这个话题,我也是有感而发,今日上午我想了解一下百度从6.22开始到7.22的更新情况,于是在admin5网站中的搜索框内输入了百度6.22.百度6.28.百度7.21这几个词,没有想到输入后一些价值信息就出现了     从中我们可以看出admin5网站的搜索功能做得比较完善,那么我们在为自己的站点添加搜索框时需要注意哪点呢?下面我站在用户的角度谈谈什么样的搜索框才能够算是合格的搜索框. 1.搜索框栏要醒目,大家打开a5的首页可以看一下,至少我是不费吹飞之力就将这个搜索框发现

网页交互设计:网站的搜索框设计

在内容为主的网站中,搜索框往往是最常用的设计元素之一.从可用性的角度来看,搜索功能是用户有了明确的内容想看的时候最后使用的功能.如果一个网站没有足够合理的信息架构体系,那么搜索引擎不仅仅是有帮助性的,甚至是至关重要的设计功能.有可能比网站的导航更对用户有帮助.事实上,搜索是用户了解在一些综合性网站内容最直接有效的方式.最好的设计就是给用户提供一个简简单单的搜索框在页面显眼固定的位置上,但却有强力搜索的能力和范围宽广的功能. 在现实中,网站往往会随着时间的推移,新的内容不断的增递,而且这些新内容会

做好网站搜索设计的十个重点

现在的用户普遍耐心不足,他们不会根据你的导航一个一个的点下去,从而找他们所要的东西,除非他想要的东西很容易的通过导航就可以找到.在这样的情况下,只要在一个内容不算少的网站中,搜索系统都会显的极其重要,因为大部分用户都会通过搜索来找到他们想要的内容.当你的用户访问你的网站时,搜索不到他想要的东西时,沮丧之余他唯一做的一件事就是关闭你的网站,然后给它打上网站不好用的标签,或许以后这个用户就不会再来访问你的网站了. 1.如果有可能,请根据用户的选择匹配相关内容方便用户进行准确搜索 用户在搜索内容时,很

自动完成的搜索框javascript实现_javascript技巧

在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局. 界面的HTML结构, 第一个少不了的是一个搜索框, 第二个就是搜索的点击按钮. <div class="search"> <input type="text" value=""

百度联盟新添两套搜索框样式

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 尊敬的百度联盟会员,您好: 为满足联盟会员对搜索样式的多样化需求,我们新增了默认尺寸为728 x 90的Flash样式搜索框和默认尺寸为160 x 390的风云榜样式搜索框.2套新样式已于昨天下午全面上线. Flash搜索框介绍:具有支持全部百度搜索选项.展示百度风云榜.浏览器flash支持检测.按比例缩放等特色. 温馨小提示:当浏览者电脑安

电商网站的搜索框是怎样设计的?

  这篇文章针对搜索框的用户体验进行详细讲解,如果感兴趣,随时关注之后的文章. 搜索框的位置 图片示例:亚马逊 现状:进入亚马逊的网站页面,搜索框放在一个很明显的位置. 设计的理由:当用户进入电商网站,大部分人都是很精准地根据需要才进行网上购物,进行搜索就需要寻找搜索框,搜索框就必然置于显要的位置 默认商品提示 图片示例:淘宝 现状:淘宝页面的输入框内有默认的一句话:裙装节新品大赏! 设计的理由: 当网站想推荐某一个品类的商品时,搜索是用户使用高频次的功能,那么在搜索框中进行推荐,那么这个品类的

搜索框设计技巧分享 帮助优化网站性能

在浏览整个网站中,搜索框通常是通向用户使用的最后一道关卡.如果你的网站内容很多,包含了详尽的特色,功能,设计元素,产品和服务等等,那么搜索框就成为了网站不可或缺的一部分.网站的成长往往需要时间.当然,从整个网站设计和开发过程来看,设计肯定要简洁,有文章和评论,以及非正式的网站通知,特色内容和服务等等.不过,随着网站层次不断提升和更新,与网站相关的内容的只是起到了装饰作用.因此,搜索框对网站的性能优化起到了至关重要的作用.   优质的职能和运作对网站开发确实很重要,但与此同时,我们也不可忽视网站的