起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識5個方面分析：搜索框的產品設計邏輯
搜索功能是絕大部分產品中標配的功能，因為搜索功能可以幫助用戶快速找到想要的內容，縮短用戶使用成本，文章主要聊一聊App搜索框的產品設計邏輯。
產品設計中，不管是由簡到繁還是由繁到簡，都有著固定的方式方法，也體現著一個產品生命周期的特征。而針對某一個功能的產品設計，則需要有業務型的邏輯，比如：搜索框的設計。
搜索功能是絕大部分產品中標配的功能，因為搜索功能可以幫助用戶快速找到想要的內容，縮短用戶使用成本，目前為止還沒有什么方法能夠代替，區別只在于隨著技術的更新，搜索的方式更多樣了，現在僅聊一聊App搜索框的產品設計邏輯。
用戶對于搜索的需求和過程可以理解為需要搜索功能→查找搜索功能→進入搜索功能→使用搜索功能→得到搜索結果。
一、是否需要搜索功能
一個產品是否需要搜索功能取決于該產品的業務需求，大致分為不需要和需要兩種狀態。
搜索雖然是一個提升用戶體驗的利器功能，但是如果不考慮產品實際情況，不管什么App都增加搜索功能的話，首先會增加開發成本，其次會增加用戶的理解成本和打亂用戶使用的流程。
比如：Amazfit手表和摩拜這兩款工具型App，兩者都是搭配硬件使用的，旨在連接硬件并獲得使用數據，數據和場景都比較單一，所以不需要搜索功能。
試想一下，如果工具型App增加搜索功能，會是在什么場景下呢?
搜索功能已經成了絕大部分App的必備功能，比如：社交類、內容類、電商類、社區類等產品，搜索功能都是必不可少的，且不同的產品對搜索的定位也不一樣。
雖然搜索可以解決用戶快速找到對應內容的問題，但是不同的應用場景和頁面，有強弱的區別，在做產品設計時可以根據用戶使用頻率及功能等級進行考慮。
二、查找搜索功能
確定了產品需要搜索功能后，就進入到下一個環節的設計，如何讓用戶找到搜索功能。搜索框的入口一般有幾種：一級tab、搜索框、搜索icon、隱藏式搜索框。
?微博 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???得到
?產品經理 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?有道云筆記
1. 快速找到
用戶的搜索需求會出現在兩個時間點，一是搜索目的明確，打開App就需要使用，另一個時間點是在使用App的過程中產生搜索需求，這個需求我們很難確定用戶在執行什么操作，所以需要根據頁面及產品類型進行設計。
可以確定的是，兩種需求時刻，都要求我們的產品可以快速讓用戶找到搜索功能并使用，所以搜索功能的位置非常重要。
當前絕大部分App的搜索功能都放置在頁面頂部，以搜索框或者“放大鏡”的樣式存在，用戶已經養成了習慣，當需要使用搜索功能時首先會尋找頁面的頂部位置。
有部分App會設置一級tab“發現”頁面，用以承載搜索功能，該類型的App大都以內容類產品為主，但是千萬不要嘗試因為追求差異化，而把搜索功能放在頁面的其他角落，這絕對是是一個失敗的產品。
百度云盤把搜索icon放在滑動頁中，當滑動頁面時icon會被隱藏，而搜索功能對于云盤來說是很重要的功能。
?百度云盤
2. 快速識別
在用戶潛意識的位置中放置搜索功能，還有一個要求是降低用戶的識別成本，讓用戶一眼就能看出是搜索功能，而不用經過判斷。當前最常見的就是搜索框或者“放大鏡”icon樣式兩種，用戶不需要判斷就能識別該功能為搜索功能。
搜索框的樣式總的來說有矩形和圓角兩種，配合內部默認文案，有多種組合。
也有一些比較特殊的搜索樣式，比如：網易有道翻譯中精品課的搜索頁面就進行了新的嘗試，但是用戶接受成本比較高，不建議輕易嘗試。
?有道翻譯
icon樣式每個公司的設計師出品都有所區別并且盡可能的想有特色，但是從產品的角度來說，“放大鏡”icon的細節越少，識別度越高，不要過度的設計。
素材來源于iconfont（http://www.iconfont.cn/search/index?searchType=icon&q=%E6%90%9C%E7%B4%A2&page=1）
三、進入搜索功能
進入搜索功能主要指的是用戶發現并點擊搜索功能后的交互及頁面，雖然各種類型的App有所區別。
但是大致也分為兩種：
- 一是進入新的頁面；
- 二是在當前頁面進行搜索。
進入新的頁面，往往是因為搜索功能很重要且要展示的信息太多，需要有一個單獨的頁面去承載，這是當前最常見的一種方式。在新頁面中可以展示熱搜詞語或者運營需要展示的相關信息，也可以展示用戶搜索歷史等，進一步降低用戶使用搜索功能的成本。
在當前頁面進行搜索可能是因為信息不好歸類或者較為隱私，無法做數據處理，也表現為搜索功能對當前頁面是弱需求，使用頻率不高，比如：小米手機信息的搜索功能，雖然是新彈出一個頂部欄，但是與在當前頁面進行搜索無異，只是從視覺上進行了設計。
?小米信息
很多App在頁面的初始狀態時搜索功能是很明顯的，并且占用一定比例的位置，但是在用戶有其他操作的情況下，搜索功能的視圖會發生對應的變化。
迅雷首頁的搜索功能在初始位置時是置頂的，但是當用戶上滑頁面時，會發生頂部搜索框隱藏被替換為分類，下滑頁面恢復搜索框的交互效果。因為該頁面主要以推薦為主，當用戶上滑頁面時，搜索功能的需求被弱化，隱藏可以增加頁面顯示的內容，而為了可以讓用戶快速的進入搜索功能，只要執行下滑頁面，就會恢復搜索功能。
?迅雷
四、使用搜索功能
從進入搜索頁面開始，就需要查看頁面內容，輸入搜索詞，點擊搜索，這是用戶使用搜索功能的完整過程。
1. 推薦內容
推薦內容包括幾個方面，搜索框置灰關鍵詞，頁面顯示的歷史搜索，熱搜詞以及提前搜索并展示的內容。在搜索頁面放置歷史搜索和熱搜詞是大部分App最常用的方式，比如：內容類和電商類產品。
歷史搜索可以方便用戶快速查找以前搜索的內容，無需再次輸入，但是一定要注意出于用戶隱私保護，歷史搜索記錄需要支持刪除功能。
熱搜詞是根據算法展示搜索次數最高的關鍵詞，對于進入搜索頁面但沒有強目的的用戶來說，熱搜詞可以降低用戶思考成本，提高產品/內容的查看次數，但是一定要注意熱搜詞的更新算法，熱搜詞本身就有引流的功能，如果單獨按照搜索次數來決定是否上熱搜，會出現熱搜詞榜非常穩定的情況。
搜索框文本一般為“請輸入搜索內容”進入搜索頁面后光標在搜索框起始位置并調用鍵盤，輸入內容后搜索框會自動更新為輸入內容。
還有一種方式是把“請輸入搜索內容”替換為預設關鍵詞并定時更新，點擊搜索會直接搜索并展示搜索結果，這個過程也是引導的作用，與熱搜詞類似（如天貓App）。
在此基礎上，還可以有一種選擇，那就是在進入搜索頁面后，直接搜索并展示輸入框關鍵詞的搜索結果，這種方式可以更快速地向用戶展示有針對性的運營內容，缺點是進入搜索頁面即為結果顯示頁面，熱搜詞和搜索歷史等內容就沒有空間可以顯示。
做的比較失敗的是閑魚，在搜索頁面沒有任何內容推薦，不過在輸入字符以后會對內容進行過程匹配，補充聯想關鍵詞。
?閑魚
2. 搜索方式
在輸入搜索內容時關鍵詞匹配有兩種處理方式：一個是輸入過程匹配；一個是輸入完成匹配。
輸入過程匹配：在輸入時，每輸入一個字符，就進行一次匹配，同時更新頁面信息。這里更新的信息，可以是針對輸入內容進行推薦的信息，也可以是搜索結果。
這種方式可以對搜索結果做出即時反饋，引導性強，效率非常高，但是輸入過程匹配對于計算能力要求比較高，可以根據自己的產品和實際情況考慮是否需要此功能，否則需要加載等待，影響體驗。
輸入完成匹配：僅在輸入完成后，點擊【搜索】按鈕時，才開始進行搜索、匹配，直接展示搜索結果。這種方式省去了對輸入過程實時分析、引導的過程，適用于對搜索功能要求不高的情況。類似的產品如起點學院，輸入關鍵詞后不會做出反饋，需要執行搜索才會展示相關內容。
?起點學院
很多產品采用組合的方式，即時匹配關鍵詞并展示出來，點擊關鍵詞或者【搜索】按鈕后再展示搜索內容。類似的產品可以查看京東、天貓等電商App，除了對輸入內容做聯想，還會展示出與關鍵詞相關的維度，自動補全關鍵詞，增加用戶的選擇。
??
?天貓 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??京東
3. 搜索/取消按鈕
取消搜索的方式一般有點擊【取消】按鈕或者點擊【返回】按鈕，如果輸入框已經輸入字符，需要重新輸入新的搜索詞時，往往需要點擊鍵盤上的刪除按鈕回刪。當輸入的內容較長時這個過程的體驗就非常差，所以現在有很多產品都在輸入框尾部提供了刪除功能，一鍵刪除輸入的字符。
這種功能在搜索頁面需要進行二次搜索或者輸入錯誤時，可以提供很好的體驗。
如果你細心研究不同的App，會發現搜索/取消按鈕大致分為兩種：
- 一種是保留搜索按鈕；
- 另一種時頁面上取消搜索按鈕，轉而使用鍵盤的搜索按鈕。
搜索按鈕一般放置在搜索框的右側，那么左側就一定會保留返回icon，這樣才能正常實現App的跳轉路徑。這種方式雖然比較規矩，同時減少輸入框可顯示的字符長度，但是用戶識別成本會降低很多，返回和搜索按鈕非常明確。
?酷米客
頁面上沒有搜索按鈕的同時，左側的返回按鈕也同時取消，點擊【取消】按鈕會返回上一個層級的頁面。這種方式一般會使用即時匹配（過程匹配）的搜索方式，需要進行搜索時，通過鍵盤的搜索按鈕執行搜索操作。
好處在于搜索按鈕在右下角，符合手的操作習慣且在舒適操作區域，可以更快速的執行搜索操作，但是取消按鈕無法明確返回邏輯，當用戶需要退出搜索返回上一層級時需要進行嘗試性地點擊【取消】按鈕。
如果頁面上使用【搜索】按鈕，則一定要保留返回的功能。使用【取消】按鈕則會取消【返回】按鈕，否則功能冗余。比如：京東安卓版app的搜索框就是一個失敗的案例，在頁面上僅保留搜索框右側的【搜索】按鈕，取消了左側的【返回】按鈕，當用戶使用返回上一層級時必須通過手機物理按鍵功能來實現。
?京東
五、得到搜索結果
搜索完成后，結果頁面會根據算法展示出相匹配的內容，我們暫且不說算法的問題，就結果展示而言就有多種方式。如果產品達到一定的量級，內容是非常多和繁雜的，分類自然也就有很多，一般來說，每個產品都有自己的分類方式，所以在結果呈現上，可以考慮先分類再搜索和先搜索再分類兩種方式。
先分類再搜索有個很明顯的特征就是搜索目的明確，用戶已經自己想要查找什么樣的內容。比如：Boss直聘這款產品，用戶在使用搜索功能時，會非常明確的知道自己想要搜索的信息維度，所以先分類再搜索可以提高搜索準確率，減少用戶搜索后篩選的成本。
?Boss直聘
先搜索再分類則可以減少用戶使用搜索功能的成本，但是會增加對結果篩選的難度。一般的操作是系統根據搜索詞進行算法匹配，把所有結果都展示出來，然后提供分類篩選的功能。
這種方式對于用戶無目的搜索的體驗會更好，一般多見于電商、知識類等信息和分類明確的產品中，比如：知乎的搜索邏輯，就是先根據搜索詞匹配結果，展示所有信息，提供用戶、話題、想法、專欄等分類搜索切換。
?知乎
脫離業務場景的產品設計都是耍流氓，這句可以代入的話適用于產品設計的每個環節。同樣的，搜索框的產品設計也需要考慮業務場景，而且必須遵循，否則搜索這個功能就會變成雞肋。
本文由 @?六神無主 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels，基于 CC0 協議
大部分產品是不需要搜索功能的，想象一下你的用戶，當他在家里想買一個東西的時候，他第一時間會淘寶京東平多多這類平臺去找，而不會想到其他小平臺。如果他想解答某個問題或者學某個知識點，第一個想到的是百度，抖音，b站…因為只有內容豐富的平臺，才能滿足用戶的需求，如果內容過少，搜啥找不到啥
如果你自家的產品名氣不大，那建議是把精力花在營銷，優惠之類的，或者留存上面多思考，搜索功能也就提出這個功能的這個人本身會在功能上線后試用
有些安卓情況下，輸入鍵盤是沒有搜索的。要統一兩端，最好還是搜索按鈕一般放置在搜索框的右側，那么左側就一定會保留返回icon，這樣才能正常實現App的跳轉路徑。這種方式雖然比較規矩。