搜索框的設計

3 評論 16170 瀏覽 126 收藏 15 分鐘

編輯導語:搜索是每一個APP應用基本都具備的功能,搜索框的設計也直接影響到用戶的體驗感和留存率等。本文作者介紹了有關搜索框設計的相關內容,從搜索框的設計元素、功能、內容、結果展示、搜索引擎等展開分析,一起來學習一下吧。

搜索是用戶常使用的功能,搜索框設計的好壞關系到用戶的搜索展示、用戶的產品體驗等,因此搜索框雖然看起來簡單,但其設計依然不容小覷。

一、搜索框的設計元素

主要為:搜索框、搜索圖標、搜索文字內容

二、搜索框的功能

對用戶:用戶可以通過他快速精準的找到自己需要的東西(內容),提高轉換率。能讓用戶點擊的,就不要讓用戶進行輸入

對產品本身:我們可以針對用戶的搜索軌跡進行相應功能或者模塊上的優化,尤其像電商產品,用戶搜索的數據非常重要。

1. 搜索框的位置

目前大部分網站在布局搜索框位置時,大致遵循以下幾個規則:

1)頁面居中:搜索功能對于頁面來說是核心功能。如果沒有搜索功能的話,業務幾乎無法開展。它最最最重要啦!一般多用于搜索平臺。

2)頁面頂部居中:因為網站業務中,搜索是重要功能,但不是全部。不用夸大顯示,但頂部的居中好位置要留給它。一般適用于電商平臺、資訊平臺。

3)頁面頂部右邊;在網頁業務中具有搜索功能,但是搜索只是輔助功能,居中這么好個位置沒必要,放右邊看得見就行了。

4)頁面頂部左邊:頁面具有搜索功能方便用戶精準搜索到所需內容所以搜索框放在一進頁面的左邊切換位置。

2. 搜索框的大小

  1. 如果搜索框位置在頁面居中,那搜索功能也極其重要,那當然寬一點。
    比如上文提到的百度等搜索網頁。搜索框寬度通常固定在650px以內,保證在所有分辨率中都能顯示全。
  2. 如果搜索框位置在頂部居右,那搜索就是輔助功能,那當然短一點。
    具體寬度,需要考慮頂部UI布局情況。但一般不小于220px(大概數值,自己平衡),不然就不太方便輸入關鍵字了。
  3. 那如果搜索框位置在在頂部居中,則可長可短,根據業務情況和頁面布局判斷。

三、搜索框內容

1. 默認要顯示提示文字

在輸入框中可以提示搜索示例,告知網站支持哪些內容的搜索,以及如何使用功能。防止用戶一臉懵,優化用戶體驗。通常適用于內容類型較多的網站。

例如上面騰訊視頻就默認顯示的有提示文字,可以幫助用戶根據演員,片名或者導演來搜索到自己想看的影視劇。

例如上面在QQ音樂的搜索框中默認顯示的有提示文字,用戶就可以根據歌單,MV,音樂來精準搜索到自己喜歡的音樂或MV。

2. 搜索框內推薦詞

基于業務需要,搜索框內經常會有推薦詞,方便用戶不用輸入關鍵詞就可以直達結果。同時,也是一種對商品的促銷,對資訊的推廣。根據不同需要,可以有不同的顯示方式。

例如上面淘寶搜索框就會有最近比較火熱的商品名稱推薦,方便用戶快速找到的當季潮熱的商品,這樣的搜索框也是一種無形之中對于商品的一種推薦,增加促銷力度。

1)單個推薦詞交替顯示:例如上面是京東搜索框,大概3秒換一個推薦詞。因為商城就是挑選的。交替顯示的方式有利于用戶看到更多種類的物品。

2)多個推薦詞同時顯示:例如上面的是LexisNexis,全球頂級法律數據庫中國站。沒有和京東一樣,做單個推薦詞的動態交替顯示,是因為用戶場景不同。

因為LexisNexis的用戶都是律師群體,工作中時間寶貴。使用網站都是為了快速查詢數據,沒有時間等待。因此一次性顯示2-3個推薦詞,方便用戶直接看到核心分類類容,直接點擊。

四、搜索結果展示

觸發搜索之后,搜索框失去焦點,框內保留搜索關鍵詞,顯示多條搜索結果,每條搜索結果中對搜索的內容飄紅展示。如何能讓搜索結果更清晰的展示,讓用戶更快的找到所需,針對搜索結果的交互設計需要注意以下幾個問題:

1. 結果分類:篩選結果方式

將搜索到的結果進行分類處理,一般采用Tab的樣式進行歸類,如谷歌搜索“設計”,將搜索結果按照“全部”“圖片”“視頻”“新聞”“更多”等進行了分類。

2. 排序篩選:如何排序、篩選規則

排序與篩選的維度因產品性質而異,常見的排序方式有時間、價格、銷量、距離、好評等;篩選可以算做個性化的需求,不同產品間存在較大差異。排序和篩選的功能一般放置在搜索和結果之間,一是符合用戶的認知和使用習慣,再者便于用戶切換。尤其在電商類網站中,排序和篩選功能尤為重要,占到了首屏空間的三分之一。

3. 自動糾錯:用戶搜索詞出現錯別字

用戶在搜索時輸入了錯誤的詞匯,系統經過判斷后會展示正確詞匯的搜索結果給用戶,并友好的告知用戶正確的搜索方式。 特殊狀態包含無結果狀態、網絡不佳狀態等。

出現無結果的狀態可能是: 用戶輸入錯誤; 搜索結果無。 針對第一種情況,可以提示用戶正確的搜索方式,并自動幫用戶糾錯;對于第二種,需要有好的提示用戶無搜索結果,嘗試其他搜索方式或者更換關鍵詞等。

4. 特殊狀態:異常情況

五、搜索引擎

  • 目的:更全、更快、更準。更準是搜索引擎最關鍵的目標。
  • 本質:信息獲取方式。
  • 好的搜索引擎:好的搜索引擎要快、要查的準、搜索引擎要具有穩定性。

1. 搜索引擎搜索步驟—(分詞)

如果是一句英文,“Mike had a dog”,每個詞都是用空格分開的,里面有“Mike”、“had”、“a”’、“dog”、這四個單詞,但中文“麥克有一只狗”,因為沒有分隔符(比如:空格)把每個詞語分開,就有些麻煩了。 最容易想到的分詞方法就是查字典,把句子從左到右看一遍(程序員的說法叫做遍歷),每個詞語如果在字典中出現過就標記出來。

拿“麥克有一只小狗”舉例,比如:“麥克”這個詞在字典中出現過,就把“麥克”作為一個詞語,“有”在詞典中出現過,就把“有”作為一個詞語,就這樣一直做下去,最后可以分為“麥克、有、一只、狗”。 這種最簡單的方式可以解決一部分問題,但也有很大的問題,比如是“小”“狗”還是作為整體的“小狗”呢?程序員使用統計學解決這個問題:

2. 搜索引擎搜索步驟—(獲取關鍵詞)

所有的文本分詞之后會發現,“的”、“了”、“嗎”、“也許”等沒有很強實際意義的功能詞有很多,相比之下“產品經理”、“搜索引擎”等詞語更加具有實際意義的反而較少,后者更應該作為關鍵詞。 于是,我們使用把所有這些功能詞存起來,作為停用詞(stop word),如果一個詞語出現在停用詞中,就不能作為關鍵詞。

于是,我們就從分詞結果中,獲得了關鍵詞。 下面是一個簡單的停用詞表,可能看出,基本都是我們經常使用的、沒有很強實際意義的詞語。

3. 搜索引擎搜索步驟—(獲取關鍵詞)

中文分詞是幾乎所有中文自然語言處理(Natural Language Processing)的基礎,所以學術界和產業界對中文分詞的技術研究已經很深入了,有高質量的商用分詞庫,也有像jieba這樣的開源中文分詞庫,可以免費使用。

通過提取每個網頁的關鍵詞,最終每個網頁和關鍵詞的對應關系如下:需要注意的是:獲取關鍵詞不僅用在網頁處理,而且也用在輸入搜索框中。當我們搜索一句中文的時候,搜索引擎內部會進行分詞、去掉停用詞,獲得關鍵詞,之后再進行后續處理。

4. 搜索引擎搜索步驟—(倒排索引)

現在,我們已經建立好了索引,對于每一個網頁,我們找到了出現的所有關鍵詞。 當用戶查詢時,我們從頭到尾,對每一篇文件掃描一遍,看哪個網頁出現了用戶查詢的關鍵詞,就把這個文件作為搜索結果。

但問題是:網頁數量太多,從頭到尾掃描一次就要花好長時間,根本無法滿足正常的需求,更別說快速響應了。

所以我們可以思考:能不能把關鍵詞放前面,網頁放后面? 這樣,當我們檢索的關鍵詞的時候,不需要遍歷整個系統,只用查找對應的幾個關鍵詞,就可以找到需要的網頁了!

這樣一來用戶搜索“關鍵詞1+關鍵詞2”,那么搜索引擎需要找到“網頁1,網頁2,網頁5,……網頁N”,“網頁3,網頁4,網頁5,……網頁M”,找到同時出現的“網頁3、網頁5,……”。這樣就大大加快了呈現排名的速度。

本文從搜索框的基本元素,位置以及內容介紹了搜索框的構成和特征,后面從搜索的引擎以及搜索結果的介紹展示了搜索框的搜索中與搜索后的交互結果呈現,希望能夠幫助到大家。

 

本文由 @隔壁老王講產品 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 通俗易懂

    來自江蘇 回復
  2. 看的十篇與搜索相關的文章里質量比較好的一篇。

    來自美國 回復
  3. 講解的很清晰

    來自廣東 回復