A 君導讀：618、雙 11…… 有朋友說，買買買是 Ta 認識世界的方式。現在無論是電子產品還會生鮮食品，你都能上網買。為瞭讓你在小小的手機屏幕上找到自己想要的東西，淘寶和京東等網站都做瞭不少努力。
AppSo（微信公眾號 AppSo）今天編譯這篇來自 Nick Babich 的文章，帶你瞭解京東搜索體驗背後的設計方法。
「搜索」就如同用戶與系統之間的對話——用戶的問題是其對某信息的需求；而系統的答案則是一系列的搜索結果。搜索結果頁面作為用戶搜索體驗的重要組成部分，它就像一座燈塔，為用戶所需指引「前行的路」。
這篇文章，譯者結合京東、淘寶等平臺上的搜索體驗，簡單易懂地告訴你 10 條提升用戶搜索體驗的最佳實踐。
1. 保留搜索歷史
一定要保留原搜索信息。查詢重構（query reformulation）在許多信息搜索過程中都非常重要。如果用戶找不到想要的信息，他們也許會稍微調整搜索關鍵詞再次搜尋。
要將整個過程簡化的話，最好保留搜索歷史，這樣就能避免用戶再次搜索時重新輸入所有信息。
AppSo （微信公眾號 AppSo）舉個例子：在搜索框中分別輸入「傻不拉嘰狗糧」和「狗糧」，若搜索結果一樣的話，那麼「狗糧」就是對「傻不拉嘰狗糧」的重構。
2. 提供精準的搜索結果
搜索結果的首頁至關重要。這一頁是用戶搜索體驗的重要來源，它事關整個網站的轉化率。用戶通常會快速評估網站的價值，而其評估標準則是基於搜索結果的質量。
此外，搜索結果一定要精確，否則用戶就不再信任該搜索工具。因此，搜索結果一定要優化排序，最重要的結果一定要放在最前面。
3. 提供有用的自動提示
沒用的自動提示，不敢說它搜索體驗能好到哪裡去。所以，要提供有用的自動提示，包括詞根識別、文本預測、以及用戶輸入文本後的相關推薦。
通過有效的自動提示，整個搜索進程可以更快，讓用戶有始有終，從而保證網站轉化率。
4. 輸入錯誤照樣能生成相關搜索結果
打字過程中，誰都難免出錯。如果用戶不小心輸入錯誤信息，而系統又能發現該錯誤，並且還能提供你猜測或修正後的搜索內容，那這個系統就會讓人眼前一亮瞭。
前文第 1 條中，通過關鍵詞「傻不拉嘰狗糧」，搜索出的結果仍是「狗糧」相關的商品，就是很好的例子。這樣，也不會讓用戶在整個搜索體驗中感到沮喪。畢竟，用戶面對的不再是「找到 0 個結果」頁面，也不用再次輸入關鍵詞二次搜索。
我以為蘋果鼠標叫「iMouse」，結果隻有「找到 0 個結果」：
而京東好像明白我在找什麼：
5. 顯示搜索商品數量
在頁面上顯示搜索結果的數量，讓用戶心裡有數，從而可以決定到底花多少時間瀏覽這些結果。
6. 保留最近搜索記錄
即使我們對搜索工具瞭如指掌，有時候仍需要回憶相關搜索信息。要搜索到滿意的結果，用戶會通過發散性思維，將相關聯的內容都輸入到搜索框中。
所以，在設計搜索體驗時，可不要忘瞭基本的可用性原則——哪怕是用戶的一丁點投入，也值得你萬分關註。
要保留最近所有的搜索歷史，以方便大傢在下次搜索時進行必要的關聯。
保留瞭搜索歷史，用戶想要再次搜索的時候就可以節省時間和人力瞭。
小提示：搜索歷史條數不要多於 10 條（並且最好不借助滾動條），不然信息量太大也不好。
7. 選擇適當的頁面佈局
顯示搜索結果的挑戰之一，是不同類型的內容需要用不同的視圖模式來呈現。
AppSo （微信公眾號 AppSo）之前分享的文章刷淘寶的 2 種姿勢，居然有大學問？裡提到，界面內容呈現主要有 2 種基本視圖模式——列表視圖和柵格視圖。而通用的經驗法則是，細節選列表，圖片選柵格。
這個經驗法則在具體的產品頁面有何體現呢？大傢都知道，產品的具體特征非常重要。比如傢電這類產品，用戶在瀏覽搜索時重點會關註它們的細節（型號、尺寸等）。這種情況下，列表視圖就更好用。
對於需要呈現細節的產品，列表視圖再合適不過瞭。
而不需要呈現太多產品細節的產品，則推薦用柵格視圖來呈現。比如首飾這類產品，用戶在瀏覽選擇時不會過多依賴於文本信息，主要看的還是「顏值」。
用戶關註的是產品間的視覺差別，寧願在「瀑佈式」頁面上不斷地往下滑，也不願重復地在列表視圖和產品細節頁面不停地切換。
對於需要呈現視覺體驗的產品，柵格視圖再合適不過瞭。
小提示：
允許用戶自行選擇用「列表視圖」還是「柵格視圖」來呈現搜索結果，從而讓他們有更多的自主性。
在設計柵格視圖時，要註意選擇合適的卡片（圖片）大小，大到足以讓用戶識別清楚，而小到在單位面積內呈現更多的產品。
8. 顯示搜索進程
我們搜索時，最理想的狀態是搜索結果可以立馬顯示出來。但若做不到的話，最好通過進度顯示條暫時用作對用戶的反饋。此外，如果能準確地提示用戶需要等待的時間，那就錦上添花瞭。
京東旅行在搜索航班信息時，有一個橙色飛機進度條。當飛機從界面左端逐漸向右端滑行時，從最開始未找到航班信息的動效開始，逐漸到「已為您找到 x 個航班」，待航班數量不斷增加並最終完成搜索後，該進度條才消失。
小提示：如果搜索時間太長，不妨試試加入動效。好的動效，可以轉移用戶的註意力，這在一定程度上能減少用戶對長時間等待的抱怨。
9. 提供分類及篩選功能
如果用戶通過關鍵詞搜索得到的結果頁面信息量過大，或者結果無關的，那就真的尷尬瞭。設計過程中，最好加入篩選功能，讓用戶自行篩選有用的信息，從而篩選出用戶想要的搜索結果。
篩選功能可以幫助用戶過濾搜索結果，否則用戶會花大量時間和功夫不斷地向下滑動或翻頁。
篩選功能選項不要設置過多。如果過多，建議默認狀態下可以折疊部分選項。
不要隱藏篩選選項裡的分類功能，它們非常有用。
若用戶選擇瞭某較小搜索范圍，要清晰地在搜索頁面頂端顯示該范圍。
10. 對「找到 0 個結果」說不
用戶得到「找到 0 個結果」反饋，是非常沮喪的，特別是在多次嘗試的前提下。在用戶搜索體驗過程中，最好不要把用戶逼上「絕路」。可以試著向用戶提供類似的結果，這樣的反饋比「找到 0 個結果」要有價值得多。
結束語
要經營好一個網站，搜索體驗是非常關鍵的一步。在查詢過程中，用戶喜歡暢通無阻的體驗。你的網站價值高不高，用戶通過搜索結果的質量就可以快速做出判斷。
友好的搜索設計，可以讓用戶簡單快速地搜尋到其想要的信息。你的網站，能做到嗎？
謝謝！
作者 | Nick Babich
軟件工程師，關註 UI 和 UX。
編譯 | Jorri
本文編譯自 Best Practices for Search Results，已獲原作者授權編譯。
題圖來自 京東設計中心
