如何設計一個完美的搜索框（一）

05-13

看到這個標題，你可能會認為搜索是不需要設計的，畢竟只是一個文字輸入框和搜索按鈕的組合。

然而，在信息爆炸的互聯網時代，搜索框成為我們每天必須要使用到的功能。當用戶面對複雜的網站，難以找到自己想要看到東西的時候，他們會立即尋找並使用搜索框，快速的達到目的。這時候搜索功能的設計以及易用性就會顯得尤為重要。本次我從「搜索框（一）」和下期的「搜索結果（二）」倆部分來分享比較正確的做法。

1.使用放大鏡圖標

在用戶界面中放大鏡圖標和搜索功能如影隨行，圖標是對於操作對象、動作或想法可視化的表達，用戶具有普遍認知的圖形元素，我們通常也稱之為icon。放大鏡就是這樣的圖標之一。

提示:盡量使用最簡單的圖形，較少的使用細節裝飾會提高識別效率。

2.顯示搜索欄位

如果你設計的產品中搜索是一個高頻操作的功能，你應該將它放在相對明顯和便捷的位置，便於用戶快速找到並使用。

顯示完整的搜索提示欄位很重要，因為隱藏在圖標中的搜索會使得搜索功能不那麼明顯，並增加無效的交互成本。

盡量避免這種形式的設計，因為它隱藏了搜索提示

3.為搜索框設計一個搜索按鈕。

一個搜索按鈕可以明確的告知用戶，激活搜索框後的額外操作，即使他們已經決定了按下Enter鍵。

提示

適當的調整提交按鈕觸發區域的大小，使用戶不必精確的指向就可以操作，更大的點擊區域使其更容易被發現和便於點擊。
雖然大部分用戶會通過Enter鍵提交搜索結果，但是依然有不少用戶習慣於使用滑鼠點擊實際按鈕來完成操作，倆個操作方式應當同時存在。

4.每一個頁面都出現搜索框

你的用戶應該在每個頁面都可以使用搜索功能，不論他們在網站的什麼位置，當他們找不到他們正在查找的內容的時候，他們將嘗試使用搜索功能。

5.設計一個簡單的搜索框

讓搜索框看起來儘可能的簡單。根據可用性研究，在默認情況下不顯示高級搜索是更友好的選擇。在下面的例子中，高級搜索會使用戶感到疑惑。

6.將搜索框放在用戶更希望看到的地方

也就是說，搜索框的位置要儘可能符合大部分用戶的心理預期。

A.Dawn Shaikh和Keisi Lenz做了一個研究，研究結果（如下圖）表示了142位參與者在調查中預期搜索功能在網頁中出現的位置。研究發現，將搜索功能放在網站的左上角或者右上角是最好的選擇，用戶可以使用常見的「F形」掃描模式輕鬆找到。

因此，將搜索框放在頁面的右上角或者中上部區域，是用戶預期出現的位置。

提示：

理想情況下，搜索功能應該匹配於網站的整體設計，在用戶需要的時候出現。
網站的內容越多，搜索功能顯得越重要，如果搜索對你的網站至關重要，就要從視覺、尺寸、位置、顏色等方面增強搜索的權重，以便搜索功能在複雜的內容中脫穎而出。

7.確保輸入框可以容納足夠的欄位

輸入框設計的太窄是設計師常見的錯誤做法，如果輸入框不夠寬，當用戶在輸入框內輸入較長的文本查詢時，意味著有一部分文字將不被看到，用戶無法輕鬆的查看和編輯他查詢的內容，可用性將非常差。當輸入框僅允許輸入有限可見的文本時，用戶將被迫用短的，不精確的查詢，因為較長的查詢難以閱讀。有好的做法是輸入框根據用戶預期輸入的文本調整大小，那麼他們將更容易幫助用戶閱讀和查詢。

研究表明，可容納27個字元的搜索框可以滿足90％用戶的搜索需求。

提示：考慮使用可變化的寬度的搜索框（激活輸入框後輸入框變寬），這樣既可以節省屏幕空間，也可以為用戶提供足夠的可視化提示，以便快速查找和執行搜索動作。

8.啟用「搜索聯想」機制

「搜索聯想」（自動建議）可以幫助用戶通過已輸入的文本來預測可以找到的查詢結果。搜索聯想的目的不是加快搜索的過程，而是幫助用戶構建正確的搜索查詢機制。常見的場景是：當用戶第一次搜索沒有得到想要的結果時，稍後會更少使用搜索，意味著更低的成功率。事實是用戶會就此放棄搜索。所以搜索聯想會幫助用戶更好的構建搜索路徑。

Google字2008年以來掌握並實施「搜索聯想」，由於搜索引擎會記住用戶每多一次且相同的搜索記錄，所以Google為用戶節省了時間並創造了更加便捷的體驗。

提示：

確保搜索聯想是有效的，設計不完善的搜索聯想會混淆和分散用戶的注意力，所以使用拼寫自動更正、詞根識別、語義識別和預測，可以改進搜索體驗。
儘可能快速的提供搜索聯想，例如輸入到第三個字的時候，就給用戶提供相匹配的聯想辭彙，以此減少用戶數據錄入的工作，
只提供少於10個項目的聯想詞句（不建議使用滾動條），否則信息將會變得難以承受。
允許用戶通過鍵盤的上下鍵控制選擇列表，當滾動到最後一個項目，如果繼續向下翻動則自動返回到列表頂部，用戶也可以使用Esc按鍵關閉搜索聯想列表。
已輸入文本和建議文本視覺上保持差異（例如，通常情況下建議的辭彙通過加粗表示）

9.描述用戶可以搜索的內容

在輸入框中可以添加搜索示例，告知用戶那些內容是可以搜索的，以及如何使用功能。如果用戶可以搜索多個條件，請使用輸入提示模式說明。

（Html5的技術將文本佔位符添加到輸入框中是極其容易的）

提示：簡要的概述，否則會增加用戶的認知負擔。

結論

搜索是構建內容繁重應用程序或門戶網站最基本和最關鍵的功能。即使最小的變化，例如輸入框可輸入的欄位大小或搜索框中的提示欄位信息可有效的提升搜索的可用性以及整體的用戶體驗。

內容來源：

1.Design a Perfect Search Box【Nick Babich】(原文）

2.A.Dawn Shaikh和Keisi Lenz 的研究數據

*註：

1.原文是英文，筆者翻譯，並根據中文語境下的設計做了適當的演繹。

2.歡迎轉發轉載以及更豐富的演繹，轉載需註明原作者和翻譯者。

搜索微信公眾號「HolyhiLab」更多交互/用研/視覺/品牌/動畫等內容不定期更新。