編輯導(dǎo)語：搜索是每一個(gè)APP應(yīng)用基本都具備的功能，搜索框的設(shè)計(jì)也直接影響到用戶的體驗(yàn)感和留存率等。本文作者介紹了有關(guān)搜索框設(shè)計(jì)的相關(guān)內(nèi)容，從搜索框的設(shè)計(jì)元素、功能、內(nèi)容、結(jié)果展示、搜索引擎等展開分析，一起來學(xué)習(xí)一下吧。

搜索是用戶常使用的功能，搜索框設(shè)計(jì)的好壞關(guān)系到用戶的搜索展示、用戶的產(chǎn)品體驗(yàn)等，因此搜索框雖然看起來簡單，但其設(shè)計(jì)依然不容小覷。

一、搜索框的設(shè)計(jì)元素

主要為:搜索框、搜索圖標(biāo)、搜索文字內(nèi)容

二、搜索框的功能

對(duì)用戶：用戶可以通過他快速精準(zhǔn)的找到自己需要的東西（內(nèi)容），提高轉(zhuǎn)換率。能讓用戶點(diǎn)擊的，就不要讓用戶進(jìn)行輸入

對(duì)產(chǎn)品本身：我們可以針對(duì)用戶的搜索軌跡進(jìn)行相應(yīng)功能或者模塊上的優(yōu)化，尤其像電商產(chǎn)品，用戶搜索的數(shù)據(jù)非常重要。

1. 搜索框的位置

目前大部分網(wǎng)站在布局搜索框位置時(shí)，大致遵循以下幾個(gè)規(guī)則：

1）頁面居中：搜索功能對(duì)于頁面來說是核心功能。如果沒有搜索功能的話，業(yè)務(wù)幾乎無法開展。它最最最重要啦！一般多用于搜索平臺(tái)。

2）頁面頂部居中：因?yàn)榫W(wǎng)站業(yè)務(wù)中，搜索是重要功能，但不是全部。不用夸大顯示，但頂部的居中好位置要留給它。一般適用于電商平臺(tái)、資訊平臺(tái)。

3）頁面頂部右邊；在網(wǎng)頁業(yè)務(wù)中具有搜索功能，但是搜索只是輔助功能，居中這么好個(gè)位置沒必要，放右邊看得見就行了。

4）頁面頂部左邊：頁面具有搜索功能方便用戶精準(zhǔn)搜索到所需內(nèi)容所以搜索框放在一進(jìn)頁面的左邊切換位置。

2. 搜索框的大小

1. 如果搜索框位置在頁面居中，那搜索功能也極其重要，那當(dāng)然寬一點(diǎn)。
   比如上文提到的百度等搜索網(wǎng)頁。搜索框?qū)挾韧ǔ９潭ㄔ?50px以內(nèi)，保證在所有分辨率中都能顯示全。
2. 如果搜索框位置在頂部居右，那搜索就是輔助功能，那當(dāng)然短一點(diǎn)。
   具體寬度，需要考慮頂部UI布局情況。但一般不小于220px（大概數(shù)值，自己平衡），不然就不太方便輸入關(guān)鍵字了。
3. 那如果搜索框位置在在頂部居中，則可長可短，根據(jù)業(yè)務(wù)情況和頁面布局判斷。

三、搜索框內(nèi)容

1. 默認(rèn)要顯示提示文字

在輸入框中可以提示搜索示例，告知網(wǎng)站支持哪些內(nèi)容的搜索，以及如何使用功能。防止用戶一臉懵，優(yōu)化用戶體驗(yàn)。通常適用于內(nèi)容類型較多的網(wǎng)站。

例如上面騰訊視頻就默認(rèn)顯示的有提示文字，可以幫助用戶根據(jù)演員，片名或者導(dǎo)演來搜索到自己想看的影視劇。

例如上面在QQ音樂的搜索框中默認(rèn)顯示的有提示文字，用戶就可以根據(jù)歌單，MV，音樂來精準(zhǔn)搜索到自己喜歡的音樂或MV。

2. 搜索框內(nèi)推薦詞

基于業(yè)務(wù)需要，搜索框內(nèi)經(jīng)常會(huì)有推薦詞，方便用戶不用輸入關(guān)鍵詞就可以直達(dá)結(jié)果。同時(shí)，也是一種對(duì)商品的促銷，對(duì)資訊的推廣。根據(jù)不同需要，可以有不同的顯示方式。

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

1）單個(gè)推薦詞交替顯示：例如上面是京東搜索框，大概3秒換一個(gè)推薦詞。因?yàn)樯坛蔷褪翘暨x的。交替顯示的方式有利于用戶看到更多種類的物品。

2）多個(gè)推薦詞同時(shí)顯示：例如上面的是LexisNexis，全球頂級(jí)法律數(shù)據(jù)庫中國站。沒有和京東一樣，做單個(gè)推薦詞的動(dòng)態(tài)交替顯示，是因?yàn)橛脩魣?chǎng)景不同。

因?yàn)長exisNexis的用戶都是律師群體，工作中時(shí)間寶貴。使用網(wǎng)站都是為了快速查詢數(shù)據(jù)，沒有時(shí)間等待。因此一次性顯示2-3個(gè)推薦詞，方便用戶直接看到核心分類類容，直接點(diǎn)擊。

四、搜索結(jié)果展示

觸發(fā)搜索之后，搜索框失去焦點(diǎn)，框內(nèi)保留搜索關(guān)鍵詞，顯示多條搜索結(jié)果，每條搜索結(jié)果中對(duì)搜索的內(nèi)容飄紅展示。如何能讓搜索結(jié)果更清晰的展示，讓用戶更快的找到所需，針對(duì)搜索結(jié)果的交互設(shè)計(jì)需要注意以下幾個(gè)問題：

1. 結(jié)果分類：篩選結(jié)果方式

將搜索到的結(jié)果進(jìn)行分類處理，一般采用Tab的樣式進(jìn)行歸類，如谷歌搜索“設(shè)計(jì)”，將搜索結(jié)果按照“全部”“圖片”“視頻”“新聞”“更多”等進(jìn)行了分類。

2. 排序篩選：如何排序、篩選規(guī)則

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

3. 自動(dòng)糾錯(cuò)：用戶搜索詞出現(xiàn)錯(cuò)別字

用戶在搜索時(shí)輸入了錯(cuò)誤的詞匯，系統(tǒng)經(jīng)過判斷后會(huì)展示正確詞匯的搜索結(jié)果給用戶，并友好的告知用戶正確的搜索方式。 特殊狀態(tài)包含無結(jié)果狀態(tài)、網(wǎng)絡(luò)不佳狀態(tài)等。

出現(xiàn)無結(jié)果的狀態(tài)可能是： 用戶輸入錯(cuò)誤； 搜索結(jié)果無。 針對(duì)第一種情況，可以提示用戶正確的搜索方式，并自動(dòng)幫用戶糾錯(cuò)；對(duì)于第二種，需要有好的提示用戶無搜索結(jié)果，嘗試其他搜索方式或者更換關(guān)鍵詞等。

4. 特殊狀態(tài)：異常情況

五、搜索引擎

• 目的：更全、更快、更準(zhǔn)。更準(zhǔn)是搜索引擎最關(guān)鍵的目標(biāo)。
• 本質(zhì)：信息獲取方式。
• 好的搜索引擎：好的搜索引擎要快、要查的準(zhǔn)、搜索引擎要具有穩(wěn)定性。

1. 搜索引擎搜索步驟—（分詞）

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

拿“麥克有一只小狗”舉例，比如：“麥克”這個(gè)詞在字典中出現(xiàn)過，就把“麥克”作為一個(gè)詞語，“有”在詞典中出現(xiàn)過，就把“有”作為一個(gè)詞語，就這樣一直做下去，最后可以分為“麥克、有、一只、狗”。 這種最簡單的方式可以解決一部分問題，但也有很大的問題，比如是“小”“狗”還是作為整體的“小狗”呢？程序員使用統(tǒng)計(jì)學(xué)解決這個(gè)問題：

2. 搜索引擎搜索步驟—（獲取關(guān)鍵詞）

所有的文本分詞之后會(huì)發(fā)現(xiàn)，“的”、“了”、“嗎”、“也許”等沒有很強(qiáng)實(shí)際意義的功能詞有很多，相比之下“產(chǎn)品經(jīng)理”、“搜索引擎”等詞語更加具有實(shí)際意義的反而較少，后者更應(yīng)該作為關(guān)鍵詞。 于是，我們使用把所有這些功能詞存起來，作為停用詞（stop word），如果一個(gè)詞語出現(xiàn)在停用詞中，就不能作為關(guān)鍵詞。

于是，我們就從分詞結(jié)果中，獲得了關(guān)鍵詞。 下面是一個(gè)簡單的停用詞表，可能看出，基本都是我們經(jīng)常使用的、沒有很強(qiáng)實(shí)際意義的詞語。

3. 搜索引擎搜索步驟—（獲取關(guān)鍵詞）

中文分詞是幾乎所有中文自然語言處理（Natural Language Processing）的基礎(chǔ)，所以學(xué)術(shù)界和產(chǎn)業(yè)界對(duì)中文分詞的技術(shù)研究已經(jīng)很深入了，有高質(zhì)量的商用分詞庫，也有像jieba這樣的開源中文分詞庫，可以免費(fèi)使用。

通過提取每個(gè)網(wǎng)頁的關(guān)鍵詞，最終每個(gè)網(wǎng)頁和關(guān)鍵詞的對(duì)應(yīng)關(guān)系如下：需要注意的是：獲取關(guān)鍵詞不僅用在網(wǎng)頁處理，而且也用在輸入搜索框中。當(dāng)我們搜索一句中文的時(shí)候，搜索引擎內(nèi)部會(huì)進(jìn)行分詞、去掉停用詞，獲得關(guān)鍵詞，之后再進(jìn)行后續(xù)處理。

4. 搜索引擎搜索步驟—（倒排索引）

現(xiàn)在，我們已經(jīng)建立好了索引，對(duì)于每一個(gè)網(wǎng)頁，我們找到了出現(xiàn)的所有關(guān)鍵詞。 當(dāng)用戶查詢時(shí)，我們從頭到尾，對(duì)每一篇文件掃描一遍，看哪個(gè)網(wǎng)頁出現(xiàn)了用戶查詢的關(guān)鍵詞，就把這個(gè)文件作為搜索結(jié)果。

但問題是：網(wǎng)頁數(shù)量太多，從頭到尾掃描一次就要花好長時(shí)間，根本無法滿足正常的需求，更別說快速響應(yīng)了。

所以我們可以思考：能不能把關(guān)鍵詞放前面，網(wǎng)頁放后面？ 這樣，當(dāng)我們檢索的關(guān)鍵詞的時(shí)候，不需要遍歷整個(gè)系統(tǒng)，只用查找對(duì)應(yīng)的幾個(gè)關(guān)鍵詞，就可以找到需要的網(wǎng)頁了！

這樣一來用戶搜索“關(guān)鍵詞1+關(guān)鍵詞2”，那么搜索引擎需要找到“網(wǎng)頁1，網(wǎng)頁2，網(wǎng)頁5，……網(wǎng)頁N”，“網(wǎng)頁3，網(wǎng)頁4，網(wǎng)頁5，……網(wǎng)頁M”，找到同時(shí)出現(xiàn)的“網(wǎng)頁3、網(wǎng)頁5，……”。這樣就大大加快了呈現(xiàn)排名的速度。

本文從搜索框的基本元素，位置以及內(nèi)容介紹了搜索框的構(gòu)成和特征，后面從搜索的引擎以及搜索結(jié)果的介紹展示了搜索框的搜索中與搜索后的交互結(jié)果呈現(xiàn)，希望能夠幫助到大家。

本文由 @隔壁老王講產(chǎn)品 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。