在一個內容型的APP中，搜索功能可以說是標配。它是巨大的流量入口，同時又承載著產品運營的能力。碰巧最近在做JOOX搜索頁面的優化，借機整理了一下關于搜索設計的幾個要點。

根據用戶的實際使用行為，我們可以把搜索這個操作按照用戶行為路徑節點分為發現 – 進入 – 使用 – 得到4個部分。

• 發現搜索入口
• 進入搜索界面
• 使用搜索功能
• 得到搜索結果

發現入口

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

1. 快速發現

用戶的搜索需求會出現在兩個時間點，一是搜索目的明確，打開App就需要使用，另一個時間點是在使用App的過程中產生搜索需求，這個需求我們很難確定用戶在執行什么操作，所以需要根據頁面及產品類型進行設計。

可以確定的是，兩種需求時刻都要求我們的產品可以快速讓用戶找到搜索功能并使用，所以搜索功能的位置非常重要。當前絕大部分App的搜索功能都放置在頁面頂部，以搜索框或者「放大鏡」的樣式存在，用戶已經養成了習慣，當需要使用搜索功能時首先會尋找頁面的頂部位置。

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

百度云盤的搜索框在頁面滑動時會隨頁面滑走，而從筆者的使用習慣來講，搜索功能對于云盤來說是很重要的功能，所以這里的體驗有待提升。

2. 容易識別

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

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

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

icon 樣式每個公司的設計師出品都有所區別并且盡可能的想有特色，但是從產品的角度來說，「放大鏡」icon 的細節越少，識別度越高，不要過度的設計。

△ 來源于iconfont

 

進入搜索

進入搜索功能主要指的是用戶發現并點擊搜索功能后的交互及頁面，雖然各種類型的App有所區別。

但是大致也分為三種：

• 在當前頁面進行搜索;
• 進入新的頁面并拉起鍵盤;
• 先進入一個推薦頁，再進入搜索頁并拉起鍵盤。

1. 當前頁面進行搜索

在當前頁面進行搜索可能是因為信息不好歸類或者較為隱私，無法做數據處理，也表現為搜索功能對當前頁面是弱需求，使用頻率不高。

比如：iPhone手機短信的搜索功能，雖然是新彈出一個頂部欄，但是與在當前頁面進行搜索無異，只是從視覺上進行了設計。

2. 進入新的頁面并拉起鍵盤

進入新的頁面，往往是因為搜索功能很重要且要展示的信息太多，需要有一個單獨的頁面去承載，這是當前最常見的一種方式。

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

3. 進入推薦頁，再進入搜索頁并拉起鍵盤

以上兩種進入情況都是伴隨著鍵盤拉起動作的。所以為了更好地對推薦內容進行充分展示，有些 app 會選擇先進入一個推薦流頁面，把預置內容曝光給用戶，用戶再次點擊搜索框時拉起鍵盤輸入。

比如：抖音的搜索設計就是這樣的，這樣做相當于是拓展出了一個新的頁面，用來承載豐富的推薦內容。但缺點是用戶搜索路徑變長，有一定的流失風險。

為了減少進入新頁面的跳出感，我們可以在轉場動效上做優化。在點擊進入搜索頁面時，讓用戶感覺仍然是在當前頁面。 

△ JOOX搜索

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

MOO音樂發現頁的搜索功能在初始位置時是置頂的，但是當用戶上滑頁面時，會發生頂部搜索框隱藏被替換為分類，下滑頁面恢復搜索框的交互效果。

因為該頁面主要以推薦為主，當用戶上滑頁面時，搜索功能的需求被弱化，隱藏可以增加頁面顯示的內容，而為了可以讓用戶快速地進入搜索功能，只要執行下滑頁面，就會恢復搜索功能。

使用搜索

從進入搜索頁面開始，就需要查看頁面內容，輸入搜索詞，點擊搜索，這是用戶使用搜索功能的完整過程。

1. 推薦內容

從剛進入搜索頁面，到在輸入框輸入文字這段時間是推薦***的時機，這會為目標性不是非常強的那部分用戶提供大量可看內容。

上文已經講過進入搜索頁面的方式有3種：

• 在當前頁面進行搜索;
• 進入新的頁面并拉起鍵盤;
• 先進入一個推薦頁，再進入搜索頁并拉起鍵盤。

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

輸入框

輸入框文本一般為「請輸入搜索內容」，進入搜索頁面后光標在搜索框起始位置并調用鍵盤，輸入內容后搜索框會自動更新為輸入內容。

還有一種方式是把「請輸入搜索內容」替換為預設關鍵詞并定時更新，點擊搜索會直接搜索并展示搜索結果，這個過程也是引導的作用，與熱搜詞類似(如淘寶)。

在此基礎上更進一步，那就是在進入搜索頁面后，直接搜索并展示輸入框關鍵詞的搜索結果，這種方式可以更快速地向用戶展示有針對性的運營內容，缺點是進入搜索頁面即為結果顯示頁面，熱搜詞和搜索歷史等內容就沒有空間可以顯示。

熱搜詞

熱搜詞是根據算法展示搜索次數***的關鍵詞，對于進入搜索頁面但沒有強目的的用戶來說，熱搜詞可以降低用戶思考成本，提高產品/內容的查看次數。但是要注意熱搜詞的更新算法，熱搜詞本身就有引流的功能，如果單獨按照搜索次數來決定是否上熱搜，會出現熱搜詞榜非常穩定的情況。

歷史搜索

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

再拿抖音舉例：搜索歷史后置在從搜索推薦頁再次點擊搜索框時出現，也就是伴隨鍵盤出現。這樣比較符合正常邏輯，因為用戶拉起鍵盤目的就是進行輸入操作，此時出現搜索歷史記錄一方面可以減少重復搜索的操作成本，另一方面也讓用戶有回憶連貫的感覺。畢竟它提醒了我上次用這個 app 搜過什么內容，當時的感想是什么。

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

2. 搜索方式

在輸入搜索內容時關鍵詞匹配有兩種處理方式：一個是輸入過程匹配;另外一個是輸入完成匹配。

輸入過程匹配

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

輸入完成匹配

僅在輸入完成后，點擊「搜索」按鈕時，才開始進行搜索、匹配，直接展示搜索結果。這種方式省去了對輸入時實時分析、引導的過程，適用于對搜索功能要求不高的情況。類似的產品如產品經理App，輸入關鍵詞后不會做出反饋，需要執行搜索才會展示相關內容。

很多產品采用組合的方式，即時匹配關鍵詞并展示出來，點擊關鍵詞或者「搜索」按鈕后再展示搜索內容。類似的產品可以查看京東、天貓等電商App，除了對輸入內容做聯想，還會展示出與關鍵詞相關的維度，自動補全關鍵詞，增加用戶的選擇。

3. 搜索/取消按鈕

取消搜索的方式一般有點擊「取消」按鈕或者點擊「返回」按鈕。如果輸入框已經輸入字符，需要重新輸入新的搜索詞時，往往需要點擊鍵盤上的刪除按鈕回刪。當輸入的內容較長時這個過程的體驗就非常差，所以現在有很多產品都在輸入框尾部提供了刪除功能，一鍵刪除輸入的字符。這種功能在搜索頁面需要進行二次搜索或者輸入錯誤時，可以提供很好的體驗。

如果你細心研究不同的App，會發現搜索/取消按鈕大致分為兩種：一種是保留搜索按鈕;另一種是頁面上取消搜索按鈕，轉而使用鍵盤的搜索按鈕。

頁面保留搜索按鈕

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

頁面不保留搜索按鈕

頁面上沒有搜索按鈕，左側的返回按鈕也同時取消，點擊「取消」按鈕會返回上一個層級的頁面。

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

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

得到結果

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

1. 先分類再搜索

先分類再搜索有個很明顯的特征就是搜索目的明確，用戶已經知道自己想要查找什么樣的內容。

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

2. 先搜索再分類

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

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

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

搜索功能的其他思考

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

如今，我們看到搜索的效率、體驗設計都在不斷發生著變化，隨著AI技術的應用，搜索答案的準確性和相關性必將得到大幅提升。搜索互動性、個性化也會得到逐步提高。