广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

18年
互联网应用服务商
请输入搜索关键词
优网科技设计师教路,五个实践设计出正确的搜索机制
发布日期:2017-12-28 08:43:10
浏览次数:1478

      企业网站建设规划过程中,企业通过网站建设全面地展现企业实力,产品信息、资讯动态、服务优势等等,从用户体验的角度上考虑,网页设计模块化,页面导航清晰有迹可循,网页设计师同样也会注重搜索机制的设计,通过这三方面完善网站建设的规划思路,提升用户体验,更好地传递企业信息。下面优网科技设计师通过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 (优网科技) 转载请注明出处

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

日期: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 (优网科技) 转载请注明出处

上一篇 返回列表 下一篇
推荐案例
眼光高度决定品牌厚度 !
广州网站建设-大良实验小学系统开发
广州网站建设-大良实验小学系统开发
大良实验小学于1998年成立,占地4万5千多平方米,是顺德区规模的民办学校之一。现有71个教学班,学生3223人,教职员工436人。学校按广东省一级学校标准建设,配有图书馆、舞蹈室、管乐室、多媒体电子琴室、实验室、英语乐园等功能场室36个,还拥有大礼堂、羽毛球馆、生物园、地理园、游泳池和200米塑胶运动场等活动场所。学校先后荣获“广东省一级学校”、“全国少先队红旗大队”、“广东省首届优秀书香校园”、“广东省书法教育名校”、“广东省综合实践样本学校”等光荣称号。
广州网站建设-海天味业公众号开发
广州网站建设-海天味业公众号开发
海天是中国调味品行业的优秀企业,专业的调味品生产和营销企业,历史悠久,是中华人民共和国商务部公布的首批“中华老字号”企业之一。目前生产的产品涵盖酱油、蚝油、酱、醋、料酒、调味汁、鸡精、鸡粉、腐乳等几大系列百余品种300多规格,年产值过百亿元。
广州网站建设-中凯网站建设
广州网站建设-中凯网站建设
中凯(海南)控股集团有限公司本次项目是集团网站建设,与优网科技合作过程中,双方配合默契,保质保量的仅一个月就完成了整站建设。优网科技帮助中凯(海南)快速树立了一个集团专业形象展示,同时网站的设计效果、体验和交互也让中凯(海南)非常满意。
广州网站建设-中国联塑网站建设
广州网站建设-中国联塑网站建设
中国联塑集团控股有限公司(简称:中国联塑,股份代号:2128.HK )是国内大型建材家居产业集团,产品及服务涵盖管道产品、水暖卫浴、整体厨房、整体门窗、装饰板材、净水设备、消防器材、卫生材料、海洋养殖、环境保护、建材家居渠道与服务等领域。
广州网站建设-前海益广网站建设
广州网站建设-前海益广网站建设
深圳前海益广股权投资有限公司成立于2016年04月18日,注册地位于深圳市前海深港合作区前湾一路1号A栋201室,经营范围包括一般经营项目是:股权投资;受托管理股权投资基金;受托资产管理;企业管理咨询、经济信息咨询;投资兴办实业等。
广州网站建设-萨米特高端品牌网站建设
广州网站建设-萨米特高端品牌网站建设
佛山市萨米特陶瓷销售有限公司始于2000年,在陶瓷行业风潮中发展壮大,是新明珠陶瓷集团的核心品牌。萨米特瓷砖注重营销系统的升级与消费体验模式的实施,倡导“设计+生活”的品牌理念,致力于打造有温度,有态度的瓷砖品牌。用设计提高人居价值,以创新驱动行业发展,与全球不同国家和文化背景的消费者共享美好家居。
广州网站建设-欧迪克网站建设
广州网站建设-欧迪克网站建设
佛山市南海欧迪克五金制品有限公司始创于2003年,致力于发展高端硅镁铝合金安全门窗,木铝门窗、阳光房定制,集研发、生产、销售、服务于一体。自创立以来,系列产品畅销大江南北,获得由权威媒体及单位颁发的多项殊荣。目前为止,“欧迪克门窗”的专卖店遍布全国800多个县市及地区,共有1000多家专卖店辐射全国。
广州网站建设-好太太网站建设
广州网站建设-好太太网站建设
好太太集团是一家集研发、生产、销售、服务于一体的智能家居企业,产品与服务涵盖智能晾晒、智能锁、智能电器等众多领域。坐落于广州番禺区,自1999年始便致力于打造 “好太太”品牌,经过将近二十年的发展,如今好太太已成为全球的晾衣架行业研发、生产、销售、服务商,在中国拥有近2000万户家庭在使用好太太产品。好太太集团于2017年主板上市,成为智能晾晒领域首家A股上市企业。
广州网站建设-中山公用水务网站建设
广州网站建设-中山公用水务网站建设
中山公用事业集团股份有限公司成立于1998年,是一家国有控股的上市公司(SZ:000685)。公司坚持“产业经营+资本运营”双轮驱动的战略思路,定位环保水务为核心业务,通过提升环保水务板块的产业经营能力,与资本运营平台协同增效,致力打造行业内有影响力的领先企业,积极担当社会责任和环境保护的公民企业,促成员工实现自身价值的平台企业。
广州网站建设--华标集团物业公众号
广州网站建设--华标集团物业公众号
华标集团物业为了进一步提升服务质量,满足业主的多元化需求,采用微信公众号作为服务平台,为业主提供日常物业缴费、报事报修、社区活动等便利性服务。本次量身定制的微信公众号,旨在打造一个高效、稳定、便捷的线上服务平台,让业主享受到更加贴心、便捷的物业服务。
广州网站建设-欧派家居集团官网建设
广州网站建设-欧派家居集团官网建设
欧派集团官网作为欧派对外展现品牌形象、传达服务理念的重要信息平台,也向用户展示了欧派最新的资讯和相关的售后服务。优网作为欧派集团的信息化战略合作伙伴,本次的官网开发基于专业的设计水平和扎实的技术能力,为欧派的互联网品牌形象全面升级。
广州网站建设-康臣药业网站建设
广州网站建设-康臣药业网站建设
康臣药业集团(HK.01681)是一家主要从事现代中成药及医用成像对比剂研发、生产及营销的现代化制药企业,创立于1997年,于2013年12月19日在香港联合交易所主板上市,旗下拥有广州康臣药业有限公司、康臣药业(内蒙古)有限责任公司、广西玉林制药集团有限责任公司、广州康臣药物研究有限公司等从事药品生产和研发的企业,运营康臣、玉林等知名医药品牌,在国内建有广东广州、内蒙古通辽、广西玉林等3个生产基地,员工逾2000人。
专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!
展开菜单
关于我们
优网观点
项目动态
公司新闻
优网学院
常见问题
收起菜单
活动会议应用
答题应用
班车预定应用
应急值班表应用
春节活动应用
活动直播应用
内部培训及任务应用
返回上一级