美叶研学
文章小册日报
文章小册日报
目录
设计漫谈
  • 前言

    第1节

    关于本课

  • 全部课程

    第1节

    行为判定

    第2节

    移动注册

    第3节

    消息推送

    第4节

    分层呈现

    第5节

    多选

    第6节

    防止犯错

    第7节

    排序

    第8节

    标准化录入

    第9节

    打断

    第10节

    视觉层级

    第11节

    进程状态

    第12节

    密码设定

    第13节

    内容归类

    第14节

    反馈

    第15节

    操作距离

    第16节

    折叠播报

    第17节

    按钮注释

    第18节

    滑屏操作

    第19节

    选择权

    第20节

    内容溢出

    第21节

    输入暗示

    第22节

    关系映射

    第23节

    返回顶部

    第24节

    位置锚定

    第25节

    分页

    第26节

    面板优化

    第27节

    输入补全

    第28节

    信息检索

    第29节

    还原

    第30节

    内容折叠

    第31节

    通知提示

    第32节

    可视化

    第33节

    对话框

    第34节

    页面直达

    第35节

    输入法

    第36节

    清空删除

    第37节

    路径指引

    第38节

    社交对话

    第39节

    评论

    第40节

    文本框标签

    第41节

    筛选

    第42节

    光标控制

    第43节

    富媒体播放

    第44节

    数值修正

    第45节

    帮助说明

    第46节

    特殊状态

    第47节

    情感化

    第48节

    浏览线

    第49节

    模态叠层

    第50节

    预览

美叶 © 2026京ICP备18053775号-2    京公网安备 11010502047597号
信息检索
2023年2月28日

自从我家买了一款智能音箱,家里呼喊“小度”的声音就不绝于耳。家人们通过呼叫智能音箱的昵称的方式,激活音箱的语音查找功能,然后智能音箱会在网上帮我们找到想要听的歌曲,或是给到我们想要知道的问题的答案。


在这一过程中,智能音箱通过接收语音指令,从互联网海量信息中,检索到目标信息。语音检索技术相比于传统文本检索技术,交互上更加“拟人化”,而操作上也变得容易了许多。

在语音检索技术问世前,我们在使用互联网产品时,想要实现信息检索,主要借助于文本搜索框来完成。我们可以通过搜索引擎的输入框,在海量信息数据中实现对目标信息的定位。

由于搜索框在不同的产品设计中,因检索业务场景不同,搜索框通常会表现出不同的样式结构,有的产品会在产品设计方案中为用户提供一个检索图标,有的设计方案中会为用户提供一个搜索框,还有的产品设计方案会在搜索框中增添筛选条件...那这些不同的样式设定,分别有哪些设计着眼点呢?


搜索框

在为用户提供检索功能前,设计者通常会评估用户使用检索功能的可能性。如果当前产品包含的信息条数较多,那么用户使用在这些产品中,通过检索筛选信息的可能性将会很大。于是在这类产品设计中,通常会为用户提供检索功能。

设计者接下来要做的工作是评估检索发生的频次,如果一款产品中所包含的信息内容不多,那意味着用户使用检索频次一般不会太高。于是在这类产品设计方案中,只为用户提供一个搜索图标,用户如果想要执行搜索,需要先激活搜索按钮,然后才能获得输入框。


如图,运动应用keep,因检索低频,所以没有使用常驻的输入框,而是使用了检索图标

如果一款产品所包含的信息内容很多,或用户的主要场景任务为搜索,那么设计者通常会强化搜索功能,在设计方案中,为用户提供一个常驻于页面的搜索框,以便于用户随时发起检索。相关的产品举例如,高德地图,贝壳找房、大众点评、饿了吗等


如图,贝壳找房,因房源搜索输入高频应用场景,所以在设计上使用了搜索输入框


关键词

早期的产品设计中,会在搜索框内中添加一个和搜索相关的引导性文案,比如“搜索”“搜你想要的内容”等等,这些文案大都使用浅色字体,向用户传达这些并不是真正的搜索关键词。当用户激活搜索框时,这些文案通常会随着光标激活而消失,并不影响用户输入。


如图,App Store使用了“游戏、APP、故事等”关键词,为用户搜索顺利展开提供引导

但随着设计方案的演进,一些设计者开始思考如何更好的使用这一区域。他们尝试将一些热门搜索的推荐词放入到输入框内,如果用户对这些热门词感兴趣,那么可以不用输入,直接执行检索。


如图,视频应用中,在搜索栏中添加了热门搜索词,用户可以直接进行搜索

当然,把这种想法应用到极致的当属抖音。在本课程的第一节中,我们曾提到过这样一个案例。当我们在观看抖音中的视频时,只要点击搜索按钮就会发现,搜索框内已经被置入了一个搜索关键词,并且这个关键词“命中”我们需求的概率很高。即便是没有“命中”我们的需求,通常我们也会因好奇心的驱使,而去点击那个搜索按钮。因为我们知道这个默认的关键词,肯定和当前的视频内容存在某种联系,而我想要得到的,也恰好是和当前视频有相关性的内容。


如图,抖音的搜索框中默认放置了和当前视频相关的词语

还有一些产品,已经把搜索框中的热词展示位,玩到了“新的高度”。单个热词已经不能满足他们的“胃口”了,在这些产品的设计方案里,会将一连串的热词组合在一起,以滚屏方式,呈现给用户。


如图,大众点评的搜索栏中,使用了滚屏形态的搜索热词推荐


排序和筛选

虽然我们通过在输入框内输入关键字,可以获得相关性的检索结果。但有时,搜索只是帮我们缩小信息查找的范围,并不能帮我们精准定位检索目标。比如当检索结果的数据量信息较大时。我们面临的选择是,要么换个关键词,重新检索,要么是借助某种干预检索结果的机制,在结果中重新定位信息。一个常用方法是向用户提供排序或筛选功能。

检索结果的默认排序机制,主要依托于数据相关性,然后是基于大量用户检索行为的数据支撑。在把检索结果提供给用户时,通常会把那些和关键词相关性大,用户点击频次高的结果,排序在前。按照设计者的构想,用户就可以在前几个结果分页中,找到目标结果。但有时,这种排序并不能cover住用户需求。所以有的产品设计,会为用户提供手动干预排序的功能。


如图,抖音为在搜索结果页为用户提供了多种手动干预排序的条件设定

合理的筛选条件设定,也可以帮用户过滤掉大部分检索结果,比如在视频网站中,当我们搜索某部电影时,可以通过影片的类型条件选择,来缩小检索范围。

筛选条件的设定,可以有多种表现形式,当筛选条件单一,且分类纬度较少时,比如只有3-5个,那么我们可以将这些选项,整合到输入框内,如果用户想要对某一个门类执行检索,只需在输入框的下拉列表内,选择相关的分类,即可缩小查询范围。


如图,用户可以在下拉列表中,不同的分类下,执行内容搜索

当筛选的纬度类型较多时,我们可以尝试将这些类型项,以页签的形式给到用户,这样用户可以通过选中不同的页签,来缩小检索结果的查询范围。


如图,用户可以在检索结果页,通过选中不同的页签,缩小查询范围


键盘状态

当我们在移动产品上点击搜索按钮或者搜索输入框,想要进行内容检索时,有时会进入到一个全新的搜索页面。由于不同的产品有不同的设计诉求,当用户进入到这个页面后,通常会看到两种不同的交互方案。

有的产品会在用户进入到这个页面后,第一时间为用户激活输入框并唤醒键盘。这种交互方式,可以显著提升用户的检索效率。


还有一些产品则采用了另外一种设计方案。当用户进入到这个全新的搜索页后,并没有在第一时间为用户激活输入框,而是要求用户手动再次激活输入框,才能唤醒键盘。那么,这样设计方案的用意何在呢?

其实要解释这个问题也并不困难。在一个全新的搜索页面里,如果我们不唤醒键盘,那么整个页面,除去搜索栏,存在大面积的空白区域。很多设计者非常想要充分利用这一区域。所以在进入到这个页面后,如果唤醒键盘,这一区域将被部分遮挡。

常见的对搜索栏下方区域的利用有如下几种形式。

第一种是为用户展示历史检索记录,这主要是方便那些可能有反复搜索这些关键词的用户,比如我常坐公交1路,那么这个检索结果记录的保留,可以避免我多次重复输入


第二种是为用户提供搜索热词展示。这种设计完全是站在运营的视角,曝光热词,引发用户检索活跃度,因为大多数热点话题,通常是大多数人比较关心的。


第三种是为用户提供分类快捷入口。用户可以通过进入不同的入口,快速直达某些板块,或执行特定的任务


虽然空白区域的充分利用,可能会为用户提供某种便利,但以牺牲用户当前的检索效率为代价,这种设计方案的合理性还有待商榷。


最后

随着科技的进步,人工智能的发展,人机对话检索的检索模式,注定会取代现有的文本检索。作为设计者,我们“主战场”也一定会随之迁移。虽然传统设计方案会逐渐作古,但根植于传统设计方案背后的设计考量,确永不会消逝。即便是在新的业务场景下遇到新问题,我们仍能从传统方案的设计中找到答案。


输入补全
还原