搜索設計中放大鏡圖標的優點和缺點

在對搜索界面設計的研究中，我們發現了搜索框的一個發展趨勢：越來越多的設計使用一個純粹的放大鏡圖標來替換傳統的帶有「搜索」二字的文本按鈕，甚至有些還丟掉了文本輸入框，僅僅留下了一個放大鏡圖標。今天哪一個版本的用戶體驗是最好的呢？

之前的搜索框設計指南

傳統的搜索框設計已經很成熟，其主要原則是：

• 在頁面的右上角放置一個醒目的搜索框，搜索框的旁邊放置一個搜索按鈕。
• 搜索框不需要文字說明，旁邊的那個明顯的搜索按鈕告訴用戶在這裡就可以搜索，同時還告訴他們如何搜索。

然而，今天的一些新興的模式打破了這些基本準則. 放大鏡圖標更加節省空間，所以更多的網站使用它。更加靈活的使用設計準則是沒有問題的，但是有一點是需要確認的，那就是用戶的需求仍然是保持不變的。用戶並不關心搜索區域看上去像什麼，他們只是需要一個可以迅速輸入搜索關鍵詞的地方。如果設計慣例正在發生變化，但仍能允許用戶輕鬆的實現這個目標，而不是減慢，那就不會有什麼問題。可是在我們調查中發現，只有圖標的搜索設計還是存在一些明顯的缺點：

 

• （a）傳統搜索按鈕的搜索框；
• (b、c、d)：新興的帶放大鏡圖標的搜索框設計模式；
• （e）：受移動設計影響的只有圖標無輸入框的設計（我們並不推薦這種設計）

圖標的採用

放大鏡圖標已經和搜索緊密聯繫在一起，部分原因是許多不同的網站、應用程式和作業系統使用它來提供一種查找信息的方法。 有了這樣的貫徹執行，用戶已經學會更快的識別這一圖標。隨著響應式設計的流行，僅使用圖標的設計模式更加的流行起來（儘管好的響應式設計的站點在轉換到大一點的屏幕時在圖標旁邊還會顯示一個搜索框）。

用於各種應用和作業系統搜索功能的放大鏡圖標已經讓用戶把搜索和放大鏡僅僅的聯繫在了一起。從上到下：谷歌瀏覽器，我 Windows 資源管理器，IE瀏覽器和 Mac 上面的 Office Word。

最新的研究結果

我們最新的研究結果顯示，在往放大鏡圖標的設計過渡過程中，設計師希望儘量平滑而且無風險，這裡是一些用戶在放大鏡圖標設計模式下可能會碰到的一些問題。

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

當沒有搜索框的時候，放大鏡圖標佔用更少的空間。視覺上，它不是太突出，因此將不那麼明顯。對於桌面網站，我們不推薦只有放大鏡圖標的設計。只有放大鏡圖標的設計在行動裝置上會比較合理，原因是屏幕更小，可放置的圖標和文字按鈕也更少。但是在桌面上，單獨的放大鏡圖標就會迷失在眾多的圖標和按鈕中。

當用戶已經可以一眼從放大鏡圖標聯想到搜索的時候，那麼就不需要顯示「搜索」二字了

用戶認識並了解放大鏡的功能。當他們看到它的時候就會聯想到搜索。如果圖標很明顯，而且有很強的隱喻說明它是可點擊的，那麼就不需要再顯示「搜索」二字了。因為很多用戶仍然有點擊搜索按鈕提交查詢的習慣，所以點擊放大鏡圖標提交查詢就很有必要了。此外，對於國際版本的站點還有一個額外的好處，沒有必要再翻譯「搜索」這個詞了。（然而，從可訪問性的角度考慮，記得把「搜索」這個詞放在放大鏡按鈕的alt欄位中）

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

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

只有放大鏡圖標的搜索增加了交互成本

只顯示一個放大鏡圖標的搜索的一個負面效果是用戶必須等待一個搜索框顯示出來，找到在哪輸入，然後有時還需要點擊多次聚焦在輸入區域。這些額外的步驟拉長了搜索流程，本來是只需要點擊搜索框立即開始輸入的。

大多數的其他圖標仍然需要文字才能表達清楚

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

用戶還很陌生的新圖標，包括三線菜單圖標（左）和地圖標記圖標（右圖）

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

對於使用放大鏡圖標的一些設計建議

1、首先，在桌面版本的網站上保留一個搜索框，放置在圖標的旁邊。最好同時也在平板電腦上保證這個搜索框。當一個網站在更小的屏幕上被瀏覽時（比如智慧型手機和智能手錶），搜索框可以被隱藏直到用戶觸摸了放大鏡圖標。在上面的所有情況中沒有必要再在搜索框中保留「搜索」文字說明了。

2、使用一個簡潔的概要圖標，放大鏡的最簡版本。更少的圖形細節可以加速識別。

3、使用一個有更大內邊距的大圖標，更大的可點擊面積更加容易被發現和點擊。

4、使用大量的對比，使該圖標可以從背景已經周圍的元素中脫穎而出。

5、將其放置在右上角，這仍然是大多數人認為搜索應該在的位置。

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

7、可以考慮使用一個可變大的搜索框，這個搜索框可以在點擊的時候擴大輸入區域。這樣既可以節省屏幕空間，又可以給用戶提供足夠的視覺線索讓用戶找到並執行搜索，還能在執行搜索的時候給用戶提供足夠的輸入空間。

上面：搜索框被點擊前。下面：被點擊後，搜索框擴大

8、不要把搜索按鈕和其他圖標擠在一起，給搜索提供它應有的優先權。

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

10、當用戶點擊搜索圖標時，在圖標的附近顯示搜索框，放得太遠將增加用戶的交互成本。

11、不要讓用戶點擊兩次。尤其是當一次（或者沒有）就夠的時候。在一些情況下，用戶不得不先點擊圖標打開搜索框，然後再點擊將輸入焦點移動到搜索框中。點擊圖標一次就應該把輸入焦點放到搜索框中，用戶立即就可以開始輸入。更好的是，當滑鼠懸浮的時候就展開搜索框，同時焦點也準備好，用戶立即可以輸入。

最終的目標是幫助用戶更快的找到並執行搜索

如果你的網站或者應用使用一個放大鏡圖標而不是一個「搜索」按鈕，上面的建議應該會有一些幫助。我們還會注意一些其他的新興搜索設計模式，比如說將搜索框放在左側，使用語音識別命令等。