“搜索功能”拆解:小功能,大細節(jié)
本文對于搜索功能進行了拆解和細化,一起來看看吧~
“這有個搜索功能要加一下,樣式我給你?!?/p>
“好。”
“這搜索框連個提示也沒有怎么搜?歷史記錄呢?模糊匹配呢?還有…..balabala”
“你也沒說??!”
——來自設(shè)計獅與程序猿的日常
搜索作為大部分互聯(lián)網(wǎng)產(chǎn)品都具備的功能,直接影響著產(chǎn)品的用戶體驗。在進行搜索功能的設(shè)計時要以簡單、高效為核心目標,每一步的細節(jié)設(shè)計都要反復(fù)驗證是否脫離了需求和核心目標。
根據(jù)搜索的行為,可將其拆分為五步:搜索入口-搜索觸發(fā)-內(nèi)容輸入-點擊搜索-反饋結(jié)果。
一、搜索入口
搜索入口具有提示和引導(dǎo)操作的作用,主要類型有四種:主頁搜索、搜索框、多條件搜索、搜索icon。
1. 主頁搜索
將搜索作為獨立的頁面,以搜索為導(dǎo)向,整個產(chǎn)品的使用圍繞搜索這一核心功能功能展開。比較典型的如百度、谷歌等,搜索框功能強大,用戶可以進行各種嘗試。谷歌主頁中的手氣不錯以及百度搜索的個性化推薦和新聞,為產(chǎn)品引進更多的流量,增加了用戶黏性。
2. 搜索框
這種是在網(wǎng)頁中最為常見的,應(yīng)用也最廣泛,大多居于頁面內(nèi)容區(qū)域的上方,有的出于節(jié)省空間和搜索需求的考量,也內(nèi)嵌在導(dǎo)航欄中。搜索框內(nèi)會有文字的提示,提示用戶搜索的方式,還有一些產(chǎn)品在搜索框內(nèi)放置當前的熱詞、活動、新功能等,將搜索框做成了運營的入口。
搜索框的后面一般會伴有搜索按鈕或放大鏡的icon,可點擊按鈕和鍵盤回車進行搜索。在頁面滑動時,搜索框一般會固定在頁面的頂端,用以提示用戶目前搜索內(nèi)容,同時也方便重新搜索。
3. 多條件搜索
多條件搜索的方式常見于旅游、出行類的網(wǎng)站,如貓途鷹、攜程、東方航空等,需要輸入時間、地點、人員等信息,單一的搜索框不能滿足用戶的需求,多條件的搜索框一般置于頁面中較醒目的位置,引導(dǎo)用戶操作。
4. 搜索icon
頁面中僅僅展示搜索的icon,一般放在頁面的導(dǎo)航欄中偏右側(cè)的位置,點擊icon會拉出搜索框,典型的如站酷、UI中國等,還有的點擊icon會在頁面中喚醒搜索功能,如Behance。
搜索icon的形式雖然可以節(jié)約導(dǎo)航欄的空間,但相對搜索框來說對用戶的引導(dǎo)性較差,因此比較適合以搜索為輔助功能的產(chǎn)品。
二、搜索觸發(fā)
1. 搜索框觸
點擊搜索框或搜索icon,呈激活狀態(tài),光標在框內(nèi)閃動,引導(dǎo)信息淡化或消失;有的搜索框還會伴隨彈出輔助區(qū)域,區(qū)域內(nèi)包含熱詞、搜索歷史等信息,典型如騰訊視頻、淘寶等。
2.?搜索形式
第一種是有搜索/確定按鈕或icon的搜索框,用戶輸入完成后可點擊按鈕進行搜索,也可點擊鍵盤回車搜索;另一種是無搜索按鈕的搜索框,用戶需鍵盤回車搜索。
在網(wǎng)頁設(shè)計中,第一種應(yīng)用比較廣泛,第二種國外網(wǎng)站應(yīng)用較多,如dribbble等。還有一些搜索框內(nèi)添加了拍照、上傳圖片、語音輸入等功能,使得搜索方式更加多元化。
3. 輔助區(qū)域
輔助區(qū)域的信息主要有熱詞推薦和歷史記錄,用以提高搜索的效率和作為推廣的入口。
熱詞推薦:熱詞推薦主要為當前時段內(nèi)比較熱點的詞匯或產(chǎn)品的新功能,能夠為產(chǎn)品帶來流量導(dǎo)入和收益,如電商類網(wǎng)頁中的熱詞一般為新產(chǎn)品或高銷量產(chǎn)品,視頻類網(wǎng)站的搜索熱詞一般為最新視頻或點擊量較高的影視劇。
歷史記錄:歷史記錄能夠在用戶重復(fù)搜索時提高效率,一般會在數(shù)目上做限制,騰訊視頻的歷史記錄最多展示10條,百度搜索最多展示9條,由于受頁面空間和時效性的限制,盡量不要展示10條以上。此外,考慮到用戶隱私的問題,歷史記錄還需要支持刪除。
隨著用戶體驗的不斷優(yōu)化,歷史記錄衍生出了收藏、訂閱、關(guān)注等功能,讓用戶免于搜索,可持續(xù)接收關(guān)注的內(nèi)容。
三、內(nèi)容輸入
1. 輸入觸發(fā)的交互
輸入內(nèi)容時,引導(dǎo)信息消失,有的還會伴隨在搜索框中出現(xiàn)清除的icon,清除的icon主要方便用戶進行二次搜索時一鍵清空當前信息,省去了逐字刪除的麻煩;根據(jù)輸入內(nèi)容,進行關(guān)鍵詞的匹配。
匹配形式一般有兩種,一種是正常的關(guān)鍵詞匹配,按照一定的規(guī)則進行推薦并排序;還有一種是包含歷史記錄的匹配,會將包含關(guān)鍵詞的歷史記錄置頂,與正常的匹配做區(qū)別并支持刪除(如淘寶)。
2. 關(guān)鍵詞匹配的作用?
關(guān)鍵詞匹配的作用主要有三個:引導(dǎo)、糾錯和高效。
- 引導(dǎo):在用戶無法準確記憶搜索的名稱時,關(guān)鍵詞可以作為引導(dǎo),幫助用戶完成搜索;
- 糾錯:減少用戶輸入的錯誤,會自動在匹配區(qū)域更正;
- 高效:用戶直接點擊匹配出的結(jié)果,減少輸入,提高搜索效率。
3. 關(guān)鍵詞匹配的條數(shù)
各產(chǎn)品匹配條數(shù)上限不一致,淘寶為10條,愛奇藝為10條,一般來說不會超過10條,過多的選擇會給用戶造成記憶負擔,并且占據(jù)空間,有損用戶體驗。
四、點擊搜索
點擊搜索一般有兩種機制:
- 一種是輸入完成后,點擊搜索按鈕、鍵盤回車進行搜索;
- 一種是邊輸入邊顯示搜索結(jié)果,每輸入一個字符即進行一次數(shù)據(jù)檢索并將結(jié)果展示出來,這種搜索方式也被稱為“即時搜索”。
即時搜索的方式簡化了搜索的操作路徑,更快的引導(dǎo)用戶查詢到結(jié)果,能夠給用戶帶來良好的體驗。
但即時搜索對服務(wù)器的運算能力要求較高,如果服務(wù)器運算能力跟不上,會出現(xiàn)較長時間的等待,有損用戶體驗,因此這種搜索機制在產(chǎn)品中并不多見。
五、反饋結(jié)果
觸發(fā)搜索之后,搜索框失去焦點,框內(nèi)保留搜索關(guān)鍵詞,顯示多條搜索結(jié)果,每條搜索結(jié)果中對搜索的內(nèi)容飄紅展示。如何能讓搜索結(jié)果更清晰的展示,讓用戶更快的找到所需,針對搜索結(jié)果的交互設(shè)計需要注意以下幾個問題:
1. 結(jié)果分類
將搜索到的結(jié)果進行分類處理,一般采用Tab的樣式進行歸類,如谷歌搜索“設(shè)計”,將搜索結(jié)果按照“全部”“圖片”“視頻”“新聞”“更多”等進行了分類。
2. 排序篩選
排序與篩選的維度因產(chǎn)品性質(zhì)而異,常見的排序方式有時間、價格、銷量、距離、好評等;篩選可以算做個性化的需求,不同產(chǎn)品間存在較大差異。排序和篩選的功能一般放置在搜索和結(jié)果之間,一是符合用戶的認知和使用習慣,再者便于用戶切換。尤其在電商類網(wǎng)站中,排序和篩選功能尤為重要,占到了首屏空間的三分之一。
3.?自動糾錯
用戶在搜索時輸入了錯誤的詞匯,系統(tǒng)經(jīng)過判斷后會展示正確詞匯的搜索結(jié)果給用戶,并友好的告知用戶正確的搜索方式。
4.?特殊狀態(tài)
特殊狀態(tài)包含無結(jié)果狀態(tài)、網(wǎng)絡(luò)不佳狀態(tài)等。
出現(xiàn)無結(jié)果的狀態(tài)可能是:
- 用戶輸入錯誤;
- 搜索結(jié)果無。
針對第一種情況,可以提示用戶正確的搜索方式,并自動幫用戶糾錯;對于第二種,需要有好的提示用戶無搜索結(jié)果,嘗試其他搜索方式或者更換關(guān)鍵詞等。
六、結(jié)語
以上對于搜索功能進行了拆解和細化,設(shè)計師在進行搜索功能要根據(jù)產(chǎn)品的定位以及目標用戶、應(yīng)用場景、業(yè)務(wù)需求等因素進行設(shè)計,仔細推敲交互的每一個細節(jié),提升產(chǎn)品的用戶體驗。
本文由 @墨白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Pexels ,基于 CC0 協(xié)議
搜索框加入廣告是否竭澤而漁呢?有沒有ab測試測過搜索框廣告給APP帶來的長時間的影響?我明明要搜個東西,結(jié)果大概搜索框就被廣告詞給干擾了。我會不會直接把APP卸了呢?現(xiàn)在2024年,用戶是否對廣告的容忍性降低了呢?
很有幫助,寫的很細,謝謝分享~
寫的很詳細,很贊,按照搜索的流程把需要注意的點都寫出來了。建議補充幾個點,搜索的邊界范圍;搜索結(jié)果展示區(qū)規(guī)則,即標紅規(guī)則,動態(tài)排序規(guī)則等。 ??
?? 多謝指導(dǎo)
交互流程寫得挺細致。
如果能補充交互背后的處理邏輯會更全面!
挺棒的,感謝分享。
搜索的邊界范圍是何意?
贊
??
??
多謝捧場,繼續(xù)加油
有沒有公眾號阿 ,想關(guān)注。
UED_family 歡迎關(guān)注,起步階段