在我接触交互设计前,我把搜索功能的设计看「搜索框+提示词+删除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. 搜索结快捷操作
我们可以过击搜索结进入下个页,也可以在前页搜索结接操作,在搜索结里,为了便用户操作,加上功能按钮,这般是我们前期已经了解好了物模型目标,知他搜索最终目,才添加快捷操作,常见有关注,播放等,比如:
五、异常情况
对搜索的异常情况,我们以从用户输异常,没有搜索结果,网络异常等几个角度来考虑。
比如用户输入异常,可能是用户输入误,比如我在淘宝上搜索「笔记笨」,系统查找结后,可以理解并纠正我误,将结展示为「笔记本」搜索结,不过这纠算法成本比较高了。
于没有搜索结情况,我们也可以过荐相关内容展示用户,这里般是运最佳地,或者是接用比较性化设计告诉用户没有搜索结,比如空白页小插画设计。
如果是络异,那么我们还需要考虑同页面的异情况处方式:如在激状态,是是热门推荐等信息是没法展示的呢?怎么告诉户现在没有络,是等他输入之后再告诉他没有络,还是在输入的时候,就醒户当前没有络呢?在键词联想页面,如果没有络,应该怎么显示呢?在获取搜索结果的时候,没有络应该怎么展示给户呢?
从心的角上来讲,实户并需要知道现在没有,他需要知道由,只需要一个解决办法,最好是系统够帮助我解决这个问题,我觉得在设计的时候,人性的设计应该是在没有的时候,供一个入口,帮助户快捷进入设置并且打开络。
而对于一些搜索的细节,如如何删除搜索的键词,及如何取消/退搜索,我们可通过键盘上的删除键一个一个删除输入的字,可在输入字信息后,在搜索框上供「X」icon,因为如果输入的信息过多,那么户一个一个删除会较麻烦,这个时候供一个一键删除的 icon 是体验十分棒的,过要注意的是在输入字前是需要存在这个 icon 的。
至于退出搜索的话,一是通过点击「取消」按钮取消搜索 。
总结
- 搜索功能的口有四种形式;
- 搜索也有文,语音,图片,维码等形;
- 没有输入容时,我们通过一些方式引导户输入;
- 对于内容比较多的 app,通过一些形式来缩搜索范围;
- 输入信息后,即时反馈,实时搜索;
- 关联词联想,词搜索要定义规则;
- 搜索结有多展现形;
- 定义搜索结果展示的规则;
- 要考虑异常情况的理方式。
注作者的微信公众号:「UED设计笔记」
图片素材作者:Ted Kulakevich