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

APP設(shè)計(jì)模式之——搜索功能可能在許多人看來(lái)，搜尋是個(gè)不起眼的小功能，無(wú)需花太多時(shí)間贅述。但作為PM/UI/UX，我們沒(méi)有理由輕視任何涉及用戶(hù)體驗(yàn)的產(chǎn)品設(shè)計(jì)，個(gè)人來(lái)講，是不怕用戶(hù)批判和吐槽的，我最怕的是眼界狹隘，思路不開(kāi)闊，由于這打算了我的成長(zhǎng)空間和速度。

所以在這篇文章中，我盡可能地把自己遇到/思索到的，涉及搜尋功能的設(shè)計(jì)模式，圍圍著搜尋流程，都一一列舉出來(lái)，也盼望大家在看到新奇的APP搜尋模式時(shí)，貢獻(xiàn)一下案例。

應(yīng)第一篇專(zhuān)欄評(píng)論區(qū)@大大頭披風(fēng)伴侶的建議，后面全部文章插圖，我都會(huì)進(jìn)行標(biāo)注。

另外特別感謝大家的關(guān)注與欣賞，你們的認(rèn)可是我更新的最大動(dòng)力。

言歸正傳，先放一張搜尋流程圖：

湖藍(lán)色邊框是最簡(jiǎn)潔/必要的搜尋流程節(jié)點(diǎn)，考慮到各種各樣的場(chǎng)景，整個(gè)搜尋流程就變得“冗長(zhǎng)”了，但是用戶(hù)體驗(yàn)卻上去了。下面我們就逐一介紹搜尋流程中的各個(gè)動(dòng)作和關(guān)鍵節(jié)點(diǎn)，以及典型實(shí)例。

一、輸入搜尋內(nèi)容

1.功能入口

搜尋功能入口即用戶(hù)進(jìn)入搜尋流程的起點(diǎn)，這個(gè)起點(diǎn)通常都以靜態(tài)形式呈現(xiàn)在頁(yè)面上，比如頁(yè)面左上角或右上角的搜尋圖標(biāo)，或頁(yè)面上的搜尋文本框（以圓角矩形為主）。如格志和Reddit：

用戶(hù)點(diǎn)擊這個(gè)圖標(biāo)或者文本框后，才算觸發(fā)了搜尋流程的第一步：內(nèi)容錄入。

相對(duì)來(lái)說(shuō)，搜尋圖標(biāo)適合低頻搜尋應(yīng)用，而搜尋文本欄更適合高頻搜尋應(yīng)用。查詢(xún)類(lèi)應(yīng)用/場(chǎng)景明顯特別適合搜尋文本框，而且用戶(hù)使用頻度越高，搜尋文本框自身面積就越大，所占頁(yè)面位置也更加明顯，比如網(wǎng)易云音樂(lè)和金山詞霸：

個(gè)人來(lái)講，不知為何，當(dāng)我看到搜尋文本框的時(shí)候，就有一種立刻就要看到期盼的內(nèi)容的感覺(jué)，而單純的搜尋圖標(biāo)是沒(méi)方法給這種感覺(jué)的。究竟搜尋圖標(biāo)和搜尋結(jié)果中間，總會(huì)隔著一個(gè)搜尋文本框。

2.條件輸入

可能有人會(huì)說(shuō)了，輸入搜尋條件還有什么好說(shuō)的？直接敲鍵盤(pán)不就完事兒了嗎？

對(duì)于絕大部分用戶(hù)來(lái)說(shuō)，這的確沒(méi)有問(wèn)題，但是……俗話(huà)說(shuō)得好，魔鬼都在細(xì)節(jié)里。越是這種不起眼的地方，我們?cè)侥茏龀鲆恍┠茏屝”娪脩?hù)覺(jué)得很好用/好玩的設(shè)計(jì)，在體現(xiàn)APP自身特色的同時(shí)，還能幫應(yīng)用留住那些“長(zhǎng)尾用戶(hù)”。

條件輸入環(huán)節(jié)，我們應(yīng)當(dāng)關(guān)注的設(shè)計(jì)要素：退出搜尋頁(yè)面、一鍵刪除已輸入內(nèi)容、觸發(fā)搜尋動(dòng)作執(zhí)行的按鈕、小鍵盤(pán)、小鍵盤(pán)增加設(shè)計(jì)。

退出搜尋界面：通常是“取消”二字，水平置于文本框右側(cè)，也有些應(yīng)用實(shí)行“＜”按鈕設(shè)計(jì)，水平置于文本框左側(cè)，比如微信閱讀和Quora：

一鍵刪除已輸入內(nèi)容：通常是在搜尋框右側(cè)放置灰底白色“×”圖標(biāo)，也有些應(yīng)用出于用戶(hù)輸入出錯(cuò)率高的狀況，將這個(gè)元素放置到用戶(hù)更簡(jiǎn)單“夠得到”的位置，這個(gè)設(shè)計(jì)在大屏手機(jī)時(shí)代還是特別有必要的。

下面的良倉(cāng)和金山詞霸分別代表了這兩種類(lèi)型，且后者采納了“清空”文字’代替“×”圖標(biāo)，居于屏幕中央略靠下的位置，可以說(shuō)特別醒目了：

觸發(fā)搜尋動(dòng)作執(zhí)行的按鈕：PC端產(chǎn)品許多還保留著有實(shí)際作用的“搜尋”按鈕，如百度首頁(yè)的“百度一下”按鈕：

谷歌的“Google搜尋”：

以及相當(dāng)多應(yīng)用的搜尋框內(nèi)置的或者右側(cè)的搜尋圖標(biāo)，PC端的“搜尋”觸發(fā)是通過(guò)“Enter”回車(chē)鍵或鼠標(biāo)單擊完成，同理APP上的搜尋觸發(fā)，要么是通過(guò)點(diǎn)擊頁(yè)面上的“搜尋”圖標(biāo)，要么是通過(guò)小鍵盤(pán)上的確認(rèn)鍵來(lái)完成，而小鍵盤(pán)確認(rèn)鍵往往有多種表現(xiàn)形式，如“搜尋”、“確定”、“換行”等。

小鍵盤(pán)：小鍵盤(pán)需要留意的就是依據(jù)輸入框和表單的內(nèi)容，來(lái)設(shè)置默認(rèn)的小鍵盤(pán)樣式，比如中文鍵盤(pán)、英文鍵盤(pán)、數(shù)字鍵盤(pán)等，為用戶(hù)帶來(lái)更順暢的操作體驗(yàn)。

小鍵盤(pán)增加設(shè)計(jì)：增加設(shè)計(jì)指的是在小鍵盤(pán)上方，再增加一行命令項(xiàng)，在視覺(jué)設(shè)計(jì)上表現(xiàn)為做到和小鍵盤(pán)融為一體，在功能上表現(xiàn)為依據(jù)用戶(hù)使用場(chǎng)景，尤其是高頻操作，來(lái)設(shè)計(jì)對(duì)應(yīng)的功能。

比如UC掃瞄器的小鍵盤(pán)增加設(shè)計(jì)，除了給出常見(jiàn)的網(wǎng)址前綴后綴，還在中間放置了一個(gè)光標(biāo)精準(zhǔn)定位滾軸，極具匠心：

還有一些帶有應(yīng)用自身特色的小鍵盤(pán)增加設(shè)計(jì)，如金山詞霸和Quora。

詞霸有三個(gè)按鈕：“返回”（退出搜尋界面）、“清空”（一鍵清除已輸入內(nèi)容）、“翻譯”（觸發(fā)搜尋動(dòng)作），我信任只要用戶(hù)幾次詞霸，便會(huì)對(duì)這個(gè)界面欣賞有加，高頻操作按鈕居中布局，特別便利用戶(hù)單手操作，且搜尋框顯得特別簡(jiǎn)潔美觀：

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

而中國(guó)版Quora，即知乎，并沒(méi)有建立起“搜尋-提問(wèn)”的關(guān)聯(lián)，提問(wèn)入口仍舊是孤立的（文章發(fā)布后經(jīng)@TonyLiao和@大大頭披風(fēng)的提示，發(fā)覺(jué)最新版知乎已經(jīng)可以在搜尋結(jié)果頁(yè)的上劃刷新的第四屏看到“沒(méi)找到想要的內(nèi)容？——去提問(wèn)”的懸浮提示設(shè)計(jì)）：

思索時(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í)體鍵盤(pán)按鍵，而后者為了不影響表結(jié)構(gòu)的顯示效果，干脆在增加設(shè)計(jì)行中做了個(gè)搜尋框，所以沒(méi)有一成不變的設(shè)計(jì)，還是要詳細(xì)問(wèn)題詳細(xì)場(chǎng)景詳細(xì)分析。當(dāng)然這種產(chǎn)品的PM基本就必需要懂相關(guān)技術(shù)和操作了：

3.幫助輸入

幫助輸入，指的是在用戶(hù)輸入前，APP供應(yīng)給用戶(hù)一些內(nèi)容或者選項(xiàng)，以便用戶(hù)更快更省力地輸入搜尋條件。如UC掃瞄器和知乎就供應(yīng)了歷史搜尋記錄，來(lái)幫助：

UC是給出了歷史搜尋記錄，而知乎則更進(jìn)一步，對(duì)歷史搜尋記錄進(jìn)行了分類(lèi)，使用“內(nèi)容”和“用戶(hù)”兩個(gè)標(biāo)簽讓用戶(hù)進(jìn)行切換，而且還增加了“最近掃瞄”入口，便利用戶(hù)回溯自己近期的掃瞄列表，更勝一籌。

“敬重用戶(hù)的勞動(dòng)”是勝利手機(jī)界面設(shè)計(jì)的最基本原則。“保存的搜尋”和“最近搜尋”使得搜尋條件簡(jiǎn)單從以前的搜尋歷史中選擇，而不用再次輸入相同的關(guān)鍵詞。

選項(xiàng)幫助輸入，是指在用戶(hù)輸入搜尋條件之前，供應(yīng)一些基本的搜尋范圍（如內(nèi)容分類(lèi)等），讓用戶(hù)更快地獲得期望的結(jié)果。參見(jiàn)全民K歌和Pinterest：

這種搜尋方式也可以稱(chēng)為“前置搜尋類(lèi)別”。這種搜尋方式適用于分類(lèi)較簡(jiǎn)潔的內(nèi)容，便于精確地定位搜尋內(nèi)容。

與“前置搜尋類(lèi)別”相對(duì)應(yīng)的，是“后置搜尋類(lèi)別”，我們放到后面去講。

此外還有包括基于地理位置搜尋的幫助輸入方式，這在基于LBS的APP中特別常見(jiàn)，如貓眼電影和高德地圖：

最佳實(shí)踐：保存搜尋需要額外的步驟去命名搜尋參考值，敬重用戶(hù)的勞動(dòng)成果，讓用戶(hù)削減操作。

二、執(zhí)行搜尋命令

在移動(dòng)端，最廣泛的搜尋模式是：用戶(hù)輸入搜尋內(nèi)容后，APP自動(dòng)執(zhí)行搜尋動(dòng)作，同時(shí)將搜尋結(jié)果以列表的形式展現(xiàn)在搜尋文本框下方，用戶(hù)連續(xù)輸入搜尋內(nèi)容，搜尋結(jié)果也會(huì)相應(yīng)自動(dòng)變化，當(dāng)全部條件輸入完畢時(shí)，點(diǎn)擊搜尋按鈕，顯示最終結(jié)果。

這種搜尋模式，我稱(chēng)之為動(dòng)態(tài)搜尋，這也是目前最符合“懶設(shè)計(jì)”理念的搜尋方式。同時(shí)，還有一種較為“古老”的搜尋模式，即靜態(tài)搜尋，即用戶(hù)輸入完全部的搜尋條件，再一鍵執(zhí)行搜尋命令。

動(dòng)態(tài)搜尋

動(dòng)態(tài)搜尋，指輸入搜尋條件時(shí)的實(shí)時(shí)搜尋+實(shí)時(shí)展現(xiàn)。這種設(shè)計(jì)也被稱(chēng)為動(dòng)態(tài)過(guò)濾，即輸入文本數(shù)據(jù)，對(duì)應(yīng)搜尋結(jié)果將會(huì)動(dòng)態(tài)過(guò)濾顯示在屏幕上。同時(shí)，這也是一種特別形式的幫助輸入（見(jiàn)4.1.3）。我們以豆瓣為例：

在輸入“夢(mèng)”和“夢(mèng)的”兩個(gè)搜尋條件時(shí)，結(jié)果呈現(xiàn)的完全不一樣，這是由于動(dòng)態(tài)搜尋時(shí)，是依據(jù)已輸入內(nèi)容的詞頻熱度進(jìn)行搜尋和排序的。這又涉及到搜尋算法，對(duì)于這部分內(nèi)容，我們放到后面去具體介紹。

目前使用靜態(tài)搜尋設(shè)計(jì)的APP已經(jīng)越來(lái)越少，因此不做贅述。

三、搜尋等待

通常狀況下，無(wú)論是動(dòng)態(tài)搜尋還是靜態(tài)搜尋，在搜尋結(jié)果呈現(xiàn)之前，都會(huì)有進(jìn)度條或者加載交互動(dòng)作的指示器，用以告知用戶(hù)：“正在搜尋中，請(qǐng)急躁等待”。當(dāng)搜尋動(dòng)作執(zhí)行完畢后，再展現(xiàn)最終的搜尋結(jié)果：

在2G（其次代移動(dòng)通信技術(shù)）時(shí)代，下載速度在幾KB/S到10幾KB/S之間，從錄入搜尋條件到顯示搜尋結(jié)果，通常需要1秒以上的響應(yīng)時(shí)間，這時(shí)的系統(tǒng)反饋就特別必要，進(jìn)度條或者加載動(dòng)作能給用戶(hù)以提示，表示正在搜尋中。

到了3G/4G，甚至將來(lái)幾年就能夠在國(guó)內(nèi)應(yīng)用的5G時(shí)代，搜尋結(jié)果幾乎瞬時(shí)呈現(xiàn)，這時(shí)系統(tǒng)反饋動(dòng)作是否必要呢？答案是確定的，由于哪怕是在一線(xiàn)城市市中心，也會(huì)存在網(wǎng)絡(luò)環(huán)境差的場(chǎng)景，應(yīng)用仍需要給用戶(hù)供應(yīng)等待提示。

四、展現(xiàn)搜尋結(jié)果

1.

展現(xiàn)方式

搜尋結(jié)果的展現(xiàn)，涉及到展現(xiàn)方式、展現(xiàn)層級(jí)等。

搜尋完畢，結(jié)果會(huì)顯示在原有頁(yè)面下方，或在新頁(yè)面中顯示（相對(duì)較少）。展現(xiàn)方式也紛繁多樣。比如最簡(jiǎn)潔的文字列表視圖（墨墨單詞和TripAdvisor）：

圖文并茂式列表視圖（網(wǎng)易云課堂和在行）：

還有一些簡(jiǎn)約化，內(nèi)容設(shè)計(jì)感極強(qiáng)的列表（Kickstarter和Town）：

Kickstarter是橫向左右滑動(dòng)卡片式列表，每個(gè)卡片代表一個(gè)眾籌項(xiàng)目；Town是縱向滑動(dòng)大圖列表，每個(gè)條目代表一處人文景觀。

增加列表視圖（豆瓣和攜程）：

增加列表視圖，是一般列表視圖的變體，指在列表視圖的基礎(chǔ)上，糅合其他設(shè)計(jì)要素，而呈現(xiàn)出更加多樣的視圖方式。

比如豆瓣的多重列表視圖就是增加列表視圖的一種，它采納了基于搜尋結(jié)果類(lèi)別進(jìn)行分列表展現(xiàn)的視圖方式。簡(jiǎn)潔來(lái)講就是展現(xiàn)頁(yè)面有多個(gè)列表，如“圖書(shū)”列表、“電影/電視”列表等。

攜程搜尋展現(xiàn)頁(yè)面是增加型列表視圖的典型，在整體是列表視圖的整體視覺(jué)效果上，有的列表項(xiàng)本身就是一項(xiàng)內(nèi)容集合，如“張家界的旅游度假”；有的列表項(xiàng)本身是一個(gè)詳細(xì)條目（張家界碧桂園鳳凰酒店）；有的列表項(xiàng)增加了內(nèi)容詳情介紹（旅游產(chǎn)品介紹），不同列表項(xiàng)代表不同類(lèi)別（飛機(jī)、酒店、旅游產(chǎn)品等），這種視圖方式適合搜尋結(jié)果門(mén)類(lèi)及其簡(jiǎn)單，不同結(jié)果展現(xiàn)權(quán)重不同的應(yīng)用。

表格視圖（小紅書(shū)和ASOS）：

當(dāng)搜尋結(jié)果需要圖文并茂地進(jìn)行展現(xiàn)，且需要支持用戶(hù)快速掃瞄較多條目的時(shí)候，表格視圖再適合不過(guò)了，而上述兩個(gè)前提，缺了任何一個(gè)，都會(huì)影響用戶(hù)體驗(yàn)。這種視圖方式常常應(yīng)用在購(gòu)物類(lèi)的應(yīng)用中，且最多兩列排列，再多的話(huà)，信息就太過(guò)密集。

假如需要圖文顯示，且用戶(hù)掃瞄速度更快，條目更多的時(shí)候，就由表格視圖變?yōu)榱藞D文并茂的列表視圖，如淘寶和美團(tuán)，只保留一列內(nèi)容，是為了不打斷用戶(hù)的視覺(jué)流。設(shè)想一下從上到下，和從左到右+從上到下，哪種方案更好？

縮略圖（Eventbrite）：

縮略圖視圖模式，指的是搜尋結(jié)果的內(nèi)容條目，是將詳情頁(yè)的圖文內(nèi)容進(jìn)行選取、縮小或模糊處理后，以N個(gè)縮略圖的方式，展現(xiàn)在搜尋結(jié)果展現(xiàn)頁(yè)，因此該模式通常和其他模式混合使用。

甚至地圖衛(wèi)星圖（摩拜和ofo）：

地圖/衛(wèi)星圖的視圖方式，適合于供應(yīng)基于LBS（基于地理位置信息服務(wù)）的應(yīng)用，可以為用戶(hù)供應(yīng)空間和位置的宏觀視角。當(dāng)然，還有個(gè)默認(rèn)前提就是：搜尋結(jié)果信息類(lèi)別單一，比如摩拜和ofo搜尋結(jié)果都是標(biāo)準(zhǔn)化、同質(zhì)化的單車(chē)，用戶(hù)不需要關(guān)懷這輛車(chē)有什么特質(zhì)，只需要關(guān)懷能不能用即可。

有時(shí)依據(jù)搜尋結(jié)果的簡(jiǎn)單程度和用戶(hù)使用首選項(xiàng)的不同，也會(huì)使用多種視圖顯示，如高德地圖和Eventbrite，就結(jié)合了地圖和列表兩種視圖方式：

高德地圖搜尋楊家火鍋，火鍋這種餐飲行業(yè)，即便同一品牌，不同門(mén)店供應(yīng)的服務(wù)也可能相差極大，比如店鋪環(huán)境、人氣、價(jià)格（不同商圈價(jià)格會(huì)略有變化，會(huì)有一個(gè)價(jià)格系數(shù)）、經(jīng)營(yíng)狀態(tài)、營(yíng)業(yè)時(shí)間、評(píng)價(jià)等，所以除了位置信息，還需要把其他關(guān)鍵信息以列表形式呈現(xiàn)給用戶(hù)。

而Eventbrite特征更加明顯，我輸入的搜尋條件“基于紐約及周邊地圖的藝術(shù)類(lèi)活動(dòng)”明顯囊括的內(nèi)容更加紛繁多樣，所以在展現(xiàn)結(jié)果時(shí)，除了使用地理位置視圖，還將活動(dòng)用列表的形式呈現(xiàn)出來(lái)，配以主題、時(shí)間、地點(diǎn)和價(jià)格介紹等。

2.內(nèi)容加載

在搜尋時(shí)，通常使用延遲加載技術(shù)，使部分結(jié)果可以被優(yōu)先、快速地展現(xiàn)出來(lái)，而更多數(shù)據(jù)則會(huì)被延遲加載，這種設(shè)計(jì)有助于提高用戶(hù)體驗(yàn)，如Foursquare：

很多應(yīng)用通過(guò)““查看更多”按鈕，或拖動(dòng)屏幕（上拉刷新）時(shí)自動(dòng)加載更多結(jié)果。如LOFTER和ABCNews：

也有應(yīng)用把延遲加載做得更平滑，拖動(dòng)屏幕（上拉刷新）時(shí)自動(dòng)完成更新，如開(kāi)眼，只有在關(guān)閉網(wǎng)絡(luò)的狀況下，我們才能看出它的加載交互，是由logo動(dòng)效完成的。

五、結(jié)果篩選

結(jié)果篩選，指在搜尋結(jié)果的基礎(chǔ)上，通過(guò)篩選條件，對(duì)內(nèi)容進(jìn)行過(guò)濾，得到更加精確的搜尋結(jié)果。通常分為前置篩選、后置篩選和全局篩選。

1.前置篩選

前置篩選是在用戶(hù)觸發(fā)搜尋動(dòng)作之前進(jìn)行的篩選，如豆瓣：

在動(dòng)態(tài)搜尋執(zhí)行完，點(diǎn)擊“全部”菜單，在下拉列表中選擇“圖書(shū)”，得到篩選后的結(jié)果，再次點(diǎn)擊“搜尋”按鈕，進(jìn)入展現(xiàn)搜尋結(jié)果的全屏頁(yè)：

2.后置篩選

后置篩選，也稱(chēng)結(jié)果篩選。指的是當(dāng)搜尋動(dòng)作執(zhí)行完畢后，基于搜尋結(jié)果，所進(jìn)行的二次篩選，通常是以“搜尋表單”的方式呈現(xiàn)，特點(diǎn)是一個(gè)單獨(dú)的表單輸入多個(gè)條件和一個(gè)明顯的搜尋