如何設(shè)計(jì)一個(gè)完美的搜索框
所謂搜索框，實(shí)際上就是一個(gè)輸入域和提交按鈕的組合。有人可能會(huì)認(rèn)為搜索框并不需要設(shè)計(jì)， 畢竟它只涉及到兩個(gè)簡(jiǎn)單的元素。然而，在那些重內(nèi)容的網(wǎng)站上，搜索框常常都是用戶(hù)最用到的設(shè)計(jì)元素。當(dāng)用戶(hù)遇到一個(gè)相對(duì)復(fù)雜的網(wǎng)站時(shí)，他們往往會(huì)首先尋找這個(gè)網(wǎng)站內(nèi)的搜索框，以便能快速高效地到前往自己想去的頁(yè)面或找到自己最為關(guān)心的內(nèi)容。因此，搜索框的設(shè)計(jì)及其可用性問(wèn)題其實(shí)是一個(gè)不容忽視的要點(diǎn)。以下是小編為大家搜索整理的如何設(shè)計(jì)一個(gè)完美的搜索框，希望能給大家?guī)?lái)幫助!更多精彩內(nèi)容請(qǐng)及時(shí)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
1、使用放大鏡圖標(biāo)
一個(gè)搜索框應(yīng)該始終與放大鏡圖標(biāo)放在一起。所謂圖標(biāo)，其實(shí)就是代表著一個(gè)對(duì)象、動(dòng)作、想法等多種含義的圖形符號(hào)。我們通過(guò)圖標(biāo)看到的不僅僅是圖標(biāo)本身，而是它所代表的內(nèi)在含義。然而，對(duì)于用戶(hù)來(lái)講，具有通用性代表含義的圖標(biāo)為數(shù)并不多，幸運(yùn)的是，放大鏡圖標(biāo)正是其中之一。
即使沒(méi)有文本標(biāo)簽，用戶(hù)也能輕易地識(shí)別放大鏡圖標(biāo)
提示：使用示意型的圖標(biāo)即可，這也是最簡(jiǎn)單的放大鏡圖標(biāo)版本。更少的圖形細(xì)節(jié)能夠加快用戶(hù)的識(shí)別效率。
2、搜索框要顯著
如果搜索是你的應(yīng)用程序/網(wǎng)站的一個(gè)重要功能，那么搜索框的顯示務(wù)必要足夠顯著，以保證用戶(hù)能夠最快的發(fā)現(xiàn)它。
直接顯示完整的搜索框很重要，因?yàn)槟J(rèn)只顯示搜索圖標(biāo)(點(diǎn)擊圖標(biāo)才展開(kāi)搜索框)的話(huà)會(huì)使搜索功能不那么明顯，而且增加了用戶(hù)的交互成本：
3、提供一個(gè)搜索按鈕
搜索按鈕可以幫助用戶(hù)識(shí)別出觸發(fā)搜索操作的下一步——即使他們可能往往會(huì)通過(guò)按Enter鍵來(lái)執(zhí)行此操作。
提示：
1)提交按鈕的尺寸大小要合適，以便用戶(hù)不必非常精確地移動(dòng)鼠標(biāo)位置到它上面。較大的可點(diǎn)擊區(qū)域會(huì)使得按鈕本身更容易被發(fā)現(xiàn)和點(diǎn)擊。
2)使用Enter鍵或點(diǎn)擊搜索按鈕都應(yīng)該能執(zhí)行搜索操作才對(duì)，畢竟許多用戶(hù)仍然有點(diǎn)擊搜索按鈕來(lái)提交搜索的習(xí)慣。
4.、將搜索框放在每一頁(yè)上
用戶(hù)在每個(gè)頁(yè)面上都應(yīng)該能獲取搜索框，因?yàn)槿绻脩?hù)找不到他們要找的內(nèi)容，他們往往會(huì)自然而然地想要嘗試使用搜索功能來(lái)進(jìn)行查找，他們才不關(guān)心自己當(dāng)前是在你網(wǎng)站的哪個(gè)地方(以及該不該有搜索)。
5、搜索框要足夠簡(jiǎn)單
如果你設(shè)計(jì)了一個(gè)搜索框，請(qǐng)確保它看起來(lái)確實(shí)像是一個(gè)搜索框，并且使用起來(lái)要足夠簡(jiǎn)單。可用性研究表明，默認(rèn)情況下不顯示高級(jí)搜索選項(xiàng)對(duì)用戶(hù)會(huì)更加友好。高級(jí)搜索選項(xiàng)(例如下面的示例中的布爾搜索查詢(xún))可能會(huì)混淆要嘗試使用它的用戶(hù)。
6、將搜索框放在用戶(hù)預(yù)期找到的位置
如果因?yàn)樗阉骺虿粔蛲怀觥⒉蝗菀撞煊X(jué)，用戶(hù)還得花費(fèi)精力去找它，那這個(gè)設(shè)計(jì)無(wú)疑是不夠友好的。
下面的圖表來(lái)自 A. Dawn Shaikh 和 Keisi Lenz 的一項(xiàng)研究：它顯示了參與調(diào)查的142名參與者針對(duì)網(wǎng)站中的搜索表單的位置的預(yù)期情況。研究發(fā)現(xiàn)，對(duì)于用戶(hù)來(lái)說(shuō)，搜索框最佳的位置是網(wǎng)站上每個(gè)頁(yè)面的左上方或右上方——用戶(hù)可以使用常見(jiàn)的F形瀏覽模式輕松地找到它。
該圖說(shuō)明了參與者對(duì)搜索框所處位置的預(yù)期情況。 右上方仍然是用戶(hù)希望找到搜索的第一個(gè)地方
因此，最好將搜索框放在頁(yè)面的右上方或中上方，以確保用戶(hù)能在預(yù)期的位置找到它。
重內(nèi)容把搜索放置在頁(yè)面的中上方
提示：
1)理想情況下，雖然搜索框在用戶(hù)需要的地方應(yīng)該能輕易出現(xiàn)，但是搜索框的設(shè)計(jì)也應(yīng)該完美地契合網(wǎng)站的整體設(shè)計(jì)效果。
2)內(nèi)容越重的站點(diǎn)，你越希望搜索框顯著。如果搜索對(duì)你的網(wǎng)站至關(guān)重要，請(qǐng)使用大的對(duì)比度，以便搜索框和圖標(biāo)能從頁(yè)面背景和周?chē)刂忻摲f而出。
7、搜索框尺寸大小要合適
輸入框太短是設(shè)計(jì)人員常犯的一個(gè)錯(cuò)誤。當(dāng)然，用戶(hù)可以鍵入長(zhǎng)查詢(xún)，但一次只能看到一部分輸入的文本，這自然也就存在可用性問(wèn)題，因?yàn)橛脩?hù)無(wú)法輕松地回看和編輯其剛剛才輸入的查詢(xún)條件。事實(shí)上，當(dāng)搜索框具有有限數(shù)量的可見(jiàn)字符時(shí)，用戶(hù)會(huì)被迫使用短的、不精確的查詢(xún)條件，因?yàn)楦L(zhǎng)的查詢(xún)條件將不易閱讀。 但如果輸入框的長(zhǎng)度是根據(jù)用戶(hù)的預(yù)期輸入來(lái)確定大小的，那對(duì)用戶(hù)而言就友好多了。
經(jīng)驗(yàn)表明一個(gè)可以輸入27個(gè)字符的輸入框是比較合適的，它能夠適應(yīng)90%的查詢(xún)條件。
Amazon使用長(zhǎng)度合適的搜索框
提示：不妨考慮使用擴(kuò)展型的搜索框，它會(huì)在用戶(hù)點(diǎn)擊時(shí)展開(kāi)文本輸入框。這種做法一方面節(jié)省了屏幕空間，同時(shí)仍能給予用戶(hù)足夠的視覺(jué)提示以便他們快速找到并執(zhí)行搜索。
8、使用自動(dòng)檢索匹配機(jī)制
自動(dòng)檢索匹配機(jī)制可根據(jù)用戶(hù)輸入的字符進(jìn)行預(yù)測(cè)來(lái)幫助用戶(hù)找到一個(gè)可能匹配的查詢(xún)條件。 該機(jī)制并不是為了加快搜索過(guò)程，而是為了引導(dǎo)用戶(hù)并幫助他們構(gòu)建他們的查詢(xún)條件。普通用戶(hù)在構(gòu)建查詢(xún)方面往往會(huì)有困難：如果他們?cè)诘谝淮螄L試查詢(xún)后沒(méi)有獲得滿(mǎn)意的結(jié)果，后面的查詢(xún)也會(huì)很難順利，事實(shí)上，他們常常就會(huì)放棄。而當(dāng)自動(dòng)檢索匹配機(jī)制運(yùn)作順利時(shí)，它們就能幫助用戶(hù)將查詢(xún)條件表達(dá)的更加清楚。
Google 搜索自2008年起就已經(jīng)開(kāi)始應(yīng)用該機(jī)制，現(xiàn)在已經(jīng)相當(dāng)成熟。由于用戶(hù)常常會(huì)多次搜索相同的內(nèi)容，因此通過(guò)記住搜索記錄，Google既節(jié)省了時(shí)間成本又能創(chuàng)造出更為便捷高效的搜索體驗(yàn)。
提示：
1)確保自動(dòng)檢索匹配機(jī)制是有效的，若設(shè)計(jì)不當(dāng)，就可能會(huì)混淆和分散用戶(hù)的注意力。因此，不妨使用自動(dòng)更正拼寫(xiě)錯(cuò)誤、根詞識(shí)別和文本預(yù)測(cè)等做法，來(lái)改進(jìn)這種機(jī)制發(fā)揮更好的作用。
2)你應(yīng)該盡快提供自動(dòng)檢索匹配，例如在用戶(hù)輸入第三個(gè)字符后就提供有效匹配以減少用戶(hù)的輸入成本。
3)匹配的查詢(xún)條件不要多余10個(gè)(而且不要顯示滾動(dòng)條)，以保證信息不會(huì)變得過(guò)載。
4)允許使用鍵盤(pán)在匹配的條件列表中導(dǎo)航。一旦用戶(hù)在最后一個(gè)項(xiàng)目中接著向下滾動(dòng)，他們應(yīng)該重新返回到列表的頂部。另外，Esc 鍵應(yīng)該允許用戶(hù)退出列表。
5)突出輸入部分跟匹配部分的差異(例如，輸入文本具有標(biāo)準(zhǔn)字重，而匹配部分使用粗體字重)。
自動(dòng)完成模式可以節(jié)省用戶(hù)時(shí)間，給用戶(hù)合適的引導(dǎo)
9、明確告訴用戶(hù)可以搜索哪些內(nèi)容
在輸入框中顯示一個(gè)搜索查詢(xún)的示例條件是一個(gè)不錯(cuò)的做法，這樣能夠向用戶(hù)表明他們究竟可以應(yīng)用該搜索框搜索哪些/哪類(lèi)內(nèi)容。 如果用戶(hù)可以搜索多個(gè)條件，則使用輸入提示模式來(lái)向用戶(hù)說(shuō)明(例如，下面示例中的IMDb。 HTML5 技術(shù)使得我們可以很輕松地在輸入框中寫(xiě)明作為占位符的提示文本。
提示： 提示部分要限制在幾個(gè)字之內(nèi)，否則反而會(huì)增加用戶(hù)的認(rèn)知負(fù)擔(dān)。
結(jié)論
對(duì)于創(chuàng)建一個(gè)重內(nèi)容的`應(yīng)用程序或網(wǎng)站而言，搜索理應(yīng)作為一個(gè)基本的操作和關(guān)鍵要素。即使小幅的改進(jìn)(例如使搜索框長(zhǎng)度更合適或者指明可以搜索哪些信息)都可以顯著增加搜索的可用性以及整體的用戶(hù)體驗(yàn)。
【如何設(shè)計(jì)一個(gè)完美的搜索框】相關(guān)文章：
如何設(shè)計(jì)搜索框04-15
如何個(gè)網(wǎng)頁(yè)設(shè)置搜索框03-04
搜索框設(shè)計(jì)和布局的方法01-28
jquery+php實(shí)現(xiàn)搜索框自動(dòng)提示12-03
如何快速全面搞定App搜索功能設(shè)計(jì)04-08
如何使用Excel組合框控件03-25
word如何刪除文本框09-21