移動端搜索,都有什么套路?

8 評論 8082 瀏覽 37 收藏 11 分鐘

目前搜索功能是每個應(yīng)用產(chǎn)品不可缺少一部分,同時也是用戶經(jīng)常光顧到的功能。一個好的搜索設(shè)計(jì)能夠提高轉(zhuǎn)化率,提升用戶體驗(yàn)。下面我們來看看搜索設(shè)計(jì)的一些套路。

目錄:

  • 第一部分:搜索入口的設(shè)計(jì)樣式
  • 第二部分:搜索方式
  • 第三部分:搜索的輔助功能
  • 第三部分:搜索結(jié)果的展示形式

第一部分:搜索入口的設(shè)計(jì)樣式

搜索入口的設(shè)計(jì)需要根據(jù)搜索功能在產(chǎn)品中的位置,不同的應(yīng)用場景所使用的搜索入口樣式也是不同的,接下來分別和大家介紹一下四種搜索入口的常用樣式。

1. 底部標(biāo)簽欄入口(Tab Bar)

把搜索功能作為底部標(biāo)簽欄中的一個功能模塊入口,適合將搜索作為重要流量入口的App,同時也可以同其他的Tab Bar入口相結(jié)合,如“布卡漫畫”就是把搜索和類似發(fā)現(xiàn)功能的入口相結(jié)合。但是底部標(biāo)簽欄的搜索入口本身并不帶搜索功能,所以通常與搜索框樣式相結(jié)合使用。(例如:App Store、布卡漫畫)

如圖:

2. 搜索框?qū)Ш饺肟?/strong>

常見的展示形式之一,將搜索入口以輸入框的形式放置在導(dǎo)航欄中或者導(dǎo)航欄下方,有些應(yīng)用即便界面向上滑動時,搜索欄會吸頂顯示,方便用戶隨時操作(是否吸頂顯示要根據(jù)搜索功能在應(yīng)用中的權(quán)重)。

搜索框?qū)Ш饺肟诔吮仨氁械妮斎肟蛲?,還需要一個搜索圖標(biāo)給予用戶提示。目前很多應(yīng)用也會利用搜索框內(nèi)的區(qū)域進(jìn)行預(yù)設(shè)文案,可作為提示用戶關(guān)鍵詞,也可以作為運(yùn)營的入口來展示。(例如:花瓣、即刻)

如圖:

3. 搜索圖標(biāo)入口

同樣也是常用搜索方式,常見形式是將一個放大鏡的圖標(biāo)放在導(dǎo)航欄的右側(cè)。相對上面提到的搜索框在視覺引導(dǎo)上略遜一籌,但節(jié)省了導(dǎo)航欄的空間,這樣導(dǎo)航欄中可以提供用戶更多的功能,適用于對搜索權(quán)重不高的應(yīng)用中。

當(dāng)然也有特別的搜索圖標(biāo)方式,例如:自如客,同樣是搜索圖標(biāo)的樣式由于不同的位置和層級變化,變得更加突出。(例如:自如客、TIM)

如圖:

4. 隱藏的搜索入口

為了讓用戶更多的使用桌面提供的快速入口,初始界面時將搜索功能隱藏,當(dāng)進(jìn)行滑動界面時才會出現(xiàn)搜索功能,例如:iPhone手機(jī)解鎖后是各個應(yīng)用入口,當(dāng)向右滑動時,隱藏的搜索入口就會出現(xiàn)。

如圖:

第二部分:搜索方式

搜索方式也就是我們通常會用哪些方法去搜索我們要找的東西,下面介紹三種我們常用的搜索方式:

1. 輸文字搜索

主要且常用的搜索方法,通過在輸入框中輸入想要要搜索的文字進(jìn)行精準(zhǔn)搜索。同時當(dāng)點(diǎn)擊輸入框時,激活輸入鍵盤。

如圖:

2. 語音搜索

語音搜索不僅提升了搜索的便利性,同時也解決了老人對鍵盤輸入困擾和不會拼音的人群的問題。另外在音樂類App中語音功能得到了更好運(yùn)用,無論是在街邊商場,酒吧等,當(dāng)聽見我們愛不忍釋的歌曲時,可以用語音功能進(jìn)行歌曲識別,隨時找到我們喜歡歌曲的名字。還有在駕車時可以利用語音搜索功能查詢路線。(例如:QQ音樂,高德地圖)

如圖:

3. 圖像搜索

借助圖像識別技術(shù),圖像搜索也得到了廣泛的應(yīng)用。例如:我們可以通過對圖片進(jìn)行拍照搜索到有關(guān)圖片的信息或者是和它相似的圖片,還有電商應(yīng)用中常用到的,對于無法準(zhǔn)確描述的商品,可以通過圖像搜索找到該物品。如:蘑菇街中可以通過對現(xiàn)實(shí)物體拍照來找到想要的物品。(例如:蘑菇街、百度)

第三部分:搜索的輔助功能

基于用戶不同的搜索場景,需要給出不同的搜索輔助,一個好的搜索輔助,會讓用戶愛上你的應(yīng)用,下面就來介紹五種常用的搜索輔助功能。

1. 熱門搜索

目前搜索量比較大或者運(yùn)營想讓我們搜到的東西,同時給那些無目的的用戶更多的選擇。

如圖:

2. 搜索歷史

用戶可以看到自己每次查找的記錄,方便用戶再次查看。

如圖:

3. 猜你喜歡

根據(jù)收集用戶的記錄為用戶提供相關(guān)的內(nèi)容,減少用戶的思考時間,同時也會給你用戶貼心的感覺。(例如:天貓,今日頭條)

如圖:

4. 遞進(jìn)式搜索

通過點(diǎn)擊系統(tǒng)提供的輔助字段,逐漸縮小搜索范圍,對于搜索模糊的用戶也提供了很好的提示,可以更快的找到查找目標(biāo)。(例如:淘寶)

如圖:

5. 類別搜索

當(dāng)應(yīng)用中涉及到的搜索內(nèi)容類似較多時,可以添加類別搜索功能,先選擇類別后在進(jìn)行搜索,可以更快更精準(zhǔn)的搜索到相關(guān)內(nèi)容。(例如:36氪、豆瓣)

如圖:

第四部分:搜索結(jié)果展示形式

從搜索結(jié)果來看,依然有很多種展示形式,文字、圖片、分類、視頻類等,我們了解不同樣式后可以根據(jù)不同的應(yīng)用類型來選擇合適的搜索結(jié)構(gòu)的展示形式。

1. 文字類

主要以文字描述展示搜索結(jié)果,多用在音樂類應(yīng)用上,因?yàn)槲宜阉鞯氖歉枨旧淼拿?,圖片對我們來說意義并不大。(如36氪,QQ音樂)

如圖:

2. 圖片類

主要以圖片展示為主,用戶會因?yàn)榭吹礁信d趣的圖片點(diǎn)擊查看,所以多用在購物、資訊、電影等(如:每日優(yōu)鮮、小紅書)

如圖:

3. 模塊類

主要用于包含多類別的應(yīng)用,比如:我們在得到上進(jìn)行搜索時,輸入一個“人類簡史”字會發(fā)現(xiàn)有兩個類別,一個是電子書,一個是音頻,所以對于多類別的應(yīng)用我們應(yīng)該擴(kuò)大搜索范圍并分類別展示,讓用戶可以通過分類更準(zhǔn)確的查找想要的信息。(如得到、貓眼)

如圖:

4. 視頻類

下面要說的比較特殊,通常只有在視頻類的應(yīng)用中出現(xiàn),因?yàn)橐曨l類的用戶通常搜索目的較為明確,同時搜索出的結(jié)果也不會多樣化,所以在此界面放入更多的操作按鈕更方便用戶進(jìn)行選擇觀看。(如土豆,優(yōu)酷視頻)

如圖:

結(jié)語

通過上面的對搜索功能的分析可知,一個搜索功能的樣式,無論在哪個階段都要對應(yīng)用本身所適用人群、類型、權(quán)重等多維度進(jìn)行分析,才能設(shè)計(jì)出更合理的搜索。所以搜索樣式的本事沒有好壞之分,只要在不同的場景下,選擇最合適的形式才會提升搜索體驗(yàn),讓用戶搜索的更快、更準(zhǔn)。

 

作者:小溜Epik,公眾號:海鹽社

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 只是停留在“看得見”的表面,沒有分析“看不見”的那部分搜索邏輯

    來自廣東 回復(fù)
    1. 感謝提議,還需要繼續(xù)專研 ??

      來自北京 回復(fù)
    2. 哈哈哈哈哈哈,比如說搜索詞聯(lián)想~可以分析一波就不錯

      回復(fù)
    3. 我去研究一波 :mrgreen:

      來自北京 回復(fù)
  2. 不錯,挺具體的,受教了

    來自廣東 回復(fù)
    1. 感謝支持 ??

      來自北京 回復(fù)
  3. 還行還行,,寫得仔細(xì)了

    來自北京 回復(fù)