L1设计进阶技能树-搜索功能(移动端)

在我们开始之前,先问一个重要的问题:什么时候你会需要搜索?

搜索功能作为大部分互联网产品都具备的属性,即使这看起来一个非常简单的搜索功能的设计,也都包含着非常多的细节,它的每一个细节交互都可能会直接影响产品的用户体验。

它像是用户与产品之间的一场对话:用户通过查询表达他们的信息需求,产品以一组搜索结果作为回应。用户在搜索时期待流畅的体验,并且他们往往基于一两组搜索结果的质量就会对应用的价值做出快速的判断。

有些人认为,搜索是仅次于打电话的最常用的手机功能。人们用手机应用来查找一些东西,例如电子邮件、歌曲、视频、商品、文件、图片或者是现实世界中身边的东西等。

过于复杂的东西很多时候并不适合固定放在整天使用的移动应用上。幸运的是,我们可以用各种各样的方法来降低搜索的工作层,移动设备给我们以更加丰富的情境信息。搜索的设计要以简单、高效为核心目标,其过程可拆解为四步:搜索入口-触发输入-点击搜索-反馈结果。

搜索过程四部曲

一、搜索入口

在不同的APP场景下搜索入口有着不一样的表现形式,具体取决于产品对搜索功能权重的定义,如果说在某一场景下搜索功能是用户常用的核心功能那么他在界面上的权重显示就要高些,反之则低些。

下图是常见的搜索功能的入口形式,他们的权重从左到右依次降低:

常见入口形式

1. 独立的导航标签

直接出现在底部导航栏中,全局性的设计让用户可以随时点击进入到搜索页面,一般而言,此类操作触发后对应的搜索页面功能和层级也更加丰富,承载与搜索、发现相关的延伸功能。例如微博以及Appstore的搜索页面,切换至搜索导航标签时,进入的是一个独立的页面。

2. 顶部通栏样式

搜索框固定常驻在顶部栏、或者向上滚动界面时搜索框悬停在顶部,为了突显该功能,常见于海量内容为主导以及电商的产品,通常情况下用户都是带着明确目的来购买东西的,那么他们采取的最快最直接的方式就是搜索,查找商品/服务;还有在向上滚动时,这样做的场景是这样的,在用户滚动页面寻找内容时,可能并不能找到自己想要的内容,搜索框悬停在顶部一是为了暗示用户可以进行搜索,二是为了让用户可以触发快速搜索。

3. 出现在导航栏下面,默认隐藏或显示

常见的例如在微信“通讯录”tab页,搜索框是默认显示的;当用户向下滑动时,搜索框再次会被隐藏;当用户下滑后再回到顶部时或做下滑刷新手势操作时,搜索框才显示出来。微信的核心场景是聊天,搜索是其辅助功能,这就决定了布局上、视觉上、交互上的层级不需要像电商或内容型产品那样突出,所以在内容列表向上滑动时会隐藏以保持页面的简洁。

4. 通过点击icon触发搜索

在导航栏一侧或其他位置放置,当右侧有两个及以上按钮时,会考虑平铺或折叠。在界面权重上,这样的方式相对于其他三种方式来说显得较弱一点,因为在这样的场景下用户使用搜索的概率并不是很高,如果把搜索外漏就会占据更多的屏幕空间,破坏界面的权重等级和美观性。

二、触发输入

1. 输入触发的交互

输入内容时,引导信息消失,有的还会伴随在搜索框中出现清除的icon,清除的icon主要方便用户进行二次搜索时一键清空当前信息,省去了逐字删除的麻烦;同时是否调起输入法,调起输入法代表期望用户更多表达,但会有遮挡下方展示问题,不调起输入法代表期望在这个页面推给用户更多内容。

2. 关键词匹配

根据输入内容,进行关键词的匹配。匹配形式一般有两种,一种是正常的关键词匹配,按照一定的规则进行推荐并排序;还有一种是包含历史记录的匹配,会将包含关键词的历史记录置顶,与正常的匹配做区别并支持删除(如淘宝)。

引导:在用户无法准确记忆搜索的名称时,关键词可以作为引导,帮助用户完成搜索;

纠错:减少用户输入的错误,会自动在匹配区域更正;

高效:用户直接点击匹配出的结果,减少输入,提高搜索效率。

3. 出现默认搜索页面

该页希望呈现给用户哪些信息,这个页面可选择内容包括用户的历史搜索记录、热门搜索、分类搜索内容、推荐模块等。

默认搜索状态页面

(1) 搜索框下拉展示热门搜索和历史记录,例如知乎;

不同时间段搜索同一个事物是高频操作,保留历史搜索,便于用户操作。而热门搜索的作用是紧跟当前搜索热门;同时也可作为广告位出售,提高点击流量。

(2) 根据当前热门,个人搜索历史等逻辑,搜索框内出现默认一个搜索值,例如淘宝;

通过个人的搜索浏览,购买记录,以及热门搜索等综合计算得出,搜索框默认值会自动推荐一个内容,点击可以直接搜索该内容。

(3) 分类搜索,例如微信;

分类搜索,可以选择分类,再输入搜索内容;常见于内容类型多的app,需明确区别搜索,过滤无需的搜索结果。例如<天猫>,用户在搜索的时候知道是搜索公众号天猫,而不是聊天记录有天猫字眼的,可以筛选掉屏蔽无效结果。

三、点击搜索

点击搜索一般有两种机制:一种是输入完成后,需点击搜索按钮、键盘回车进行搜索才会出现搜索内容;一种是边输入边显示搜索结果,每输入一个字符即进行一次数据检索并将结果展示出来,这种搜索方式也被称为”即时搜索”。即时搜索的方式简化了搜索的操作路径,更快的引导用户查询到结果,能够给用户带来良好的体验。目前很多搜索都用第二种方式来达到用户期望。

触发点击搜索

四、反馈结果

触发搜索之后,搜索框失去焦点,框内保留搜索关键词,显示多条搜索结果,每条搜索结果中对搜索的内容飘红展示。如何能让搜索结果更清晰的展示,让用户更快的找到所需,常见的交互如下:

1. 结果分类筛选和排序

将搜索到的结果进行分类筛选和排序,一般采用Tab的样式进行归类。排序的维度因产品性质而异,常见的排序方式有时间、价格、销量、距离、好评等;而筛选需要限制可视的选项数量,因为我们的短期记忆只能将很少数量的信息(一般在7个项目或者更少)保留很短的时间。一般它们将放置在头部置顶选项,在搜索和结果之间,一是符合用户的认知和使用习惯,再者便于用户切换。

搜索结果分类排序

2.结果样式

当我们完成搜索时,以何种形式呈现什么样的内容才能更好的满足我们的需求呢?当用户点击搜索时,有两种信息的呈现形式,一种是在当前页面展示,另一种是新开页面。

(1) 在当前页面展示搜索结果的页面,内容较简单,主要目的是为了让用户进一步点击选择,使得搜索的结果可控。这种情况下常以列表形式平铺地展现信息,相关地二级标题或按钮会结合搜索结果同步露出。这种情况下,很多时候键盘地 “搜索” 按钮是禁用的或者键盘的设计无搜索按钮。

(2) 当需要展示的内容有不同属性,如列表、图、图文结合或更多的其他形式,则一般采用新开页面的方式,信息的展示也需要做分层处理。信息的分层包括每个单元内信息之间的对比、强调和弱化。不同单元和属性的信息间优先级展示以及展示方式的区分。

展示样式

列表式,小图+文字描述,以文字为主要信息,点击结果进入详情页,如知乎;

搜索结果除了可以看详情外,可直接操作,如网易云音乐,搜索音乐后,高频需求就是播放,故放播放键放至搜索页;

橱窗式,大图+文字描述,搜索结果以浏览图片为主要行为,常见于电商,美食类app,如淘宝。

3. 自动纠错

自动纠错

用户在搜索时输入了错误的词汇,系统经过判断后会展示正确词汇的搜索结果给用户,并友好的告知用户正确的搜索方式。

4. 特殊状态

特殊状态包含无结果状态、网络不佳状态等。

状态图

出现无结果的状态可能是:1.用户输入错误,2.搜索结果无。针对第一种情况,可以提示用户正确的搜索方式,并自动帮用户纠错;对于第二种,需要有好的提示用户无搜索结果,尝试其他搜索方式或者更换关键词等。

当搜索无内容时,我们给用户什么?

最简单粗暴的形式是直接告诉用户啥都没有,但这种体验不太友好,作为交互设计师应该思考一件事 “在没有结果展示时我们还能为用户做点什么?” 从用户的角度去思考接下来的事,即 “啥都没有,我要做什么呢?” 

现在开始来进行对这个页面的设计,用户分为主动和被动。

主动的用户这时候会做什么?我们可以在页面上做结果页展示的补偿方案:如通过分类和筛选功能,让用户缩小搜索范围;另外还可以重新发起一次搜索动作,输入更加精确的关键词、甚至对其结果提交报错或反馈。

而对于被动的用户,我们就应该去了解他,投其所好。如相似度和关联性推荐、热门推荐、可能喜欢、搜索历史等形式,增加引导性去关联用户的操作。

结语:

我们应该从综合考虑业务类型、功能定位、目标用户、应用场景,选用最合适的形式,提升搜索体验,让用户搜得更快、更准、更舒心。搜索的交互场景设计往往根据具体业务需求千变万化,但这恰恰是用户体验设计的意义点所在,也是设计的本源。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349