APP设计模式之——搜索功能.pdfVIP

APP设计模式之——搜寻功能

编辑导语：搜寻功能是用户常使用功能之一，其中又包括条件输入、内容判定、

搜寻触发、结果呈现等模块。那么，具体到各个模块，设计师又应当从哪些细节

入手来提升用户的使用体验？本篇文章里，作者就搜寻功能设计做了思考和总

结，一起来看一下。

可能在很多人看来，搜寻是个不起眼的小功能，无需花太多时间赘述。但作为

PM/UI/UX，我们没有理由轻视任何涉及用户体验的产品设计，个人来讲，是不怕

用户批判和吐槽的，我最怕的是眼界狭隘，思路不开阔，由于这打算了我的成长

空间和速度。

所以在这篇文章中，我尽可能地把自己遇到/思考到的，涉及搜寻功能的设计

模式，围围着搜寻流程，都一一列举出来，也期望大家在看到颖的APP搜寻模式

时，奉献一下案例。

应第一篇专栏评论区@大大头披风朋友的建议，后面全部文章插图，我都会进

展标注。

另外格外感谢大家的关注与赏识，你们的认可是我更的最大动力。

/17

言归正传，先放一张搜寻流程图：

湖蓝色边框是最简洁/必要的搜寻流程节点，考虑到各种各样的场景，整个搜

寻流程就变得“冗长”了，但是用户体验却上去了。下面我们就逐一介绍搜寻流

程中的各个动作和关键节点，以及典型实例。

一、输入搜寻内容

1.功能入口

搜寻功能入口即用户进入搜寻流程的起点，这个起点通常都以静态形式呈现在

页面上，比方页面左上角或右上角的搜寻图标，或页面上的搜寻文本框〔以圆角

矩形为主〕。如格志和Reddit：

用户点击这个图标或者文本框后，才算触发了搜寻流程的第一步：内容录入。

相对来说，搜寻图标适合低频搜寻应用，而搜寻文本栏更适合高频搜寻应用。

查询类应用/场景明显格外适合搜寻文本框，而且用户使用频度越高，搜寻文本

框自身面积就越大，所占页面位置也更加明显，比方网易云音乐和金山词霸：

/17

个人来讲，不知为何，当我看到搜寻文本框的时候，就有一种马上就要看到期

盼的内容的感觉，而单纯的搜寻图标是没方法给这种感觉的。到底搜寻图标和搜

寻结果中间，总会隔着一个搜寻文本框。

2.条件输入

可能有人会说了，输入搜寻条件还有什么好说的？直接敲键盘不就完事儿了

吗？

对于绝大局部用户来说，这确实没有问题，但是……俗话说得好，魔鬼都在细

节里。越是这种不起眼的地方，我们越能做出一些能让小众用户觉得很好用/好

玩的设计，在表达APP自身特色的同时，还能帮应用留住那些“长尾用户”。

条件输入环节，我们应当关注的设计要素：退出搜寻页面、一键删除已输入内

容、触发搜寻动作执行的按钮、小键盘、小键盘增加设计。

退出搜寻界面：通常是“取消”二字，水平置于文本框右侧，也有些应用实行

“＜”按钮设计，水平置于文本框左侧，比方微信阅读和Quora：

/17

一键删除已输入内容：通常是在搜寻框右侧放置灰底白色“×”图标，也有些

应用出于用户输入出错率高的状况，将这个元素放置到用户更简洁“够得到”的

位置，这个设计在大屏手机时代还是格外有必要的。

下面的良仓和金山词霸分别代表了这两种类型，且后者承受了“清空”文字’

代替“×”图标，居于屏幕中心略靠下的位置，可以说格外醒目了：

触发搜寻动作执行的按钮：PC端产品很多还保存着有实际作用的“搜寻”按

钮，如百度首页的“百度一下”按钮：

谷歌的“Google搜寻”：

/17

以及相当多应用的搜寻框内置的或者右侧的搜寻图标，PC端的“搜寻”触发

是通过“Enter”回车键或鼠标单击完成，同理APP上的搜寻触发，要么是通过

点击页面上的“搜寻”图标，要么是通过小键盘上确实认键来完成，而小键盘确

认键往往有多种表现形式，如“搜寻”、“确定”、“换行”等。

小键盘：小键盘需要留意的就是依据输入框和表单的内容，来设置默认的小键盘

样式，比方中文键盘、英文键盘、数字键盘等，为用户带来更顺畅的操作体验。

小键盘增加设计：增加设计指的是在小键盘上方，再增加一行命令项，在视觉

设计上表现为做到和小键盘融为一体，在功能上表现为依据用户使用场景，尤其

是高频操作，来设计对应的功能。

比方UC扫瞄器的小键盘增加设计，除了给出