前言
上周在参加某项目需求评审的时候就有涉及到搜索框的设计,主要是聊到如让用户注意到这个模块以及它所涉及到操作后的数据提示问题。3月9号早读文章来看看由@Garrik的翻译授权分享。
正文从这开始~
搜索框实际上就是输入框与提交按钮的组合。有的人可能会疑问,搜索框也需要所谓的设计吗;毕竟,它里面只有两个元素罢了。然而,在一些内容量大的网站上,搜索框可能是最频繁被使用到的组件了。当用户浏览一个相对复杂的站点时,他们一般都会立刻去寻找搜索框的位置,好让他们能够快速地到达想要的位置。因此搜索框的设计与可用性就变的尤为重要了。
在这篇文章里,我们将探讨如何优化搜索框,以至于能够让用户更快速地找到他们想要的内容。
最佳范例
1. 请使用放大镜图标
请在搜索框后面加上一个放大镜图标吧。图标的定义是,对于一个事物,行为,或者想法的视觉表达。对于一些图标大众是有趋于一致的理解的。放大镜图标就是其中的一个例子。
Tip: 在使用图标时,尽量使用最简洁的放大镜。越少的修饰,可以让用户越容易理解。
2. 请让搜索框更加明显
如果搜索功能在你的应用/网站上占一个很大的比重,你就应该把搜索框放到一个更加显眼的地方,以让用户能够用最快的速度找到它。
一个展开的搜索框是很重要的,把搜索栏藏到图标后会让搜索框更不容易被找到,并且让交互成本上升。
3. 请加上一个搜索按钮
一个按钮可以帮助用户清楚,在输入完内容后还需要额外触发搜索事件。尽管大多数时候人们更想去按回车。
Tips:
为按钮选择一个合适的大小,以让用户不用去非要做到精确点击。相对大的按钮可以让用户更容易去点击到。
让用户可以同时通过按回车和点击按钮去触发搜索。其实还是有很多用户习惯去点击页面上的按钮。
4. 请为每张页面都加上搜索框
你应该保证用户能够在任何页面上一直可以使用搜索框,因为当用户找不到他们想要的内容的时候,他们会去找搜索框,不管他们在你网站的哪个位置。
5. 请让你的搜索框更加简洁
如果你想设计一个搜索框,请确保它看起来更像一个整体,并且容易使用。根据一些对于可用性的研究,那些默认状态下没那么多高级选项的搜索框具有更高的用户友好度。高级选项(例如:布尔搜索)会很容易让用户犯迷糊的。
6. 请把搜索框放到用户想让他们出现的位置
让用户花时间去找搜索栏的位置,是很不友好的。
下面这张表来自 A. Dawn Shaikh 和 Keisi Lenz 的一份研究中:根据一份142人参与的调查,这张表展示出了人们期待搜索栏所出现的位置。这份研究得出,人们最希望搜索栏出现在页面的左上角或者右上角。在这些地方用户可以更加容易通过F型浏览模式去找到他们想要的。
Tips:
理想上,搜索框还是应该适合网页的整体设计,当用户想使用它的时候,让搜索框更加明显。
你的内容越多,你就越希望突出你的搜索功能。如果搜索是你网页的重要功能,使用大量的对比,可以让搜索框在背景上或者周围其他元素上看起来更加突出。
7. 请选用合适的输入栏尺寸
输入栏太小是很多设计师都会犯的一个错误。当然,用户可以输入一长串内容,但是只能显示一小部分是会让可用性大打折扣的,因为在这种情况下用户很难去检查,或者修改输入。事实上,当搜索框可以显示的字数有限的时候,用户会自动输入较短的内容,因为较长的输入是很不方便阅读的。如果输入栏能够与用户所想输入的内容长短相匹配,可用性就可以被大大提高了。
一种估测是,让输入栏长度大概保持在27个字左右(英文)就可以满足90%的情况了。
Tips: 考虑使用一个可伸缩输入框,当用户点击时,可以加长输入框。这样既可以节省空间,也可以让用户更加方便找到和进行输入操作。
8. 请为用户列出自动候选项
自动搜索候选可以通过用户已经输入的字句,帮助用户找到一个合适的查询。自动候选并不会加快搜索进程,但是却可以指导帮助用户去组织他们的查询语句。一般来说,用户是不太会在搜索栏上问问题的:如果他们不能够在第一次查询里获得想要的答案,之后的搜索结果也不会太让他们满意。事实上,他们会放弃。当自动搜索候选项使用恰当,它是可以帮助用户去问出更加恰当的问题的。
谷歌搜索就很擅长此项,在2008年他们就开始使用这一功能。因为用户很多时候会搜索同一件事很多次,通过记录搜索历史,谷歌为用户节省了时间,并且提高了用户体验。
Tips:
确保自动候选栏是有用的。不好的候选项反而会让用户困惑。使用拼写修正,辨别输入,并且预测用户想要搜索的内容以为了提高使用体验。
你应该以最快的速度列出建议选项,大概三个字左右,就要快速列出候选项了,以来减少用户后面的输入。
控制在十个选项之内,不要用滚动条,以让信息不会过多。
支持键盘选择,当用户选到最后一个选项时,下一个选项应该转到第一个。ESC键应该可以让用户离开候选列表。
标出输入与建议信息的不同处(例如:输入信息用一般字重,建议信息用加粗字重)。
9.请让用户更加清楚什么可以搜索
一个好主意是列出一些搜索例子在输入栏中,以来提示用户这个搜索栏具有的功能。如果可以允许用户搜索多项内容,用一些提示会更好(例如:IMDb)。HTML5让我们很容易通过 placeholder 做到这一点。
Tips: 控制你提示内容的字数,否则会增加认知负荷。
结论
搜索是一项很基础的功能,并且在内容繁多的应用或网站里担任重要角色。即使是一些很小的改动,只要能让搜索框更加恰当的显示,使用。可用性和用户体验都会显著的整体提升。
最后,为你推荐:
【第372期】一个特别好用的搜索框必须考虑的五个方面
关于本文
译者:@Garrik
译文:https://zhuanlan.zhihu.com/p/25555766
作者:@Nick Babich
原文:Design a Perfect Search Box
温馨提示
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请后台提交工单处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请后台提交工单!
【免责声明】:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
【关于转载】:
本站尊重互联网版权体系,本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读,无任何商业用途,所有内容版权归原作者所有
如本站(文章、内容、图片、视频)任何资料有侵权,先说声抱歉;麻烦您请联系请后台提交工单,我们会立即删除、维护您的权益。非常感谢您的理解。
【附】:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
注:本站资源来自网络转载,版权归原作者和公司所有,如果有侵犯到您的权益,请第一时间联系我们处理!
-----------------------------------------------------------------------------------------------------------
【版权声明】:
一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、如有内容侵犯您的版权或其他利益的,请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后,情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------
源码村资源网 » 网页设计中怎么给列表设置框(网页设置上怎么添加一列)
1 评论