如何設計出一個完美的搜索框。

如何設計出一個完美的搜索框。

所謂搜索框,實際上就是一個輸入域和提交按鈕的組合 。有人可能會認為搜索框并不需要設計,畢竟它只涉及到兩個簡單的元素 。然而,在那些重內容的網站上,搜索框常常都是用戶最用到的設計元素 。當用戶遇到一個相對復雜的網站時,他們往往會首先尋找這個網站內的搜索框 , 以便能快速高效地到前往自己想去的頁面或找到自己最為關心的內容 。因此,搜索框的設計及其可用性問題其實是一個不容忽視的要點 。
1、使用放大鏡圖標
一個搜索框應該始終與放大鏡圖標放在一起 。所謂圖標,其實就是代表著一個對象、動作、想法等多種含義的圖形符號 。我們通過圖標看到的不僅僅是圖標本身,而是它所代表的內在含義 。然而 , 對于用戶來講,具有通用性代表含義的圖標為數并不多 , 幸運的是,放大鏡圖標正是其中之一 。
即使沒有文本標簽 , 用戶也能輕易地識別放大鏡圖標

使用示意型的圖標即可,這也是最簡單的放大鏡圖標版本 。更少的圖形細節能夠加快用戶的識別效率 。
【如何設計出一個完美的搜索框。】2、搜索框要顯著
如果搜索是你的應用程序/網站的一個重要功能 , 那么搜索框的顯示務必要足夠顯著,以保證用戶能夠最快的發現它 。
直接顯示完整的搜索框很重要,因為默認只顯示搜索圖標(點擊圖標才展開搜索框)的話會使搜索功能不那么明顯,而且增加了用戶的交互成本 。
3、提供一個搜索按鈕
搜索按鈕可以幫助用戶識別出觸發搜索操作的下一步——即使他們可能往往會通過按Enter鍵來執行此操作 。
4.、將搜索框放在每一頁上

用戶在每個頁面上都應該能獲取搜索框,因為如果用戶找不到他們要找的內容,他們往往會自然而然地想要嘗試使用搜索功能來進行查找,他們才不關心自己當前是在你網站的哪個地方 。
5、搜索框要足夠簡單
如果你設計了一個搜索框 , 請確保它看起來確實像是一個搜索框,并且使用起來要足夠簡單 ??捎眯匝芯勘砻?,默認情況下不顯示高級搜索選項對用戶會更加友好 。高級搜索選項可能會混淆要嘗試使用它的用戶 。
6、將搜索框放在用戶預期找到的位置
如果因為搜索框不夠突出、不容易察覺,用戶還得花費精力去找它,那這個設計無疑是不夠友好的 。
因此,最好將搜索框放在頁面的右上方或中上方,以確保用戶能在預期的位置找到它 。

7、搜索框尺寸大小要合適
輸入框太短是設計人員常犯的一個錯誤 。當然,用戶可以鍵入長查詢,但一次只能看到一部分輸入的文本,這自然也就存在可用性問題,因為用戶無法輕松地回看和編輯其剛剛才輸入的查詢條件 。事實上,當搜索框具有有限數量的可見字符時,用戶會被迫使用短的、不精確的查詢條件,因為更長的查詢條件將不易閱讀 。但如果輸入框的長度是根據用戶的預期輸入來確定大小的,那對用戶而言就友好多了 。
經驗表明一個可以輸入27個字符的輸入框是比較合適的,它能夠適應90%的查詢條件 。
8、使用自動檢索匹配機制
自動檢索匹配機制可根據用戶輸入的字符進行預測來幫助用戶找到一個可能匹配的查詢條件 。該機制并不是為了加快搜索過程 , 而是為了引導用戶并幫助他們構建他們的查詢條件 。普通用戶在構建查詢方面往往會有困難:如果他們在第一次嘗試查詢后沒有獲得滿意的結果,后面的查詢也會很難順利 , 事實上,他們常常就會放棄 。而當自動檢索匹配機制運作順利時,它們就能幫助用戶將查詢條件表達的更加清楚 。
Google搜索自2008年起就已經開始應用該機制,現在已經相當成熟 。由于用戶常常會多次搜索相同的內容,因此通過記住搜索記錄,Google既節省了時間成本又能創造出更為便捷高效的搜索體驗 。
自動完成模式可以節省用戶時間 , 給用戶合適的引導
9、明確告訴用戶可以搜索哪些內容
在輸入框中顯示一個搜索查詢的示例條件是一個不錯的做法 , 這樣能夠向用戶表明他們究竟可以應用該搜索框搜索哪些/哪類內容 。如果用戶可以搜索多個條件 , 則使用輸入提示模式來向用戶說明 。


經驗總結擴展閱讀