广州总部电话:020-85564311

TOP

收起快捷

首页 > 关于途必 > 途必学院 > 途必科技设计师教路,五个实践设计出正确的搜索机制
途必科技设计师教路,五个实践设计出正确的搜索机制
发布日期:2017-12-28 08:43:10
浏览次数:
来源:广州网站建设

      企业网站建设规划过程中,企业通过网站建设全面地展现企业实力,产品信息、资讯动态、服务优势等等,从用户体验的角度上考虑,网页设计模块化,页面导航清晰有迹可循,网页设计师同样也会注重搜索机制的设计,通过这三方面完善网站建设的规划思路,提升用户体验,更好地传递企业信息。下面途必科技设计师通过5个实践来说说如何设计更好搜索机制。

途必科技设计师教路,五个实践设计出正确的搜索机制

1.视觉线索

        无论创建任何类型的用户界面,为用户提供快速扫描屏幕所需的工具是你设计的一部分。这样做可以确保你的用户知道在什么地方找到他想要的东西,何时需要使用以及与其交互后会发生什么。

        放大镜图标:使用放大镜图标,我无法保证这样会加快了搜索栏查找的速度。但是图标越简单越好,较少的细节可以让用户更快地浏览。虽然,一个图标本身没有输入容器或按钮,实际上会使搜索更加困难。

途必科技设计师教路,五个实践设计出正确的搜索机制

放大镜图标

        极简主义搜索图标的示例:人们通常认为放大镜图标表示搜索工具,即使它没有标签说明。但是,只显示图标的搜索框会使搜索变得更加困难。(言论来自NNG凯蒂谢尔文的“搜索设计中的放大镜图标”)

        一个实际的搜索按钮:不是所有用户都是资深网民,这也就意味着并不是每个用户都知道,一旦在输入框里输入查询内容,按下回车键就可以得到相关信息。因此,在搜索输入旁边设计一个实际的按钮可以帮助用户确认他们的下一个动作,从而减少用户所需的认知负荷。

途必科技设计师教路,五个实践设计出正确的搜索机制

注意:避免将按钮放在输入框的左侧,上方或下方。

提示:在文本输入获得焦点前,你可以隐藏输入按钮。确保按钮的大小适中,以便点击起来感觉自然。

 

2.输入特性

        有时候,越是闪亮,强大或面积大的东西也不一定能引起人们的注意,搜索模式也一样。不如将它改为你理想的风格!但切记搜索框的设计必须与你的网站或应用程序的主题相吻合,并同时确保它足够引人注目。

途必科技设计师教路,五个实践设计出正确的搜索机制

          Youtube新的(令人惊叹的)黑色主题通过保持搜索模式与其他元素的一致性就完美地阐述了这一点。

          “搜索框也并不是越长越好”但也要确保输入长度也不要过短。据NNG的研究表明:拥有能够容纳 27 个字符的输入,可以满足90%的用户的需求。

途必科技设计师教路,五个实践设计出正确的搜索机制

如图:一个常见的 5 词 26 个字符搜索的例子。

 

3.透明占位符

       为输入的占位符文本使用适当的副本很重要,它们通常是暗示用户可以搜索的内容。 这确保了他们知道要搜索什么,并且不会因编写错误导致查询失败而感到沮丧。近,Web工具可以通过在HTML5 中添加提示作为占位符来轻松完成此操作。

途必科技设计师教路,五个实践设计出正确的搜索机制

      添加占位符可以帮助用户过滤查询的内容。

     提示:众所周知,人类的短期记忆容量有限。因此,尽量保持用于占位符文本的副本简短而直接。使用较长的提示会增加用户的认知负荷,从而损害用户体验。你可以在这里了解更多有关有害标签和占位符的信息。在某些项目中可能需要设计一个更具体的搜索功能。在这种情况下,你可以使用悬停的工具提示来确保提示在任何时候都是可见的,这样用户就可以将他们的短期内存用于其他任务。

途必科技设计师教路,五个实践设计出正确的搜索机制

       在这个例子中,工具提示可以帮助用户使用正确的查询格式以及找到他可以搜索的内容。

 

4.引导查询,即自动提示

       很多时候,用户会忙于思考搜索结果,而没有专注于构建一个适当的搜索查询。当用户无法找到他们所期望的结果时,这也是一个负担。这个用户的操作失误,也正是设计师的错误。在这里,自动提示就可以派上用场了。

       采用自动提示的目的不是为了使搜索速度更快,而是在用户查询构建中提供一点帮助。 你可以通过执行预测的搜索模式来实现这一点。例如用户想问这个可怕的词是什么?预测的搜索模式是根据用户正在编写的所有字符,猜测输入的是什么词汇,预测他们的查询将会是什么而弹出自动建议。

途必科技设计师教路,五个实践设计出正确的搜索机制

      正如Jakob Nielsen领导的团队所研究的那样,大多数用户未能从次查询中收集到他们所预期的搜索结果。因此,通过设置引导查询,除了大大减少用户执行搜索的工作量,还可以增加他们查找所需内容的次数。

      提示:不要给他们任何错误的自动建议。确保你使用的所有机制是合理的,并且符合你的用户需求。

      · 给你的用户近的搜索历史的视觉线索,这在重复搜索时特别有用;

      · 尽量保持简单,使用少的元素来分隔不同的建议(即填充和边框);

      · 把你给用户的搜索建议数量限制在 5 到 9 之间。请记住Miller在用户体验设计中的定律应用。

 

5.不要忘记定位

      用户对AD Shaikh&K.Lenz在 2006 年发现的某些UI元素和模式的位置有一定的要求。搜索就属于这种被要求的模式之一,绝大多数用户希望在界面的顶部中心或右上角找到它,就像上面提到的研究结果和以下图中所示。

途必科技设计师教路,五个实践设计出正确的搜索机制。

       “许多参与者希望在网页右上角或靠近左上角的位置找到”网站搜索引擎“,试着根据这些知识来定位搜索模式,它将确保你的用户很容易找到它。

 

       结论:我认为每天我们都会处理很多所谓的实践,却往往很容易忽略一些简单的话题,比如我在这篇文章中提到的那些。搜索是一个不断发展的模式,我知道这篇文章没有涵盖所有现有的指导方针。了解这一点,我希望这篇文章能够帮助到你们当中的一些初学者,甚至UX和UI设计的老手。

责任编辑:途必设计部

版权所有:http://www.uweb.net.cn (优网科技) 转载请注明出处

关闭
推荐新闻
童心无界 童萌有礼——六一儿童节活动来啦!
童心无界 童萌有礼——六一儿童节活动来啦!
六一儿童节是属于“孩子们”节日,不管是天真卡爱的小朋友,还是童心未泯的大朋友。跟着我们一起重回童年,让童心出发吧。
2024.06.03 10:56:04
途必科技十一月生日会--关怀与爱
途必科技十一月生日会--关怀与爱
时隔一个月,又迎来了我们可爱小伙伴们的生日,本月有好几位的寿星生日。途必科技为了关怀员工,特地举办了此次的集体生日会活动,并且还有很多丰富的小吃零食,饮品饮料,当然更重要的蛋糕也是不可或缺的。
2023.11.29 10:57:26
一起成长---十月途必科技员工生日会
一起成长---十月途必科技员工生日会
秋高气爽的季节里头,我们迎来了十月份途必科技小伙伴们的生日,在这个温馨的聚会里一同感受着生日的快乐,能在工作繁忙之余享受到节日带来的温暖。每一次的生日会都是大家在共同的成长,当然啦,成长的路上少不了磕磕碰碰,但是在我们的人生里头,总会相遇温暖,陪伴左右,成长也就变得更加有意义。
2023.10.30 09:29:30
温暖与你同在-八月途必科技小伙伴生日会
温暖与你同在-八月途必科技小伙伴生日会
在每个人成长的背后,总会有温暖相伴,像在途必科技的大家庭里,大家都可以感受到这样的氛围,又温馨,有爱。也许有时候自己都忘了的生日,却是有人记得你的生日,有人愿意为你祝福,这又何尝不是一种温暖呢。途必科技与大家一同成长,也将爱送给大家,途必科技对出席生日会的每一位小可爱表示热烈的欢迎和衷心的感谢,同时也为八月份生日的寿星们送上美丽的祝福~祝愿可爱的寿星们天天开心,心想事成,身体健康,另外也希望每位途必科技的小伙伴在未来的工作中越来越顺利,生活里也越来越好。
2023.08.30 10:32:55
这次圣诞节,我们玩大的
这次圣诞节,我们玩大的
这次的圣诞节,我们玩大的,为了让大家感受到如火热情般的圣诞节,此次带来了很多不一样的玩法和活动。行政人事部代表途必科技给大家制造了很多不一样的惊喜,在这里你可以收获丰富满满的礼物,漂亮小姐姐和可爱圣诞老人的合影,小伙伴们其乐融融的氛围,
2022.12.25 17:00:04
推荐案例
眼光高度决定品牌厚度!
业务展示
专业团队,品质服务

预算不足没关系,

这里

广州市途必企业管理中心(有限合伙)版权所有 粤ICP备2020085998号 Copyright © 2023 All Rights Reserved
 
扫码咨询

专属顾问
扫码咨询您的优网专属顾问!