所謂搜索框，實際上就是一個輸入域和提交按鈕的組合。有人可能會認為搜索框並不需要設計， 畢竟它只涉及到兩個簡單的元素。然而，在那些內容繁瑣的網站上，用戶很難找到自己想要的東西，這時搜索框扮演著不可缺少的角色。因此，搜索框的設計及其可用性問題其實是一個不容忽視的要點。搜索框的設計及其可用性就顯得尤為重要。
它分為兩種類型
1、即時搜索：
結果立即顯示在用戶界面上，不需要按鈕，放大鏡僅顯示為一個圖標，輸入時立即搜索，達到一定的目的。
2、常規搜索：
通過用戶點擊搜索按鈕後才開始執行搜索，以達到一定的目的。
設計理念
1、它是界面的一部分，所以要放在一個顯眼的位置，要容易找到；
2、在同一應用中，它們應該有統一的外觀；
3、它的功能應該是有效的，它的結果應該是準確的，它的速度應該是儘可能快速的。
外觀特徵
1、不需要使用標籤，使用一個可選的提示；
2、提示可以是一個指令（如搜索類型），或者一個範圍；
3、提示語要簡短；
4、即時搜索時，提示首字母大寫；常規搜索時，首字母小寫。
下面我們將看到該如何改進設計搜索框，以減少用戶所需要花費的查詢時間。
1、使用放大鏡圖標
一個搜索框應該始終與放大鏡圖標放在一起。所謂圖標，其實就是代表著一個對象、動作、想法等多種含義的圖形符號。我們通過圖標看到的不僅僅是圖標本身，而是它所代表的內在含義。然而，對於用戶來講，具有通用性代表含義的圖標為數並不多，幸運的是，放大鏡圖標正是其中之一。即使沒有文本標籤，用戶也能輕易地識別放大鏡圖標
2、搜索框要顯著
如果搜索是你的應用程序/網站的一個重要功能，那麼搜索框的顯示務必要足夠顯著，以保證用戶能夠最快的發現它。研究發現，搜索框放置的最佳位置是你網站上每個頁面的左上角或右上角，用戶可以使用常見的F形掃描模式輕鬆找到它。理想情況下，搜索框應該完美匹配網站的整體設計，並在用戶需要時輕鬆展現。
3、提供一個搜索按鈕
搜索按鈕可以幫助用戶識別出觸發搜索操作的下一步——即使他們可能往往會通過按Enter鍵來執行此操作。
4.、將搜索框放在每一頁上
用戶在每個頁面上都應該能獲取搜索框，因為如果用戶找不到他們要找的內容，他們往往會自然而然地想要嘗試使用搜索功能來進行查找，他們才不關心自己當前是在你網站的哪個地方。
5、搜索框要足夠簡單
如果你設計了一個搜索框，請確保它看起來確實像是一個搜索框，並且使用起來要足夠簡單。可用性研究表明，默認情況下不顯示高級搜索選項對用戶會更加友好。高級搜索選項（例如下面的示例中的布爾搜索查詢）可能會混淆要嘗試使用它的用戶。
6、將搜索框放在用戶預期找到的位置
如果因為搜索框不夠突出、不容易察覺，用戶還得花費精力去找它，那這個設計無疑是不夠友好的。
因此，最好將搜索框放在頁面的右上方或中上方，以確保用戶能在預期的位置找到它。
7、搜索框尺寸大小要合適
輸入框太短是設計人員常犯的一個錯誤。當然，用戶可以鍵入長查詢，但一次只能看到一部分輸入的文本，這自然也就存在可用性問題，因為用戶無法輕鬆地回看和編輯其剛剛才輸入的查詢條件。事實上，當搜索框具有有限數量的可見字符時，用戶會被迫使用短的、不精確的查詢條件，因為更長的查詢條件將不易閱讀。 但如果輸入框的長度是根據用戶的預期輸入來確定大小的，那對用戶而言就友好多了。
經驗表明一個可以輸入27個字符的輸入框是比較合適的，它能夠適應90％的查詢條件。
Amazon使用長度合適的搜索框
8、使用自動檢索匹配機制
自動檢索匹配機制可根據用戶輸入的字符進行預測來幫助用戶找到一個可能匹配的查詢條件。 該機制並不是為了加快搜索過程，而是為了引導用戶並幫助他們構建他們的查詢條件。普通用戶在構建查詢方面往往會有困難：如果他們在第一次嘗試查詢後沒有獲得滿意的結果，後面的查詢也會很難順利，事實上，他們常常就會放棄。而當自動檢索匹配機制運作順利時，它們就能幫助用戶將查詢條件表達的更加清楚。
9、明確告訴用戶可以搜索哪些內容
在輸入框中顯示一個搜索查詢的示例條件是一個不錯的做法，這樣能夠向用戶表明他們究竟可以應用該搜索框搜索哪些/哪類內容。 如果用戶可以搜索多個條件，則使用輸入提示模式來向用戶說明（例如，下面示例中的百度。最新消息使得我們可以很輕鬆地在輸入框中寫明作為佔位符的提示文本。
提示： 提示部分要限制在幾個字之內，否則反而會增加用戶的認知負擔。
這次的分享就到這裡了，有興趣的小夥伴可以在下面領取設計資料的哦~http://t.cn/ROCIyd0（複製到瀏覽器打開即可）詳情請看職業研學社。
閱讀更多 職教社 的文章
