在一個(gè)內(nèi)容型的APP中，搜索功能可以說是標(biāo)配。它是巨大的流量入口，同時(shí)又承載著產(chǎn)品運(yùn)營的能力。碰巧最近在做JOOX搜索頁面的優(yōu)化，借機(jī)整理了一下關(guān)于搜索設(shè)計(jì)的幾個(gè)要點(diǎn)，總結(jié)如下，歡迎交流。

根據(jù)用戶的實(shí)際使用行為，我們可以把搜索這個(gè)操作按照用戶行為路徑節(jié)點(diǎn)分為發(fā)現(xiàn)-進(jìn)入-使用-得到4個(gè)部分。

1. 發(fā)現(xiàn)搜索入口
2. 進(jìn)入搜索界面
3. 使用搜索功能
4. 得到搜索結(jié)果

一、發(fā)現(xiàn)入口

搜索框的入口一般有幾種：一級tab、搜索框、搜索icon、隱藏式搜索框。不論何種樣式，遵循的最基本的原則都是兩個(gè)點(diǎn)：快速發(fā)現(xiàn)和容易識別。

1. 快速發(fā)現(xiàn)

用戶的搜索需求會出現(xiàn)在兩個(gè)時(shí)間點(diǎn)，一是搜索目的明確，打開App就需要使用，另一個(gè)時(shí)間點(diǎn)是在使用App的過程中產(chǎn)生搜索需求，這個(gè)需求我們很難確定用戶在執(zhí)行什么操作，所以需要根據(jù)頁面及產(chǎn)品類型進(jìn)行設(shè)計(jì)。

可以確定的是，兩種需求時(shí)刻都要求我們的產(chǎn)品可以快速讓用戶找到搜索功能并使用，所以搜索功能的位置非常重要。當(dāng)前絕大部分App的搜索功能都放置在頁面頂部，以搜索框或者“放大鏡”的樣式存在，用戶已經(jīng)養(yǎng)成了習(xí)慣，當(dāng)需要使用搜索功能時(shí)首先會尋找頁面的頂部位置。

大多數(shù)內(nèi)容型的產(chǎn)品會常駐搜索框，便于用戶在瀏覽內(nèi)容的過程中隨時(shí)查找內(nèi)容。也有產(chǎn)品做成收成一個(gè)icon后固定在某一位置，為其他內(nèi)容的展示節(jié)省出空間，例如：得到APP就是這樣做的。

百度云盤的搜索框在頁面滑動(dòng)時(shí)會隨頁面滑走，而從筆者的使用習(xí)慣來講，搜索功能對于云盤來說是很重要的功能，所以這的體驗(yàn)有待提升。

2. 容易識別

在用戶潛意識的位置中放置搜索功能，還有一個(gè)要求是降低用戶的識別成本，讓用戶一眼就能看出是搜索功能，而不用經(jīng)過判斷。當(dāng)前最常見的就是搜索框或者“放大鏡”icon樣式兩種，用戶不需要判斷就能識別該功能為搜索功能。

搜索框的樣式總的來說有矩形和圓角兩種，配合內(nèi)部默認(rèn)文案，有多種組合。

也有一些比較特殊的搜索樣式，比如：網(wǎng)易有道翻譯中精品課的搜索頁面就進(jìn)行了新的嘗試（這里其實(shí)是進(jìn)入搜索頁面了），但是用戶接受成本比較高，不太建議輕易嘗試。

icon樣式每個(gè)公司的設(shè)計(jì)師出品都有所區(qū)別并且盡可能的想有特色，但是從產(chǎn)品的角度來說，“放大鏡”icon的細(xì)節(jié)越少，識別度越高，不要過度的設(shè)計(jì)。

來源于https://www.iconfont.cn/search/index?q=%E6%90%9C%E7%B4%A2

二、進(jìn)入搜索

進(jìn)入搜索功能主要指的是用戶發(fā)現(xiàn)并點(diǎn)擊搜索功能后的交互及頁面，雖然各種類型的App有所區(qū)別。

但是大致也分為三種：

• 一是在當(dāng)前頁面進(jìn)行搜索；
• 二是進(jìn)入新的頁面并拉起鍵盤；
• 三是先進(jìn)入一個(gè)推薦頁，再進(jìn)入搜索頁并拉起鍵盤。

1. 當(dāng)前頁面進(jìn)行搜索

在當(dāng)前頁面進(jìn)行搜索可能是因?yàn)樾畔⒉缓脷w類或者較為隱私，無法做數(shù)據(jù)處理，也表現(xiàn)為搜索功能對當(dāng)前頁面是弱需求，使用頻率不高。

比如：iPhone手機(jī)短信的搜索功能，雖然是新彈出一個(gè)頂部欄，但是與在當(dāng)前頁面進(jìn)行搜索無異，只是從視覺上進(jìn)行了設(shè)計(jì)。

2. 進(jìn)入新的頁面并拉起鍵盤

進(jìn)入新的頁面，往往是因?yàn)樗阉鞴δ芎苤匾乙故镜男畔⑻啵枰幸粋€(gè)單獨(dú)的頁面去承載，這是當(dāng)前最常見的一種方式。

在新頁面中可以展示熱搜詞語或者運(yùn)營需要展示的相關(guān)信息，也可以展示用戶搜索歷史等，進(jìn)一步降低用戶使用搜索功能的成本。

3. 進(jìn)入推薦頁，再進(jìn)入搜索頁并拉起鍵盤

以上兩種情況進(jìn)入情況都是伴隨著鍵盤拉起動(dòng)作的。所以為了更好的對推薦內(nèi)容進(jìn)行充分展示，有些app會選擇先進(jìn)入一個(gè)推薦流頁面，把預(yù)置內(nèi)容曝光給用戶，用戶再次點(diǎn)擊搜索框時(shí)拉起鍵盤輸入。

比如：抖音的搜索設(shè)計(jì)就是這樣的，這樣做相當(dāng)于是拓展出了一個(gè)新的頁面，用來承載豐富的推薦內(nèi)容。但是缺點(diǎn)就是用戶搜索路徑變長，有一定流失的風(fēng)險(xiǎn)。

為了減少進(jìn)入新頁面的跳出感，我們可以在轉(zhuǎn)場動(dòng)效上做優(yōu)化。在點(diǎn)擊進(jìn)入搜索頁面時(shí)，讓用戶感覺仍然是在當(dāng)前頁面。

JOOX搜索

很多App在頁面的初始狀態(tài)時(shí)搜索功能是很明顯的，并且占用一定比例的位置，但是在用戶有其他操作的情況下，搜索功能的視圖會發(fā)生對應(yīng)的變化。

MOO音樂發(fā)現(xiàn)頁的搜索功能在初始位置時(shí)是置頂?shù)模钱?dāng)用戶上滑頁面時(shí)，會發(fā)生頂部搜索框隱藏被替換為分類，下滑頁面恢復(fù)搜索框的交互效果。

因?yàn)樵擁撁嬷饕酝扑]為主，當(dāng)用戶上滑頁面時(shí)，搜索功能的需求被弱化，隱藏可以增加頁面顯示的內(nèi)容，而為了可以讓用戶快速的進(jìn)入搜索功能，只要執(zhí)行下滑頁面，就會恢復(fù)搜索功能。

三、使用搜索

從進(jìn)入搜索頁面開始，就需要查看頁面內(nèi)容，輸入搜索詞，點(diǎn)擊搜索，這是用戶使用搜索功能的完整過程。

1. 推薦內(nèi)容

從剛進(jìn)入搜索頁面，到在輸入框輸入文字這段時(shí)間是推薦最好的時(shí)機(jī)，這會為目標(biāo)性不是非常強(qiáng)的那部分用戶提供大量可看內(nèi)容。

上文已經(jīng)講過進(jìn)入搜索頁面的方式有3種：

• 一是在當(dāng)前頁面進(jìn)行搜索；
• 二是進(jìn)入新的頁面并拉起鍵盤；
• 三是先進(jìn)入一個(gè)推薦頁，再進(jìn)入搜索頁并拉起鍵盤。

第一種是沒有推薦內(nèi)容的。后面兩種頁面從上到下可以分為3部分：輸入框、熱搜詞、搜索歷史。

（1）輸入框

輸入框文本一般為“請輸入搜索內(nèi)容”進(jìn)入搜索頁面后光標(biāo)在搜索框起始位置并調(diào)用鍵盤，輸入內(nèi)容后搜索框會自動(dòng)更新為輸入內(nèi)容。

還有一種方式是把“請輸入搜索內(nèi)容”替換為預(yù)設(shè)關(guān)鍵詞并定時(shí)更新，點(diǎn)擊搜索會直接搜索并展示搜索結(jié)果，這個(gè)過程也是引導(dǎo)的作用，與熱搜詞類似（如淘寶）。

在此基礎(chǔ)上更進(jìn)一步，那就是在進(jìn)入搜索頁面后，直接搜索并展示輸入框關(guān)鍵詞的搜索結(jié)果，這種方式可以更快速地向用戶展示有針對性的運(yùn)營內(nèi)容，缺點(diǎn)是進(jìn)入搜索頁面即為結(jié)果顯示頁面，熱搜詞和搜索歷史等內(nèi)容就沒有空間可以顯示。

（2）熱搜詞

熱搜詞是根據(jù)算法展示搜索次數(shù)最高的關(guān)鍵詞，對于進(jìn)入搜索頁面但沒有強(qiáng)目的的用戶來說，熱搜詞可以降低用戶思考成本，提高產(chǎn)品/內(nèi)容的查看次數(shù)。但是要注意熱搜詞的更新算法，熱搜詞本身就有引流的功能，如果單獨(dú)按照搜索次數(shù)來決定是否上熱搜，會出現(xiàn)熱搜詞榜非常穩(wěn)定的情況。

（3）歷史搜索

歷史搜索可以方便用戶快速查找以前搜索的內(nèi)容，無需再次輸入，但是一定要注意出于用戶隱私保護(hù)，歷史搜索記錄需要支持刪除功能。另外搜索歷史的承載頁面通常會有兩種做法。對于第3種進(jìn)入搜索的方式，我們有兩個(gè)頁面可以用來承載搜索歷史。

再拿抖音舉例：搜索歷史后置在從搜索推薦頁再次點(diǎn)擊搜索框時(shí)出現(xiàn)，也就是伴隨鍵盤出現(xiàn)。這樣比較符合正常邏輯，因?yàn)橛脩衾疰I盤目的就是進(jìn)行輸入操作，此時(shí)出現(xiàn)搜索歷史記錄一方面可以減少重復(fù)搜索用戶的操作成本，另一方面也讓用戶有回憶連貫的感覺。畢竟它提醒了我上次我用這個(gè)app搜過什么內(nèi)容，當(dāng)時(shí)的感想是什么。

不過還有一個(gè)地方可以放，那就是第一次拉起的推薦頁，具體如何選擇也要看具體內(nèi)容。JOOX選擇放在這個(gè)頁面，這樣做的原因和好處在于真實(shí)的用戶數(shù)據(jù)進(jìn)入推薦頁的用戶一多半都是進(jìn)行點(diǎn)擊歷史記錄操作，放在第一個(gè)頁面無疑縮短了用戶重復(fù)搜索的路徑，提高了效率。

2. 搜索方式

在輸入搜索內(nèi)容時(shí)關(guān)鍵詞匹配有兩種處理方式：一個(gè)是輸入過程匹配；一個(gè)是輸入完成匹配。

（1）輸入過程匹配

在輸入時(shí)，每輸入一個(gè)字符，就進(jìn)行一次匹配，同時(shí)更新頁面信息。這里更新的信息，可以是針對輸入內(nèi)容進(jìn)行推薦的信息，也可以是搜索結(jié)果。這種方式可以對搜索結(jié)果做出即時(shí)反饋，引導(dǎo)性強(qiáng)，效率非常高，但是輸入過程匹配對于計(jì)算能力要求比較高，可以根據(jù)自己的產(chǎn)品和實(shí)際情況考慮是否需要此功能，否則需要加載等待，影響體驗(yàn)。

（2）輸入完成匹配

僅在輸入完成后，點(diǎn)擊【搜索】按鈕時(shí)，才開始進(jìn)行搜索、匹配，直接展示搜索結(jié)果。這種方式省去了對輸入過程實(shí)時(shí)分析、引導(dǎo)的過程，適用于對搜索功能要求不高的情況。類似的產(chǎn)品如產(chǎn)品經(jīng)理，輸入關(guān)鍵詞后不會做出反饋，需要執(zhí)行搜索才會展示相關(guān)內(nèi)容。

很多產(chǎn)品采用組合的方式，即時(shí)匹配關(guān)鍵詞并展示出來，點(diǎn)擊關(guān)鍵詞或者【搜索】按鈕后再展示搜索內(nèi)容。類似的產(chǎn)品可以查看京東、天貓等電商App，除了對輸入內(nèi)容做聯(lián)想，還會展示出與關(guān)鍵詞相關(guān)的維度，自動(dòng)補(bǔ)全關(guān)鍵詞，增加用戶的選擇。

3. 搜索/取消按鈕

取消搜索的方式一般有點(diǎn)擊【取消】按鈕或者點(diǎn)擊【返回】按鈕，如果輸入框已經(jīng)輸入字符，需要重新輸入新的搜索詞時(shí)，往往需要點(diǎn)擊鍵盤上的刪除按鈕回刪。當(dāng)輸入的內(nèi)容較長時(shí)這個(gè)過程的體驗(yàn)就非常差，所以現(xiàn)在有很多產(chǎn)品都在輸入框尾部提供了刪除功能，一鍵刪除輸入的字符。這種功能在搜索頁面需要進(jìn)行二次搜索或者輸入錯(cuò)誤時(shí)，可以提供很好的體驗(yàn)。

如果你細(xì)心研究不同的App，會發(fā)現(xiàn)搜索/取消按鈕大致分為兩種：一種是保留搜索按鈕；另一種是頁面上取消搜索按鈕，轉(zhuǎn)而使用鍵盤的搜索按鈕。

（1）頁面保留搜索按鈕

搜索按鈕一般放置在搜索框的右側(cè)，那么左側(cè)就一定會保留返回icon，這樣才能正常實(shí)現(xiàn)App的跳轉(zhuǎn)路徑。這種方式雖然比較規(guī)矩，同時(shí)減少輸入框可顯示的字符長度，但是用戶識別成本會降低很多，返回和搜索按鈕非常明確。

（2）頁面不保留搜索按鈕

頁面上沒有搜索按鈕的同時(shí)，左側(cè)的返回按鈕也同時(shí)取消，點(diǎn)擊【取消】按鈕會返回上一個(gè)層級的頁面。

這種方式一般會使用即時(shí)匹配（過程匹配）的搜索方式，需要進(jìn)行搜索時(shí)，通過鍵盤的搜索按鈕執(zhí)行搜索操作。好處在于搜索按鈕在右下角，符合手的操作習(xí)慣且在舒適操作區(qū)域，可以更快速的執(zhí)行搜索操作，但是取消按鈕無法明確返回邏輯，當(dāng)用戶需要退出搜索返回上一層級時(shí)需要進(jìn)行嘗試性地點(diǎn)擊【取消】按鈕。

如果頁面上使用【搜索】按鈕，則一定要保留返回的功能。使用【取消】按鈕則會取消【返回】按鈕，否則功能冗余。

四、得到結(jié)果

搜索完成后，結(jié)果頁面會根據(jù)算法展示出相匹配的內(nèi)容，結(jié)果展示也有多種方式。對于繁雜的內(nèi)容，做好分類是很有必要的。一般來說，每個(gè)產(chǎn)品都有自己的分類方式，但歸結(jié)為兩大類：先分類再搜索和先搜索再分類。

1. 先分類再搜索

先分類再搜索有個(gè)很明顯的特征就是搜索目的明確，用戶已經(jīng)自己想要查找什么樣的內(nèi)容。

比如：安居客直這款產(chǎn)品，用戶在使用搜索功能時(shí)，會非常明確的知道自己想要搜索的信息維度，所以先分類再搜索可以提高搜索準(zhǔn)確率，減少用戶搜索后篩選的成本。

2. 先搜索再分類

先搜索再分類則可以減少用戶使用搜索功能的成本，但是會增加對結(jié)果篩選的難度。一般的操作是系統(tǒng)根據(jù)搜索詞進(jìn)行算法匹配，把所有結(jié)果都展示出來，然后提供分類篩選的功能。

這種方式對于用戶無目的搜索的體驗(yàn)會更好，一般多見于電商、知識類等信息和分類明確的產(chǎn)品中。

比如：知乎的搜索邏輯，就是先根據(jù)搜索詞匹配結(jié)果，展示所有信息，提供用戶、話題、私家課、Live等分類搜索切換。

五、關(guān)于搜索功能的其他思考

本文主要探討的是基于文字的搜索。除此之外其實(shí)還有，例如：語音搜索、圖片搜索、掃碼搜索，拍照搜索，拍照翻譯搜索等等。最近幾年，隨著語音技術(shù)的不斷成熟，語音搜索功能在音樂類APP上應(yīng)用越來越多，通過識別音樂來搜索音樂的相關(guān)內(nèi)容，部分音樂類app還針對一些場合做了些語音搜索上的優(yōu)化，比如聽歌識曲、哼歌識曲，提高了用戶搜索的內(nèi)容的效率。

如今，我們看到搜索的效率、體驗(yàn)設(shè)計(jì)都在不斷發(fā)生著變化，隨著 AI技術(shù)的應(yīng)用，搜索答案的準(zhǔn)確性和相關(guān)性必將得到大幅提升。搜索互動(dòng)性、個(gè)性化也會得到逐步提高。

作者：曉吾設(shè)計(jì)，公眾號：曉吾設(shè)計(jì)

本文由 @曉吾設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議