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

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

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

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

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

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

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

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

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

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

圖標(biāo)的采用

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

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

最新的研究結(jié)果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

?4、使用大量的對比，使該圖標(biāo)可以從背景已經(jīng)周圍的元素中脫穎而出。

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

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

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

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

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

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

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

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

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

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

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