移动端搜索功能设计:3个阶段解析搜索流程设计要点

这篇文章笔者想和大家聊一聊有关搜索功能的设计,搜索功能是每个内容型APP的核心,它的易用性决定了用户是否能从APP里快速找到自己想找的内容,那么决定搜索体验好坏的关键点又是什么呢?这里我总结了两点,“操作的易用性”和“结果的准确性”。看似简单的两点却有很多的学问,笔者把搜索的交互流程划分成三个关键阶段,“搜索前、搜索中及搜索后”,接下来将从这三个阶段逐一分析整个搜索流程中的相关设计。


这篇文章笔者想和大家聊一聊有关搜索功能的设计,搜索功能是每个内容型APP的核心,它的易用性决定了用户是否能从APP里快速找到自己想找的内容,那么决定搜索体验好坏的关键点又是什么呢?这里我总结了两点,“操作的易用性”和“结果的准确性”。看似简单的两点却有很多的学问,笔者把搜索的交互流程划分成三个关键阶段,“搜索前、搜索中及搜索后”,接下来将从这三个阶段逐一分析整个搜索流程中的相关设计。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

搜索入口——依据功能权重来判断入口的表现形式

在不同的APP或者不同的场景下搜索入口有着不同的表现形式,具体的表现形式取决于产品对搜索功能权重的定义,如果说在某一场景下搜索功能是用户常用的核心功能那么他在界面上所表现出来的权重就要高些,反之则低些。下图是常见的搜索功能的入口形式,他们的权重从左到右依次降低,笔者将对他们一一进行分析

移动端搜索功能设计:3个阶段解析搜索流程设计要点

方式一:如下图APP Store的搜索入口

如下图APP Store的搜索形式,搜索放在标签栏上作为一个独立的功能模块,它的功能层级是最高的。不管用户操作到哪里都可以随时进入搜索页面,这样的搜索入口通常用在搜索场景非常多的内容型APP上,方便用户在任何时候快速进入搜索页面。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

方式二:搜索框外漏在nav bar

如下图是京东app的搜索入口,它将搜索框外漏在nav bar上,这样的形式有着两个设计的关键点:

移动端搜索功能设计:3个阶段解析搜索流程设计要点

关键点一:搜索框外漏在顶部导航条上

搜索框直接外漏在导航条上是为了突显该功能,这一功能往往是用户在该页面非常核心的操作任务,类似天猫京东这类电商型app,通常情况下用户都是带着明确目的来购买东西的,那么他们采取的最快最直接的方式就是搜索。

关键点二:在向上滚动界面时,搜索框一直悬停在顶部

这样做的场景是这样的,在用户滚动页面寻找内容时,可能并不能找到自己想要的内容,搜索框一直悬停一是为了暗示用户可以进行搜索,二是为了让用户在想搜索时快速触发搜索

方式三:出现在NAV BAR下面,默认隐藏或显示

如下图是微信在聊天页面和通讯录页面的搜索入口,初始化状态时聊天页面的搜索框是不出现在用户的可视范围内的,当页面下滑时搜索框才出现,而在通讯录页面里搜索框是默认出现在用户的可视范围内的。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

分析:微信在最近联系人和通讯录上搜索框的默认状态不同,这很好地诠释了这两种场景下的搜索功能的权重。最近联系人页面上的搜索入口显得更加隐蔽,因为在这个页面下用户产生搜索的场景很少,把其隐藏简化了界面的元素,提升了界面的美观性。

方式四:通过点击icon触发搜索

如下图是淘票票的搜索的入口,通过点击右上角的搜索icon进入搜索页面:

移动端搜索功能设计:3个阶段解析搜索流程设计要点

分析:在界面权重上,这样的方式相对于以上三种方式来说显得较弱一点,因为在这样的场景下用户使用搜索的概率并不是很高,如果把搜索外漏就会占据更多的屏幕空间,破坏界面的权重等级和美观性。

总结:依据用户的需求场景,搜索入口放在不同的位置,如果说在该页面搜索是一个主要的功能,我们就应该去突显它,提升它在界面上的权重,反之则减轻它的权重。

搜索中间页——运营的重灾区,用户搜索行为的关键点

搜索中间页本来应该是一个轻量化的页面,用户在这里输入内容进行搜索即可。但随着运营需求的扩张,这个页面逐渐成为了一个运营重灾区,多了很多推荐的内容。笔者将从“输入框提示信息、搜索分类、搜索历史、搜索推荐、搜索输入、搜索建议”等方面分析一下这个页面的设计。

1. 输入框提示信息

搜索框内的提示信息通常是提示用户当下可以搜索什么样的内容,如下图bilibi的搜索提示,告诉用户可以进行“视频、番剧、UP主或者AV号”的搜索,这样的提示信息对用户也是一种良性的引导,给用户提供了一个心理预期,同时也对用户随意输入关键词造成无结果的伤害体验的可能进行了限制。例如一个房产APP,搜索框内提示输入楼盘或小区名,如果没有这样的提示有的用户可能就会去输入价格去筛选房源,这句提示语很好地降低了这样的风险。

但随着人们对APP使用的熟悉,用户在这里的认知负担基本消除,运营人员逐渐抢占了这块地方,这句话变成了内容的推荐或者产品的Slogan,这些推荐的内容可以是运营人员手动维护的也可以是依据用户的购买和行为习惯进行推荐的。如下图右边是淘宝的搜索提示,搜索框的文案变成了“红人最爱潮牌名服”,这就是运营人员在为特定内容进行导流。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

2. 搜索分类

在内容型APP中搜索时通常会对内容进行分类搜索,这是为了帮助用户更精确地找到相关内容,分类的操作可以发生在搜索前也可以发生在搜索后,如下图是“淘宝、微信、网易云音乐”搜索分类的方式,笔者将分别对他们进行分析。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

淘宝是将搜索分类前置,默认搜索宝贝,点击后弹出浮层进行切换。这样的方式存在一个明显的缺点就是由于该入口所占空间位置不显著,会导致用户感知太弱。 这样的方式通常用在用户大多数情况下只搜索某一分类的内容,如淘宝这样,用户大部分的搜索场景都是在寻找宝贝。

微信默认搜索所有内容,将分类通过通过三个很显著的入口放在搜索框下方,当点击某一分类时跳转到该分类的搜索界面,同时搜索框的文案以及搜索界面的内容发生相应变化,提示用户搜索范围被改变。这种方式通常用在这些分类搜索的场景都很常见时,它的缺点在于,从界面表现形式来看,这三个分类更像是三个功能的入口,他们与搜索框联系得不是很紧密,很多用户最开始使用时并不知道点击这些分类是进行搜索范围的限制。经测试3个从未使用过该功能的用户,他们都认为点击朋友圈后就是进入朋友圈,点击文章后就是显示所有文章。

网易云音乐是将搜索分类进行后置了,在下文关于搜索结果的展示我会分析它的优劣势。

3.搜索历史

搜索历史记住用户的足迹,方便用户快速向以前搜索过的内容进行转换。设计上我们需要注意的一点就是需要把搜索历史和搜索推荐区分开来,在位置上,尽量让搜索历史靠近搜索框(如下图),因为从认知心理学上来讲,越靠近搜索框的内容越能表示它是搜索历史。在表现形式上,搜索历史和搜索推荐尽量采用不同的表现形式。搜索历史伴随的交互操作有删除单条或者清空搜索历史

移动端搜索功能设计:3个阶段解析搜索流程设计要点

4. 搜索推荐

这里的搜索推荐通常有三种来源:

  1. 按照用户的搜索热度进行推荐;
  2. 运营手动配置;
  3. 按照搜索行为进行计算和推荐;

它存在的目的主要有两个:

  • 一是挖掘用户的潜在需求,让用户更快地找到想找的内容;
  • 二是作为运营位为特定的内容导流。

建议:

  • 不要漏出太多的推荐内容,毕竟它带有一些运营和广告性质,用户的接受度并不会很高
  • 在界面上让推荐内容和搜索历史有明显的区分,方便用户在形式上一眼就能区分出搜索历史和推荐内容
  • 尽量推荐一些对用户有真正价值的内容

5. 搜索输入

受移动端操控方式的限制,在输入内容时存在两个明显的痛点:“修改内容”和“输入速度”。

关于修改内容:当用户想更改语句中一部分文字时,将光标移动到想要更改的地方是一件很难的事,点击操作真的很令人发狂,通常情况下我宁愿重新输入。但是针对这一点搜狗输入法做了一个很人性的交互,当用户按住键盘左右滑动时就能移动光标(如下图)。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

关于输入速度:很早之前偶然间发现了UC浏览器在输入文字时的一个交互功能,如下图所示,当输入文字后,用户可以将搜索建议的词语直接加入到搜索框中然后继续输入文字。这样的需求场景在很常见,比如我想搜索“交互设计师的前景”,当我输入交互二字后就会有“交互设计”的搜索建议,点击搜索建议后面的箭头将这个词直接加入搜索框,然后就出现了“交互设计师的前景”的搜索建议,点击搜索建议后进入搜索结果的页面,这个过程中我少打了很多字,对我的搜索速度有很大的提升。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

6.搜索建议

当用户输入内容后,搜索框下面出现了众多的搜索建议,这些搜索建议是为了帮助用户快速向目标进行转化,如下图是京东的搜索建议,当我输入画框后,一系列画框的搜索建议就出来了,它还有一个亮点就是在此提供了细化筛选条件,画框后面紧跟了“长方形、实木、正方形”等关键的筛选条件,为用户省去了到结果页进行筛选的步骤。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

搜索结果——背后的逻辑决定了用户是否能找到准确的内容

搜索结果是搜索过程中最关键的点,结果的准确性确定了用户体验的好坏,笔者将从“搜索结果的形式、搜索结果的操作、搜索结果的分类、搜索结果的排序”等方面来对搜索结果进行分析。

1. 搜索结果的形式

搜索结果一般分为两种,一种是所见即所得,用户输入内容后出现在搜索框下面的搜索建议就是搜索结果,这种搜索通常出现在一些轻量化的APP中,因为搜索建议对应的就是唯一的搜索结果,如下图微信的搜索一样。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

第二种形式就是一个关键词对应了多个搜索建议,每个搜索建议又对应了多个搜索结果,当用户点击搜索后进入了一个专门的搜索结果页,如下图京东的搜索一样。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

2. 搜索结果的操作

依据用户的需求目的,在搜索结果的列表上我们可以外漏用户大部分情况下会采取的操作,比如说视频类网站,用户搜索到某一内容后,最常采取的操作就是播放,我们就可以把播放按钮外漏,缩短用户的操作路径(如下图爱奇艺的搜索结果页)

移动端搜索功能设计:3个阶段解析搜索流程设计要点

3. 搜索结果的分类

通常的分类方式是TAB切和卡片,以下是微信和网易云音乐的分类。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

这两种方式有各自的应用场景,TAB切主要应用在搜索结果有固定的几种分类,并且通常的情况下搜索结果都有很多的内容,如上图的网易云音乐,每一个分类都有很多的搜索结果,如果它采用卡片式的瀑布流布局,用户需要不停往下翻才能看到第二种分类的内容。卡片式主要运用在搜索结果的内容不多,如微信这样的情况,每一类结果并不是很多,卡片式的瀑布流布局能让用户快速定位到自己想要的内容,如果这里用TAB切就很尴尬了,因为每一类的内容都很少或者很多类里根本没有内容,这样的用户感受就不好了。

4. 搜索结果的排序

搜索结果的排序是一个比较复杂的工作,里面涉及了很多的算法逻辑,笔者对这块也不是很清楚,但是一般的垂直内容型APP并没有这么复杂的算法在里面,就是按照搜索的关键字去一一匹配。

如下图是说我在QQ阅读输入一个“男”字,然后就给我建议第一个字是“男”的所有可能的结果,当第一个字匹配完后就匹配第二个字,这样以此类推。他们的整体顺序就是按照匹配关键字的先后进行排列的,其实在排序中还牵涉了很多的算法,比如说它可能会掺杂一些“热度、人气、人为意图、语义”等因素的权重,这里不展开赘述了。

移动端搜索功能设计:3个阶段解析搜索流程设计要点

以上就是笔者对搜索功能的介绍和思考,希望能对大家有所帮助。

 

本文由 @不知名设计师 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25519/

(0)
CatherineCatherine
上一篇 2017-05-11 16:01
下一篇 2017-05-11 17:55

相关推荐

  • 02案例:用户体验与结婚教练

    02 案例:用户体验与结婚教练来自信息读书00:0017:04用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为...

    微信热点 2018-03-27
  • 交互设计控件之按钮设计

    ♝点击上方“交互设计学堂”关注我们,送电子书一.主按钮和次按钮很多按钮是成对出现的,比如“确定”和“取消”。一般情况下,按钮会有主次之分,一个按钮是我们期望用户去做的,另一个按钮是在特殊情况下才去做的。主次按…

    2017-08-04
  • 瑞昌2018年3.31-4.6一周企业招聘信息及待遇......

    【招聘信息】客服招聘企业:精彩网络科技详细地址:江西省瑞昌市摩恩大厦8楼801岗位要求:女性/中专/技校/1-3年工作经验 /30岁以下职位要求:会办公软件,联系人:范联系电话:18079284619【招聘信息】美容师,学徒招聘企业:汉娜尚妃美容中心详细地址:阳光国际,大唐岗位要求:女性/学历不限/经验不限 /35岁以下职位要求:汉娜尚妃美容中心高薪招聘一、店长2名,底薪2000+提成+业绩+奖金,总工资5000一7000左右二、美容师...

    2018-04-08
  • 科技每日早报20180507

    60秒读懂世界!1、深圳地铁“扫码过闸”将于5月8日正式上线:终于不用买实体票了; 2、特朗普重申支持拥枪 美国控枪人士:为换取选票; 3、中国要求美航企不得将港澳台标为"国家" 白宫横加指责:反对中国威胁与胁迫美…

    交互设计 2018-05-07
  • H5三个设计方向的自我定位

    如今,移动端H5如雨后春笋般迅速发展花样繁多,无论是宣传产品、内容介绍、新闻推广都会想方设法搞套H5出来。那么如何在众多H5中脱颖而出?如何使手上的资源发挥最大化?如何扬长避短,做出吸睛的H5?都是摆在我们面前的问题。

    2017-05-27
  • 用户体验是玄学吗?

    恍恍惚惚又是一年年底。又到了设计师们的“季节性迷茫期”,最近我的公众号后台经常接到好多朋友的信息,自己行间透露着迷茫和不自信。大的趋势和节奏还是和去年一样,有些视觉设计师询问我如何转UI,有些UI设计师问我如何才能培养产品思维…其实大家都在迷茫,在这里我想分享一个用户体验相关的综述给大家,希望能对大家找准自家的定位有帮助。我最初是一名UI/视觉设计师,然后随着一步一步的发展,给自己的目标也在发生变化,我现阶段给自己的最终定位是成为一名用...

    2018-02-06
  • 实例分析:运营活动项目中交互设计的4大维度

    文章以作者最近做的一个会员卡绑定激活的运营活动作为案例,总结了交互设计中的一些“套路”。我:这是什么个需求?
    pm:一个会员卡激活绑定的流程页。
    我:会员卡是什么东西?
    pm:这是一个实体卡,是我们平台用户升级为会员用的,上面有logo,卡号和密码图层我:这卡是怎么来的?
    pm:平台通过线下运营活动给平台老用户进行的福利或者用户进行购买获得。
    我:会员卡有什么用?
    pm:激活后可以将帐号升级为会员(类似qq会员那种)
    我:用户要怎么才能激活?
    pm:通过扫描会员卡后面的二维码来进行激活。
    我:激活后又会怎样?
    pm:激活后用户升级为会员,能享受各种xxxxx牛逼的特权。
    我:为什么要做这个需求?
    pm:让我们平台用户能够升级为会员,然后就…….
    我:额……

    2017-04-30
  • 蔚来ES8正式上市 | 重新定义汽车用户体验

    就在刚才,首届NIO Day蔚来日在北京五棵松体育馆圆满结束。蔚来ES8也正式上市并开启预订。近万名蔚来好友相聚于此今晚,这些信息你不容错过:蔚来ES8正式上市 公布售价蔚来ES8售价公布ES8基准版补贴前售价44.8万起,限量1万辆创始版补贴前售价54.8万,用户也可以选择电池租用方案,车价比常规购买低10万,每月支付1,280元电池月费,同时可享受电池升级服务。ES8上台亮相源于赛道冠军的极致性能4秒SUV俱乐部最大功率480千瓦(...

    2018-02-02
  • 读书:交互设计四策略

    1. 认知什么是简单的体验:用一句话把它写出来,包括我要设计什么,遵循哪几条设计规则,尽量使用最简单的术语。描述我希望用户拥有什么体验(用户使用场景、我的设计怎么满足)。2. 三种类型的用户:专家型用户:愿意探索产品或服务,并给你提建议;随意型用户:有兴趣使用更高级更复杂的产品,掌握重要功能的使用方法;主流用户:使用产品为了完成某项任务,掌握重要功能的使用方法;3. 关注用户的感情需求在设计过程中应该对用户的行为感兴趣,而不仅仅是自己的...

    2018-02-28
  • 交互设计的5个常见错误

    交互设计从来都不容易。它包括了用户行为的深度分析,和一丝不苟的规划。随着新技术和交互设计模式的出现,事情并不会变容易。 艳丽的图片、顺畅的鼠标悬停效果和意外的动画,不再那么容易引起用户注意了。但难题却…

    2015-11-09