• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 交互基础小课堂!移动端「搜索功能」设计超全面总结!

交互基础小课堂!移动端「搜索功能」设计超全面总结!

作者:UED设计笔记 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含搜索,搜索框设计,搜索结果页,经验分享,运营设计等相关知识,UED设计笔记希望在学习及工作中可以帮助到您

在我接触交互设计之前,我一直把搜索功能的设计看作「搜索框+提示词+删除icon+取消button」的设计,但其实看似简单的搜索框背后拥有十分复杂的场景,复杂的逻辑还有复杂的算法规则等。

Peter Morville 有一本书《搜索模式》里面将搜索剖析得十分细,从搜索结构到行为模式到设计模式再到发现引擎都拆解开来一一讲解,不过偏 web端,而且有点复杂,建议阅读方法是只看目录,知道搜索功能设计有哪些要点,然后自己结合案例分析总结即可。

这篇文章主要还是介绍移动端的搜索功能设计,根据用户对搜索框的使用场景,拆解为:触发入口——激活搜索框——输入信息,即时反馈——结果展示——异常情况等。

一、搜索功能入口

我们可以根据搜索功能的重要性程度,将触发搜索功能的入口分为四大类别:

一种是作为底部独立的一个 tabbar 存在,比如 app store 里面的搜索;

一种是在顶部放置的一个搜索框入口,比如豆瓣;

一种是以一个 icon 的形式存在于某一角落处,触发后即可开始搜索,比如站酷app 客户端;

还有一种像小猿搜题,这样的以搜索导向的特殊存在形式;

也有像自如这种搜索框作为悬浮按钮存在于页面中间的形式。

简单总结一下这几种搜索功能入口的适用场景:

二、激活搜索框

1. 搜索方式

当搜索框激活时,我们可以通过文字,语音,图片,扫描二维码等形式进行输入。最常见的当然是文字输入,比如36kr;

还有通过语音搜索,比如最常见的是支付宝的语音搜索,还有网易有道词典的语音搜索;

而对于拍照搜索的话,最常见的是电商平台里的拍照搜索,比如亚马逊;

还有扫码搜索,比如京东可以通过扫一扫搜索。

2. 没有输入内容时

在搜索框没有输入任何内容的时候,我们可以通过一些方式引导用户搜索。比如:热门搜索,热门搜索的规则也是需要指定的,不同的平台热门搜索展示的规则不一样,是每日热搜还是每周还是每小时呢?每次呈现多少条热搜以及是否可以在热搜里加入运营的内容呢?也是我们需要考虑的。

比如历史搜索,但是历史搜索需要注意的是如果用户是第一次搜索,那么是没有历史搜索,这个时候是否需要显示历史搜索呢?我观察的绝大部分 app 如果第一次搜索或者清除了历史搜索的时候,是不需要显示历史搜索字样的,比如:

另外像高德地图,可以根据用户需求,通过一些固定的入口引导用户快捷搜索,比如美食,酒店,公交站等。

另外当用户没有输入内容的时候,搜索框会提供一些默认提示词,这些提示词绝大部分是来自运营的需求,用户不用输入任何内容,直接回车即可搜索默认提示词,比如:

3. 提供搜索范围

当 app 里内容十分多的时候,可以通过缩小搜索范围,可以按照搜索结果的类型进行分类,比如用户,信息,标签等,一般用 tab形式比较多,比如词典,微信,lofter,或者使用单选框形式,比如豆瓣。

三、输入信息,即时反馈

在输入完关键词内容后,以前的 app 大都需要用户点击搜索后才执行搜索指令,现在绝大部分 app 都可以通过即时反馈完成实时搜索, 比如:

1. 关键词联想

用户在输入不完整的关键词的时候,可以通过关键词模糊匹配,但是需要注意的是:结果的排序规则以及匹配的结果条数。

举个例子,比如我在天猫的搜索里面输入「书」,排序第一的是「书架」,排序第二的是「书包」,这个排序规则可能是计算出的数据里书架比书包的点击次数或者搜索频次更高,所以会展示在前面,但是在这类电商平台里与「书」有关的关键词,十分多,不可能全部在关键词联想里展示出来,展示的数目也是有规则限制的。

2. 多词搜索

不知道大家有没有发现过多词搜索的情况,比如当我们搜索一个带定语的关键词的时候,在定语与名词之间用空格键隔开的时候,会变成两个关键词。

举个例子,比如豆果美食,当我在搜索框里面输入「土豆鸡蛋」时,系统识别的结果是一个关键词;当我输入「土豆 鸡蛋」的时候,系统识别的是两个关键词,但是对于结果的区别并不是很大,但是在设计交互的时候,也需要定义好规则。

四、搜索结果展示

1. 搜索展现形式

当输入完搜索的内容时候,因为结果有多种不同的类目,对于内容的展现形式会有两种:

一种是在一个页面堆叠全部展示,这种一般适合单个类目结果不是很多的情况 ,并且在下滑的过程中,越往后的内容其实阅读量会很低,用户关注度也不高,比如在36kr 搜索「投资」,会出现不同类型跟投资有关的结果,如文章,快讯,视频,音频,专题,话题,投票,作者等:

还有一种是每一个类目都是用户想要关注的,并且单个类目里的结果也比较多,一般可以选择 tabbar 的形式进行对结果分类,比如站酷:

另外知乎的搜索结果展示做法是,穿插式地展示,以回答为主,期间穿插一些其他类目,比如话题,用户,专栏等,但是它也会给用户提供一个筛选的入口,让用户快速获取想要的内容。

还有像一些 app 比如 unsplash,它们在搜索完的结果会另外一个页面展示:

2. 搜索结果展示规则

对于搜索结果的展示规则,也是交互设计师需要考究的,比如我们需要定义搜索结果展示哪些字段,搜索结果的排序规则,关键词与内容的匹配规则。

举个例子:比如我在 TIM 上搜索「腾讯」,会出现很多和腾讯有关的内容,如果对于长字段的文本来说,不可能全部展示在这个预览的页面,我们需要定义可以展示哪些字段以及不能展示的字段怎么显示,比如用「…」的方式。

这种情况在新闻咨询类 app 里面十分常见,比如36kr 的文章,如果正文中某处出现与搜索的关键词相匹配,那么在结果展示页面,对于正文关键词前面的信息是怎么显示的呢?也是可以通过定义规则来实现的。

3. 搜索结果快捷操作

我们可以通过点击搜索结果进入下一个页面,也可以在当前页面对搜索结果直接操作,在搜索结果里,为了方便用户操作,加上功能按钮,这种一般是我们前期已经了解好了人物模型的目标,知道他搜索的最终目的,才添加的快捷操作,常见的有关注,播放等,比如:

五、异常情况

对于搜索的异常情况,我们可以从用户输入异常,没有搜索结果,网络异常等几个角度来考虑。

比如用户输入异常,可能是用户输入错误,比如我在淘宝上搜索「笔记笨」,系统查找无结果后,可以理解并纠正我的错误,将结果展示为「笔记本」的搜索结果,不过这种纠错算法成本就比较高了。

对于没有搜索结果的情况,我们也可以通过推荐相关的内容展示给用户,这里一般是运营的最佳地方,或者是直接用比较人性化的设计告诉

您可能想查找下面的文章:

  • 输入自动提示搜索提示功能的样式文件:suggestion.css
  • 搜索文本框焦点离开时文本位置跳动问题解决方法
  • 一小段html代码将就能将百度搜索栏包含到你的页面里
  • 搜索引擎免费收录网站入口小集
  • 网页设计中要关注的搜索优化知识
  • 交互基础小课堂!移动端「搜索功能」设计超全面总结!
  • 如何做好一个搜索体验流程?看这篇超全面的总结!
  • 如何让搜索框的体验更好?我总结了这些设计套路!
  • 这篇搜索功能设计的总结,帮你从产品的角度看问题
  • 淘宝京东这10个搜索细节,你最喜欢哪个?

相关文章

  • 2018-08-23参与3个项目后,我总结了这个服务流程设计新思路
  • 2018-08-23历时7天,168小时,超过100页的「复仇者联盟」PPT 免费下载!
  • 2017-08-06DIV常见任务(下) —变身为编辑器及div的各种diy应用
  • 2018-08-23这款独特的紫色,是为你指引2018年设计方向的年度潘通色
  • 2017-08-06巧用扁平化风格来设计网站的方法
  • 2018-08-23设计实战!为扁平风的移动端赛车游戏定制插画
  • 2018-08-23让设计不再是小透明!超全面的用户引导设计指南
  • 2018-08-23网页中这10种字体的运用方式,不会让人觉得Low
  • 2017-08-06网站制作中的网络广告的互动新体验(图文教程)
  • 2018-08-23网易设计师:做好文字排版的小技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 绝对干货!UI设计师最需要了解的设计工作流程
    • 人人必知10个网站易用性技巧
    • 28个经过重新设计的著名博客案例全集
    • firefox浏览器中播放背景音乐的终极解决方案(chrome多浏览器兼容)
    • 汽车交互专题!全方位解读特斯拉Model 3中控大屏交互布局
    • 网页设计中flash覆盖弹出层设置z-index属性也不行
    • 如何培养组件化设计思维?来看阿里设计师的经验总结!
    • 想掌握对话式交互?先来学习自然对话的基础知识!
    • 网页制作绝对路径与相对路径的区别
    • 腾讯设计师:极速适配 iPhone X 的技巧揭秘!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有