分享好友 最新动态首页 最新动态分类 切换频道
高级设计师如何做搜索功能?来看这篇超全面的总结!
2024-12-28 04:37

宜信大数据创新中心-UI 设计师李婷婷 :文章带大家一起了解如何通过设计提升搜索功能的视觉层次、情感体验、搜索效率等。

一、搜索功能的作用

搜索是我们经常使用的功能,当我们面对复杂的信息时,想找到目标信息,就会寻找搜索功能的位置,它能高效精准的帮我们找到想要的目标。因而,我们可以从这两个维度去衡量一个搜索功能是否好用:

  • 是否高效节省用户时间
  • 是否精准直达用户目标

作为用户体验设计师,在设计搜索功能时,不仅要考虑视觉美观,还需要考虑内容层次、交互引导,以及在提升搜索效率时如何巧妙融入视觉情感体验、商业价值等等。下面带大家一起了解搜索功能的3个步骤,如何通过设计提升视觉层次、情感体验、搜索效率等。

二、的三个步骤

搜索前 - 搜索中 - 搜索后

1. 搜索前,常见的搜索入口
  • 搜索icon:节省空间,位置灵活。
  • 底部导航入口:触发后对应的搜索页面功能。
  • 顶部固定搜索栏:任务型功能,一目了然,快速点击搜索。
  • 悬浮窗搜索icon:悬浮窗搜索入口能够使用户在浏览的状态下总能注意到搜索图标,随时可以搜索的状态。

通常会把搜索放在比较明显的位置,具体怎么设计需要看搜索功能在这个产品中的权重。

2. 搜索中,输入页

常见的搜索输入页有两个状态:一个是刚进入时候的默认状态,另外一个是用户已经开始输入时候的输入状态。

用户进入搜索输入页时立即弹出键盘,并且输入框是焦点状态,保证用户无需其他点击,直接输入即可。另外需要增加快捷搜索词入口,展示5~10个历史搜索词,方便用户快速键入。

进入搜索输入页的用户,都具有比较明确的意图,可以在搜索页增加业务导向的模块,提高相关业务搜索。比如:热门搜索模块、推荐搜索词模块等。

3. 搜索后,搜索结果页

搜索结果页的主要目的是让用户准确找到自己的目标信息或结果。在搜索结果页里以下五种功能展示:

分类展示:当结果页内容展示过多时,应按模块对内容进行分类展示,可提升信息的清晰度和可读性,帮用户快速找到想要的内容。

增加操作功能:在结果页上增加操作功能,让用户快速抵达目的地,缩短操作路径,更有利于提升用户操作效率及提升购买转化等。

结果数展示:展示搜索出来的结果数量,让用户清晰了解搜索内容的多少及预估浏览所需时间。

关键词高亮显示:对结果页中关键字高亮显示,可以让用户快速找到自己想要的目标。

有效的纠错展示:当出现输入错误时,对用户进行有效的纠错或提示,可帮助用户快速且准确的完成输入,减少流失。

三、如何通过设计提升

视觉层次、情感体验、搜索效率。

1. 搜索功能的视觉提升

搜索框设计

统一设计语言:根据 app 的整体设计语言来考虑,页面中是具有亲和力的圆角按钮,大圆角的卡片样式,那么搜索框的设计语言也应保持一致。如下图飞猪的搜索框右上角与品牌图形相呼应,达到设计语言的统一性。

搜索框比例:搜索框长度确保可输入的字符的极限长度、推荐词的字符数,输入框高度符合移动端手指触碰面积。

搜索框视觉层次突出:搜索框线与面在视觉层次是否更突出。

搜索icon设计

图标符合用户心智:在用户的心智中放大镜图标即是「搜索」,如果图标很明显,那么就不需要再显示「搜索」二字了。

搜索icon形体:在设计中我们发现 icon 设计大小与屏幕有较大关系,在移动端里屏幕较小,可放置的图标和文字按钮更少。在较小的面积里对 icon 形体需要有高度的提炼,线条过于繁琐、过细都会造成视觉对比关系弱。

位置设计

用户对一些用户界面元素和模式的位置有一定的期待和习惯性的认知。搜索作为其中的一种模式,大多数用户希望在界面的顶部或右上角找到它。

2. 搜索中加入微交互提升情感体验

随着技术的发展和体验的提升,越来越多的 APP 中增加了微交互动效,比如在搜索页中增加了过渡动画,语音搜索中的引导动效,如:百度地图的语音搜索,在开启后,同时以简短的文字动效和语音图标不断扩大的圆环来引导用户说出需要搜索的地址,简单清晰又不影响用户操作。

在实际设计中我们发现适当增加微交互有超出用户预期的3个作用:

△ 《懂呗》APP搜索功能设计演示demo

提供即时反馈:在搜索时,视觉反馈的微交互让用户明白,操作已经被系统接受,让用户拥有掌控感。

促进互动:搜索中的微交互鼓励用户进行更多互动,它能够指引用户,教育用户,降低学习成本,让用户明白如何使用。

带来愉悦感:在搜索过程微交互动效给用户带来流畅愉快的体验。

比如:把语音搜索的功能与品牌吉祥物结合起来,创造出未来的智能感,在搜索等待时加入品牌吉祥物的 loading动效,或者对搜索不到的内容,搜索结果页可以增加一些萌趣的小动效等,来引导用户进行下一步操作,避免用户在搜索不到产生的消极情绪而影响产品的使用。

3. 设计形式如何提升搜索效率

搜索效率在搜索功能里扮演着至关重要的角色,下面从3个维度了解在设计形式中搜索功能的效率如何提升:信息效率设计、输入效率设计、商业效率设计。

信息展示效率设计

移动端屏幕小,内容呈现少,用户希望最快找到目标结果,搜索的信息展示设计应简洁高效、显而易见、层次分明。最常见的设计方式:分类、分区、排序展示等。

输入效率设计

为了减少用户输入成本,我们比较常见的是推荐位、历史搜索、关键词联想设计等,同时为了降低搜索跳出率,会规划出大家都在搜的模块。有这些关键词:

  • 用户常搜的,从常搜的词库中抽选几个展示,即推荐的模块,根据推荐内容展示形式不同。
  • 用户的历史。
  • 关键词联想设计,即高亮部分,一般都采用 app 主色或品牌色。


业务效率设计:相关业务的推荐、标签样式设计

  • 当前正在进行的活动相关关键词;
  • 当前要推的相关业务。

总的来说,在实际设计中提升搜索信息展示效率、输入效率、业务效率需要注意以下几点:

  • 合理利用手机屏幕空间,把关键信息简单明了展示。
  • 考虑用户特点及当前与更广泛的场景。
  • 突出关键匹配字段。
  • 保持设计语言的一致性,保证信息阅读的顺畅度。

更有人性化的无结果引导

  • 通过对用户的行为习惯记录、历史浏览记录,在无结果页中增加更准确、人性化的结果推荐,降低用户的失望,提升搜索效率。
  • 趣味性的引导:设计搜索无结果页时,可采用萌趣化的品牌IP形象,同时增加猜你喜欢,联想搜索关键词也能增加好的用户体验。

四、关于搜索功能的其他思考

至今为止,我们常见到的搜索形式主要有:文字搜索、语音搜索、图片搜索,另外还有一些特殊场景使用的搜索形式,比如扫码搜索,拍照搜索,拍照翻译搜索等等。最近几年,随着语音技术的不断成熟,语音搜索功能在音乐类APP 上应用越来越多,通过识别音乐来搜索音乐的相关内容,部分音乐类app 还针对一些场合做了些语音搜索上的优化,比如哼歌识曲,提高了用户搜索的内容的效率。

如今,我们看到搜索的效率、体验设计都在不断发生着变化,或许今后搜索结果页面中将更多应用于 AI领域,或许搜索答案的准确性和相关性更大幅度的提高,或许搜索更加互动、或许更加个性化的社会关系搜索等等。虽然目前我们还无法预知,但我们知道一件事,搜索体验在不断提升。

欢迎关注「宜信大数据用户体验设计部」公众号:

最新文章
经典wordpress网站/网络营销推广方案ppt
条件格式的功能是很强大的,可以实现很多的显示效果,可以满足某个条件的显示格式。它在软件中的位置与office有所不一样,在WPS表格中有两个位置可以找到它:格式-条件格式。下文以大于500的数字飘红,加粗
美漫从超人开始
美帝,堪萨斯州的某个小镇高中。李亚正一个人孤零零的坐在操场的看台上,眼神虽然盯着场下绿茵场上踢着美式足球的少年们,但心思早已飞到了天边。“哎,尽管过去十六年了,还是有点适应不来,怎么就穿越了呢,我发誓我啥也没干,没有遭遇车
爱校园电脑版下载攻略,轻松掌握下载步骤,快速上手!
摘要:本文提供了爱校园电脑版下载指南,详细介绍了如何轻松掌握下载步骤。通过简单的操作,读者可以轻松下载并安装爱校园电脑版,享受其提供的各种便捷功能。本文旨在帮助学生和校园用户轻松获取这一实用工具。要下载爱校园应用程序,您通
微信公众平台超链接
未认证的微信公众号可以添加外部网址: 任何外部网址都可以!   一、提交网址,获取微外链路径。   1.首先进入微外链官方网站:https://uom.cn/a/ 点击右上角的登录注册按钮,先注册一个账号(一般
VanEck对2025年加密货币的十大预测:比特币18万,以太坊6000美金,SOL500美金
  作者|数字资产研究主管Matthew Sigel 高级投资分析师Patrick Bush  编译|吴说区块链  请注意,VanEck 可能持有下文所述数字资产的头寸,原文链接:  在进入 2025 年的预测之前,让我们先回顾一下我们对 2024 年的预测表现如何。
威联通为中小企业提供经济实惠的边缘存储与备份解决方案
(全球TMT2024年12月10日讯)威联通科技(QNAP Systems, Inc.) 发布体积精巧的1U机架式4-bay NAS TS-433eU,机身深度仅11.51英寸(292.3mm),适合安装在空间受限的环境中,为中小型企业和组织提供经济实惠的边缘存储与备份解决方案。TS-433
花都保险柜客服人工24小时《2024汇总》 时政微观察丨从四次座谈会读懂“一张蓝图绘到底”
花都保险柜24小时维修热线:400-965-8692。花都保险柜全市各区点热线号码。☎:400-965-8692花都保险柜,秉承“诚信为本、客户至上”的态度和“以客户为中心”的指导思想,不仅真诚地为用户提供先进、高质量的系列产品,更为用户提供优质、
解析外链在手机站SEO优化中的关键作用及必要性
随着移动互联网的快速发展,手机站已经成为企业在线营销的重要组成部分。SEO优化对于手机站来说,显得尤为重要。尤其是在手机站SEO优化中,外链的作用逐渐被各大站长和SEO专家所重视。本文将深入探讨外链在手机站SEO优化中的必要性,分析外
传奇私服发布网_新开传奇网站发布_最大找优秀单职业传奇私服发布平台_www.sf999.Com
传奇制作程序、分外欢娱打到藏宝图207?仿盛大传奇心法版一对一叫我们分析刺客英雄净化术!
学姐,这么薄的裤子就不要穿出来了吧,我在你后面都觉得尴尬
大哥,你看你的老婆多么心疼你,觉得你洗头比较辛苦,所以特地叫来了专门服务我就知道肯定是小岳岳,你的眼神现在的香港小学生一年级入学考试题都这么难了,还是在老家上吧本来以为是一片树叶子,没想到是一只蝴蝶啊小姐姐,你p图太严重了
相关文章
推荐文章
发表评论
0评