所謂搜尋框，實際上就是一個輸入域和提交按鈕的組合。有人可能會認為搜尋框並不需要設計，畢竟它只涉及到兩個簡單的元素。然而，在那些重內容的網站上，搜尋框常常都是使用者最用到的設計元素。下面是由本站小編為大家整理的該如何改進設計搜尋框，喜歡的可以收藏一下!瞭解更多詳情資訊，請關注應屆畢業生考試網!
1、使用放大鏡圖示
一個搜尋框應該始終與放大鏡圖示放在一起。所謂圖示，其實就是代表著一個物件、動作、想法等多種含義的圖形符號。我們通過圖示看到的不僅僅是圖示本身，而是它所代表的內在含義。然而，對於使用者來講，具有通用性代表含義的圖示為數並不多，幸運的是，放大鏡圖示正是其中之一。
即使沒有文字標籤，使用者也能輕易地識別放大鏡圖示
提示：使用示意型的圖示即可，這也是最簡單的放大鏡圖示版本。更少的圖形細節能夠加快使用者的識別效率。
2、搜尋框要顯著
如果搜尋是你的應用程式/網站的一個重要功能，那麼搜尋框的顯示務必要足夠顯著，以保證使用者能夠最快的發現它。
直接顯示完整的搜尋框很重要，因為預設只顯示搜尋圖示(點選圖示才展開搜尋框)的話會使搜尋功能不那麼明顯，而且增加了使用者的互動成本：
3、提供一個搜尋按鈕
搜尋按鈕可以幫助使用者識別出觸發搜尋操作的下一步——即使他們可能往往會通過按Enter鍵來執行此操作。
提示：
1)提交按鈕的'尺寸大小要合適，以便使用者不必非常精確地移動滑鼠位置到它上面。較大的可點選區域會使得按鈕本身更容易被發現和點選。
2)使用Enter鍵或點選搜尋按鈕都應該能執行搜尋操作才對，畢竟許多使用者仍然有點選搜尋按鈕來提交搜尋的習慣。
4、將搜尋框放在每一頁上
使用者在每個頁面上都應該能獲取搜尋框，因為如果使用者找不到他們要找的內容，他們往往會自然而然地想要嘗試使用搜索功能來進行查詢，他們才不關心自己當前是在你網站的哪個地方(以及該不該有搜尋)。
5、搜尋框要足夠簡單
如果你設計了一個搜尋框，請確保它看起來確實像是一個搜尋框，並且使用起來要足夠簡單。可用性研究表明，預設情況下不顯示高階搜尋選項對使用者會更加友好。高階搜尋選項(例如下面的示例中的布林搜尋查詢)可能會混淆要嘗試使用它的使用者。
6、將搜尋框放在使用者預期找到的位置
如果因為搜尋框不夠突出、不容易察覺，使用者還得花費精力去找它，那這個設計無疑是不夠友好的。
下面的圖表來自 A. Dawn Shaikh 和 Keisi Lenz 的一項研究：它顯示了參與調查的142名參與者針對網站中的搜尋表單的位置的預期情況。研究發現，對於使用者來說，搜尋框最佳的位置是網站上每個頁面的左上方或右上方——使用者可以使用常見的F形瀏覽模式輕鬆地找到它。
該圖說明了參與者對搜尋框所處位置的預期情況。 右上方仍然是使用者希望找到搜尋的第一個地方
因此，最好將搜尋框放在頁面的右上方或中上方，以確保使用者能在預期的位置找到它。
重內容的YouTube把搜尋放置在頁面的中上方
提示：
1)理想情況下，雖然搜尋框在使用者需要的地方應該能輕易出現，但是搜尋框的設計也應該完美地契合網站的整體設計效果。
2)內容越重的站點，你越希望搜尋框顯著。如果搜尋對你的網站至關重要，請使用大的對比度，以便搜尋框和圖示能從頁面背景和周圍元素中脫穎而出。
7、搜尋框尺寸大小要合適
輸入框太短是設計人員常犯的一個錯誤。當然，使用者可以鍵入長查詢，但一次只能看到一部分輸入的文字，這自然也就存在可用性問題，因為使用者無法輕鬆地回看和編輯其剛剛才輸入的查詢條件。事實上，當搜尋框具有有限數量的可見字元時，使用者會被迫使用短的、不精確的查詢條件，因為更長的查詢條件將不易閱讀。 但如果輸入框的長度是根據使用者的預期輸入來確定大小的，那對使用者而言就友好多了。
經驗表明一個可以輸入27個字元的輸入框是比較合適的，它能夠適應90%的查詢條件。
Amazon使用長度合適的搜尋框
提示：不妨考慮使用擴充套件型的搜尋框，它會在使用者點選時展開文字輸入框。這種做法一方面節省了螢幕空間，同時仍能給予使用者足夠的視覺提示以便他們快速找到並執行搜尋。
8、使用自動檢索匹配機制
自動檢索匹配機制可根據使用者輸入的字元進行預測來幫助使用者找到一個可能匹配的查詢條件。 該機制並不是為了加快搜索過程，而是為了引導使用者並幫助他們構建他們的查詢條件。普通使用者在構建查詢方面往往會有困難：如果他們在第一次嘗試查詢後沒有獲得滿意的結果，後面的查詢也會很難順利，事實上，他們常常就會放棄。而當自動檢索匹配機制運作順利時，它們就能幫助使用者將查詢條件表達的更加清楚。
Google 搜尋自2008年起就已經開始應用該機制，現在已經相當成熟。由於使用者常常會多次搜尋相同的內容，因此通過記住搜尋記錄，Google既節省了時間成本又能創造出更為便捷高效的搜尋體驗。
提示：
1)確保自動檢索匹配機制是有效的，若設計不當，就可能會混淆和分散使用者的注意力。因此，不妨使用自動更正拼寫錯誤、根詞識別和文字預測等做法，來改進這種機制發揮更好的作用。
2)你應該儘快提供自動檢索匹配，例如在使用者輸入第三個字元後就提供有效匹配以減少使用者的輸入成本。
3)匹配的查詢條件不要多餘10個(而且不要顯示滾動條)，以保證資訊不會變得過載。
4)允許使用鍵盤在匹配的條件列表中導航。一旦使用者在最後一個專案中接著向下滾動，他們應該重新返回到列表的頂部。另外，Esc 鍵應該允許使用者退出列表。
5)突出輸入部分跟匹配部分的差異(例如，輸入文字具有標準字重，而匹配部分使用粗體字重)。
自動完成模式可以節省使用者時間，給使用者合適的引導
9、明確告訴使用者可以搜尋哪些內容
在輸入框中顯示一個搜尋查詢的示例條件是一個不錯的做法，這樣能夠向用戶表明他們究竟可以應用該搜尋框搜尋哪些/哪類內容。 如果使用者可以搜尋多個條件，則使用輸入提示模式來向用戶說明(例如，下面示例中的IMDb。 HTML5 技術使得我們可以很輕鬆地在輸入框中寫明作為佔位符的提示文字。
提示： 提示部分要限制在幾個字之內，否則反而會增加使用者的認知負擔。
結論
對於建立一個重內容的應用程式或網站而言，搜尋理應作為一個基本的操作和關鍵要素。即使小幅的改進(例如使搜尋框長度更合適或者指明可以搜尋哪些資訊)都可以顯著增加搜尋的可用性以及整體的使用者體驗。
