瀏覽器設計(1):搜索框設計思考

5 評論 14335 瀏覽 51 收藏 11 分鐘

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

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

搜索框的基本功能

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

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

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

搜索框的大眾功能

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

首先在搜索引擎方面,瀏覽器一般是允許點擊搜索框中最左邊的圖標來進行切換的。通常的搜索引擎是百度、谷歌、搜狗、必應、神馬與360,一般視瀏覽器開發公司與這幾家搜索公司的關系而定。值得一提的是小眾瀏覽器在引擎的選擇上比主流瀏覽器更多,甚至可以自定義搜索引擎。而一些本身就在做搜索業務的瀏覽器反而拘謹的多,比如百度瀏覽器只支持使用百度搜索。

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

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

搜索框的特色功能

經過上面的講述,你可能以為搜索框在瀏覽器中其實是同質化比較嚴重的設計點。但在目前的主流瀏覽器中,搜索框其實是有屬于它們自己的獨特優勢的。

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

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

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

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

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

幾個小功能思考

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

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

這三個小功能在某些瀏覽器中出現過,但始終沒有成為瀏覽器的主流配置也沒有相關的優化方案,不得不說在搜索框設計這方面還有許多值得改進的空間。

結語

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

 

本文由 @李看山 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 關于點擊搜索欄自動輸入用戶最近一次的復制文本的問題,或許可以優化成,點擊搜索欄后,會彈出一個小氣泡顯示近三個復制的文本的縮略文本(也就并列一個固定寬度行的位置),用戶如果不需要只要繼續輸入文字,或者隱藏鍵盤查找歷史搜條就可以。(拙見)

    回復
    1. 很棒的想法!

      回復
    2. 剛剛又打開UC體驗了下發現關于粘貼搜索這一塊有優化了,對于短的復制文字在搜索欄下方會以搜索備用選項的形式自動出現,對于過長的文字復制則不會出現。

      回復
  2. 很棒! ?? 但是輸入法可以自動彈出哦~(不知道和手 ;機型號有沒有關系)

    來自北京 回復
    1. 對的,輸入法一般都是自動彈出~

      來自廣東 回復