App搜索功能探析(附原型模板)

2 評(píng)論 26374 瀏覽 198 收藏 16 分鐘

說到一個(gè)應(yīng)用的搜索功能,大家是否立刻會(huì)想到一個(gè)放大鏡的圖標(biāo)和一個(gè)矩形輸入框?搜索功能在眾多app里都占據(jù)一個(gè)或重或輕的位置,為了充分利用到產(chǎn)品中的資源,讓用戶能夠快速準(zhǔn)確地找到目標(biāo)信息,搜索功能就顯得很有必要。但是不同類別的APP,不同的使用場(chǎng)景下,搜索功能的設(shè)計(jì)以及搜索結(jié)果的呈現(xiàn)也有所不同。今天我們就從搜索前后分別來分析app的搜索功能~

搜索入口

輸入搜索內(nèi)容前,我們可以看到的是搜索入口的設(shè)計(jì)。從入口的設(shè)計(jì)來看,大體有如下幾種:

  • 獨(dú)立的一級(jí)tab,將一級(jí)界面作為獨(dú)立搜索頁面的形式;
  • 頂欄為搜索欄,搜索輸入框直接呈現(xiàn)的形式;
  • 呈現(xiàn)一個(gè)在頂欄的icon按鈕點(diǎn)擊展開的形式;
  • 下拉后展現(xiàn)搜索欄,非固定展現(xiàn)形式。

如下圖:

以上面的截圖為例分析,獨(dú)立的一級(jí)tab體現(xiàn)搜索功能在app中級(jí)別相對(duì)較高,搜索功能相對(duì)重要;

搜索欄置頂存在,相較于第一種來說搜索功能層級(jí)更低,但也能方便用戶不論是在瀏覽過程或是切換tab時(shí)都隨時(shí)進(jìn)行搜索操作,用戶在使用app的過程中,如果沒有即時(shí)能夠進(jìn)行的操作,易降低用戶依賴度;

對(duì)于入口僅為一個(gè)icon按鈕的情況下,減少了導(dǎo)航欄占用,但相對(duì)地也弱化了搜索功能。嗶哩嗶哩的視頻大多由用戶自己上傳,即使是上線了最新官方內(nèi)容,對(duì)于用戶來說想要瀏覽的新內(nèi)容都是未知的,既然依賴于推送,自然搜索功能也就相對(duì)弱化;

通過下拉手勢(shì)展示的搜索框,可能表示該app較為弱化了搜索功能,對(duì)于多數(shù)用戶來說下拉手勢(shì)屬于習(xí)慣性手勢(shì)之一,由于用戶的習(xí)慣性下拉操作,搜索欄在不占用頂欄的狀態(tài)下也能讓用戶立刻找到。

搜索方式

1. 文字搜索

從搜索方式來看,搜索功能呈現(xiàn)出的形式越來越豐富。最基礎(chǔ)最常見的就是文字搜索。但是豐富的其他形式也是作為一種搜索的輔助功能,引導(dǎo)用戶在搜索上獲得更便捷更高效的體驗(yàn)。

搜索時(shí),直接輸入文字,搜索到與輸入文字相關(guān)的信息。大多app都有采用邊輸入邊聯(lián)想的輸入模式,這樣可以提高搜索效率,作為輔助搜索時(shí)獲得信息更加快捷。

如下圖:

淘寶的輔助多重篩選搜索,輸入時(shí)展現(xiàn)的一系列聯(lián)想內(nèi)容,點(diǎn)擊右邊的一個(gè)拓展icon,就可以采用聯(lián)想出的內(nèi)容,在此基礎(chǔ)上繼續(xù)縮小范圍篩選,從而幫助用戶獲得最接近需求的內(nèi)容。如下圖↓

點(diǎn)擊這里查看示例→?xiaopiu-淘寶多重篩選示例

當(dāng)應(yīng)用里的內(nèi)容涉及的類別較多、范圍較為廣泛,為了搜索出的內(nèi)容更加準(zhǔn)確,減少用戶在眾多相似的搜索結(jié)果中選擇內(nèi)容時(shí)的干擾,可采用分類標(biāo)簽的方式便于用戶搜索。這種主要適用于用戶已知需要搜索的內(nèi)容的類別,縮小搜索范圍。如下圖:

對(duì)于用來獲得最新資訊、熱門、新聞等的應(yīng)用,針對(duì)無目的性瀏覽搜索和對(duì)要搜的內(nèi)容并沒有多少了解的用戶,目的就是為了讓他們了解到這些內(nèi)容,所以熱搜標(biāo)簽會(huì)是一個(gè)很常見且高效的選擇。這種提供降低了用戶搜索成本,提供了搜索建議,在一定程度上還可以進(jìn)行運(yùn)營(yíng)推廣。如下圖:

按歷史搜索的出現(xiàn)給在搜索后臨時(shí)退出app或要再次搜索之前搜索過的內(nèi)容的用戶提高了搜索效率。

多數(shù)用戶會(huì)在重新輸入一次搜索過的內(nèi)容的時(shí)候失去部分耐心,因而降低用戶體驗(yàn)。

舉一個(gè)例子,買完火車票以后查看發(fā)車時(shí)間,如果每次回去查看都要重新輸入,就會(huì)產(chǎn)生厭煩情緒。

在影視類app中,歷史搜索使得用戶能快速進(jìn)入上次觀看的影視內(nèi)容,在購物類App中,歷史搜索則使得對(duì)上次的購物滿意的用戶更快找到之前的店鋪,降低思考成本。如下圖:

2. 語音搜索

除了文字搜索,語音搜索的發(fā)展也逐漸在改變?nèi)藗兊氖褂梅绞?。?duì)于中老年人來說,語音搜索比文字搜索方便得多,他們使用智能機(jī)時(shí)不用再努力特意去學(xué)習(xí)打字,只要點(diǎn)擊一個(gè)按鈕就可以輕松輸入他們想要的內(nèi)容。而對(duì)于年輕人來說,雖然打字是件簡(jiǎn)單的事情,但是隨著大多數(shù)的年輕人且越來越多在走路時(shí)也玩手機(jī)的趨勢(shì)來看,語音搜索對(duì)于他們來說也是個(gè)十分便利的選擇,如同語音聊天一樣,人們會(huì)漸漸對(duì)語音輸入產(chǎn)生依賴。如下圖:

聽歌識(shí)曲出現(xiàn)在多數(shù)音樂類app,年輕人喜歡聽音樂,也喜歡在咖啡店或者走路時(shí)享受聽音樂的樂趣,還有在即時(shí)聽到音樂的時(shí)候想要立刻獲得歌曲信息,這時(shí)候文字搜索就顯得十分局限,讓用戶點(diǎn)開app就能直接根據(jù)歌曲片段搜索到該首歌曲,這便讓用戶體驗(yàn)達(dá)到絕佳效果,因此多數(shù)音樂類app會(huì)直接將聽歌識(shí)曲放置在首頁做成一個(gè)二級(jí)界面。如下圖↓

點(diǎn)擊這里查看示例→?xiaopiu-聽歌識(shí)曲示例

部分音樂類app還針對(duì)一些場(chǎng)合做了些語音搜索上的優(yōu)化,比如哼歌識(shí)曲。對(duì)于沒能及時(shí)聽歌識(shí)曲,沒有記住歌詞,突然想要找回以前聽過的已經(jīng)不記得名字和歌詞的歌之類的情況,哼歌識(shí)曲就提高了搜索到用戶想要的內(nèi)容的可能。如下圖:

3. 圖像搜索

圖像搜索也是一個(gè)便利的搜索方式。較為基礎(chǔ)的是大家很熟悉的「以圖搜圖」,既可以當(dāng)即拍照,也可以點(diǎn)擊左下角上傳圖片進(jìn)行識(shí)別。對(duì)于沒有二維碼和條形碼的物品,如何快速搜索到并購買該物品呢?有時(shí)候在商場(chǎng)看到一件衣服,覺得價(jià)格太昂貴,或是看見其他人買了一個(gè)非常喜歡的東西,也想買一個(gè)同款,卻又很難只根據(jù)顏色和表達(dá)不出的款式風(fēng)格搜到最相近的物品。當(dāng)場(chǎng)拍下物品的照片以后,用「以圖搜圖」模式搜索,識(shí)別出與拍攝物品相似的物品。如下圖:

AR掃又是「以圖搜圖」的一個(gè)優(yōu)化,直接掃描即可識(shí)別物品,減少了用戶拍照又上傳的操作成本,如下圖:

搜索結(jié)果

從搜索結(jié)果看,又有許多不同形式的功能展現(xiàn)。搜索結(jié)果可能有純文字列表的展示、文字加圖片的展示、以及按分類顯示的展示。以網(wǎng)易云音樂為例,純文字的展示對(duì)于搜索結(jié)果來說已經(jīng)是較為主要且明顯的內(nèi)容,顯示出圖片沒有其他明顯的作用。而對(duì)于購物類app,物品的展示圖片就顯得相對(duì)重要,用戶會(huì)根據(jù)物品的樣圖來決定想要查看的內(nèi)容。對(duì)于微信來說,微信并不是專門為用戶想看的資訊內(nèi)容而生,用微信搜索的用戶可能是因?yàn)榻谠谖⑿拍程幙吹降哪硞€(gè)內(nèi)容相關(guān),但是突然忘記來源究竟是小程序還是朋友圈,展現(xiàn)的內(nèi)容就按分類羅列,搜索不局限在某個(gè)區(qū)域內(nèi)。如下圖:

搜索結(jié)果還可以以其他形式展現(xiàn)。以大眾點(diǎn)評(píng)為例,在給根據(jù)地圖搜索附近商店可以給用戶直觀地展現(xiàn),根據(jù)遠(yuǎn)近和路線決定目的地。如下圖:

點(diǎn)擊這里查看示例→?xiaopiu-地圖位置搜索示例

除了搜索結(jié)果的展現(xiàn)形式不同外,還有搜索結(jié)果提供的可操作功能的不同。搜索范圍可以是精確搜索,也可以是模糊搜索。模糊搜索比精確搜索的范圍更廣,對(duì)比精確搜索的準(zhǔn)確度偏低。精確搜索無法識(shí)別其中的關(guān)鍵字而給出相關(guān)結(jié)果,而是將搜索詞條整個(gè)作為整體進(jìn)行的搜索,相對(duì)模糊搜索而言較為局限。如下圖:

根據(jù)搜索的結(jié)果的范圍度可進(jìn)行分類篩選,為了讓搜索結(jié)果縮小范圍,搜索更精確,如下圖:

搜索功能中搜索的內(nèi)容也可以不局限于搜索的標(biāo)題和一級(jí)展示內(nèi)容,可能根據(jù)搜索的結(jié)果中的部分內(nèi)容而得出與之相關(guān)的結(jié)果搜索。在音樂類app中較為常見是根據(jù)歌詞搜索歌名,很多歌曲可能忘記歌名只會(huì)哼唱一兩句歌詞,比起書或文章來說,歌曲的歌詞內(nèi)容較少,因此根據(jù)歌曲內(nèi)容搜索也容易實(shí)現(xiàn)。

如下圖:

在影視類app里比較常見還有一種功能,在搜索結(jié)果項(xiàng)中給出可進(jìn)一步操作的按鈕。由于搜索出的結(jié)果項(xiàng)較少,搜索到的內(nèi)容較為專一,直接操作對(duì)用戶來說減少了操作成本。不同于淘寶之類的購物類app,這類app因?yàn)樾枰榭锤嗌唐吩斍樵僮鲑徺I決定,而類似影視類app則搜到的內(nèi)容基本符合用戶需求,所以搜索的結(jié)果項(xiàng)放置可操作按鈕。如下圖:

點(diǎn)擊這里查看示例→?xiaopiu搜索結(jié)果點(diǎn)擊直接播放示例

總結(jié)

根據(jù)app的特性和用戶需求分析,考慮用戶在搜索時(shí)需要的搜索方式,不同app采用不同的搜索功能設(shè)計(jì),可以提升用戶體驗(yàn)。

根據(jù)用戶需求,一步步優(yōu)化和改善,從最基礎(chǔ)的文字搜索,考慮無法滿足在文字搜索上的用戶需求,在合適的時(shí)候輔助以聲音和圖像搜索。

在圖像搜索和語音搜索上進(jìn)一步改善做出新的搜索優(yōu)化,正如淘寶這樣的app,從文字搜索到掃一掃,再到拍立淘,甚至復(fù)制粘貼淘口令,已經(jīng)漸漸把淘寶里的搜索體系完善了。

搜索并不是只局限在一個(gè)放大鏡圖標(biāo)和一個(gè)輸入框上,先仔細(xì)考慮本身產(chǎn)品的內(nèi)容特性和不同使用場(chǎng)景,再來決定搜索功能對(duì)于該產(chǎn)品的重要性及分類以及搜索結(jié)果呈現(xiàn)等其它設(shè)計(jì)。

附上搜索功能的頁面原型以供預(yù)覽和下載:xiaopiu-在線APP原型設(shè)計(jì)-app搜索功能示例

(下圖為部分app搜索原型,所有搜索原型包含交互動(dòng)畫,需點(diǎn)擊鏈接查看)

本文旨在從app的搜索功能這一小部分的討論引導(dǎo)大家從每一個(gè)小的細(xì)節(jié)和功能上設(shè)計(jì)好app,希望大家在看完這篇文章以后能對(duì)搜索功能有一個(gè)更為細(xì)致的見解。從當(dāng)前產(chǎn)品的具體形態(tài)來思考搜索功能的重要性以及它的使用場(chǎng)景,提供給用戶便捷的搜索方式、合理的搜索建議及精準(zhǔn)的搜索結(jié)果,提升搜索體驗(yàn),讓用戶高效準(zhǔn)確地找到目標(biāo)信息。

 

本文由 @WOOSEVELT 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 怎么下得

    回復(fù)
  2. 很贊

    來自江蘇 回復(fù)