搜索框的設(shè)計(jì)
編輯導(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. 搜索框的大小
- 如果搜索框位置在頁面居中,那搜索功能也極其重要,那當(dāng)然寬一點(diǎn)。
比如上文提到的百度等搜索網(wǎng)頁。搜索框?qū)挾韧ǔ9潭ㄔ?50px以內(nèi),保證在所有分辨率中都能顯示全。 - 如果搜索框位置在頂部居右,那搜索就是輔助功能,那當(dāng)然短一點(diǎn)。
具體寬度,需要考慮頂部UI布局情況。但一般不小于220px(大概數(shù)值,自己平衡),不然就不太方便輸入關(guān)鍵字了。 - 那如果搜索框位置在在頂部居中,則可長可短,根據(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é)議。
通俗易懂
看的十篇與搜索相關(guān)的文章里質(zhì)量比較好的一篇。
講解的很清晰