UI大牛教你做一個完美的搜索框

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

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

1.使用放大鏡圖標

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

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

2.顯示搜索字段

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

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

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

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

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

提示

• 適當?shù)恼{整提交按鈕觸發(fā)區(qū)域的大小，使用戶不必精確的指向就可以操作，更大的點擊區(qū)域使其更容易被發(fā)現(xiàn)和便于點擊。
• 雖然大部分用戶會通過Enter鍵提交搜索結果，但是依然有不少用戶習慣于使用鼠標點擊實際按鈕來完成操作，倆個操作方式應當同時存在。

4.每一個頁面都出現(xiàn)搜索框

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

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

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

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

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

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

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

提示：

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

7.確保輸入框可以容納足夠的字段

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

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

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

8.啟用“搜索聯(lián)想”機制

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

Google字2008年以來掌握并實施“搜索聯(lián)想”，由于搜索引擎會記住用戶每多一次且相同的搜索記錄，所以Google為用戶節(jié)省了時間并創(chuàng)造了更加便捷的體驗。

提示：

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

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

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

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

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

結論

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

相關文章--《UI大牛揭秘28APP8.0版本設計技巧》