[核心提示] 用戶認(rèn)識(shí)一個(gè)放大鏡圖標(biāo)的意思是’搜索’，即使沒(méi)有一個(gè)文本標(biāo)簽。不足之處是圖標(biāo)更難被用戶找到。

在對(duì)搜索界面設(shè)計(jì)的研究中，我們發(fā)現(xiàn)了搜索框的一個(gè)發(fā)展趨勢(shì)：越來(lái)越多的設(shè)計(jì)使用一個(gè)純粹的放大鏡圖標(biāo)來(lái)替換傳統(tǒng)的帶有“搜索”二字的文本按鈕，甚至有些還丟掉了文本輸入框，僅僅留下了一個(gè)放大鏡圖標(biāo)。今天哪一個(gè)版本的用戶體驗(yàn)是最好的呢?

之前的搜索框設(shè)計(jì)指南

傳統(tǒng)的搜索框設(shè)計(jì)已經(jīng)很成熟，其主要原則是：

在頁(yè)面的右上角放置一個(gè)醒目的搜索框，搜索框的旁邊放置一個(gè)搜索按鈕。

搜索框不需要文字說(shuō)明，旁邊的那個(gè)明顯的搜索按鈕告訴用戶在這里就可以搜索，同時(shí)還告訴他們?nèi)绾嗡阉鳌?/p>

然而，今天的一些新興的模式打破了這些基本準(zhǔn)則. 放大鏡圖標(biāo)更加節(jié)省空間，所以更多的網(wǎng)站使用它。更加靈活的使用設(shè)計(jì)準(zhǔn)則是沒(méi)有問(wèn)題的，但是有一點(diǎn)是需要確認(rèn)的，那就是用戶的需求仍然是保持不變的。用戶并不關(guān)心搜索區(qū)域看上去像什么，他們只是需要一個(gè)可以迅速輸入搜索關(guān)鍵詞的地方。如果設(shè)計(jì)慣例正在發(fā)生變化，但仍能允許用戶輕松的實(shí)現(xiàn)這個(gè)目標(biāo)，而不是減慢，那就不會(huì)有什么問(wèn)題。可是在我們調(diào)查中發(fā)現(xiàn)，只有圖標(biāo)的搜索設(shè)計(jì)還是存在一些明顯的缺點(diǎn)：

?(a)：傳統(tǒng)搜索按鈕的搜索框;

(b,c,d)：新興的帶放大鏡圖標(biāo)的搜索框設(shè)計(jì)模式;

(e)受移動(dòng)設(shè)計(jì)影響的只有圖標(biāo)無(wú)輸入框的設(shè)計(jì)(我們并不推薦這種設(shè)計(jì))

圖標(biāo)的采用

放大鏡圖標(biāo)已經(jīng)和搜索緊密聯(lián)系在一起，部分原因是許多不同的網(wǎng)站、應(yīng)用程序和操作系統(tǒng)使用它來(lái)提供一種查找信息的方法。 有了這樣的貫徹執(zhí)行，用戶已經(jīng)學(xué)會(huì)更快的識(shí)別這一圖標(biāo)。隨著響應(yīng)式設(shè)計(jì)的流行，僅使用圖標(biāo)的設(shè)計(jì)模式更加的流行起來(lái)(盡管好的響應(yīng)式設(shè)計(jì)的站點(diǎn)在轉(zhuǎn)換到大一點(diǎn)的屏幕時(shí)在圖標(biāo)旁邊還會(huì)顯示一個(gè)搜索框)。

?用于各種應(yīng)用和操作系統(tǒng)搜索功能的放大鏡圖標(biāo)已經(jīng)讓用戶把搜索和放大鏡僅僅的聯(lián)系在了一起。從上到下：谷歌瀏覽器，我 Windows 資源管理器，IE瀏覽器和 Mac 上面的 Office Word。

最新的研究結(jié)果

我們最新的研究結(jié)果顯示，在往放大鏡圖標(biāo)的設(shè)計(jì)過(guò)渡過(guò)程中，設(shè)計(jì)師希望盡量平滑而且無(wú)風(fēng)險(xiǎn)，這里是一些用戶在放大鏡圖標(biāo)設(shè)計(jì)模式下可能會(huì)碰到的一些問(wèn)題。

只有放大鏡圖標(biāo)的話，用戶會(huì)不太容易定位到搜索的功能

當(dāng)沒(méi)有搜索框的時(shí)候，放大鏡圖標(biāo)占用更少的空間。視覺(jué)上，它不是太突出，因此將不那么明顯。對(duì)于桌面網(wǎng)站，我們不推薦只有放大鏡圖標(biāo)的設(shè)計(jì)。只有放大鏡圖標(biāo)的設(shè)計(jì)在移動(dòng)設(shè)備上會(huì)比較合理，原因是屏幕更小，可放置的圖標(biāo)和文字按鈕也更少。但是在桌面上，單獨(dú)的放大鏡圖標(biāo)就會(huì)迷失在眾多的圖標(biāo)和按鈕中。

當(dāng)用戶已經(jīng)可以一眼從放大鏡圖標(biāo)聯(lián)想到搜索的時(shí)候，那么就不需要顯示“搜索”二字了

用戶認(rèn)識(shí)并了解放大鏡的功能。當(dāng)他們看到它的時(shí)候就會(huì)聯(lián)想到搜索。如果圖標(biāo)很明顯，而且有很強(qiáng)的隱喻說(shuō)明它是可點(diǎn)擊的，那么就不需要再顯示“搜索”二字了。因?yàn)楹芏嘤脩羧匀挥悬c(diǎn)擊搜索按鈕提交查詢的習(xí)慣，所以點(diǎn)擊放大鏡圖標(biāo)提交查詢就很有必要了。此外，對(duì)于國(guó)際版本的站點(diǎn)還有一個(gè)額外的好處，沒(méi)有必要再翻譯“搜索”這個(gè)詞了。(然而，從可訪問(wèn)性的角度考慮，記得把“搜索”這個(gè)詞放在放大鏡按鈕的alt字段中)

當(dāng)搜索被放置在一個(gè)意想不到的位置時(shí)，用戶需要額外的幫助才能找到它

用戶首先會(huì)去右上角找，如果沒(méi)有找到，他們就開(kāi)始掃描頁(yè)面的頂部。在那些搜索圖標(biāo)在左側(cè)的站點(diǎn)中，那些使用了一個(gè)大的空的搜索框的站點(diǎn)讓用戶更容易找到搜索。雖然用戶最終找到了搜索框，他們從一開(kāi)始就不應(yīng)該為了一個(gè)搜索功能就找遍了整個(gè)頁(yè)面。

只有放大鏡圖標(biāo)的搜索增加了交互成本

只顯示一個(gè)放大鏡圖標(biāo)的搜索的一個(gè)負(fù)面效果是用戶必須等待一個(gè)搜索框顯示出來(lái)，找到在哪輸入，然后有時(shí)還需要點(diǎn)擊多次聚焦在輸入?yún)^(qū)域。這些額外的步驟拉長(zhǎng)了搜索流程，本來(lái)是只需要點(diǎn)擊搜索框立即開(kāi)始輸入的。

大多數(shù)的其他圖標(biāo)仍然需要文字才能表達(dá)清楚

清晰的文字幫助用戶更快的做決策。文字可以提供更好的信息線索。對(duì)于較新的圖標(biāo)，應(yīng)該輔以文字說(shuō)明，比如三行的菜單圖標(biāo)。地圖標(biāo)記圖標(biāo)是另外一個(gè)仍然有著不清晰的含義而且使用不一致的圖標(biāo)，有時(shí)它意味著當(dāng)前的位置或者是一個(gè)不同的特定位置，又或是一般的地方，又或者是附近的地方。

?用戶還很陌生的新圖標(biāo)，包括三線菜單圖標(biāo)(左)和地圖標(biāo)記圖標(biāo)(右圖)

用戶仍然在學(xué)習(xí)了解這些圖標(biāo)的含義和它的功能，所以最好有一個(gè)清晰的文字說(shuō)明。此外，在桌面屏幕上有足夠的空間，為啥不使用戶更快更容易的找到他們想要的呢?

對(duì)于使用放大鏡圖標(biāo)的一些設(shè)計(jì)建議

1、首先，在桌面版本的網(wǎng)站上保留一個(gè)搜索框，放置在圖標(biāo)的旁邊。最好同時(shí)也在平板電腦上保證這個(gè)搜索框。當(dāng)一個(gè)網(wǎng)站在更小的屏幕上被瀏覽時(shí)(比如智能手機(jī)和智能手表)，搜索框可以被隱藏直到用戶觸摸了放大鏡圖標(biāo)。在上面的所有情況中沒(méi)有必要再在搜索框中保留“搜索”文字說(shuō)明了。

2、使用一個(gè)簡(jiǎn)潔的概要圖標(biāo)，放大鏡的最簡(jiǎn)版本。更少的圖形細(xì)節(jié)可以加速識(shí)別。

?3、使用一個(gè)有更大內(nèi)邊距的大圖標(biāo)，更大的可點(diǎn)擊面積更加容易被發(fā)現(xiàn)和點(diǎn)擊。

?4、使用大量的對(duì)比，使該圖標(biāo)可以從背景已經(jīng)周?chē)脑刂忻摲f而出。

5、將其放置在右上角，這仍然是大多數(shù)人認(rèn)為搜索應(yīng)該在的位置。

6、讓用戶既可以使用回車(chē)鍵也可以點(diǎn)擊圖標(biāo)提交搜索請(qǐng)求。我在上面提到過(guò)，但是仍然值得重申一下，許多用戶仍然有點(diǎn)擊一個(gè)按鈕提交搜索請(qǐng)求的習(xí)慣。

7、可以考慮使用一個(gè)可變大的搜索框，這個(gè)搜索框可以在點(diǎn)擊的時(shí)候擴(kuò)大輸入?yún)^(qū)域。這樣既可以節(jié)省屏幕空間，又可以給用戶提供足夠的視覺(jué)線索讓用戶找到并執(zhí)行搜索，還能在執(zhí)行搜索的時(shí)候給用戶提供足夠的輸入空間。

?上面：搜索框被點(diǎn)擊前。下面：被點(diǎn)擊后，搜索框擴(kuò)大

8、不要把搜索按鈕和其他圖標(biāo)擠在一起，給搜索提供它應(yīng)有的優(yōu)先權(quán)。

9、這一條跟上面剛好相反，不要孤立搜索。這也會(huì)跟上面一樣讓搜索難以找到。

?10、當(dāng)用戶點(diǎn)擊搜索圖標(biāo)時(shí)，在圖標(biāo)的附近顯示搜索框，放得太遠(yuǎn)將增加用戶的交互成本。

?11、不要讓用戶點(diǎn)擊兩次。尤其是當(dāng)一次(或者沒(méi)有)就夠的時(shí)候。在一些情況下，用戶不得不先點(diǎn)擊圖標(biāo)打開(kāi)搜索框，然后再點(diǎn)擊將輸入焦點(diǎn)移動(dòng)到搜索框中。點(diǎn)擊圖標(biāo)一次就應(yīng)該把輸入焦點(diǎn)放到搜索框中，用戶立即就可以開(kāi)始輸入。更好的是，當(dāng)鼠標(biāo)懸浮的時(shí)候就展開(kāi)搜索框，同時(shí)焦點(diǎn)也準(zhǔn)備好，用戶立即可以輸入。

最終的目標(biāo)是幫助用戶更快的找到并執(zhí)行搜索

如果你的網(wǎng)站或者應(yīng)用使用一個(gè)放大鏡圖標(biāo)而不是一個(gè)“搜索”按鈕，上面的建議應(yīng)該會(huì)有一些幫助。我們還會(huì)注意一些其他的新興搜索設(shè)計(jì)模式，比如說(shuō)將搜索框放在左側(cè)，使用語(yǔ)音識(shí)別命令等。

作者：葛燦輝-搜索數(shù)據(jù)挖掘；via：極客公園