APP设计模式之-搜索功能

APP设计模式之—-搜索功能搜索功能是用户常使用功能之一，其中又包括条件输入、内容判定、搜索触发、结果展示等模块。那么，具体到各个模块，设计师又应当从哪些细节入手来提升用户的使用体验？本篇文章里，就搜索功能设计做了思考和总结，一起来看一下。可能在很多人看来，搜索是个不起眼的小功能，无需花太多时间赘述。但作为PM/UI/UX,我们理由轻视任何涉及用户体验的产品设计，个人来讲，是不怕用户批评和吐槽的，我最怕的是眼界狭隘，思路不开阔，因为这决定了我的成长空间和速度。所以在这篇文章中所，我尽可能地把自己遇到/思考到的，涉及搜索功能的设计模式，围绕着搜索流程，都一一列举出来，也希望大家在看到贴近生活的APP搜索模式时，贡献一下案例。另外非常感谢大家的关注与赞赏，你们的认可是我更新的最大动力。言归正传，先放一张搜索流程图：湖蓝色边框是最简洁/必要的搜索流程控制点，考虑到各种各样的场景，整个搜索流程就变得“冗长”了，但是用户体验却上去了。下面我们就逐一介绍搜索流程中的各个动作和关键节点，以及典型实例。

功能入口搜索功能入口即消费者进入工具搜索流程的起点，这个起点通常都快照以静态形式展现在页面上，比如页面左上角或右上角的搜索视窗图标，或页面上的搜索文本框（以圆角矩形为主）。如格志和Reddit：用户点击这个图标或者文本框后，才算触发了搜索流程追踪的第步：内容录入。相对来说，搜索图标快捷键非常适合低频搜索应用，而搜索文本栏更适合高频搜索应用。查询类应用/场景显然非常适合搜索文本框，而且用户使用频度越高，搜索文本框自身面积就越大，所占比页面位置也更加明显，比如网易云音乐和金山词霸：

个性推苕歌嘘主播电台指行榜SISEIMTk的--*****hihHtii^fu用人FM 恒日喊圆剂砰云黄脂酹看叫个性推苕歌嘘主播电台指行榜SISEIMTk的--*****hihHtii^fu用人FM 恒日喊圆剂砰云黄脂酹看叫由推荐欹单国代与忖|犯瞥与惮旧・I节僻一奉回廊理我名曲盥但打』工抖存的情悟 忆录.1|五胃，.新的民海蚱品僵此站关于；外国辱校支13引昭学4.将,学■ETa名.说出或即可眦不侑：遏士墓小静禁止悟靖式由…您世的如写擒自己的一时考个人来讲，不知为何，当我看得出来看到搜索文本框的时候，就有一种马上就要看到好像期待的内容的感觉，而简单单纯的搜索图标是没办法给这种感觉的。毕竟搜索快捷方式和搜索结果中间，总会隔着一个搜索文本框。条件输入可能有人会说了，输入搜索条件还有什么好说听话的？直接挥键盘不就完事儿了吗？对于绝大部分使用者来说，这确实没有问题，但是……俗话说得好，魔鬼都在细节里。越是这种不起眼的地方，我们越能做出一些能让小众用户笑言觉得很好用/好玩的设计，在体现APP自身特色的同时，还能帮运用留住那些“长尾用户”。条件输入环节，我们应该关注的设计要素：退出搜索页面、一键删除已经输入内容、触发搜索动作执行的按钮、小键盘、小键盘增强设计。退出搜索界面：通常是“取消”二字，水平置于文本框右侧，也有些应用采取“〈”按钮设计，水平置于文本框左侧，比如微信阅读和Quora：RECENTLYA&KEDQUESII0N5增丘隰客：创能位司的冏户与收人旭长程静加thereRECENTLYA&KEDQUESII0N5增丘隰客：创能位司的冏户与收人旭长程静加there日wetrait日thatIcanfindthecorrespoftdmgpitofmosiwords!??我。◎符号ABC我。◎符号ABC阳巨GHIJKLMNO滑空PQRSTUVWXYZ换行123空格由行7符号A0CDEF<3呼GHIJKLMNQ清空?1PQRSTUVWXYZ攫索曝@123空格的月、王明明一键删除却未输入内容:哲学第格尔、罡格;U:、箪5a学通常是在搜索框右侧放置灰底白色“X”图标，也有些应用出于用户输入出错率高的情况，将这个元素放置到用户更容易“够得到”的位置，这个设计在大屏手机时代还是非常有必要的。下面的良仓和金山词霸分别代表了这两种类型，且后者采用了“清空"文字‘代替“X”图标，居于屏幕中央所在位置略靠下的位置，可以说相当醒目了：

触发搜索动作执行的按钮：PC端产品很多还保留着有实际作用的“搜索”按钮，如百度首页的“百度一下”按钮：谷歌的“Google谷歌的“Google搜索”：Google以及相当多应用的搜索框内置的或者右侧的搜索图标，PC端的“搜索”触发是通过“Enter”回车键或鼠标单击完成，同理APP上的搜索触发，要么是通过点击页面上的“搜索”图标，要么是通过小键盘上的确认键来完成，而小键盘确认键往往有多种表现形式，如“搜索”、“确定”、“换行”等。小键盘：小键盘需要注意的就是根据输入框和表单的内容，来设置默认的小键盘样式，比如中文键盘、英文键盘、数字键盘等，为愈用户带来更顺畅的操作体验。小键盘增强设计：增强设计指的建筑设计是在小键盘上方，再以增加一行命令项，在听觉设计上表现为做到视觉和小键盘融为一体，在功能上表现为根据用户使用场景，尤其是高频操作，来设计对应的功能。比如UC浏览器的小键盘增强设计，除了给出常见的网址前缀前缀，还在中间放置了一个光标精准定位滚轴，极具匠心：

和Quora。词霸有三个按钮：“返回”（退出搜索界面）、“清空”（一键清除已输入内容）、“翻译”（触发搜索动作），我相信只要用户几次词霸，便会对这个界面赞赏有加，高频操作按钮居中布局，非常方便用户单手操作，且搜索框显得非常简洁结实：

London中0用醐期IkLondon中0用醐期IkLand口nk2012SummerOEym^icsmLoftdanLondon而Quora的增强结构设计更是独具匠心，将问答社区高频操作方式“搜索-提问-阅读-回答-”中的提问入口直接放到了小键盘上方，当用户使用者在动态搜索结果中找不到自己想要的内容后，可以直接将想找的回答变为问题，惊不惊喜？意不意外？

*5,申囱/动^ *5,申囱/动^ ^\2? 曲/♦名■Q何提问 回回答 画写文第-L用亮.㈤了回答 …中国制造业可以向德国学习件幺？夜麻古行：在全世界发达曲家的人FIRE狂期后,施国里陆下来保证了副造0发展，同也为壬要就学这.信还真不是业内人士能做到的.一是对房地产的挖…8J8同-1评语-关注间呢段阻焉管同了回答 ■■■如何看待2017年占月9日北大赴美交治硕士童莹顾女士失瞄一案，JUSlirtLw；我"讲一个我自己典放机.我圉来美国的时帙，是在一个国人很姿的城市.刚来的新生为了出门，界生都不褥不买负，女生郡存了好几个晅…437强网，M7评雄■英注何能宋朝和明朝的知识分子堆位有若怎样的差异？沛回：明朝的知识方于地彷比采朝端。款待的特根特利多.寐朝唱时来说，文官的冠位屎舞高于武官，且©阜•三■熬 整里 才R 枭口 刑期,・ 中苫:1?曲早:g-0Q127爨foy自@◎1Jjr*r=M车ABCDEF<3*GHIJKLMNQ清室?1PQRSTUVWXYZ下一项卷目123空格由1思考时间：右侧输入框的设计有何优缺点？如何进行优化?再放两个特殊提高设计，Termius（移动端主机管理工具）和Navicat（移动端数据库管理工具）。前者整合了很多实体键盘旋钮，而后者为了不影响表结构的显示效果，干脆在再说增强设计行中做了个搜索框，所以不能一成不变的设计，还是要具体问题具体片断具体分析。当然这种产品的PM基本就必须要懂各类相关技术和结构设计了：

由Isdrwto«l.JiyuniElasticCwpu^-fr\=•:由Isdrwto«l.JiyuniElasticCwpu^-fr\=•:BlaijFnCtrlahmgre,国[*通符号ABCDEF(3oGHIJKLLW清空?1PQRSTUVWXYZ横行费8123空格也00；45idphonopasswor10C^4Ad71BD78CC6C2FEA11E10ADC39dSBA59ABB£5i13BCB1CEAEO1E0SCDB31C149CBF8A4OCB8E3O6&2B9：15B2472A476CF836ElBAD3167启42由032962cA681EAA17FB95629E09748228280^21689BDDA5S90FC9B2A22ES完成用w_userG国 刨 够特号ABCOEF:<3GHIJKLMMO清空?IPQRSTUVWXYZ换行©8123空格中六辅助输入辅助输入，指的是在用户输入前，APP提供给用户一些内容或者选项，以便用户更快更省力地输入搜索条件。如UC浏览器和知乎就提供了历史网易搜索记录，来辅助：

|,小有中国法的行 14:34|,小有中国法的行 14:34有*.4悟］B按装或崩入网址 @取消Mlp!//paft.baidu.cam/share/lirtk?s^a....I jfnM.'E-*Vii^i^OJrL_-H--■->■-JJ* '际IBt虹戛..麻否阴间Q胴期及再见蒯喝 巴Q本例地 GO镀株沙华 工④菅曳 .. RlliiEp：//p^n.b^idu.ccm?<!1力壮/1洲t7EtUi旭日=与81l…Q右手中指戒指 HQ 43&9 RQ处女座嶂分手 KC图显机滞人 又Q陶粕总 R"g"中国忸邙学据索问答.文茹匕i4：aiSfflsiEffiP®**峭XQ>内容ffip最近疆鬼>--.数学天疗Q核教主X岐英和国放弃的争议领士X<CO何看待加落宝X权力的器戏第七集Xe管通fcj〕⑥■ 符号ABCDEF<3GHI?JKLMNO清空PQRSTUVWXYZ世索⑮@ 123空格中1-UC是给出了历史搜索记录，而知乎则更进一步，对历史搜索记录艺术史进行了分类，使用“内容”和“用户”两个标签让用户进行回退，而且还增加了“最近浏览”入口，方便用户回溯自己近期的浏览列表，更胜一筹。“尊重用户的劳动”是成功手机界面设计的最基本原则。“保存的搜索”和“最近搜索”使得搜索条件容易从以前的搜索历史中选择，而不用并不需要再次输入相异的关键词。选项辅助输入，是指在用户输入搜索条件所称之前，提供一些基本的搜索范围（如内容分类等），应用程序让用户速度更快地获得期望的结果。参见全民K歌和Pinterest：

麓赛的自我粉歌百支竦聚三卓俄修EverythingVideosAnimalsandpetsArchitectureCarsandmotorcycFesCelebritiesDiYandcraftsDesignAll旬＞0^心告Popular麓赛的自我粉歌百支竦聚三卓俄修EverythingVideosAnimalsandpetsArchitectureCarsandmotorcycFesCelebritiesDiYandcraftsDesignAll旬＞0^心告Popular***■-率邛拈玷『卜*G12：521240与“前置搜索类别”相对应的，是“后置搜索类别”，我们放到左边去讲。此外还有包括基于地理位置搜索的辅助输入方式，这在基于LBS的APP中非常常见，如猫眼电影和高德地图：

信点异怎十大"宾骨黑；我迂粮同国五百年同海只上睥“摘世古伯王今天仃5第先装触随1重沟悻变形金刚5：播后的骑士在田要熏停.林人再阜触2017-G6--23TW£X«•♦*■■中国塔瓦4G＜加油站1信点异怎十大"宾骨黑；我迂粮同国五百年同海只上睥“摘世古伯王今天仃5第先装触随1重沟悻变形金刚5：播后的骑士在田要熏停.林人再阜触2017-G6--23TW£X«•♦*■■中国塔瓦4G＜加油站1a心里*去这里Q摺周边15£里少去这！1!9隋国边「鬣中国石什的篇曲t用希中M立工中曲石牝理京斯赫黑助加油站:中石他士大山子环岛加油站加油露小三.，如新木乃惮弄麻：关为I4HK题把陵籽片最佳实践：保存搜索需要有名命额外的步骤去命名搜索参考值，尊重用户的劳动成果，让用户减少操作。在移动端，最最广泛的搜索模式是：用户输入检索内容后，APP自动执行检索动作，同时将搜索结果以列表的形式展示在搜索文本框下方，用户继续输入搜索内容，搜索结果也会相应自动变化，当全部条件输入完毕时，点击搜索按钮，显示最终结果。这种搜索模式，我称作动态搜索，这也是由于目前最符合“懒设计”理念的搜索方式。同时，还有一种较为“古老”的搜索模式，即静态搜索，即用户输入完全部消费者的搜索客观条件，再以一键执行搜索命令。动态搜索动态搜索，指输入搜索条件时的实时搜索+实时展示。这种设计也被称为可视化过滤，即输入文本数据，对应搜索结果将会动态过滤显

示上在屏幕上。同时，这也是型态一种特殊形式的辅助输入（见4.1.3）。我们以豆瓣为例：符号A0CDEF符号A0CDEFGHIJKLMNOPQRSTUVWXY2解析里望光点事你在输入“梦”和“梦的”两个搜索条件时，结果展现的完全不一样，这是因为动态搜索时，是根据已输入内容的词频热度进行搜索和排序的。这又涉及到搜索算法，对于这部分内容，我们放到前边去详细介绍。目前使用静态搜索设计的APP已经越来越少，因此不做赘述。通常情况下，无论动态搜索还是静态搜索，在搜索结果呈现之前，都会有进度条或者加载交互动作的指示器，用以告知用户：“正在搜索中，请耐心等待”。当搜索动作执行完毕后，再展出最终的搜索结果：

gooo中国稼前寺 15：22 电，1巾3簿・=>+< shs-ldon QResultsforshcldon Filter।mTopic:Sh&ldonCooper(TVcharacter)lopicWiki—SheldonLeeCooperPfri.DSc.Dsis总fictionalcharacterGfttheCBStelevisions^ri&£丁帕BigBangTheory,porkayedbyactorJimParsons,Sheldonisatheoreticalphysicisr,^Follow16Q.3k Clu呼到沁MostViewedWritersWhatareSheldonCooper'sfunniestjokesinTheBigBangThfrOiry?Angw-erWiki—#1-$03E11>Sheldon:Inwd.tea.Leonard：Idon't^anltea.SheMon：Ididmmak&youtM.Thisismyt&a.LMnard：Thenwhydidyout^llme?Sheldon:It'saccnversatiDn...ViewAll77AnswErsKJTopic:SidneySheldonTr：-|.：'p：vv-i—Ifyouwantabookyousimply国营白 ，Ehud An$iArAF iNpiJ^SElOHG.在2G（第十代移动通信技术）时代，下载速度在几KB/S到10几KB/S之间，从录入搜索条件到检索系统生成搜索结果，通常需要1秒以上的响应时间，这时的模块反馈就审阅非常必要，进度条或者加载动作能给用户以提示，表示正在搜索中。到了3G/4G，甚至将来几年未来就能够在国内应用的5G时代，搜索结果几乎瞬时呈现，这时系统反馈动作是否必要呢？答案是肯定的，因为哪怕是在一线城市市中心，客观存在也会存在网络环境差的场景，应用仍需要给用户提供等待详细信息。1. 展示方式搜索结果的展示，涉及到展示方式、展示层级等。搜索完毕，结果会显示在原有页面下方，或在新页面中显示（相对较少）。展示这种方式也纷繁多样。比如所列最简单的文字列表视图（墨墨单词和TripAdvisor）：甲皿移动4G12：05 ⑥*。忘■< 全部单词 Q宇甲O总 >O品bit B[:abitof。：a：bodyofsth. 11：aboxofcrayonsI.abreathaway।:abunchC_■abunchof。acertainIgvel口于Oachorusof[AChristmasCarolOaclusterofPortAustinJUfiT奥斯汀特技维萨酒店jSWtT-菸展首附奥斯汀大学汉普顿套房酒店奥斯丁”裳国KLMNDPOftsTUVWXYOmniAustinHotei口owntownJWMarriottAustinHiltonAustinOmniAustinatSouthPark奥斯汀市中心广场凯，悦酒店图文并茂式列表视图（网易云课堂和在行）：由㈤相白I*pylgn自动化这地神器旧由兀实必i500.00y9gm'*晦口口快过了彝口Mh*履生债口小程序人口语程mo.oQ盅A原学P则tinn之Pylhon开发Pyth。仆之TcriHd中基加/受自霎战口,除。鹏史前用黑稼：SRftfitKp/hon艇里买我：货舞瘗据塞的师圈影怏逋入门冲艇喝小工..：手机出毒T伊来窿也打LUJ®况理播雷院法讲师也更学习与指导让度Gegt产编二学业活动指史都劳学出比?水下摄态讲解还有一些简约化，内容设计感很强的列表（Kickstarter和Town）：

朗同叟POTUS-AMatnieAppThatGoesOffWhanPOTUSIsGrine,*nwuih；好psd$yom口肺加gcdLib^Eion血改POTU£isgohe.J...*4353 9惬用用粗朗同叟POTUS-AMatnieAppThatGoesOffWhanPOTUSIsGrine,*nwuih；好psd$yom口肺加gcdLib^Eion血改POTU£isgohe.J...*4353 9惬用用粗tlDC攫聚唱假00：5&Cancel■里国辱哨学增强列表视图（豆瓣和携程）：

♦**k用四动W 缶酒口 $f9 ■，<口疆盲界 ◎。张军界:;鼻I«-li七苜产品 屯总就5tt冢界的主附寤痣鼻生 1457R&蛋舞界的恻门爆点 更第3天门山厢茶… 土束风情时 张荣辑大蛙答天门山琥璃…舌门海 火黑府城TOC\o"1-5"\h\z才强案物的部沛围*1 夏1>题用浙自由号周边港一日谢困张，界拶挂园同阻酒店 .2统胖探林郎 “6岷睡张京奥华天大酒店不।i皂 vflaiis此张冢界京武珀用JftiBJE『.•1•.•.「 乜615典才北京到米冢弗的机第 火车票汽早票也■张家利的低源产品嵬荐 J'>>张需界天门山区写森特公圜…日游【经一….典必玩上H搜这地质好费天门仙境】莪客界+大娘答+五门山-隔阻4B3晚跟困；蛀rqtzi•并;fni工陆海小王QJ；" ..增强列表视图，是普通列表视图的变体，指在列表工具栏的基础上，糅合其他结构设计要素，而呈现出更加多样愈发的视图方式。比如豆瓣的多重第三种列表视图就是增强列表视图的一种，它采用了基于搜索结果类别进行分列表展示的视图方式。简单来讲就是展示页面有多个列表，如“图书”列表、“电影/电视”列表等。携程搜索展示页面是增强型列表视图的典型，在整体是列表视图的整体视觉效果上，有的列表六项本身就是一项内容集合，如“张家界的生态旅游度假”；有的列表备注项本身是一个具体列表（张家界碧桂园凤凰酒店）；有的列表项增加了内容详情介绍（旅游产品介绍），不同列表五项代表不同类别（飞机、酒店、旅游产品等），这种视图方式适合搜索结果门类及其复杂，不同展示结果展现权重不同的应用。表格视图（小红书和ASOS）：

甲皿格动中channel亡EH誉鬣人君别笆阳置心501普聋儿IH超前西班IQDviHACTIVEWEARSHOES&TRAINED甲皿格动中channel亡EH誉鬣人君别笆阳置心501普聋儿IH超前西班IQDviHACTIVEWEARSHOES&TRAINEDJEANSQS日口小0*.3中国樽时01：WWOMENMENPIUSSIZES:XLXXXX1|当搜索结果需要图文并茂地或进行展示，且需要支持广告主快速浏览较多条目的时候，表格视图再适合不过了，而上述两个前提，缺了任何一个，都会影响用户体验。这种视图方式经常应用在购物类的应用中，且最多两列排列，再多的话，信息就太过密集。如果需要图文显示，且用户浏览速度更快，条目更多的时候，就由表格视图变为了图文并茂的列表视图，如淘宝和美团，只保留一列内容，是为了不打断用户的视觉流。设想一下从里到外，和从左到右+从上到下，哪种方案更好？缩略图(Eventbrite)：

2£工耐。芍着0忖右2017NewYorkInternationa^,NgrrWfk2£工耐。芍着0忖右2017NewYorkInternationa^,NgrrWfk廿2"4MM"qsGratitudeMleration:Sue…hELUDBe电曲JestForFunComedyShowBK9了月日需二一下阡露3口GrctipClasses&GroupCla..aGratitudeMigration:Summer

Dream2017UnitedioGratiludfThtnsimgsunpeekingoverthehorizon.ThesensatiQnofsandbeneathyaurE-oes.The惴armtnofthelireandthe 0ftM令।IhcusEinirfhenirt^缩略图视图模式，所称专指的是搜索结果的内容条目，是将详情页的图文内容进行选取、缩小或模糊处理后，以N个缩略图的方式，展示在搜索结果展示页，因此该模式通常和其他模式混合使用。甚至地图卫星图（摩拜和。公）：地图/卫星图的视图方式，适合于提供基于LBS（基于地理位置咨询服务）的应用，可以为提供空间和位置的宏观视角。当然，还有个默认前提就是：搜索结果信息可选单一，比如摩拜和ofo搜索结果都是标准化、同质化的单车，用户不需要关心这辆车有什么特质，只需要关心能不能用亦可。有时根据搜索结果的复杂程度和用户使用首选项的不同，也可以使用多种视图显示，如高德地图和Eventbrite，就结合了地图和列表两种视图方式：

＜祷家火锅・EO中团国附W杨家北锅（中关村店1＜祷家火锅・EO中团国附W杨家北锅（中关村店1◎印****；7BU案惮论人煽丫123火扁4松里2修mJestForFunComedySli&vv杨冢火锅（早成躇店）」♦***1馥1条评论人上火犒1.51131C怖％1QP0开蛤置业插屎火锅（四道口店j：.-■.2口怕需滞论人均¥11G火用司H门次司公里白体.犯，11:0白开咕或曼高德地图搜索杨家火锅，火锅这种蒙杜布洛县，即便同一品牌，不同门店不小提供的服务也可能相差极大，比如店铺环境、人气、价格（不同商圈价格会略有变化，会有一个销售价格系数）、经营状态、营业时间、评价等，所以除了位置信息内容，不但需要把其他呈现关键信息以列表形式呈现给用户。而Eventbrite特征更加明显，我输入的搜索条件“基于纽约及周边地图的艺术类活动”显然囊括的内容极为纷繁多样，所以在展示结果时，除了使用地理位置视图，依然将活动用列表的形式展现出来，配以主题、时间、地点和价格详述等。2.内容加载在搜索时，通常使用延迟调用技术，或使部分结果可以被优先、快速地展示出来，而更多数据则会被延迟加载，这种设计有助于提高用户体验，如Foursquare：◎TopPicksii-：.I：-"coolelutein-(2LipsI■♦♦中国省汕雪QTopPfctenMrmicoclclubsntown"(2tips)27世笆天阶27世笆天阶T％Placa1:.dkmVflTig'aii1i2"世宽天阶ThsPlaceMall1.4kmYong'anliRJrewandthekdscreenIssure；1FHh(»)*.rirttsandihtkdscroenforsum力“(4上W》28.MIMI无印艮居DeparKrncnlSt9re200mZtidoyAng28.MUJI无印良品□ep-iHflmerit粉削摩"Pscipfealloverth白place-"“People-allowerIheplace"，.二droamingabDUt弓niey.&ucculenckebabsandde-icioLis.Duck口朋trigE16kmIdreamingabc-uiihsse占酊等y,也白ntk&bacsanddatieious..."(3Hps)"Ganddue£/arwlhinnnhitdry.OfdAfthecherryloie许多应用通过““查看更多”按钮，或拖动屏幕（上拉刷新）时自动加载更多结果。如LOFTER和ABCNews：也有软件系统把延迟延迟加载做得更平滑，拖动屏幕（上拉刷新）时自动完成更新，如开眼，只有在关闭在线视频的情况下，我们才能看出它的加载即可交互，是由logo动效完成的