設(shè)計出一個完美的搜索框

所謂搜索框，實際上就是一個輸入域和提交按鈕的組合。有人可能會認(rèn)為搜索框并不需要設(shè)計， 畢竟它只涉及到兩個簡單的元素。然而，在那些重內(nèi)容的網(wǎng)站上，搜索框常常都是用戶最用到的設(shè)計元素。當(dāng)用戶遇到一個相對復(fù)雜的網(wǎng)站時，他們往往會首先尋找這個網(wǎng)站內(nèi)的搜索框，以便能快速高效地到前往自己想去的頁面或找到自己最為關(guān)心的內(nèi)容。因此，搜索框的設(shè)計及其可用性問題其實是一個不容忽視的要點。

在這篇文章中，我們將看到該如何改進(jìn)設(shè)計搜索框，以減少用戶所需要花費的查詢時間。

1、使用放大鏡圖標(biāo)
一個搜索框應(yīng)該始終與放大鏡圖標(biāo)放在一起。所謂圖標(biāo)，其實就是代表著一個對象、動作、想法等多種含義的圖形符號。我們通過圖標(biāo)看到的不僅僅是圖標(biāo)本身，而是它所代表的內(nèi)在含義。然而，對于用戶來講，具有通用性代表含義的圖標(biāo)為數(shù)并不多，幸運的是，放大鏡圖標(biāo)正是其中之一。

提示：使用示意型的圖標(biāo)即可，這也是最簡單的放大鏡圖標(biāo)版本。更少的圖形細(xì)節(jié)能夠加快用戶的識別效率。

2、搜索框要顯著
如果搜索是你的應(yīng)用程序/網(wǎng)站的一個重要功能，那么搜索框的顯示務(wù)必要足夠顯著，以保證用戶能夠最快的發(fā)現(xiàn)它。

直接顯示完整的搜索框很重要，因為默認(rèn)只顯示搜索圖標(biāo)（點擊圖標(biāo)才展開搜索框）的話會使搜索功能不那么明顯，而且增加了用戶的交互成本：

3、提供一個搜索按鈕
搜索按鈕可以幫助用戶識別出觸發(fā)搜索操作的下一步——即使他們可能往往會通過按Enter鍵來執(zhí)行此操作。

提示：

1）提交按鈕的尺寸大小要合適，以便用戶不必非常精確地移動鼠標(biāo)位置到它上面。較大的可點擊區(qū)域會使得按鈕本身更容易被發(fā)現(xiàn)和點擊。

2）使用Enter鍵或點擊搜索按鈕都應(yīng)該能執(zhí)行搜索操作才對，畢竟許多用戶仍然有點擊搜索按鈕來提交搜索的習(xí)慣。

4.、將搜索框放在每一頁上
用戶在每個頁面上都應(yīng)該能獲取搜索框，因為如果用戶找不到他們要找的內(nèi)容，他們往往會自然而然地想要嘗試使用搜索功能來進(jìn)行查找，他們才不關(guān)心自己當(dāng)前是在你網(wǎng)站的哪個地方（以及該不該有搜索）。

5、搜索框要足夠簡單
如果你設(shè)計了一個搜索框，請確保它看起來確實像是一個搜索框，并且使用起來要足夠簡單?？捎眯匝芯勘砻鳎J(rèn)情況下不顯示高級搜索選項對用戶會更加友好。高級搜索選項（例如下面的示例中的布爾搜索查詢）可能會混淆要嘗試使用它的用戶。

6、將搜索框放在用戶預(yù)期找到的位置
如果因為搜索框不夠突出、不容易察覺，用戶還得花費精力去找它，那這個設(shè)計無疑是不夠友好的。

提示：

1）理想情況下，雖然搜索框在用戶需要的地方應(yīng)該能輕易出現(xiàn)，但是搜索框的設(shè)計也應(yīng)該完美地契合網(wǎng)站的整體設(shè)計效果。

2）內(nèi)容越重的站點，你越希望搜索框顯著。如果搜索對你的網(wǎng)站至關(guān)重要，請使用大的對比度，以便搜索框和圖標(biāo)能從頁面背景和周圍元素中脫穎而出。

7、搜索框尺寸大小要合適
輸入框太短是設(shè)計人員常犯的一個錯誤。當(dāng)然，用戶可以鍵入長查詢，但一次只能看到一部分輸入的文本，這自然也就存在可用性問題，因為用戶無法輕松地回看和編輯其剛剛才輸入的查詢條件。事實上，當(dāng)搜索框具有有限數(shù)量的可見字符時，用戶會被迫使用短的、不精確的查詢條件，因為更長的查詢條件將不易閱讀。 但如果輸入框的長度是根據(jù)用戶的預(yù)期輸入來確定大小的，那對用戶而言就友好多了。

8、使用自動檢索匹配機(jī)制
自動檢索匹配機(jī)制可根據(jù)用戶輸入的字符進(jìn)行預(yù)測來幫助用戶找到一個可能匹配的查詢條件。 該機(jī)制并不是為了加快搜索過程，而是為了引導(dǎo)用戶并幫助他們構(gòu)建他們的查詢條件。普通用戶在構(gòu)建查詢方面往往會有困難：如果他們在第一次嘗試查詢后沒有獲得滿意的結(jié)果，后面的查詢也會很難順利，事實上，他們常常就會放棄。而當(dāng)自動檢索匹配機(jī)制運作順利時，它們就能幫助用戶將查詢條件表達(dá)的更加清楚。

Google 搜索自2008年起就已經(jīng)開始應(yīng)用該機(jī)制，現(xiàn)在已經(jīng)相當(dāng)成熟。由于用戶常常會多次搜索相同的內(nèi)容，因此通過記住搜索記錄，Google既節(jié)省了時間成本又能創(chuàng)造出更為便捷高效的搜索體驗。

提示：

1）確保自動檢索匹配機(jī)制是有效的，若設(shè)計不當(dāng)，就可能會混淆和分散用戶的注意力。因此，不妨使用自動更正拼寫錯誤、根詞識別和文本預(yù)測等做法，來改進(jìn)這種機(jī)制發(fā)揮更好的作用。

2）你應(yīng)該盡快提供自動檢索匹配，例如在用戶輸入第三個字符后就提供有效匹配以減少用戶的輸入成本。

3）匹配的查詢條件不要多余10個（而且不要顯示滾動條），以保證信息不會變得過載。

4）允許使用鍵盤在匹配的條件列表中導(dǎo)航。一旦用戶在最后一個項目中接著向下滾動，他們應(yīng)該重新返回到列表的頂部。另外，Esc 鍵應(yīng)該允許用戶退出列表。

5）突出輸入部分跟匹配部分的差異（例如，輸入文本具有標(biāo)準(zhǔn)字重，而匹配部分使用粗體字重）。

9、明確告訴用戶可以搜索哪些內(nèi)容
在輸入框中顯示一個搜索查詢的示例條件是一個不錯的做法，這樣能夠向用戶表明他們究竟可以應(yīng)用該搜索框搜索哪些/哪類內(nèi)容。 如果用戶可以搜索多個條件，則使用輸入提示模式來向用戶說明。

結(jié)論
對于創(chuàng)建一個重內(nèi)容的應(yīng)用程序或網(wǎng)站而言，搜索理應(yīng)作為一個基本的操作和關(guān)鍵要素。即使小幅的改進(jìn)（例如使搜索框長度更合適或者指明可以搜索哪些信息）都可以顯著增加搜索的可用性以及整體的用戶體驗。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

文章題目：設(shè)計出一個完美的搜索框
分享URL：http://www.muchs.cn/news14/325514.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、響應(yīng)式網(wǎng)站、做網(wǎng)站、微信公眾號、網(wǎng)站策劃、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)