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

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

在现实中,网站往往会随着时间的推移,新的内容不断的增递,而且这些新内容会更加重要,那么他对你之前设计的信息架构会有一定挑战,可能新的内容不一定适合整个信息架构,这个时候会和你的当时精心设计架构是有违背的。那么你的内容会打散在各个地方,每块内容都会看上去比较特别,感觉不是在网站架构中的一样。

当内容被分散四处,没有内容组织的时候,用户就更加困难找到他说需要的信息了。用户的可用性降低了,没有他所需信息的时候,用户会选择离开网站,或去Google去试试运气。这个时候还有唯一的希望那就是:一个搜索框。

虽然搜索的背后需要很高深厉害的程序算法,但不要忽视了前台的UI设计,我想可以看看更多现有网站的搜索框的设计。

什么时候需要搜索?
并非每一个网站都需要搜索功能的,但随之网站越来越多内容,它是满足用户以最快速度获得所需信息的最有效的方法。如果网站导航非常简单直观,没有内容能逃出网站的导航的话,那么搜索对于这样的网站没有太大作用。
搜索应该是一种预防性的功能,因为当导航系统十分庞大复杂的时候,搜索是能力立即去解决麻烦的方法。它可以培养用户要如何使用网络获得他们想要的信息。

因此,如果网站够大,或者网站会逐渐庞大的网站,早点考虑优化自己的搜索引擎,那么您的用户会感谢你滴。

搜索框=输入框+提交按钮
在设计中的搜索框变得很重要。输入框必须清晰可见,很容易辨认和使用。有人可能会认为,在搜索框并不需要什么设计。看上去,这只有两个简单的要素:输入框和提交按钮。任何设计都不平凡。设计是很多要考虑的,比如:输入框的长度取舍,输入文字显示的设计。有些设计师就连提交按钮都没有设计上去。

事实上,设计的搜寻框是一个大问题。因为当用户有需求找某些信息的时候,搜索是最有效果的功能。那么搜索框的位置很重要,还有输入框应该让用户感觉可以输入,搜索按钮看上去应该更像是个按钮。

看看TechCrunch的设计,输入框和提交按钮,在配色方案完全符合网站的整体视觉风格。然而,它导致了一个问题:乍看之下,这真的很难看到的搜索框。用户可以搜索它,因为它不站出来是不容易发现。虽然位置的搜索框不错,很容易忽视,但这是不是一件好事。

搜索框容易犯的错误
在设计的时候我发现了几个问题:
1. 把搜索框放到页面底部,或隐藏在导航菜单中。
2. 将输入框设计比较短,暗示让用户使用短词来查询。
3. 提交按钮设计的比较小,迫使用户必须让鼠标指向非常精准。
4. 搜索框比较难让用户发现。
5. 搜索框的形式和其他功能形式一样的设计,比如联系人中的设计。
6. 在全设计中的页面(推广宣传),搜索框被设计的很难发现。
7. 提供功能过于强大的搜索,当用户是需要简单。
8. 提交按钮的名字随意的乱叫。
9. 并非搜索的功能,当看上去很像搜索框。
10. 提供多个提交按钮。

Wikipedia的搜索框就没有很直观的体现搜索。用户点击“Go”和“Search”有什么区别?功能上有什么不同?能不能在设计上让他们不太一样么。
设计体贴的搜索框

让我们来看看一些经常反复出现的困难和问题,设计师可能会在设计搜索框时所顾虑的。

搜索框放在什么位置?
有比较多的可能性,但只有少许是正确的设计。最方便的地方是网站顶部左上角或右上角。这两个位置比较让用户发现。因为用户最常见的F-型眼扫描模式。很多的博客往往将搜索框放在网站底部,看上去这个不是个好主意,但可能处于广告等的考虑吧。

如何命名提交按钮?
让提交按钮根据使用场景和用户情感化的设计来命名,是一个不错的主意。如:查找、查询、搜索或者一个ICON来表示。

这样的搜索按钮图片是非常让用户困惑的。

如何让用户如何搜索?
一个很好的想法就是把提示的文字放在输入框内,当鼠标点击输入框时提示消失。这样能明确告知该怎么利用搜索框。虽然它需要用小小段JavaScript来实现。
 
许多网站开始使用Google提供的一些搜索服务,但是可能用户不太喜欢这样的搜索结果,而且Google的算法也不太适合某些公司的网站需求。当不可否认Google的出现打破了一些规则。

时间: 2024-10-10 22:54:30

网页交互设计:网站的搜索框设计的相关文章

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

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

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

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

用户体验设计实例:阿里搜索框优化建议

·设计目的: 1) 在不影响现有用户使用习惯的前提下,提升搜索输入流程的便利性: 2) 在有限的空间内,增强首页搜索操作的历史回溯能力,减少老用户的搜索操作成本,提高他们的搜索效率: 3) 对新用户的搜索引导更丰富,增加搜索的趣味性: ·设计方案草稿: ·主要流程 1) 进入页面,光标默认放置在输入框内,支持用户直接输入操作.同时,光标后跟随当前搜索维度下的输入提示信息:(如图1.1) 图1.1 2) 在图1.1页面状态下,当用户输入任意关键词后,在输入框内部,清空系统默认的输入提示信息,显示当

用户交互设计:网站用户满意度题目设计

网页制作Webjx文章简介:关于用户满意度问题的设置. 网站日常运作中,为了收集不同产品的用户反馈意见,可以在各产品的页面挂出意见反馈入口,能够帮助产品经理间接地倾听用户的声音,实时了解他们使用产品的痛点.获取改进需求.与此同时,可以在反馈问卷中加入满意度的题目,一定程度上把用户的感受量化,当反馈意见量大无法快速消化时,量化的满意度题目能更快速地促进产品改进. 在用户反馈问卷中设置满意度题目,有利有弊,优势是如前所诉,能够快速把握部分用户的感受,也能够长期连续获得部分用户对产品的评价:不足主要是

细节决定成败:分享下拉框与搜索框设计的那些小细节

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 下拉列表框和搜索输入框是两个常见的页面搭档,我们可以形容过它是链接不同的独立页面的一条纽带,同时也是提高用户友好体验的关键点.下拉列表框和搜索输入框的组合较多出现在行业性比较强的站点前台或是各种系统后台,并且都是在一些很关键的位置,目的是为了让用户能很容易找到目标页面的入口.暂且不讨论站点行业的不同,下拉列表框和搜索输入框的排版顺序和其每个独

用户体验设计:网站的注册流程设计如何照顾用户

文章描述:网站"注册流程"如何"照顾用户"? 一个用户到了某个网站的门口,从跨进门槛到找到自己的座位,这个过程中网站要做的,一是让用户尽快坐稳,该干什么干什么:二是让用户快速熟悉房间,保持新鲜感,至少在坐下之前,主人应该送上杯水或两本杂志,让用户既感觉到主人的热情,又轻松发现了新的网站兴趣点,在座位上骚动起来.网站们是怎么做的呢?记得很久之前听过一个例子,说某家网站的注册流程中,对电子邮箱确认邮件的某句表述稍作修改,使得注册成功率大幅提升,当时对这个网站的崇敬之情就

搜索框在网站设计中的重要性

摘要: 在整个网站设计中,搜索框的外观要显眼,方便用户快速找到.网站建设公司普遍认为搜索框只是一个输入和提交内容的按钮而已,因此他们根本不需要花时间网站设计. 但是由于错误 在整个网站设计中,搜索框的外观要显眼,方便用户快速找到.网站建设公司普遍认为搜索框只是一个输入和提交内容的按钮而已,因此他们根本不需要花时间网站设计. 但是由于错误观念泛滥,站长们也错失了一些潜在的机会.由于网站设计上的缺失以及亮点不突出,用户通常会被搜索框的位置弄得焦头烂额,他们通常会点击"返回"按钮(离开网页)

响应式排版设计:网站设计的响应式字体

文章描述:当我们建立网站的时候,我们一般从定义正文开始.正文的定义显示了你的主栏有多宽,其它几栏的大小就随它自己内容定义了.直到最近,各种屏幕分辨率或多或少是同质化的.如今,我们要处理各种屏幕尺寸和分辨率.这让处理变得更复杂. 当我们建立网站的时候,我们一般从定义正文开始.正文的定义显示了你的主栏有多宽,其它几栏的大小就随它自己内容定义了.直到最近,各种屏幕分辨率或多或少是同质化的.如今,我们要处理各种屏幕尺寸和分辨率.这让处理变得更复杂. 在重整旗鼓的热情中,我写了一篇关于响应式排版的博客,这

WEBJX收集良好的用户界面设计网站

 WEBJX收集了20个良好的用户界面设计网站,希望做网站设计的朋友能从中得到灵感和体会. 1. Ballpark 2. Want Stream 3. Mozilla Songbird 4. Amidst 5. Concierge Live 6. Fluid Tumblr Theme 7. Seen It Yet 8. Episodic 9. Send Space 10. Answer Me