今日焦点 焦点资讯 营销之道 企业报道 淘宝运营 网站建设 软件开发 400电话
  当前位置: 首页 » 资讯 » 网站建设 » 正文

拆解 | 搜索体验的设计套路

放大字体  缩小字体 发布日期:2018-02-18  来源:新格网  作者:新格网  浏览次数:577  【去百度看看】
核心提示:在不同业务类型、不同场景下,搜索的定位和形式可能大不相同,有没有一种通用的思路,可以cover住各类搜索的体验设计呢?

注:在不同业务类型、不同场景下,搜索的定位和形式可能大不相同,有没有一种通用的思路,可以cover住各类搜索的体验设计呢?

无论网站或是App,搜索功能几乎成了标配,在其间占据着或轻或重的位置。一方面,搜索可以帮助用户节约时间、直达目的;另一方面,它也是用户主动表达意愿的一个窗口,可以帮助搜集用户需求、引导用户行为。

在不同业务类型、不同场景下,搜索的定位和形式可能大不相同,有没有一种通用的思路,可以cover住各类搜索的体验设计呢?

我最近把玩了30+个App,涉及搜索、资讯、知识、电商、社交、视频、音乐、导航、工具、O2O、生活服务等十几种类别,归纳总结了搜索设计的一些套路和设计形式,将其拆解开来,与大家分享、探讨。大家可以结合自家的业务类型、具体的应用场景,选取适合的形式,提升搜索体验。

搜索体验的“三度” 

打造满意的搜索体验,需做好三个“度”:速度、温度、准确度。

速度指让用户更快得到搜索结果、完成搜索过程。

温度指搜索过程人性化,易于理解和操作,让用户感到贴心、甚至是惊喜。

准确度指搜索结果准确,符合用户期望。

乍一看,速度和准确度似乎与技术更相关,跟设计没啥关系。但其实三者相辅相成,我们可以通过合理而带有温度的设计,提升搜索的效率和体验,让用户搜得更快、更准、更舒心。

搜索体验的设计拆解 

我们可以把搜索拆解为三个部分:搜索入口、搜索过程、搜索结果

搜索过程又可拆解为三个动作:点击搜索框/icon → 输入文字/字符 →  点击搜索按钮/关键词。每个动作触发后,都会有相应反馈:

图1  搜索过程及反馈

接下来我会将各个部分拆分开来,分析体验设计的要点。结构及目录见下图:

图2  本文结构与目录

第一部分  搜索入口 

搜索入口具有提示和引导作用,常见的有 4 种:

  • 独立的一级tab

  • 搜索框

  • 搜索icon

  • 隐藏式搜索框/icon

图3  四类搜索入口形式

A.独立的一级tab

把一个独立的tab作为搜索入口,整个tab页面围绕搜索功能进行展开。这一整页,为搜索功能的拓展提供了很大空间,可以做各种尝试,适合将搜索作为重要流量入口的App。

代表有App Store、Twitter、新浪微博。App Store、Twitter的tab页面中只保留了搜索框和搜索热词推荐。新浪微博的尝试更加丰富,包括分类、话题以及不同类型的推荐,运营的空间更大。

B.搜索框

应用最广泛的一种形式,大多居于页面顶部,较为醒目。有些App在滑动页面时,还会将搜索框吸顶显示,便于用户随时使用。

搜索框内一般会有预设文案,提示用户可搜索的关键词类型。目前越来越多的App(尤其是电商类)把搜索框作为运营的入口,放入一些热词、活动、新品/新功能等,并且不局限于一个词,可能是一个字、一个短语,甚至是一个句子。

图4  搜索框中的预设文案

 
 
[ 资讯搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 违规举报 ]  [ 关闭窗口 ]

 
0条 [查看全部]  相关评论

 
网站首页 | 关于我们 | 联系方式 | 使用协议 | 版权隐私 | 网站地图 | 排名推广 | 广告服务 | 积分换礼 | 网站留言 | RSS订阅 | 皖ICP备2021004516号-14
企业800网 · 提供技术支持