首页 > 建站资源 > 网站优化 > 那些方法可以让搜索框的体验更好?

那些方法可以让搜索框的体验更好?

时间:2018-01-03    来源:优设网

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

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

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

搜索体验的「三度」

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

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

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

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

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

搜索体验的设计拆解

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

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

△ 搜索过程及反馈

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

△ 本文结构与目录

第一部分 搜索入口

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

  • 独立的一级tab
  • 搜索框
  • 搜索icon
  • 隐藏式搜索框/icon

△ 四类搜索入口形式

1. 独立的一级tab

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

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

2. 搜索框

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

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

△ 搜索框中的预设文案

3. 搜索icon

搜索icon应用广泛,位置一般在页面右上角。相对搜索框来说,搜索icon的引导性稍差,运营空间也有限,但可以节约导航栏空间,适合于将搜索作为辅助功能的场景。

比如得到的今日学习模块,以feed流的形式,展示用户每天的学习任务。这个模块预设功能是浏览、收听,且内容有限(只包括用户付费订阅的内容和平台为该用户个性化推荐的内容),搜索在此仅仅是辅助功能,所以将入口弱化。并且得到将此处搜索设定为全局搜索(搜索全App),可以引导用户发现更多内容,避免出现无结果/少结果的情况。

△ 得到今日学习模块

4. 隐藏式搜索框/icon

这种形式的搜索功能是被弱化的,入口在主页上不可见,有的折叠在其它入口中,有的可通过手势唤起。

典型的一种是下拉出现搜索框:平时搜索入口隐藏,不占用空间,需要时又可下拉迅速呼出。微信和iOS桌面、备忘录都采用了这种形式。

第二部分 搜索过程

搜索过程是提高搜索体验的关键部分,过程可分为三个阶段:点击搜索框/icon → 输入文字/字符 → 点击搜索按钮/关键词。

第一阶段的反馈如下:

  • 跳转:跳转到搜索页
  • 激活:激活搜索框,光标闪烁,并显示引导文案
  • 调起:调起搜索键盘
  • 搜索页

本文的搜索页,指点击搜索框/icon后跳转的页面。

搜索页包括两部分,搜索栏和辅助区(搜索栏以外的部分)。进入搜索页后,一般默认调起搜索键盘。

△ 搜索页结构

1. 搜索栏

搜索栏有两种常见的形式:

△ 搜索栏形式

两种形式区别在于按钮的设计,前者有「返回」和「搜索」两个按钮,后者仅有「取消」按钮。这里「返回」和「取消」功能相同,都是结束搜索,返回上页。

因为调起的键盘通常为搜索键盘,自带「搜索」按钮,并且从操作连贯性方面来说,键盘上的搜索按钮更符合用户习惯。所以目前大多数App在界面上仅保留了取消按钮,这样也更利于用户聚焦。

有些App突破了传统搜索框样式,采用了更突出的形式(如爱彼迎)。还有些增加了图片、语音、二维码识别的入口,这也为信息输入提供了更多的途径。

2. 辅助区

辅助区主要为用户提供合适的推荐,以提高搜索效率。此外,也兼具运营属性,可以作为推广入口。

辅助区的推荐主要有历史记录、热搜和分类。不同类型的App在设计上有所偏重,如电商类App,热搜可以作为运营入口、为某些品类导量,但工具类App,如印象笔记,搜索功能主要用来查找用户自己的笔记,不具备运营属性,也就不需要热搜。

△ 辅助区中的历史记录、热搜和分类

3. 历史记录

历史记录适用两种场景:

  • 搜索词与历史搜索有一定相关性,需要在历史搜索的基础上调整关键词。
  • 搜索的关键词,搜索结果可能有更新(如在58搜索酒仙桥三室一厅的租房信息,房源信息可能会增加)、搜索结果之前并未处理完(如在京东搜索加湿器,只浏览了第一页,并未完成购买)或者需要再次搜索(如高德地图中从不同的起点搜索某地、做路线规划),这时需要重新输入关键词。

历史记录能提升重复搜索时的效率,但并非所有的搜索都需要历史记录。如果搜索结果操作较为简单,且通过一次即可完成,那么就可视情况省略。

比如App Store,无论是搜索关键词或者精确的App名称,用户搜到之后,最有可能的动作就是下载。如果不满意,可能会离开,但离开后再搜索同一App的可能性很小,历史记录起到的作用有限。

考虑到搜索页的空间、有效性,通常需要控制历史记录的数目和时间范围。

历史记录的形式主要有两种:一种是标签式,一种是列表式。标签式节约空间,列表式扩展性强(可以展示更详细的信息,也可支持收藏、删除等操作)。

考虑到隐私问题,历史记录一般支持删除。删除有两种,一种是删除单条,一种是清空所有。删除单条功能多见于列表式,一些标签类的也可采用长按的方式删除单条(比如淘宝)。

△ 历史记录

需要注意的一点,历史记录只用于搜索初期,后续可在适合的场景下,引导用户使用收藏、订阅、足迹等功能,打造更好的体验。例如,腾讯视频记录观看历史,不但使用户免于搜索,而且可以记录进度。什么值得买,在搜索结果页添加了「关注」按钮,关注后用户可以在首页「关注动态」tab看到持续更新的搜索结果。

△ 更丰富的引导方式

4. 热搜

热搜的作用类似于搜索框中的预设文案,起引导作用。但因为辅助区的空间有限(键盘会遮盖一部分),为尽可能提高利用率,热搜的字数通常会作出限制。

常见的热搜主要有4种:

  • 整个平台用户的热搜
  • 基于用户的个性化推荐(根据用户资料、轨迹等信息做智能化推荐)
  • 平台运营内容(为某些品类引流)
  • 推广(商业广告)

热搜的展示形式以标签为主。因为部分热搜是个性化推荐,可能会暴露隐私,一些App还贴心的设置了隐藏按钮。

5. 分类搜索

当App中涉及到的业务、类型、品类多时,可能出现多种类别的搜索结果,其形式和操作也不同。为了让一部分目的明确的用户(明确知道要搜索的类别),从中快速、准确地找到自己预期的结果,常常采用分类搜索的方式。

具体有3种方式:

  • 搜索框分类选择
  • 辅助区分类选择
  • 搜索结果页分类选择

搜索框中的分类选择,适合那些需求明确的用户。如在链家中,搜索二手房还是租房,用户是特别明确的。在搜索框中默认限定类别,可能会导致搜索结果偏差。为了照顾到更多用户,大多数App提供了「全部」类别,并默认搜索「全部」类别下的结果,比如微博。

未在搜索框中选择分类的,仍然有机会在搜索过程中选择分类。淘宝采用tab的方式,区别展示「全部」、「天猫」、「店铺」的搜索建议和结果。亚马逊则在输入过程中,提供类别的选择(默认搜索全部分类,但提供搜索小类的入口),同样的还有58、京东、闲鱼等。

更多的App采用搜索结果分类的方式,将结果分门别类呈现,减少用户在搜索过程中的决策压力。最常见的形式是tab式(代表:知乎、支付宝),第一个tab一般为各类结果的堆叠,后面每个tab为一类,便于切换。还有的采用标签来区分(代表:Facebook、网易考拉、京东)、用列表作为类别入口(代表:58)、直接将各个类别模块堆叠起来(更像是列表式的扩展,每个类别外露一些内容,代表:微信、豆瓣)。

这几种方式并不是完全独立的,可以根据需要灵活运用。

△ 分类搜索的常见形式

搜索过程第二阶段(开始输入文字/字符)的反馈如下:

  • 变化:搜索框中,引导文案消失,出现清除icon
  • 匹配:根据输入的内容,进行关键词联想
  • 清除icon

清除icon是一个贴心的小设计。它的作用是一键清空搜索框中内容,与引导文案交替出现:键入文字时,引导文案消失,清除icon出现;点击清除icon,文字清空,引导文案出现。

下图是某App的截图,需要注意取消按钮的形式,避免与清除icon冲突,引起用户困惑。

△ 避免取消按钮和清除icon冲突

相关推荐
想要设计一个完美的搜索框 你需要注意这9个要素
制作完美搜索框的9个要素设计原则
搜索框设计:那些细节关乎用户体验?
有效提高网站销售转化率的16个UI设计秘诀
32条优秀UI设计建议 助你提升网页易用性及转化率(1)
32条优秀UI设计建议 助你提升网页易用性及转化率(2)
2017版“我的淘宝”可能是迄今为止最懂你的设计
iOS 11 设计中的几个 UI 设计细节
UI设计规范:单选按钮vs复选框要怎么用?
老年用户的体验思考:如何保证界面适合阅读
UI界面设计:空心图标是否比实心图标难以识别?
24个UI案例对比 教你如何提升APP设计品质
怎么做才能防止用户对界面优化的不满?
交互设计优化:什么是界面设计?
在UI设计中如何科学地提高文本可读性?
干货:移动端响应式的7种UI布局解析
9个UI界面设计灵感来源的网站推荐
UI设计:如何实现完美的文本排版设计?
从iOS 11看怎样设计APP图标
5种技巧教你如何提高移动端用户体验
关于用户体验你应该知道的8件事
设计优化教程:购物车设计的总结
APP设计:如何打造优质移动页面提高用户体验?
移动用户体验设计之列表视图与网格视图
APP设计:内容呈现更友好易用的5种常见导航设计模式
探探和Linkedin都用的卡片设计 怎样才有好的体验?
为什么你爱用的App,都用卡片式设计?优势在哪?
手机淘宝卡券包的改版设计经验分享
手淘首屏设计是如何用户逛得停不下来?
APP设计教程:特殊情况下如何处理加载页面?
APP设计教程:UI界面中的版式设计理论
APP设计:移动端下拉表单的更好选择
App启动页分类与设计逻辑

精彩推荐

热门教程