搜尋框雖然在整個網站頁面上可以說是不起眼的一丟丟，但它存在的意義是非常大的。可以方便任何多使用者想要找到他們想要了解的東西，在設計搜尋框時就需要用心，才能讓多使用者用的得心應手。那麼，的搜尋框設計，需要注意哪幾點要素？具體我們看看 WordPress 網站設計小編的介紹吧。
搜尋框時我們常用的 UI 控制元件之一，它存在於所有的網站和 WordPress APP 中，很多人認為搜尋框是不需要設計的，感覺它的存在在普通不過的元素組成的，其實搜尋框存在的明顯與否，會直接影響多使用者體驗度，而明顯程度是可以用設計來體現的。
1 、使用放大鏡圖示
時至今日，搜尋的概念和放大鏡圖示之間的關係已經深入人心，根深蒂固了。在日常常用、易於識別的幾個圖示當中，放大鏡所帶代表的搜尋圖示就是其中之一。
即使在沒有文字標籤標識的情況下，多使用者也能輕鬆地識別圖示的含義。
小貼士：使用簡略直觀的放大鏡圖示，細節越少，越容易識別。
2 、顯眼的搜尋輸入框
如果搜尋是您的網站或者 WordPress APP 的重要功能的話，您應當讓搜尋框足夠顯眼，這樣的能設計讓多使用者快發現它的存在。
左邊：搜尋功能隱藏在圖示之後
顯示完整的文字輸入框是很重要的，隱藏在按鈕背後的輸入框會讓多使用者覺得不是那麼明顯，不容易被快速發現。需要點選之後多使用者才能看到。
3 、提供搜尋按鈕
按鈕的存在讓多使用者能夠明白搜尋的觸發方式——也就是說透過觸發按鈕來完成這一操作。
小貼士：
·控制搜尋按鈕的尺寸大小，讓多使用者使用遊標可以輕鬆找到並點選，讓觸發區域大小合適。
·讓多使用者可以透過回車鍵提交搜尋，許多多使用者仍然有透過點選鍵盤按鍵來觸發搜尋的習慣。
4 、每頁都保留搜尋輸入框
您應該為多使用者擁有在每個頁面都能立刻進行搜尋的許可權，如果您的多使用者在特定的頁面找不到他們想要的內容，可以立刻透過搜尋獲取內容，無論他在網站的哪個地方。
5 、讓搜尋框儘量簡單
在您設計搜尋框的時候，請儘量讓它看起來就是一個搜尋框，並且簡單易用。可用性研究表明，預設沒有顯示高階選項的搜尋框看起來更加友好，所以，通常情況下給多使用者提供的搜尋框知名不要提供進階的搜尋選項。
6 、讓搜尋框處於多使用者預期的位置
當多使用者想要搜尋內容的時候還需要花費精力來尋找搜尋框，這就非常尷尬了。這意味著搜尋框本身就不容易被察覺。
下面的研究，它展示出了 142 名被調查者對於網站的搜尋框的預期的位置。這項研究表明，網站的左上角和右上角是多使用者所期待的搜尋框的位置，多使用者在使用 F 型掃視法檢視內容的時候，可以輕鬆找到搜尋框。
這份研究還表明，右上角的區域是多使用者搜尋輸入框的選區域。因此，將輸入框置於頂部靠右或者頂部居中的位置，多使用者會主動在這個地方尋找搜尋框。
小貼士：
·在理想情況下，搜尋框的設計應當和整個網站的設計風格保持一致，同時在視覺上要略顯突出，便於多使用者發覺它的存在。
·如果網站的內容足夠多，搜尋框在設計上顯著程度應該越高，如果搜尋功能對於您的網站至關重要，那麼您應該採用較大的對比度，確保輸入框和按鈕從背景中脫穎而出。
7 、合理的輸入框尺寸
輸入框太小是常見的搜尋框設計錯素，雖然多使用者可以輸入比輸入框更長的內容，但是可見的部分往往無法完全可見，這種設計的可用性並不強。這樣的輸入框可能因為可視範圍的限制，促使多使用者使用短的、不精確的查詢方式，因為更長的內容並不適合閱讀。如果輸入框能夠符合多使用者的常見輸入內容的尺寸來進行匹配，那麼它的可用性會更強。
根據經驗，輸入框能夠承載的理想字元數量為 27 個，百分之 90 的搜尋內容都在這個長度以內。
小貼士：建議考慮使用能根據輸入長度增長而能變長的輸入框，這不僅節省了螢幕空間，而且能夠給予多使用者足夠的視覺提示，並快速進入搜尋環節。
8 、使用自動搜尋建議機制
自動建議機制能夠幫助多使用者在輸入的過程中，動態地預測正確的查詢方向。自動建議並不會加快搜尋的過程，但是能夠幫助多使用者構建正確的搜尋關鍵詞/內容。普通多使用者在次搜尋結果不理想的情況下，很少會繼續進行嘗試，而自動建議運作順利的情況下，將會幫助多使用者更好的搜尋。
谷歌搜尋在這方面有著豐富的經驗，自 2008 年開始，谷歌開始記錄多使用者的搜尋記錄，並且透過這種方式節省時間，最佳化結果，創造更為優秀的體驗。
小貼士
·確保您的自動搜尋建議是有用的。不當的搜尋建議內容可能會混淆和分散多使用者的注意力。儘量幫助多使用者更正拼寫，識別詞根，預測文字，並改進您的工具。
·當多使用者開始輸入之後，儘快開始給予多使用者建議，例如在第三個字元之後，為多使用者開始提供即時的、有價值的建議，降低多使用者的輸入難度和工作量。
·儘量為多使用者提供少於 10 個搜尋結果，避免資訊過載。
·允許使用鍵盤進行互動，當多使用者使用方向鍵向下滾動到後的條目之後，繼續滾動會跳轉到頂部的專案。允許多使用者使用 Esc 按鍵推出列表。
·突出顯示輸入的資訊和建議的資訊之間的差異。
9 、讓多使用者明白哪些可以搜尋到
知名是在輸入框中包含示例，這樣可以向多使用者給予建議。如果多使用者可以輸入多個關鍵詞搜尋，那麼可以像下面的 IMDB 的網站一樣給予建議。 HTML5 可以輕鬆的實現在輸入框內加入文字佔位符。
小貼士：建議的內容不宜過多，這樣對於多使用者會有認知負荷。