2018-7-9 博博
移動端搜索功能設計：3個階段解析搜索流程設計要點
如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里
這篇文章筆者想和大家聊一聊有關搜索功能的設計，搜索功能是每個內容型APP的核心，它的易用性決定了用戶是否能從APP里快速找到自己想找的內容，那么決定搜索體驗好壞的關鍵點又是什么呢？這里我總結了兩點，“操作的易用性”和“結果的準確性”?？此坪唵蔚膬牲c卻有很多的學問，筆者把搜索的交互流程劃分成三個關鍵階段，“搜索前、搜索中及搜索后”，接下來將從這三個階段逐一分析整個搜索流程中的相關設計。
在不同的APP或者不同的場景下搜索入口有著不同的表現(xiàn)形式，具體的表現(xiàn)形式取決于產(chǎn)品對搜索功能權重的定義，如果說在某一場景下搜索功能是用戶常用的核心功能那么他在界面上所表現(xiàn)出來的權重就要高些，反之則低些。下圖是常見的搜索功能的入口形式，他們的權重從左到右依次降低，筆者將對他們一一進行分析
如下圖APP Store的搜索形式，搜索放在標簽欄上作為一個獨立的功能模塊，它的功能層級是最高的。不管用戶操作到哪里都可以隨時進入搜索頁面，這樣的搜索入口通常用在搜索場景非常多的內容型APP上，方便用戶在任何時候快速進入搜索頁面。
如下圖是京東app的搜索入口，它將搜索框外漏在nav bar上，這樣的形式有著兩個設計的關鍵點：
關鍵點一：搜索框外漏在頂部導航條上
搜索框直接外漏在導航條上是為了突顯該功能，這一功能往往是用戶在該頁面非常核心的操作任務，類似天貓京東這類電商型app，通常情況下用戶都是帶著明確目的來購買東西的，那么他們采取的最快最直接的方式就是搜索。
關鍵點二：在向上滾動界面時，搜索框一直懸停在頂部
這樣做的場景是這樣的，在用戶滾動頁面尋找內容時，可能并不能找到自己想要的內容，搜索框一直懸停一是為了暗示用戶可以進行搜索，二是為了讓用戶在想搜索時快速觸發(fā)搜索
如下圖是微信在聊天頁面和通訊錄頁面的搜索入口，初始化狀態(tài)時聊天頁面的搜索框是不出現(xiàn)在用戶的可視范圍內的，當頁面下滑時搜索框才出現(xiàn)，而在通訊錄頁面里搜索框是默認出現(xiàn)在用戶的可視范圍內的。
分析：微信在最近聯(lián)系人和通訊錄上搜索框的默認狀態(tài)不同，這很好地詮釋了這兩種場景下的搜索功能的權重。最近聯(lián)系人頁面上的搜索入口顯得更加隱蔽，因為在這個頁面下用戶產(chǎn)生搜索的場景很少，把其隱藏簡化了界面的元素，提升了界面的美觀性。
如下圖是淘票票的搜索的入口，通過點擊右上角的搜索icon進入搜索頁面：
分析：在界面權重上，這樣的方式相對于以上三種方式來說顯得較弱一點，因為在這樣的場景下用戶使用搜索的概率并不是很高，如果把搜索外漏就會占據(jù)更多的屏幕空間，破壞界面的權重等級和美觀性。
總結：依據(jù)用戶的需求場景，搜索入口放在不同的位置，如果說在該頁面搜索是一個主要的功能，我們就應該去突顯它，提升它在界面上的權重，反之則減輕它的權重。
搜索中間頁本來應該是一個輕量化的頁面，用戶在這里輸入內容進行搜索即可。但隨著運營需求的擴張，這個頁面逐漸成為了一個運營重災區(qū)，多了很多推薦的內容。筆者將從“輸入框提示信息、搜索分類、搜索歷史、搜索推薦、搜索輸入、搜索建議”等方面分析一下這個頁面的設計。
搜索框內的提示信息通常是提示用戶當下可以搜索什么樣的內容，如下圖bilibi的搜索提示，告訴用戶可以進行“視頻、番劇、UP主或者AV號”的搜索，這樣的提示信息對用戶也是一種良性的引導，給用戶提供了一個心理預期，同時也對用戶隨意輸入關鍵詞造成無結果的傷害體驗的可能進行了限制。例如一個房產(chǎn)APP，搜索框內提示輸入樓盤或小區(qū)名，如果沒有這樣的提示有的用戶可能就會去輸入價格去篩選房源，這句提示語很好地降低了這樣的風險。
但隨著人們對APP使用的熟悉，用戶在這里的認知負擔基本消除，運營人員逐漸搶占了這塊地方，這句話變成了內容的推薦或者產(chǎn)品的Slogan，這些推薦的內容可以是運營人員手動維護的也可以是依據(jù)用戶的購買和行為習慣進行推薦的。如下圖右邊是淘寶的搜索提示，搜索框的文案變成了“紅人最愛潮牌名服”，這就是運營人員在為特定內容進行導流。
在內容型APP中搜索時通常會對內容進行分類搜索，這是為了幫助用戶更地找到相關內容，分類的操作可以發(fā)生在搜索前也可以發(fā)生在搜索后，如下圖是“淘寶、微信、網(wǎng)易云音樂”搜索分類的方式，筆者將分別對他們進行分析。
淘寶是將搜索分類前置，默認搜索寶貝，點擊后彈出浮層進行切換。這樣的方式存在一個明顯的缺點就是由于該入口所占空間位置不顯著，會導致用戶感知太弱。 這樣的方式通常用在用戶大多數(shù)情況下只搜索某一分類的內容，如淘寶這樣，用戶大部分的搜索場景都是在尋找寶貝。
微信默認搜索所有內容，將分類通過通過三個很顯著的入口放在搜索框下方，當點擊某一分類時跳轉到該分類的搜索界面，同時搜索框的文案以及搜索界面的內容發(fā)生相應變化，提示用戶搜索范圍被改變。這種方式通常用在這些分類搜索的場景都很常見時，它的缺點在于，從界面表現(xiàn)形式來看，這三個分類更像是三個功能的入口，他們與搜索框聯(lián)系得不是很緊密，很多用戶最開始使用時并不知道點擊這些分類是進行搜索范圍的限制。經(jīng)測試3個從未使用過該功能的用戶，他們都認為點擊朋友圈后就是進入朋友圈，點擊文章后就是顯示所有文章。
網(wǎng)易云音樂是將搜索分類進行后置了，在下文關于搜索結果的展示我會分析它的優(yōu)劣勢。
搜索歷史記住用戶的足跡，方便用戶快速向以前搜索過的內容進行轉換。設計上我們需要注意的一點就是需要把搜索歷史和搜索推薦區(qū)分開來，在位置上，盡量讓搜索歷史靠近搜索框（如下圖），因為從認知心理學上來講，越靠近搜索框的內容越能表示它是搜索歷史。在表現(xiàn)形式上，搜索歷史和搜索推薦盡量采用不同的表現(xiàn)形式。搜索歷史伴隨的交互操作有刪除單條或者清空搜索歷史
這里的搜索推薦通常有三種來源：
它存在的目的主要有兩個：
建議：
受移動端操控方式的限制，在輸入內容時存在兩個明顯的痛點：“修改內容”和“輸入速度”。
關于修改內容：當用戶想更改語句中一部分文字時，將光標移動到想要更改的地方是一件很難的事，點擊操作真的很令人發(fā)狂，通常情況下我寧愿重新輸入。但是針對這一點搜狗輸入法做了一個很人性的交互，當用戶按住鍵盤左右滑動時就能移動光標（如下圖）。
關于輸入速度：很早之前偶然間發(fā)現(xiàn)了UC瀏覽器在輸入文字時的一個交互功能，如下圖所示，當輸入文字后，用戶可以將搜索建議的詞語直接加入到搜索框中然后繼續(xù)輸入文字。這樣的需求場景在很常見，比如我想搜索“交互設計師的前景”，當我輸入交互二字后就會有“交互設計”的搜索建議，點擊搜索建議后面的箭頭將這個詞直接加入搜索框，然后就出現(xiàn)了“交互設計師的前景”的搜索建議，點擊搜索建議后進入搜索結果的頁面，這個過程中我少打了很多字，對我的搜索速度有很大的提升。
當用戶輸入內容后，搜索框下面出現(xiàn)了眾多的搜索建議，這些搜索建議是為了幫助用戶快速向目標進行轉化，如下圖是京東的搜索建議，當我輸入畫框后，一系列畫框的搜索建議就出來了，它還有一個亮點就是在此提供了細化篩選條件，畫框后面緊跟了“長方形、實木、正方形”等關鍵的篩選條件，為用戶省去了到結果頁進行篩選的步驟。
搜索結果是搜索過程中最關鍵的點，結果的準確性確定了用戶體驗的好壞，筆者將從“搜索結果的形式、搜索結果的操作、搜索結果的分類、搜索結果的排序”等方面來對搜索結果進行分析。
搜索結果一般分為兩種，一種是所見即所得，用戶輸入內容后出現(xiàn)在搜索框下面的搜索建議就是搜索結果，這種搜索通常出現(xiàn)在一些輕量化的APP中，因為搜索建議對應的就是唯一的搜索結果，如下圖微信的搜索一樣。
第二種形式就是一個關鍵詞對應了多個搜索建議，每個搜索建議又對應了多個搜索結果，當用戶點擊搜索后進入了一個專門的搜索結果頁，如下圖京東的搜索一樣。
依據(jù)用戶的需求目的，在搜索結果的列表上我們可以外漏用戶大部分情況下會采取的操作，比如說視頻類網(wǎng)站，用戶搜索到某一內容后，最常采取的操作就是播放，我們就可以把播放按鈕外漏，縮短用戶的操作路徑（如下圖愛奇藝的搜索結果頁）
通常的分類方式是TAB切和卡片，以下是微信和網(wǎng)易云音樂的分類。
這兩種方式有各自的應用場景，TAB切主要應用在搜索結果有固定的幾種分類，并且通常的情況下搜索結果都有很多的內容，如上圖的網(wǎng)易云音樂，每一個分類都有很多的搜索結果，如果它采用卡片式的瀑布流布局，用戶需要不停往下翻才能看到第二種分類的內容?？ㄆ街饕\用在搜索結果的內容不多，如微信這樣的情況，每一類結果并不是很多，卡片式的瀑布流布局能讓用戶快速定位到自己想要的內容，如果這里用TAB切就很尷尬了，因為每一類的內容都很少或者很多類里根本沒有內容，這樣的用戶感受就不好了。
搜索結果的排序是一個比較復雜的工作，里面涉及了很多的算法邏輯，筆者對這塊也不是很清楚，但是一般的垂直內容型APP并沒有這么復雜的算法在里面，就是按照搜索的關鍵字去一一匹配。
如下圖是說我在QQ閱讀輸入一個“男”字，然后就給我建議第一個字是“男”的所有可能的結果，當?shù)谝粋€字匹配完后就匹配第二個字，這樣以此類推。他們的整體順序就是按照匹配關鍵字的先后進行排列的，其實在排序中還牽涉了很多的算法，比如說它可能會摻雜一些“熱度、人氣、人為意圖、語義”等因素的權重，這里不展開贅述了。
以上就是筆者對搜索功能的介紹和思考，希望能對大家有所幫助。
本文由 @不知名設計師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。
藍藍設計( m.sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務