本文為我們介紹了設計一個完美的搜索框時，需要具備的設計要素以及注意事項。

搜索框是文本輸入框和提交按鈕的組合。有人可能會認為搜索框不需要設計，畢竟，這只是兩個簡單元素的組合。但是，在內容密集的應用或者網站上，搜索框通常是用戶最常用的設計元素。當用戶遇到相對複雜的網站時，他們將立即尋找搜索框以快速而輕鬆地到達最終目的地。此時，搜索框的設計及其可用性就顯得尤為重要。

在本文中，我們將看到如何改進此元素，以節省用戶前往目的頁面所需要的時間。

01 使用放大鏡圖標

在你設計的搜索框內放置放大鏡圖標。圖標是對象、動作或想法的直觀表示。有一些圖標得到了用戶的普遍認可，放大鏡圖標就是其中之一。

用戶即使沒有文本標籤也可以識別放大鏡圖標

提示：使用示意圖標的最簡單版本即可，較少的圖形細節可加快識別速度。

02 突出顯示搜索入口

如果搜索對您的應用程序/網站很重要，則應突出顯示，因為這可能是用戶發現信息的最快途徑。

左：搜索功能隱藏在圖標後面。圖片來源：thinkwithgoogle

顯示完整的搜索入口很重要，因為將搜索功能隱藏在圖標後面，不僅弱化了搜索功能，還額外增加了交互的成本：

不要在搜索中使用漸進式披露，因為它隱藏了上下文。

03 為搜索框提供按鈕

按鈕可以幫助人們認識到，還有另外一個步驟可以觸發搜索操作——即使他們決定通過按Enter來執行此操作。

提示：

• 適當調整提交按鈕的大小，以便用戶不必非常精確地操控鼠標。較大的可單擊區域使查找和單擊更加容易。
• 讓用戶可以通過使用Enter或者單擊按鈕來提交搜索。許多用戶仍然習慣單擊實際按鈕來提交搜索。

04 在每個頁面上放置搜索框

我們應該在每個頁面上，給用戶提供搜索的入口，因為如果用戶找不到所需的內容，則無論他們在網站中的位置如何，他們都將嘗試使用搜索功能。

可以參考最近改版的淘寶，頂部的搜索隨時隨地都在，無論是查看寶貝評價還是寶貝詳情。

05 使搜索簡單

如果設計一個搜索框，請確保它看起來像一個搜索框，並且使用起來儘可能簡單。根據可用性研究，默認情況下不顯示任何高級搜索選項對用戶更加友好。高級搜索選項（例如下面示例中的布爾搜索查詢）可能會使嘗試使用它的用戶感到困擾。

布爾搜索

06 將搜索框放在用戶希望找到的地方

搜索框應該被設計得突出並且容易被發現的。若用戶需要額外在頁面上花費精力來尋找搜索框，是不好的體驗。

你在下面看到的圖表是由A. Dawn Shaikh和Keisi Lenz進行的一項研究得出的：它顯示了142位受訪者，對站點搜索功能的預期位置分佈圖。研究發現，對用戶來說最方便的位置是站點上每個頁面的左上角或右上角，用戶可以使用常見的F形掃描模式輕鬆找到它。

該圖說明了參與者希望找到該搜索的區域。右上角仍然是用戶希望找到搜索的第一個位置

因此，將搜索框放置在佈局的右上角或中上角區域，可以確保用戶可以在期望的位置找到它。

內容豐富的YouTube的搜索位於中上方

提示：

• 理想情況下，搜索框應該和網站的總體設計保持協調，但還應在用戶需要時設法使其脫穎而出。
• 你擁有的內容越多，你就越想突出顯示搜索功能。如果搜索對你的站點至關重要，請使用強烈的對比度，以使搜索框從背景和周圍的元素中脫穎而出。

07 為搜索框設置適當的長度

文本輸入框過短，是設計中的常見錯誤。當然，用戶依然可以鍵入長文本進行查詢，但是頁面上只能顯示一部分內容，這意味著可用性很差，因為用戶無法輕鬆查看和編輯文本。

實際上，當搜索框的可見字符數量有限時，用戶如果使用較長的查詢文本，將很難且不便閱讀。所以，用戶會被迫去使用一些相對簡短、不精確的查詢文本。如果文本輸入框的長度，可以根據預期的輸入內容的長度而定，將會更加易於使用。

經驗法則是輸入27個字符的文本（可容納90％的查詢）。

亞馬遜使用適當大小的搜索框。

提示：考慮使用長度可變的搜索框，該搜索框會在單擊時擴展文本輸入框的長度。這樣在可以節省屏幕空間的同時，仍然為用戶提供足夠的視覺提示，以快速查找並執行搜索。

08 使用自動提示機制

自動建議機制，可以根據用戶輸入的字符來預測所要查詢的內容，幫助用戶找到合適的查詢關鍵詞。自動建議機制並不是要加快搜索過程，而是要指導用戶並幫助他們構建搜索查詢。當自動完成建議機制有效時，它可以幫助用戶更好地完成搜索查詢。

Google搜索從2008年就掌握並開始實施這種模式。因為用戶傾向於不止一次地搜索相同的東西，於是谷歌通過記住搜索歷史，為用戶節省了時間，創造了一種更加便捷的體驗。

提示：

• 確保自動建議機制有用。設計不當的自動建議可能會使用戶感到困惑，且會分散用戶的注意力。因此，請使用拼寫自動更正，詞根識別和預想性文本來改進搜索功能。
• 您應該儘快提供自動建議。以提供即時價值信息，並減少用戶數據輸入的工作量。
• 建議項少於10個（並且沒有滾動條），避免用戶因為巨大的信息量而不知所措。
• 允許使用鍵盤操作建議列表。允許用戶通過ESC鍵退出列表。
• 差異化顯示輸入信息和建議信息之間的差異。

自動完成模式可以節省用戶時間，甚至可以建議內容或適當的措辭。

09 明確說明用戶可以搜索的內容

最好在輸入框中有一個示例文本，以便向用戶展示該搜索功能的用途。如果可以搜索多個內容，則使用輸入提示進行解釋，如下圖：

結論

在構建一個應用或者網站的時候，搜索是一個最基本的功能，也是很關鍵的元素。對搜索框的一個很小的改變，比如提供合適的輸入框長度，或者指明搜索字段中的信息，都可以顯著提高搜索的可用性和用戶體驗。

本文由 @張大俠 翻譯發佈於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。

閱讀更多 人人都是產品經理 的文章

關鍵字: 淘寶網 設計 搜索