如何讓你的搜索框“與眾不同”？

發(fā)布：2017-11-02 12:38:03 瀏覽：5499

搜索框，供用戶輸入檢索的入口。搜索框是網(wǎng)站最基本的也是最不可缺少的。雖然簡(jiǎn)單但是其重要性確是不言而喻的。如何在紛雜的網(wǎng)站中，讓用戶盡快的找到自己想要的東西，那么搜索框的設(shè)計(jì)便極其重要。

常規(guī)搜索：

通過(guò)用戶點(diǎn)擊搜索按鈕后才開始執(zhí)行搜索，以達(dá)到一定的目的。

即時(shí)搜索：

結(jié)果立即顯示在用戶界面上，不需要按鈕，放大鏡僅顯示為一個(gè)圖標(biāo)，輸入時(shí)立即搜索，達(dá)到一定的目的。

外觀特征

1、不需要使用標(biāo)簽，使用一個(gè)可選的提示；

2、提示可以是一個(gè)指令（如搜索類型），或者一個(gè)范圍；

3、提示語(yǔ)要簡(jiǎn)短；

4、即時(shí)搜索時(shí)，提示首字母大寫；常規(guī)搜索時(shí)，首字母小寫。

設(shè)計(jì)理念

1、它是界面的一部分，所以要放在一個(gè)顯眼的位置，要容易找到；

2、在同一應(yīng)用中，它們應(yīng)該有統(tǒng)一的外觀；

3、它的功能應(yīng)該是有效的，它的結(jié)果應(yīng)該是準(zhǔn)確的，它的速度應(yīng)該是盡可能快速的。

如何改進(jìn)設(shè)計(jì)搜索框，以減少用戶所需要花費(fèi)的查詢時(shí)間呢？下面就簡(jiǎn)單的介紹下。

搜索框要明顯

如果搜索是你的應(yīng)用程序/網(wǎng)站的一個(gè)重要功能，那么搜索框的顯示務(wù)必要足夠顯著，以保證用戶能夠最快的發(fā)現(xiàn)它。研究發(fā)現(xiàn)，搜索框放置的最佳位置是你網(wǎng)站上每個(gè)頁(yè)面的左上角或右上角，用戶可以使用常見的F形掃描模式輕松找到它。理想情況下，搜索框應(yīng)該完美匹配網(wǎng)站的整體設(shè)計(jì)，并在用戶需要時(shí)輕松展現(xiàn)。

使用放大鏡圖標(biāo)

一個(gè)搜索框應(yīng)該始終與放大鏡圖標(biāo)放在一起。所謂圖標(biāo)，其實(shí)就是代表著一個(gè)對(duì)象、動(dòng)作、想法等多種含義的圖形符號(hào)。我們通過(guò)圖標(biāo)看到的不僅僅是圖標(biāo)本身，而是它所代表的內(nèi)在含義。然而，對(duì)于用戶來(lái)講，具有通用性代表含義的圖標(biāo)為數(shù)并不多，幸運(yùn)的是，放大鏡圖標(biāo)正是其中之一。即使沒(méi)有文本標(biāo)簽，用戶也能輕易地識(shí)別放大鏡圖標(biāo)

將搜索框放在每一頁(yè)上

用戶在每個(gè)頁(yè)面上都應(yīng)該能獲取搜索框，因?yàn)槿绻脩粽也坏剿麄円业膬?nèi)容，他們往往會(huì)自然而然地想要嘗試使用搜索功能來(lái)進(jìn)行查找，他們才不關(guān)心自己當(dāng)前是在你網(wǎng)站的哪個(gè)地方。

提供一個(gè)搜索按鈕

搜索按鈕可以幫助用戶識(shí)別出觸發(fā)搜索操作的下一步——即使他們可能往往會(huì)通過(guò)按Enter鍵來(lái)執(zhí)行此操作。

搜索框要足夠簡(jiǎn)單

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

搜索框尺寸大小要合適

輸入框太短是設(shè)計(jì)人員常犯的一個(gè)錯(cuò)誤。當(dāng)然，用戶可以鍵入長(zhǎng)查詢，但一次只能看到一部分輸入的文本，這自然也就存在可用性問(wèn)題，因?yàn)橛脩魺o(wú)法輕松地回看和編輯其剛剛才輸入的查詢條件。事實(shí)上，當(dāng)搜索框具有有限數(shù)量的可見字符時(shí)，用戶會(huì)被迫使用短的、不精確的查詢條件，因?yàn)楦L(zhǎng)的查詢條件將不易閱讀。但如果輸入框的長(zhǎng)度是根據(jù)用戶的預(yù)期輸入來(lái)確定大小的，那對(duì)用戶而言就友好多了。

明確告訴用戶可以搜索哪些內(nèi)容

在輸入框中顯示一個(gè)搜索查詢的示例條件是一個(gè)不錯(cuò)的做法，這樣能夠向用戶表明他們究竟可以應(yīng)用該搜索框搜索哪些/哪類內(nèi)容。如果用戶可以搜索多個(gè)條件，則使用輸入提示模式來(lái)向用戶說(shuō)明（例如，下面示例中的百度。最新消息使得我們可以很輕松地在輸入框中寫明作為占位符的提示文本。

將搜索框放在用戶預(yù)期找到的位置

如果因?yàn)樗阉骺虿粔蛲怀?、不容易察覺(jué)，用戶還得花費(fèi)精力去找它，那這個(gè)設(shè)計(jì)無(wú)疑是不夠友好的。

因此，最好將搜索框放在頁(yè)面的右上方或中上方，以確保用戶能在預(yù)期的位置找到它。

使用自動(dòng)檢索匹配機(jī)制

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

網(wǎng)站設(shè)計(jì)中，一個(gè)好的搜索框，不管是直觀上，還是感觀上，都要給用戶帶來(lái)方便快捷的使用功能，提升用戶體驗(yàn)。