APP設(shè)計(jì)模式之-搜索功能

APP設(shè)計(jì)模式之—-搜索功能搜索功能是用戶常使用功能之一，其中又包括條件輸入、內(nèi)容判定、搜索觸發(fā)、結(jié)果展示等模塊。那么，具體到各個(gè)模塊，設(shè)計(jì)師又應(yīng)當(dāng)從哪些細(xì)節(jié)入手來(lái)提升用戶的使用體驗(yàn)？本篇文章里，就搜索功能設(shè)計(jì)做了思考和總結(jié)，一起來(lái)看一下。可能在很多人看來(lái)，搜索是個(gè)不起眼的小功能，無(wú)需花太多時(shí)間贅述。但作為PM/UI/UX,我們理由輕視任何涉及用戶體驗(yàn)的產(chǎn)品設(shè)計(jì)，個(gè)人來(lái)講，是不怕用戶批評(píng)和吐槽的，我最怕的是眼界狹隘，思路不開(kāi)闊，因?yàn)檫@決定了我的成長(zhǎng)空間和速度。所以在這篇文章中所，我盡可能地把自己遇到/思考到的，涉及搜索功能的設(shè)計(jì)模式，圍繞著搜索流程，都一一列舉出來(lái)，也希望大家在看到貼近生活的APP搜索模式時(shí)，貢獻(xiàn)一下案例。另外非常感謝大家的關(guān)注與贊賞，你們的認(rèn)可是我更新的最大動(dòng)力。言歸正傳，先放一張搜索流程圖：湖藍(lán)色邊框是最簡(jiǎn)潔/必要的搜索流程控制點(diǎn)，考慮到各種各樣的場(chǎng)景，整個(gè)搜索流程就變得“冗長(zhǎng)”了，但是用戶體驗(yàn)卻上去了。下面我們就逐一介紹搜索流程中的各個(gè)動(dòng)作和關(guān)鍵節(jié)點(diǎn)，以及典型實(shí)例。

功能入口搜索功能入口即消費(fèi)者進(jìn)入工具搜索流程的起點(diǎn)，這個(gè)起點(diǎn)通常都快照以靜態(tài)形式展現(xiàn)在頁(yè)面上，比如頁(yè)面左上角或右上角的搜索視窗圖標(biāo)，或頁(yè)面上的搜索文本框（以圓角矩形為主）。如格志和Reddit：用戶點(diǎn)擊這個(gè)圖標(biāo)或者文本框后，才算觸發(fā)了搜索流程追蹤的第步：內(nèi)容錄入。相對(duì)來(lái)說(shuō)，搜索圖標(biāo)快捷鍵非常適合低頻搜索應(yīng)用，而搜索文本欄更適合高頻搜索應(yīng)用。查詢類應(yīng)用/場(chǎng)景顯然非常適合搜索文本框，而且用戶使用頻度越高，搜索文本框自身面積就越大，所占比頁(yè)面位置也更加明顯，比如網(wǎng)易云音樂(lè)和金山詞霸：

個(gè)性推苕歌噓主播電臺(tái)指行榜SISEIMTk的--*****hihHtii^fu用人FM 恒日喊圓劑砰云黃脂酹看叫個(gè)性推苕歌噓主播電臺(tái)指行榜SISEIMTk的--*****hihHtii^fu用人FM 恒日喊圓劑砰云黃脂酹看叫由推薦欹單國(guó)代與忖|犯瞥與憚舊?I節(jié)僻一奉回廊理我名曲盥但打』工抖存的情悟 憶錄.1|五胃，.新的民海蚱品僵此站關(guān)于；外國(guó)辱校支13引昭學(xué)4.將,學(xué)■ETa名.說(shuō)出或即可眥不侑：遏士墓小靜禁止悟靖式由…您世的如寫擒自己的一時(shí)考個(gè)人來(lái)講，不知為何，當(dāng)我看得出來(lái)看到搜索文本框的時(shí)候，就有一種馬上就要看到好像期待的內(nèi)容的感覺(jué)，而簡(jiǎn)單單純的搜索圖標(biāo)是沒(méi)辦法給這種感覺(jué)的。畢竟搜索快捷方式和搜索結(jié)果中間，總會(huì)隔著一個(gè)搜索文本框。條件輸入可能有人會(huì)說(shuō)了，輸入搜索條件還有什么好說(shuō)聽(tīng)話的？直接揮鍵盤不就完事兒了嗎？對(duì)于絕大部分使用者來(lái)說(shuō)，這確實(shí)沒(méi)有問(wèn)題，但是……俗話說(shuō)得好，魔鬼都在細(xì)節(jié)里。越是這種不起眼的地方，我們?cè)侥茏龀鲆恍┠茏屝”娪脩粜ρ杂X(jué)得很好用/好玩的設(shè)計(jì)，在體現(xiàn)APP自身特色的同時(shí)，還能幫運(yùn)用留住那些“長(zhǎng)尾用戶”。條件輸入環(huán)節(jié)，我們應(yīng)該關(guān)注的設(shè)計(jì)要素：退出搜索頁(yè)面、一鍵刪除已經(jīng)輸入內(nèi)容、觸發(fā)搜索動(dòng)作執(zhí)行的按鈕、小鍵盤、小鍵盤增強(qiáng)設(shè)計(jì)。退出搜索界面：通常是“取消”二字，水平置于文本框右側(cè)，也有些應(yīng)用采取“〈”按鈕設(shè)計(jì)，水平置于文本框左側(cè)，比如微信閱讀和Quora：RECENTLYA&KEDQUESII0N5增丘隰客：創(chuàng)能位司的冏戶與收人旭長(zhǎng)程靜加thereRECENTLYA&KEDQUESII0N5增丘隰客：創(chuàng)能位司的冏戶與收人旭長(zhǎng)程靜加there日wetrait日thatIcanfindthecorrespoftdmgpitofmosiwords!??我?！蚍?hào)ABC我?！蚍?hào)ABC陽(yáng)巨GHIJKLMNO滑空PQRSTUVWXYZ換行123空格由行7符號(hào)A0CDEF<3呼GHIJKLMNQ清空?1PQRSTUVWXYZ攫索曝@123空格的月、王明明一鍵刪除卻未輸入內(nèi)容:哲學(xué)第格爾、罡格;U:、簞5a學(xué)通常是在搜索框右側(cè)放置灰底白色“X”圖標(biāo)，也有些應(yīng)用出于用戶輸入出錯(cuò)率高的情況，將這個(gè)元素放置到用戶更容易“夠得到”的位置，這個(gè)設(shè)計(jì)在大屏手機(jī)時(shí)代還是非常有必要的。下面的良倉(cāng)和金山詞霸分別代表了這兩種類型，且后者采用了“清空"文字‘代替“X”圖標(biāo)，居于屏幕中央所在位置略靠下的位置，可以說(shuō)相當(dāng)醒目了：

觸發(fā)搜索動(dòng)作執(zhí)行的按鈕：PC端產(chǎn)品很多還保留著有實(shí)際作用的“搜索”按鈕，如百度首頁(yè)的“百度一下”按鈕：谷歌的“Google谷歌的“Google搜索”：Google以及相當(dāng)多應(yīng)用的搜索框內(nèi)置的或者右側(cè)的搜索圖標(biāo)，PC端的“搜索”觸發(fā)是通過(guò)“Enter”回車鍵或鼠標(biāo)單擊完成，同理APP上的搜索觸發(fā)，要么是通過(guò)點(diǎn)擊頁(yè)面上的“搜索”圖標(biāo)，要么是通過(guò)小鍵盤上的確認(rèn)鍵來(lái)完成，而小鍵盤確認(rèn)鍵往往有多種表現(xiàn)形式，如“搜索”、“確定”、“換行”等。小鍵盤：小鍵盤需要注意的就是根據(jù)輸入框和表單的內(nèi)容，來(lái)設(shè)置默認(rèn)的小鍵盤樣式，比如中文鍵盤、英文鍵盤、數(shù)字鍵盤等，為愈用戶帶來(lái)更順暢的操作體驗(yàn)。小鍵盤增強(qiáng)設(shè)計(jì)：增強(qiáng)設(shè)計(jì)指的建筑設(shè)計(jì)是在小鍵盤上方，再以增加一行命令項(xiàng)，在聽(tīng)覺(jué)設(shè)計(jì)上表現(xiàn)為做到視覺(jué)和小鍵盤融為一體，在功能上表現(xiàn)為根據(jù)用戶使用場(chǎng)景，尤其是高頻操作，來(lái)設(shè)計(jì)對(duì)應(yīng)的功能。比如UC瀏覽器的小鍵盤增強(qiáng)設(shè)計(jì)，除了給出常見(jiàn)的網(wǎng)址前綴前綴，還在中間放置了一個(gè)光標(biāo)精準(zhǔn)定位滾軸，極具匠心：

和Quora。詞霸有三個(gè)按鈕：“返回”（退出搜索界面）、“清空”（一鍵清除已輸入內(nèi)容）、“翻譯”（觸發(fā)搜索動(dòng)作），我相信只要用戶幾次詞霸，便會(huì)對(duì)這個(gè)界面贊賞有加，高頻操作按鈕居中布局，非常方便用戶單手操作，且搜索框顯得非常簡(jiǎn)潔結(jié)實(shí)：

London中0用醐期IkLondon中0用醐期IkLand口nk2012SummerOEym^icsmLoftdanLondon而Quora的增強(qiáng)結(jié)構(gòu)設(shè)計(jì)更是獨(dú)具匠心，將問(wèn)答社區(qū)高頻操作方式“搜索-提問(wèn)-閱讀-回答-”中的提問(wèn)入口直接放到了小鍵盤上方，當(dāng)用戶使用者在動(dòng)態(tài)搜索結(jié)果中找不到自己想要的內(nèi)容后，可以直接將想找的回答變?yōu)閱?wèn)題，驚不驚喜？意不意外？

*5,申囪/動(dòng)^ *5,申囪/動(dòng)^ ^\2? 曲/?名■Q何提問(wèn) 回回答 畫寫文第-L用亮.㈤了回答 …中國(guó)制造業(yè)可以向德國(guó)學(xué)習(xí)件幺？夜麻古行：在全世界發(fā)達(dá)曲家的人FIRE狂期后,施國(guó)里陸下來(lái)保證了副造0發(fā)展，同也為壬要就學(xué)這.信還真不是業(yè)內(nèi)人士能做到的.一是對(duì)房地產(chǎn)的挖…8J8同-1評(píng)語(yǔ)-關(guān)注間呢段阻焉管同了回答 ■■■如何看待2017年占月9日北大赴美交治碩士童瑩顧女士失瞄一案，JUSlirtLw；我"講一個(gè)我自己典放機(jī).我圉來(lái)美國(guó)的時(shí)帙，是在一個(gè)國(guó)人很姿的城市.剛來(lái)的新生為了出門，界生都不褥不買負(fù)，女生郡存了好幾個(gè)晅…437強(qiáng)網(wǎng)，M7評(píng)雄■英注何能宋朝和明朝的知識(shí)分子堆位有若怎樣的差異？沛回：明朝的知識(shí)方于地彷比采朝端?？畲奶馗乩?寐朝唱時(shí)來(lái)說(shuō)，文官的冠位屎舞高于武官，且?阜?三■熬 整里 才R 梟口 刑期,? 中苫:1?曲早:g-0Q127爨foy自@◎1Jjr*r=M車ABCDEF<3*GHIJKLMNQ清室?1PQRSTUVWXYZ下一項(xiàng)卷目123空格由1思考時(shí)間：右側(cè)輸入框的設(shè)計(jì)有何優(yōu)缺點(diǎn)？如何進(jìn)行優(yōu)化?再放兩個(gè)特殊提高設(shè)計(jì)，Termius（移動(dòng)端主機(jī)管理工具）和Navicat（移動(dòng)端數(shù)據(jù)庫(kù)管理工具）。前者整合了很多實(shí)體鍵盤旋鈕，而后者為了不影響表結(jié)構(gòu)的顯示效果，干脆在再說(shuō)增強(qiáng)設(shè)計(jì)行中做了個(gè)搜索框，所以不能一成不變的設(shè)計(jì)，還是要具體問(wèn)題具體片斷具體分析。當(dāng)然這種產(chǎn)品的PM基本就必須要懂各類相關(guān)技術(shù)和結(jié)構(gòu)設(shè)計(jì)了：

由Isdrwto?l.JiyuniElasticCwpu^-fr\=?:由Isdrwto?l.JiyuniElasticCwpu^-fr\=?:BlaijFnCtrlahmgre,國(guó)[*通符號(hào)ABCDEF(3oGHIJKLLW清空?1PQRSTUVWXYZ橫行費(fèi)8123空格也00；45idphonopasswor10C^4Ad71BD78CC6C2FEA11E10ADC39dSBA59ABB￡5i13BCB1CEAEO1E0SCDB31C149CBF8A4OCB8E3O6&2B9：15B2472A476CF836ElBAD3167啟42由032962cA681EAA17FB95629E09748228280^21689BDDA5S90FC9B2A22ES完成用w_userG國(guó) 刨 夠特號(hào)ABCOEF:<3GHIJKLMMO清空?IPQRSTUVWXYZ換行?8123空格中六輔助輸入輔助輸入，指的是在用戶輸入前，APP提供給用戶一些內(nèi)容或者選項(xiàng)，以便用戶更快更省力地輸入搜索條件。如UC瀏覽器和知乎就提供了歷史網(wǎng)易搜索記錄，來(lái)輔助：

|,小有中國(guó)法的行 14:34|,小有中國(guó)法的行 14:34有*.4悟］B按裝或崩入網(wǎng)址 @取消Mlp!//paft.baidu.cam/share/lirtk?s^a....I jfnM.'E-*Vii^i^OJrL_-H--■->■-JJ* '際IBt虹戛..麻否陰間Q胴期及再見(jiàn)蒯喝 巴Q本例地 GO鍍株沙華 工④菅曳 .. RlliiEp：//p^n.b^idu.ccm?<!1力壯/1洲t7EtUi旭日=與81l…Q右手中指戒指 HQ 43&9 RQ處女座嶂分手 KC圖顯機(jī)滯人 又Q陶粕總 R"g"中國(guó)忸邙學(xué)據(jù)索問(wèn)答.文茹匕i4：aiSfflsiEffiP?**峭XQ>內(nèi)容ffip最近疆鬼>--.數(shù)學(xué)天療Q核教主X岐英和國(guó)放棄的爭(zhēng)議領(lǐng)士X<CO何看待加落寶X權(quán)力的器戲第七集Xe管通fcj〕⑥■ 符號(hào)ABCDEF<3GHI?JKLMNO清空PQRSTUVWXYZ世索?@ 123空格中1-UC是給出了歷史搜索記錄，而知乎則更進(jìn)一步，對(duì)歷史搜索記錄藝術(shù)史進(jìn)行了分類，使用“內(nèi)容”和“用戶”兩個(gè)標(biāo)簽讓用戶進(jìn)行回退，而且還增加了“最近瀏覽”入口，方便用戶回溯自己近期的瀏覽列表，更勝一籌?！白鹬赜脩舻膭趧?dòng)”是成功手機(jī)界面設(shè)計(jì)的最基本原則?！氨４娴乃阉鳌焙汀白罱阉鳌笔沟盟阉鳁l件容易從以前的搜索歷史中選擇，而不用并不需要再次輸入相異的關(guān)鍵詞。選項(xiàng)輔助輸入，是指在用戶輸入搜索條件所稱之前，提供一些基本的搜索范圍（如內(nèi)容分類等），應(yīng)用程序讓用戶速度更快地獲得期望的結(jié)果。參見(jiàn)全民K歌和Pinterest：

麓賽的自我粉歌百支竦聚三卓俄修EverythingVideosAnimalsandpetsArchitectureCarsandmotorcycFesCelebritiesDiYandcraftsDesignAll旬＞0^心告Popular麓賽的自我粉歌百支竦聚三卓俄修EverythingVideosAnimalsandpetsArchitectureCarsandmotorcycFesCelebritiesDiYandcraftsDesignAll旬＞0^心告Popular***■-率邛拈玷『卜*G12：521240與“前置搜索類別”相對(duì)應(yīng)的，是“后置搜索類別”，我們放到左邊去講。此外還有包括基于地理位置搜索的輔助輸入方式，這在基于LBS的APP中非常常見(jiàn)，如貓眼電影和高德地圖：

信點(diǎn)異怎十大"賓骨黑；我迂糧同國(guó)五百年同海只上睥“摘世古伯王今天仃5第先裝觸隨1重溝悻變形金剛5：播后的騎士在田要熏停.林人再阜觸2017-G6--23TW￡X???*■■中國(guó)塔瓦4G＜加油站1信點(diǎn)異怎十大"賓骨黑；我迂糧同國(guó)五百年同海只上睥“摘世古伯王今天仃5第先裝觸隨1重溝悻變形金剛5：播后的騎士在田要熏停.林人再阜觸2017-G6--23TW￡X???*■■中國(guó)塔瓦4G＜加油站1a心里*去這里Q摺周邊15￡里少去這！1!9隋國(guó)邊「鬣中國(guó)石什的篇曲t用希中M立工中曲石牝理京斯赫黑助加油站:中石他士大山子環(huán)島加油站加油露小三.，如新木乃憚弄麻：關(guān)為I4HK題把陵籽片最佳實(shí)踐：保存搜索需要有名命額外的步驟去命名搜索參考值，尊重用戶的勞動(dòng)成果，讓用戶減少操作。在移動(dòng)端，最最廣泛的搜索模式是：用戶輸入檢索內(nèi)容后，APP自動(dòng)執(zhí)行檢索動(dòng)作，同時(shí)將搜索結(jié)果以列表的形式展示在搜索文本框下方，用戶繼續(xù)輸入搜索內(nèi)容，搜索結(jié)果也會(huì)相應(yīng)自動(dòng)變化，當(dāng)全部條件輸入完畢時(shí)，點(diǎn)擊搜索按鈕，顯示最終結(jié)果。這種搜索模式，我稱作動(dòng)態(tài)搜索，這也是由于目前最符合“懶設(shè)計(jì)”理念的搜索方式。同時(shí)，還有一種較為“古老”的搜索模式，即靜態(tài)搜索，即用戶輸入完全部消費(fèi)者的搜索客觀條件，再以一鍵執(zhí)行搜索命令。動(dòng)態(tài)搜索動(dòng)態(tài)搜索，指輸入搜索條件時(shí)的實(shí)時(shí)搜索+實(shí)時(shí)展示。這種設(shè)計(jì)也被稱為可視化過(guò)濾，即輸入文本數(shù)據(jù)，對(duì)應(yīng)搜索結(jié)果將會(huì)動(dòng)態(tài)過(guò)濾顯

示上在屏幕上。同時(shí)，這也是型態(tài)一種特殊形式的輔助輸入（見(jiàn)4.1.3）。我們以豆瓣為例：符號(hào)A0CDEF符號(hào)A0CDEFGHIJKLMNOPQRSTUVWXY2解析里望光點(diǎn)事你在輸入“夢(mèng)”和“夢(mèng)的”兩個(gè)搜索條件時(shí)，結(jié)果展現(xiàn)的完全不一樣，這是因?yàn)閯?dòng)態(tài)搜索時(shí)，是根據(jù)已輸入內(nèi)容的詞頻熱度進(jìn)行搜索和排序的。這又涉及到搜索算法，對(duì)于這部分內(nèi)容，我們放到前邊去詳細(xì)介紹。目前使用靜態(tài)搜索設(shè)計(jì)的APP已經(jīng)越來(lái)越少，因此不做贅述。通常情況下，無(wú)論動(dòng)態(tài)搜索還是靜態(tài)搜索，在搜索結(jié)果呈現(xiàn)之前，都會(huì)有進(jìn)度條或者加載交互動(dòng)作的指示器，用以告知用戶：“正在搜索中，請(qǐng)耐心等待”。當(dāng)搜索動(dòng)作執(zhí)行完畢后，再展出最終的搜索結(jié)果：

gooo中國(guó)稼前寺 15：22 電，1巾3簿?=>+< shs-ldon QResultsforshcldon Filter?mTopic:Sh&ldonCooper(TVcharacter)lopicWiki—SheldonLeeCooperPfri.DSc.Dsis總fictionalcharacterGfttheCBStelevisions^ri&￡丁帕BigBangTheory,porkayedbyactorJimParsons,Sheldonisatheoreticalphysicisr,^Follow16Q.3k Clu呼到沁M(jìn)ostViewedWritersWhatareSheldonCooper'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國(guó)營(yíng)白 ，Ehud An$iArAF iNpiJ^SElOHG.在2G（第十代移動(dòng)通信技術(shù)）時(shí)代，下載速度在幾KB/S到10幾KB/S之間，從錄入搜索條件到檢索系統(tǒng)生成搜索結(jié)果，通常需要1秒以上的響應(yīng)時(shí)間，這時(shí)的模塊反饋就審閱非常必要，進(jìn)度條或者加載動(dòng)作能給用戶以提示，表示正在搜索中。到了3G/4G，甚至將來(lái)幾年未來(lái)就能夠在國(guó)內(nèi)應(yīng)用的5G時(shí)代，搜索結(jié)果幾乎瞬時(shí)呈現(xiàn)，這時(shí)系統(tǒng)反饋動(dòng)作是否必要呢？答案是肯定的，因?yàn)槟呐率窃谝痪€城市市中心，客觀存在也會(huì)存在網(wǎng)絡(luò)環(huán)境差的場(chǎng)景，應(yīng)用仍需要給用戶提供等待詳細(xì)信息。1. 展示方式搜索結(jié)果的展示，涉及到展示方式、展示層級(jí)等。搜索完畢，結(jié)果會(huì)顯示在原有頁(yè)面下方，或在新頁(yè)面中顯示（相對(duì)較少）。展示這種方式也紛繁多樣。比如所列最簡(jiǎn)單的文字列表視圖（墨墨單詞和TripAdvisor）：甲皿移動(dòng)4G12：05 ⑥*。忘■< 全部單詞 Q宇甲O總 >O品bit B[:abitof。：a：bodyofsth. 11：aboxofcrayonsI.abreathaway?:abunchC_■abunchof。acertainIgvel口于Oachorusof[AChristmasCarolOaclusterofPortAustinJUfiT奧斯汀特技維薩酒店jSWtT-菸展首附奧斯汀大學(xué)漢普頓套房酒店奧斯丁”裳國(guó)KLMNDPOftsTUVWXYOmniAustinHotei口owntownJWMarriottAustinHiltonAustinOmniAustinatSouthPark奧斯汀市中心廣場(chǎng)凱，悅酒店圖文并茂式列表視圖（網(wǎng)易云課堂和在行）：由㈤相白I*pylgn自動(dòng)化這地神器舊由兀實(shí)必i500.00y9gm'*晦口口快過(guò)了彝口Mh*履生債口小程序人口語(yǔ)程mo.oQ盅A原學(xué)P則tinn之Pylhon開(kāi)發(fā)Pyth。仆之TcriHd中基加/受自霎戰(zhàn)口,除。鵬史前用黑稼：SRftfitKp/hon艇里買我：貨舞瘞據(jù)塞的師圈影怏逋入門沖艇喝小工..：手機(jī)出毒T伊來(lái)窿也打LUJ?況理播雷院法講師也更學(xué)習(xí)與指導(dǎo)讓度Gegt產(chǎn)編二學(xué)業(yè)活動(dòng)指史都勞學(xué)出比?水下攝態(tài)講解還有一些簡(jiǎn)約化，內(nèi)容設(shè)計(jì)感很強(qiáng)的列表（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■里國(guó)辱哨學(xué)增強(qiáng)列表視圖（豆瓣和攜程）：

?**k用四動(dòng)W 缶酒口 $f9 ■，<口疆盲界 ◎。張軍界:;鼻I?-li七苜產(chǎn)品 屯總就5tt冢界的主附寤痣鼻生 1457R&蛋舞界的惻門爆點(diǎn) 更第3天門山廂茶… 土束風(fēng)情時(shí) 張榮輯大蛙答天門山琥璃…舌門海 火黑府城TOC\o"1-5"\h\z才強(qiáng)案物的部沛圍*1 夏1>題用浙自由號(hào)周邊港一日謝困張，界拶掛園同阻酒店 .2統(tǒng)胖探林郎 “6岷睡張京奧華天大酒店不?i皂 vflaiis此張冢界京武珀用JftiBJE『.?1?.?.「 乜615典才北京到米冢弗的機(jī)第 火車票汽早票也■張家利的低源產(chǎn)品嵬薦 J'>>張需界天門山區(qū)寫森特公圜…日游【經(jīng)一….典必玩上H搜這地質(zhì)好費(fèi)天門仙境】莪客界+大娘答+五門山-隔阻4B3晚跟困；蛀rqtzi?并;fni工陸海小王QJ；" ..增強(qiáng)列表視圖，是普通列表視圖的變體，指在列表工具欄的基礎(chǔ)上，糅合其他結(jié)構(gòu)設(shè)計(jì)要素，而呈現(xiàn)出更加多樣愈發(fā)的視圖方式。比如豆瓣的多重第三種列表視圖就是增強(qiáng)列表視圖的一種，它采用了基于搜索結(jié)果類別進(jìn)行分列表展示的視圖方式。簡(jiǎn)單來(lái)講就是展示頁(yè)面有多個(gè)列表，如“圖書(shū)”列表、“電影/電視”列表等。攜程搜索展示頁(yè)面是增強(qiáng)型列表視圖的典型，在整體是列表視圖的整體視覺(jué)效果上，有的列表六項(xiàng)本身就是一項(xiàng)內(nèi)容集合，如“張家界的生態(tài)旅游度假”；有的列表備注項(xiàng)本身是一個(gè)具體列表（張家界碧桂園鳳凰酒店）；有的列表項(xiàng)增加了內(nèi)容詳情介紹（旅游產(chǎn)品介紹），不同列表五項(xiàng)代表不同類別（飛機(jī)、酒店、旅游產(chǎn)品等），這種視圖方式適合搜索結(jié)果門類及其復(fù)雜，不同展示結(jié)果展現(xiàn)權(quán)重不同的應(yīng)用。表格視圖（小紅書(shū)和ASOS）：

甲皿格動(dòng)中channel亡EH譽(yù)鬣人君別笆陽(yáng)置心501普聾兒IH超前西班IQDviHACTIVEWEARSHOES&TRAINED甲皿格動(dòng)中channel亡EH譽(yù)鬣人君別笆陽(yáng)置心501普聾兒IH超前西班IQDviHACTIVEWEARSHOES&TRAINEDJEANSQS日口小0*.3中國(guó)樽時(shí)01：WWOMENMENPIUSSIZES:XLXXXX1|當(dāng)搜索結(jié)果需要圖文并茂地或進(jìn)行展示，且需要支持廣告主快速瀏覽較多條目的時(shí)候，表格視圖再適合不過(guò)了，而上述兩個(gè)前提，缺了任何一個(gè)，都會(huì)影響用戶體驗(yàn)。這種視圖方式經(jīng)常應(yīng)用在購(gòu)物類的應(yīng)用中，且最多兩列排列，再多的話，信息就太過(guò)密集。如果需要圖文顯示，且用戶瀏覽速度更快，條目更多的時(shí)候，就由表格視圖變?yōu)榱藞D文并茂的列表視圖，如淘寶和美團(tuán)，只保留一列內(nèi)容，是為了不打斷用戶的視覺(jué)流。設(shè)想一下從里到外，和從左到右+從上到下，哪種方案更好？縮略圖(Eventbrite)：

2￡工耐。芍著0忖右2017NewYorkInternationa^,NgrrWfk2￡工耐。芍著0忖右2017NewYorkInternationa^,NgrrWfk廿2"4MM"qsGratitudeMleration:Sue…h(huán)ELUDBe電曲JestForFunComedyShowBK9了月日需二一下阡露3口GrctipClasses&GroupCla..aGratitudeMigration:Summer

Dream2017UnitedioGratiludfThtnsimgsunpeekingoverthehorizon.ThesensatiQnofsandbeneathyaurE-oes.The惴armtnofthelireandthe 0ftM令?IhcusEinirfhenirt^縮略圖視圖模式，所稱專指的是搜索結(jié)果的內(nèi)容條目，是將詳情頁(yè)的圖文內(nèi)容進(jìn)行選取、縮小或模糊處理后，以N個(gè)縮略圖的方式，展示在搜索結(jié)果展示頁(yè)，因此該模式通常和其他模式混合使用。甚至地圖衛(wèi)星圖（摩拜和。公）：地圖/衛(wèi)星圖的視圖方式，適合于提供基于LBS（基于地理位置咨詢服務(wù)）的應(yīng)用，可以為提供空間和位置的宏觀視角。當(dāng)然，還有個(gè)默認(rèn)前提就是：搜索結(jié)果信息可選單一，比如摩拜和ofo搜索結(jié)果都是標(biāo)準(zhǔn)化、同質(zhì)化的單車，用戶不需要關(guān)心這輛車有什么特質(zhì)，只需要關(guān)心能不能用亦可。有時(shí)根據(jù)搜索結(jié)果的復(fù)雜程度和用戶使用首選項(xiàng)的不同，也可以使用多種視圖顯示，如高德地圖和Eventbrite，就結(jié)合了地圖和列表兩種視圖方式：

＜禱家火鍋?EO中團(tuán)國(guó)附W楊家北鍋（中關(guān)村店1＜禱家火鍋?EO中團(tuán)國(guó)附W楊家北鍋（中關(guān)村店1◎印****；7BU案憚?wù)撊松垦?23火扁4松里2修mJestForFunComedySli&vv楊冢火鍋（早成躇店）」?***1馥1條評(píng)論人上火犒1.51131C怖％1QP0開(kāi)蛤置業(yè)插屎火鍋（四道口店j：.-■.2口怕需滯論人均￥11G火用司H門次司公里白體.犯，11:0白開(kāi)咕或曼高德地圖搜索楊家火鍋，火鍋這種蒙杜布洛縣，即便同一品牌，不同門店不小提供的服務(wù)也可能相差極大，比如店鋪環(huán)境、人氣、價(jià)格（不同商圈價(jià)格會(huì)略有變化，會(huì)有一個(gè)銷售價(jià)格系數(shù)）、經(jīng)營(yíng)狀態(tài)、營(yíng)業(yè)時(shí)間、評(píng)價(jià)等，所以除了位置信息內(nèi)容，不但需要把其他呈現(xiàn)關(guān)鍵信息以列表形式呈現(xiàn)給用戶。而Eventbrite特征更加明顯，我輸入的搜索條件“基于紐約及周邊地圖的藝術(shù)類活動(dòng)”顯然囊括的內(nèi)容極為紛繁多樣，所以在展示結(jié)果時(shí)，除了使用地理位置視圖，依然將活動(dòng)用列表的形式展現(xiàn)出來(lái)，配以主題、時(shí)間、地點(diǎn)和價(jià)格詳述等。2.內(nèi)容加載在搜索時(shí)，通常使用延遲調(diào)用技術(shù)，或使部分結(jié)果可以被優(yōu)先、快速地展示出來(lái)，而更多數(shù)據(jù)則會(huì)被延遲加載，這種設(shè)計(jì)有助于提高用戶體驗(yàn)，如Foursquare：◎TopPicksii-：.I：-"coolelutein-(2LipsI■??中國(guó)省汕雪QTopPfctenMrmicoclclubsntown"(2tips)27世笆天階27世笆天階T％Placa1:.dkmVflTig'aii1i2"世寬天階ThsPlaceMall1.4kmYong'anliRJrewandthekdscreenIssure；1FHh(?)*.rirttsandihtkdscroenforsum力“(4上W》28.MIMI無(wú)印艮居DeparKrncnlSt9re200mZtidoyAng28.MUJI無(wú)印良品□ep-iHflmerit粉削摩"Pscipfealloverth白place-"“People-allowerIheplace"，.二droamingabDUt弓niey.&ucculenckebabsandde-icioLis.Duck口朋trigE16kmIdreamingabc-uiihsse占酊等y,也白ntk&bacsanddatieious..."(3Hps)"Ganddue￡/arwlhinnnhitdry.OfdAfthecherryloie許多應(yīng)用通過(guò)““查看更多”按鈕，或拖動(dòng)屏幕（上拉刷新）時(shí)自動(dòng)加載更多結(jié)果。如LOFTER和ABCNews：也有軟件系統(tǒng)把延遲延遲加載做得更平滑，拖動(dòng)屏幕（上拉刷新）時(shí)自動(dòng)完成更新，如開(kāi)眼，只有在關(guān)閉在線視頻的情況下，我們才能看出它的加載即可交互，是由logo動(dòng)效完成的