如何設計完美的網站搜尋欄
網站需要搜尋欄嗎？
網站需要搜尋欄嗎，首先要考慮您的網站是否會受益於內部網站搜尋功能，這一點很重要。雖然包含搜尋功能沒有硬性的「是」或「否」，但與較小的網站相比，較大的網站通常會從搜尋中受益更多。這是因為用戶在面對廣泛的點擊導航時更有可能依賴搜尋。
此外，如果用戶帶著特定的內容、類別或產品登陸您的主頁，他們可能更願意輸入搜尋，而不是依賴主要和次要點擊導航。
搜尋欄設計最佳實踐
1. 包括一個文本欄位和一個搜尋按鈕。
大多數搜尋欄由兩個元素組成：搜尋框（用戶在其中輸入查詢）和搜尋按鈕（用戶單擊該按鈕可啟動搜尋）。元素通常水平相鄰放置在一行上，如下所示：
您可能偶爾會看到此演示文稿的變化，但為了簡單和可訪問性，大多數都以這種方式出現。
搜尋框應該就是一個框。您可以採取一些設計自由，例如添加背景對比度、顏色或圓角，但文本欄位應該是一個文本輸入元素，高度為一行文本。用戶將很容易認識到這一點。
至於搜尋按鈕，強烈考慮包括一個。它用作提交查詢的視覺提示，因此如果沒有它，用戶可能會感到困惑。將此按鈕放在輸入欄位的右側，因為這是慣例並且對於從左到右閱讀的人來說是合乎邏輯的。也要寫簡潔的按鈕文本——「搜尋」這個詞或放大鏡圖標就可以了。
當搜尋框處於焦點時（即文本光標在其中處於活動狀態），訪問者還應該能夠通過單擊搜尋按鈕來啟動搜尋。
經典搜尋欄上的一個常見替代迭代是放大鏡圖標，單擊時會擴展為完整的搜尋欄和按鈕。
這種設計可以節省頁面空間並且看起來更乾淨，但請謹慎使用。有些人可能很難看到它，如果用戶在顯示後需要再次單擊以關注文本框，則會增加交互成本。
2. 放置在預期位置。
允許網站搜尋的網站傾向於將搜尋欄放置在網頁的右上角或頂部中央。任一位置都可確保搜尋功能對需要它的人可見且隨時可用。
一些網站可能會選擇在右上角放置其他連結、選單或圖標，比如登入提示、設定或購物車圖標。在這種情況下，可以將搜尋欄向左行動以適應它們。
但是，不要將搜尋欄單獨放置在頁面底部，或將其隱藏在選單中。除了頁面頂部的搜尋欄之外，還可以在頁腳 中放置一個搜尋欄，但是您不應該讓用戶搜尋您的搜尋功能。
此外，您的用戶很可能希望在您的主頁以外的其他網頁上進行搜尋。在大多數頁面的標題中放置搜尋欄可確保用戶可以從任何網站位置執行此操作。
如果搜尋對於您網站的導航至關重要，並且您希望用戶主要通過查詢進行導航，請將搜尋欄放在頁面的中心並將其放在標題下方以更加強調。
3. 包括搜尋圖標。
設計師使用圖標來直觀地傳達按鈕或其他頁面元素的作用。圖標可以節省空間，並且比文本更容易識別。放大鏡圖標是搜尋的普遍標誌，因此我們建議您將其放置在您的界面中。
有幾種方法可以將此圖標添加到您的欄中，您可以將其放置在搜尋按鈕上：
你可以把它放在搜尋框中：
或者您可以將它放在一個隱藏/顯示整個搜尋欄的按鈕上，如果放大鏡出現在搜尋框之外，許多用戶會認為它是一個按鈕，因此如果圖標本身不可點擊，請避免這樣做。
4. 大小合適。
搜尋欄的大小取決於它在您網站上的重要性以及典型查詢的預期長度。
如果搜尋是您的主要導航工具，請將其放大並以頁面加載為中心。如果放置在標題中，欄應根據其其他標題元素調整大小：大到足以在頁面的視覺掃描中看到，但不能大到引起注意。
一個好的起點是查找或估計平均搜尋查詢的長度（以字符為單位）。用戶是只輸入幾個字，還是問更長的問題？如果是後者，您可能希望加長搜尋框或將其設定為在單擊時展開。
5. 考慮添加占位符文本。
當搜尋框未處於焦點時，占位符文本會出現在搜尋框中。它旨在提示用戶採取行動。占位符可以通過列出諸如「嘗試帽子、牛仔褲、包包……」之類的示例查詢或簡單地說明「搜尋……」來為用戶提供有用的提示。
如果要添加占位符，文本應顯示較淺的陰影以將其與鍵入的查詢區分開來，並且應在用戶關注該框或開始鍵入時消失。
6. 考慮添加自動完成功能。
自動完成是幫助完成搜尋的另一種方式。當用戶鍵入時，自動完成會在搜尋下方的選單中提供建議。預測可以針對您網站的特定內容進行定製，因此用戶可以確信他們正在找到他們想要的內容。
7. 隱藏高級選項。
除非您希望您的用戶群通常比普通網際網路用戶更精通技術，否則幾乎總是最好隱藏高級搜尋選項，如類別、過濾器和精確匹配。這使UI保持乾淨且易於訪問。
如果您必須包含高級選項，請考慮將它們放置在選擇搜尋欄時出現的隱藏選單中，或提供指向「高級搜尋」頁面的附近連結。
8. 行動設計。
智慧型手機和平板電腦的興起全面影響了UI最佳實踐，其中包括網站搜尋欄。確保您的搜尋框和按鈕足夠大以供查看和選擇。W3C提供了兩個相關的可訪問性指南：
確保觸摸目標至少高9毫米，寬9毫米。
確保接近最小尺寸的觸摸目標被少量非活動空間包圍。
這些指南適用於所有觸控螢幕設備，無論螢幕大小如何。
此外，由於空間不足，在行動裝置上將整個搜尋欄隱藏在搜尋玻璃圖標後面更容易接受，並在點擊圖標時顯示它。同樣，這個圖標需要引人注目，一些用戶測試有助於確保這一點。
