如何設計完美的搜索結果（二）

05-15

上一篇寫的是關於「如何設計完美的搜索框」，這篇來聊一下搜索功能中另外一個重要的設計，「搜索結果」的完美的設計方法。

搜索就好比是產品和用戶的對話：用戶將其需求輸入搜索框，產品對這一行為響應的方式就是為用戶提供對應的搜索結果。搜索結果是不是用戶真實想要的影響著用戶對產品的體驗：搜索結果將為用戶需求和產品構建一個繼續對話的機會。

這篇文章中，給大家分享10個搜索結果的技巧來幫助你改進搜索結果的UX。

1.點擊搜索按鈕後，不要清除搜索框中的查詢內容

保留搜索內容，將已查詢的內容重新輸入是比較常見的錯誤體驗。如果用戶找不到預期的內容，那麼他們會稍微修改查詢以便再次搜索。為了使這一交互更容易，在搜索框中保留搜索的詞條是極有必要的。

2.提供精確的和相關的結果

搜索結果的第一個頁面是非常重要的，搜索結果對搜索的體驗起著至關重要的作用，好的搜索結果可以提高網站的轉化率。用戶通常根據一倆組搜索結果的質量來對比網站的價值，以此快速的做出選擇。

給用戶提供更加精確的搜索結果非常重要，否則因為搜索結果會降低用戶對網站的信任度。因此，優化搜索結果的排序，並將重要的、匹配度較高的搜索結果在第一頁呈現也至關重要。

3.使用有效的自動提示

無效的搜索聯想（自動建議）也會降低搜索體驗。確保自動提示是有用的，當用戶在執行輸入行為的時候，詞根識別、文本預測、和自動建議，都有助於加快搜索過程。

4.正確的「輸入錯誤」

當網站可以檢測到用戶輸入了錯誤的信息，則有必要為用戶顯示其猜測和「更正後」的文本搜索結果。這樣可以避免用戶因「返回」之前的搜索的而導致的挫敗感，同時用戶也不必被迫重新輸入搜索項。

5.顯示搜索結果的數量

顯示搜索結果數量，幫助用戶意識到決定花多長時間瀏覽搜索結果上（心理預期）。

6.保留用戶近期的搜索查詢記錄

即使用戶熟悉搜索功能，搜索需求也需要他們來思考要搜索什麼，或者需要用戶回憶我之前搜索過的是什麼文本。為了輸入一個有效的查詢文本，用戶需要考慮其目標的相關屬性，並將他們合併進行查詢。在設計搜索功能的時候，設計師應該牢記基本的可用性規則：

尊重用戶的成就（Respect the users effort）

提示：產品應該記錄所有最近的搜索記錄，以便用戶在下次搜索的時候為用戶提供次數據。

7.選擇正確的頁面布局

不同類型的搜索結果內容需要選擇顯示不同的頁面布局。內容呈現的倆個基本布局是「列表視圖」和「網格視圖」，判斷選擇視圖的基本原則是：

「呈現信息為主使用列表視圖，呈現圖片為主使用網格視圖」

在某些產品的搜索結果呈現頁面中，產品的具體細節非常重要，如型號、額定值、尺寸等細節的信息影響用戶的選擇和判斷，則使用列表視圖。

對於產品信息較少，或該產品更側重視覺呈現的應用，網格視圖的形式更貼近產品。如購物網站中，在用戶更多的是通過產品的外觀做出判斷選擇，對於這類型的產品，用戶更願意通過滑動整個頁面並觀察不同項目在視覺上的差異，而不是在列表視圖和網格視圖之間反覆切換。

提示：

允許用戶在搜索結果頁面自主選擇「列表視圖」和「網格視圖」，讓用戶使用他們自己的需要的方式瀏覽搜索結果。（如下圖天貓商城）
在使用網格布局時，圖像尺寸要大到可以被清晰的看到，同時小到讓更多的產品在同一時間被看到。但同一個頁面也不宜為用戶提供太多的選擇。

8.顯示搜索進度

理想情況下，執行搜索操作立即顯示搜索結果，如果不能，應當為用戶提供進度條，以此明確指示並告知用戶他們需要等多久。

提示：

如果搜索時間過長，可以考慮使用動畫，好的動畫可以分散用戶的注意力，使他們忽略長時間的搜索過程。

9.提供排序和篩選條件功能

當用戶的搜索和得到的結果看似有關，又沒有太大關係，並且有很多結果時，用戶會變得不知所措，這時應該為用戶提供有效的搜索排序和篩選過濾條件，並使其能夠允許用戶同時選擇多個篩選條件。

過濾器可以幫助用戶縮小並組織搜索結果，否則需要大量的頁面和滾動操作。

提示：

如果產品的搜索需要很多過濾篩選條件，默認情況下將不是高頻的篩選條件摺疊。
不要在過濾篩選條件中隱藏排序功能，它們是不同的作用。

10.不要告訴用戶「搜索無結果」

當搜索依舊不能滿足用戶需求的時候，會令用戶變得沮喪，特別是他們多次嘗試了用不同的文本搜索。當沒有匹配的搜索結果時，為用戶提供相關的或者可替代的選擇。

結論

搜索是產品設計中至關重要的功能，用戶在查詢和了解某些內容的時候期望獲得流暢並且穩定的體驗，並且通常會通過一倆組搜索來判斷搜索的結果和質量，對產品的價值做出非常快速的判斷。通過「搜索框」和「搜索結果」這倆篇文章希望可以幫助大家設計或者優化一款產品是搜索功能，一個優秀的搜索功能可以幫助用戶快速的找到他們想要的內容。

內容來源：1.Best Practices for Search Results (原文 http://babich.biz/)*註：1.原文是英文，筆者翻譯，並根據中文語境下的設計做了適當的演繹。2.歡迎轉發轉載以及更豐富的演繹，分享給更多的人，轉載需註明原作者和翻譯者。搜索並關注微信公眾號「HolyhiLab」