文章介紹了當(dāng)今主流瀏覽器及部分小眾瀏覽器的搜索框設(shè)計思路，希望大家可以從中獲取一些靈感。

在瀏覽器中，搜索框無疑處于相當(dāng)重要的一環(huán)——瀏覽器滿足的核心需求是搜索，而搜索框正是打開這一基本功能的“鑰匙”。一個好的搜索框?qū)τ脩趔w驗的提升影響是很大的，從頁面布局到功能設(shè)計，如何做到滿足用戶需求甚至擊中用戶痛點都是需要仔細斟酌的。今天我在這里將介紹一下當(dāng)今主流瀏覽器及部分小眾瀏覽器的搜索框設(shè)計思路，希望大家可以從中獲取一些靈感。

搜索框的基本功能

在當(dāng)前的手機瀏覽器中，搜索框已經(jīng)和網(wǎng)址欄融為了一體，其滿足的基本需求正如同框里那七個灰字：“搜索或輸入網(wǎng)址”，用戶通過在搜索框里輸入關(guān)鍵字或網(wǎng)址的方式來找到自己希望獲取的信息。圍繞這一核心點，產(chǎn)品經(jīng)理們在搜索界面上花費了不少心思使其使用體驗變得更好。在這個環(huán)節(jié)我將介紹一下搜索框基本的設(shè)計思路。

當(dāng)我們在瀏覽器的主界面點擊搜索框時，瀏覽器通常會跳轉(zhuǎn)到搜索界面，輸入法自動彈出，搜索框高高在上左邊是搜索圖標右邊為取消按鈕，搜索記錄則在下方以列表的形式出現(xiàn)。清除搜索記錄的圖標是必不可少的，位置一般在搜索記錄的最下方但我更喜歡神奇瀏覽器的布局——刪除記錄以圖標的形式呈現(xiàn)并在記錄的右上方以方便用戶點擊。在輸入關(guān)鍵字時搜索框下方會出現(xiàn)一系列的聯(lián)想，而在點擊某條聯(lián)想右邊的箭頭后，我們會發(fā)現(xiàn)該聯(lián)想進入搜索框并引發(fā)了又一系列的聯(lián)想。在點擊前往按鈕/搜索記錄/聯(lián)想后我們將進入搜索結(jié)果頁面，搜索這一步驟正式完成。

從上述的描述中我們可以發(fā)現(xiàn)移動端瀏覽器與PC瀏覽器的搜索過程并不一樣，在傳統(tǒng)的瀏覽器中，沒有專門的搜索頁面也不會出現(xiàn)多次聯(lián)想，而在移動端這似乎成了標配。其實這也是不得已的舉措——與電腦相比手機的屏幕實在太小，況且輸入鍵盤也會占掉將近一半的空間，瀏覽器必須得給予一個單獨的界面讓其實現(xiàn)搜索功能。事實上，如何在這個界面加入更多輔助搜索的功能，是很多人都在思考的問題。

搜索框的大眾功能

如同上面講的那樣，越來越多的開發(fā)者開始在搜索框上添加一些功能來使得搜索變得更加方便與有效。如今一些主流的瀏覽器都會主動對搜索框做進一步的優(yōu)化來提升用戶的體驗。

首先在搜索引擎方面，瀏覽器一般是允許點擊搜索框中最左邊的圖標來進行切換的。通常的搜索引擎是百度、谷歌、搜狗、必應(yīng)、神馬與360，一般視瀏覽器開發(fā)公司與這幾家搜索公司的關(guān)系而定。值得一提的是小眾瀏覽器在引擎的選擇上比主流瀏覽器更多，甚至可以自定義搜索引擎。而一些本身就在做搜索業(yè)務(wù)的瀏覽器反而拘謹?shù)亩啵热绨俣葹g覽器只支持使用百度搜索。

其次一些瀏覽器會加入語音搜索和掃描，用戶通過說出關(guān)鍵字便可以進行搜索，語音搜索的技術(shù)要求比較高，所以在小眾瀏覽器上很難見到，主流瀏覽器雖然大都添加了這一功能但是效果并不好。當(dāng)前大部分的手機用戶并不習(xí)慣語音文字輸入并且語音識別的精度仍有待加強。二維碼掃描則是很多瀏覽器都附帶的功能，用戶可以通過掃描二維碼來進入詳情界面。但我個人并不看好這一功能——目前主流的二維碼掃描場景中大多都是有專門應(yīng)用出現(xiàn)的，比如支付寶二維碼和微信的二維碼，瀏覽器的二維碼掃描在這些使用環(huán)境中顯得相當(dāng)雞肋。

最后在大部分瀏覽器中都會有這樣一個比較不顯眼的功能——用戶復(fù)制文字后，在搜索框中長按會出現(xiàn)粘貼并搜索這一選項。在UC瀏覽器中，復(fù)制的文字會自動出現(xiàn)在搜索框中，更是進一步精簡了搜索步驟，但隨之而來也出現(xiàn)了一個問題——假如用戶復(fù)制了一大段并不準備搜索的文字，搜索框中同樣會出現(xiàn)這一段文字，用戶還得去刪掉它。這樣一看，又無形中為用戶增添了負擔(dān)，所以如何更好地優(yōu)化“粘貼搜索”是一個值得探討的問題。

搜索框的特色功能

經(jīng)過上面的講述，你可能以為搜索框在瀏覽器中其實是同質(zhì)化比較嚴重的設(shè)計點。但在目前的主流瀏覽器中，搜索框其實是有屬于它們自己的獨特優(yōu)勢的。

在QQ瀏覽器里，用戶可以選擇添加搜索標簽。比如搜索“乒乓球”，添加“熱點”標簽后的搜索結(jié)果會是當(dāng)前關(guān)于乒乓球的熱點新聞，而選擇“應(yīng)用”標簽則會出現(xiàn)一系列的關(guān)于乒乓球的應(yīng)用。從圖中我們可以看到騰訊憑借著強大的內(nèi)容生態(tài)圈將瀏覽器打造成了拉升其他產(chǎn)品流量的入口。

此外QQ瀏覽器還用智能助手“叮當(dāng)”替代了語音輸入，這個類似于siri的助手可以實現(xiàn)一些簡單的用戶請求，但跟它的前輩比還是弱很多，至少在語音識別這一方面做的并不夠好。

360瀏覽器同樣也可以實現(xiàn)在某種領(lǐng)域下的搜索，類似于PC端百度的搜索界面，用戶可以在點擊放大鏡圖片后選擇要選擇的搜索領(lǐng)域。但與QQ瀏覽器相比，缺少生態(tài)圈的360在產(chǎn)品聯(lián)動上要比騰訊弱勢許多。

百度瀏覽器則繼續(xù)發(fā)揮了它在圖片搜索這方面的優(yōu)勢，用戶可以拍攝照片并對其搜索，掃描功能除了掃二維碼之外還可以掃描題目甚至翻譯。

綜上我們可以看到在瀏覽器的搜索框特色功能這一塊是很依靠瀏覽器母公司的實力的。騰訊可以讓QQ瀏覽器跟旗下的其他產(chǎn)品進行聯(lián)動而360瀏覽器則只能像PC瀏覽器的搜索欄那樣加幾個搜索分類。百度可以在掃描功能中加入圖片搜索但其他瀏覽器的掃描功能卻只是“掃一掃”。一個瀏覽器如果想在應(yīng)用市場中分一杯羹就要建立自己的資源優(yōu)勢——比如搜狗瀏覽器中可以使用知乎的搜索引擎。單純的靠提升用戶體驗來吸引用戶是不行的，因為界面設(shè)計是可以被抄取的而資源是實打?qū)嵔⑵饋淼摹?/p>

幾個小功能思考

在X瀏覽器中，用戶在輸入關(guān)鍵字后會自動聯(lián)想出之前的歷史記錄，點擊記錄可以進入上一次退出時的網(wǎng)址。這一點是其他瀏覽器所不具備的。而在神奇瀏覽器中，長按后除了出現(xiàn)“粘貼并搜索”還會有“常用術(shù)語”，用戶可以添加一些常用術(shù)語在里面。這兩個小功能在某些場景下是比較實用的，但在大部分情況下，前者像是累贅而后者則顯得無用。

在PC瀏覽器中，網(wǎng)址欄一般會出現(xiàn)收藏圖標，點擊圖標會收藏當(dāng)前的網(wǎng)址。手機瀏覽器借鑒了PC瀏覽器很多思想，但收藏按鈕卻很少有瀏覽器會放在頂部，用戶需要在底部尋找收藏選項，一個收藏圖標并不會占據(jù)很大的空間，然而大部分主流瀏覽器并不會將其像PC瀏覽器一樣放在欄中。

這三個小功能在某些瀏覽器中出現(xiàn)過，但始終沒有成為瀏覽器的主流配置也沒有相關(guān)的優(yōu)化方案，不得不說在搜索框設(shè)計這方面還有許多值得改進的空間。

結(jié)語

搜索框在瀏覽器中處于一個比較重要的地位，除了滿足用戶需求之外還承擔(dān)著一些盈利功能（比如應(yīng)用推薦）、引流功能（熱點推薦）。探討搜索框的設(shè)計思想我們可以在一定程度上一窺該瀏覽器的設(shè)計思路進而更好地去理解這個產(chǎn)品的思路。

本文由 @李看山 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。