赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.9K 0 0

在我接触交互设计前,我把搜索功能的设计看「搜索框+提示词+删除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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

对如今的 UX 设计师来说,会点动效基本已是常规操作了。作为 UX 设计师,动效可以辅助的产出可以涵盖界面交互动效、项目宣传 ...
AE动效
描边风是近几年比较流行,且被大量应用于平面和 UI 设计中的一种设计风格。 欢迎关注作者微信公众号:...
MBE风格
如何构建一个完整的解决方案呢?学会提问,学会多角度看问题,可以帮助我们构建一个完整的方案。 Airbnb Design与News Deepl...
经验分享
这是一个移动端的时代,Twitter 的移动客户端经历了很多版本的迭代,但是桌面端的更新改版则非常的克制。 一周之前,Twitter...
twitter
「猜你喜欢」当然还有很多词汇可以形容,比如:为您推荐、为您精选……经常在移动端购物的剁手一族们肯定都不会陌生。它似乎无...
京东设计中心
@糖糖糖就是糖 :这篇文章给大家分享一下在画好线稿的重要性,并总结了一些常见问题。选择合适的构图,画好线稿是一张画的开...
手绘
现如今,我们的日常生活和各种各样的APP密不可分。常用的诸如日历、计算器、待办事项列表辅助我们管理生活中的各种事物,不同...
APP UI
本文作者校招期间曾面试了阿里、京东等大厂,并最终顺利拿到了京东的 offer,本文是他对两家公司面试总体的回顾及总结。 首...
交互设计