5個(gè)方面分析:搜索框的產(chǎn)品設(shè)計(jì)邏輯

2 評(píng)論 22747 瀏覽 87 收藏 19 分鐘

搜索功能是絕大部分產(chǎn)品中標(biāo)配的功能,因?yàn)樗阉鞴δ芸梢詭椭脩艨焖僬业较胍膬?nèi)容,縮短用戶使用成本,文章主要聊一聊App搜索框的產(chǎn)品設(shè)計(jì)邏輯。

產(chǎn)品設(shè)計(jì)中,不管是由簡(jiǎn)到繁還是由繁到簡(jiǎn),都有著固定的方式方法,也體現(xiàn)著一個(gè)產(chǎn)品生命周期的特征。而針對(duì)某一個(gè)功能的產(chǎn)品設(shè)計(jì),則需要有業(yè)務(wù)型的邏輯,比如:搜索框的設(shè)計(jì)。

搜索功能是絕大部分產(chǎn)品中標(biāo)配的功能,因?yàn)樗阉鞴δ芸梢詭椭脩艨焖僬业较胍膬?nèi)容,縮短用戶使用成本,目前為止還沒(méi)有什么方法能夠代替,區(qū)別只在于隨著技術(shù)的更新,搜索的方式更多樣了,現(xiàn)在僅聊一聊App搜索框的產(chǎn)品設(shè)計(jì)邏輯。

用戶對(duì)于搜索的需求和過(guò)程可以理解為需要搜索功能→查找搜索功能→進(jìn)入搜索功能→使用搜索功能→得到搜索結(jié)果。

一、是否需要搜索功能

一個(gè)產(chǎn)品是否需要搜索功能取決于該產(chǎn)品的業(yè)務(wù)需求,大致分為不需要和需要兩種狀態(tài)。

搜索雖然是一個(gè)提升用戶體驗(yàn)的利器功能,但是如果不考慮產(chǎn)品實(shí)際情況,不管什么App都增加搜索功能的話,首先會(huì)增加開(kāi)發(fā)成本,其次會(huì)增加用戶的理解成本和打亂用戶使用的流程。

比如:Amazfit手表和摩拜這兩款工具型App,兩者都是搭配硬件使用的,旨在連接硬件并獲得使用數(shù)據(jù),數(shù)據(jù)和場(chǎng)景都比較單一,所以不需要搜索功能。

試想一下,如果工具型App增加搜索功能,會(huì)是在什么場(chǎng)景下呢?

搜索功能已經(jīng)成了絕大部分App的必備功能,比如:社交類、內(nèi)容類、電商類、社區(qū)類等產(chǎn)品,搜索功能都是必不可少的,且不同的產(chǎn)品對(duì)搜索的定位也不一樣。

雖然搜索可以解決用戶快速找到對(duì)應(yīng)內(nèi)容的問(wèn)題,但是不同的應(yīng)用場(chǎng)景和頁(yè)面,有強(qiáng)弱的區(qū)別,在做產(chǎn)品設(shè)計(jì)時(shí)可以根據(jù)用戶使用頻率及功能等級(jí)進(jìn)行考慮。

二、查找搜索功能

確定了產(chǎn)品需要搜索功能后,就進(jìn)入到下一個(gè)環(huán)節(jié)的設(shè)計(jì),如何讓用戶找到搜索功能。搜索框的入口一般有幾種:一級(jí)tab、搜索框、搜索icon、隱藏式搜索框。

?微博 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???得到

?產(chǎn)品經(jīng)理 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?有道云筆記

1. 快速找到

用戶的搜索需求會(huì)出現(xiàn)在兩個(gè)時(shí)間點(diǎn),一是搜索目的明確,打開(kāi)App就需要使用,另一個(gè)時(shí)間點(diǎn)是在使用App的過(guò)程中產(chǎn)生搜索需求,這個(gè)需求我們很難確定用戶在執(zhí)行什么操作,所以需要根據(jù)頁(yè)面及產(chǎn)品類型進(jìn)行設(shè)計(jì)。

可以確定的是,兩種需求時(shí)刻,都要求我們的產(chǎn)品可以快速讓用戶找到搜索功能并使用,所以搜索功能的位置非常重要。

當(dāng)前絕大部分App的搜索功能都放置在頁(yè)面頂部,以搜索框或者“放大鏡”的樣式存在,用戶已經(jīng)養(yǎng)成了習(xí)慣,當(dāng)需要使用搜索功能時(shí)首先會(huì)尋找頁(yè)面的頂部位置。

有部分App會(huì)設(shè)置一級(jí)tab“發(fā)現(xiàn)”頁(yè)面,用以承載搜索功能,該類型的App大都以內(nèi)容類產(chǎn)品為主,但是千萬(wàn)不要嘗試因?yàn)樽非蟛町惢?,而把搜索功能放在?yè)面的其他角落,這絕對(duì)是是一個(gè)失敗的產(chǎn)品。

百度云盤(pán)把搜索icon放在滑動(dòng)頁(yè)中,當(dāng)滑動(dòng)頁(yè)面時(shí)icon會(huì)被隱藏,而搜索功能對(duì)于云盤(pán)來(lái)說(shuō)是很重要的功能。

?百度云盤(pán)

2. 快速識(shí)別

在用戶潛意識(shí)的位置中放置搜索功能,還有一個(gè)要求是降低用戶的識(shí)別成本,讓用戶一眼就能看出是搜索功能,而不用經(jīng)過(guò)判斷。當(dāng)前最常見(jiàn)的就是搜索框或者“放大鏡”icon樣式兩種,用戶不需要判斷就能識(shí)別該功能為搜索功能。

搜索框的樣式總的來(lái)說(shuō)有矩形和圓角兩種,配合內(nèi)部默認(rèn)文案,有多種組合。

也有一些比較特殊的搜索樣式,比如:網(wǎng)易有道翻譯中精品課的搜索頁(yè)面就進(jìn)行了新的嘗試,但是用戶接受成本比較高,不建議輕易嘗試。

?有道翻譯

icon樣式每個(gè)公司的設(shè)計(jì)師出品都有所區(qū)別并且盡可能的想有特色,但是從產(chǎn)品的角度來(lái)說(shuō),“放大鏡”icon的細(xì)節(jié)越少,識(shí)別度越高,不要過(guò)度的設(shè)計(jì)。

素材來(lái)源于iconfont(http://www.iconfont.cn/search/index?searchType=icon&q=%E6%90%9C%E7%B4%A2&page=1)

三、進(jìn)入搜索功能

進(jìn)入搜索功能主要指的是用戶發(fā)現(xiàn)并點(diǎn)擊搜索功能后的交互及頁(yè)面,雖然各種類型的App有所區(qū)別。

但是大致也分為兩種:

  • 一是進(jìn)入新的頁(yè)面;
  • 二是在當(dāng)前頁(yè)面進(jìn)行搜索。

進(jìn)入新的頁(yè)面,往往是因?yàn)樗阉鞴δ芎苤匾乙故镜男畔⑻?,需要有一個(gè)單獨(dú)的頁(yè)面去承載,這是當(dāng)前最常見(jiàn)的一種方式。在新頁(yè)面中可以展示熱搜詞語(yǔ)或者運(yùn)營(yíng)需要展示的相關(guān)信息,也可以展示用戶搜索歷史等,進(jìn)一步降低用戶使用搜索功能的成本。

在當(dāng)前頁(yè)面進(jìn)行搜索可能是因?yàn)樾畔⒉缓脷w類或者較為隱私,無(wú)法做數(shù)據(jù)處理,也表現(xiàn)為搜索功能對(duì)當(dāng)前頁(yè)面是弱需求,使用頻率不高,比如:小米手機(jī)信息的搜索功能,雖然是新彈出一個(gè)頂部欄,但是與在當(dāng)前頁(yè)面進(jìn)行搜索無(wú)異,只是從視覺(jué)上進(jìn)行了設(shè)計(jì)。

?小米信息

很多App在頁(yè)面的初始狀態(tài)時(shí)搜索功能是很明顯的,并且占用一定比例的位置,但是在用戶有其他操作的情況下,搜索功能的視圖會(huì)發(fā)生對(duì)應(yīng)的變化。

迅雷首頁(yè)的搜索功能在初始位置時(shí)是置頂?shù)?,但是?dāng)用戶上滑頁(yè)面時(shí),會(huì)發(fā)生頂部搜索框隱藏被替換為分類,下滑頁(yè)面恢復(fù)搜索框的交互效果。因?yàn)樵擁?yè)面主要以推薦為主,當(dāng)用戶上滑頁(yè)面時(shí),搜索功能的需求被弱化,隱藏可以增加頁(yè)面顯示的內(nèi)容,而為了可以讓用戶快速的進(jìn)入搜索功能,只要執(zhí)行下滑頁(yè)面,就會(huì)恢復(fù)搜索功能。

?迅雷

四、使用搜索功能

從進(jìn)入搜索頁(yè)面開(kāi)始,就需要查看頁(yè)面內(nèi)容,輸入搜索詞,點(diǎn)擊搜索,這是用戶使用搜索功能的完整過(guò)程。

1. 推薦內(nèi)容

推薦內(nèi)容包括幾個(gè)方面,搜索框置灰關(guān)鍵詞,頁(yè)面顯示的歷史搜索,熱搜詞以及提前搜索并展示的內(nèi)容。在搜索頁(yè)面放置歷史搜索和熱搜詞是大部分App最常用的方式,比如:內(nèi)容類和電商類產(chǎn)品。

歷史搜索可以方便用戶快速查找以前搜索的內(nèi)容,無(wú)需再次輸入,但是一定要注意出于用戶隱私保護(hù),歷史搜索記錄需要支持刪除功能。

熱搜詞是根據(jù)算法展示搜索次數(shù)最高的關(guān)鍵詞,對(duì)于進(jìn)入搜索頁(yè)面但沒(méi)有強(qiáng)目的的用戶來(lái)說(shuō),熱搜詞可以降低用戶思考成本,提高產(chǎn)品/內(nèi)容的查看次數(shù),但是一定要注意熱搜詞的更新算法,熱搜詞本身就有引流的功能,如果單獨(dú)按照搜索次數(shù)來(lái)決定是否上熱搜,會(huì)出現(xiàn)熱搜詞榜非常穩(wěn)定的情況。

搜索框文本一般為“請(qǐng)輸入搜索內(nèi)容”進(jìn)入搜索頁(yè)面后光標(biāo)在搜索框起始位置并調(diào)用鍵盤(pán),輸入內(nèi)容后搜索框會(huì)自動(dòng)更新為輸入內(nèi)容。

還有一種方式是把“請(qǐng)輸入搜索內(nèi)容”替換為預(yù)設(shè)關(guān)鍵詞并定時(shí)更新,點(diǎn)擊搜索會(huì)直接搜索并展示搜索結(jié)果,這個(gè)過(guò)程也是引導(dǎo)的作用,與熱搜詞類似(如天貓App)。

在此基礎(chǔ)上,還可以有一種選擇,那就是在進(jìn)入搜索頁(yè)面后,直接搜索并展示輸入框關(guān)鍵詞的搜索結(jié)果,這種方式可以更快速地向用戶展示有針對(duì)性的運(yùn)營(yíng)內(nèi)容,缺點(diǎn)是進(jìn)入搜索頁(yè)面即為結(jié)果顯示頁(yè)面,熱搜詞和搜索歷史等內(nèi)容就沒(méi)有空間可以顯示。

做的比較失敗的是閑魚(yú),在搜索頁(yè)面沒(méi)有任何內(nèi)容推薦,不過(guò)在輸入字符以后會(huì)對(duì)內(nèi)容進(jìn)行過(guò)程匹配,補(bǔ)充聯(lián)想關(guān)鍵詞。

?閑魚(yú)

2. 搜索方式

在輸入搜索內(nèi)容時(shí)關(guān)鍵詞匹配有兩種處理方式:一個(gè)是輸入過(guò)程匹配;一個(gè)是輸入完成匹配。

輸入過(guò)程匹配:在輸入時(shí),每輸入一個(gè)字符,就進(jìn)行一次匹配,同時(shí)更新頁(yè)面信息。這里更新的信息,可以是針對(duì)輸入內(nèi)容進(jìn)行推薦的信息,也可以是搜索結(jié)果。

這種方式可以對(duì)搜索結(jié)果做出即時(shí)反饋,引導(dǎo)性強(qiáng),效率非常高,但是輸入過(guò)程匹配對(duì)于計(jì)算能力要求比較高,可以根據(jù)自己的產(chǎn)品和實(shí)際情況考慮是否需要此功能,否則需要加載等待,影響體驗(yàn)。

輸入完成匹配:僅在輸入完成后,點(diǎn)擊【搜索】按鈕時(shí),才開(kāi)始進(jìn)行搜索、匹配,直接展示搜索結(jié)果。這種方式省去了對(duì)輸入過(guò)程實(shí)時(shí)分析、引導(dǎo)的過(guò)程,適用于對(duì)搜索功能要求不高的情況。類似的產(chǎn)品如起點(diǎn)學(xué)院,輸入關(guān)鍵詞后不會(huì)做出反饋,需要執(zhí)行搜索才會(huì)展示相關(guān)內(nèi)容。

?起點(diǎn)學(xué)院

很多產(chǎn)品采用組合的方式,即時(shí)匹配關(guān)鍵詞并展示出來(lái),點(diǎn)擊關(guān)鍵詞或者【搜索】按鈕后再展示搜索內(nèi)容。類似的產(chǎn)品可以查看京東、天貓等電商App,除了對(duì)輸入內(nèi)容做聯(lián)想,還會(huì)展示出與關(guān)鍵詞相關(guān)的維度,自動(dòng)補(bǔ)全關(guān)鍵詞,增加用戶的選擇。

??

?天貓 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??京東

3. 搜索/取消按鈕

取消搜索的方式一般有點(diǎn)擊【取消】按鈕或者點(diǎn)擊【返回】按鈕,如果輸入框已經(jīng)輸入字符,需要重新輸入新的搜索詞時(shí),往往需要點(diǎn)擊鍵盤(pán)上的刪除按鈕回刪。當(dāng)輸入的內(nèi)容較長(zhǎng)時(shí)這個(gè)過(guò)程的體驗(yàn)就非常差,所以現(xiàn)在有很多產(chǎn)品都在輸入框尾部提供了刪除功能,一鍵刪除輸入的字符。

這種功能在搜索頁(yè)面需要進(jìn)行二次搜索或者輸入錯(cuò)誤時(shí),可以提供很好的體驗(yàn)。

如果你細(xì)心研究不同的App,會(huì)發(fā)現(xiàn)搜索/取消按鈕大致分為兩種:

  • 一種是保留搜索按鈕;
  • 另一種時(shí)頁(yè)面上取消搜索按鈕,轉(zhuǎn)而使用鍵盤(pán)的搜索按鈕。

搜索按鈕一般放置在搜索框的右側(cè),那么左側(cè)就一定會(huì)保留返回icon,這樣才能正常實(shí)現(xiàn)App的跳轉(zhuǎn)路徑。這種方式雖然比較規(guī)矩,同時(shí)減少輸入框可顯示的字符長(zhǎng)度,但是用戶識(shí)別成本會(huì)降低很多,返回和搜索按鈕非常明確。

?酷米客

頁(yè)面上沒(méi)有搜索按鈕的同時(shí),左側(cè)的返回按鈕也同時(shí)取消,點(diǎn)擊【取消】按鈕會(huì)返回上一個(gè)層級(jí)的頁(yè)面。這種方式一般會(huì)使用即時(shí)匹配(過(guò)程匹配)的搜索方式,需要進(jìn)行搜索時(shí),通過(guò)鍵盤(pán)的搜索按鈕執(zhí)行搜索操作。

好處在于搜索按鈕在右下角,符合手的操作習(xí)慣且在舒適操作區(qū)域,可以更快速的執(zhí)行搜索操作,但是取消按鈕無(wú)法明確返回邏輯,當(dāng)用戶需要退出搜索返回上一層級(jí)時(shí)需要進(jìn)行嘗試性地點(diǎn)擊【取消】按鈕。

如果頁(yè)面上使用【搜索】按鈕,則一定要保留返回的功能。使用【取消】按鈕則會(huì)取消【返回】按鈕,否則功能冗余。比如:京東安卓版app的搜索框就是一個(gè)失敗的案例,在頁(yè)面上僅保留搜索框右側(cè)的【搜索】按鈕,取消了左側(cè)的【返回】按鈕,當(dāng)用戶使用返回上一層級(jí)時(shí)必須通過(guò)手機(jī)物理按鍵功能來(lái)實(shí)現(xiàn)。

?京東

五、得到搜索結(jié)果

搜索完成后,結(jié)果頁(yè)面會(huì)根據(jù)算法展示出相匹配的內(nèi)容,我們暫且不說(shuō)算法的問(wèn)題,就結(jié)果展示而言就有多種方式。如果產(chǎn)品達(dá)到一定的量級(jí),內(nèi)容是非常多和繁雜的,分類自然也就有很多,一般來(lái)說(shuō),每個(gè)產(chǎn)品都有自己的分類方式,所以在結(jié)果呈現(xiàn)上,可以考慮先分類再搜索和先搜索再分類兩種方式。

先分類再搜索有個(gè)很明顯的特征就是搜索目的明確,用戶已經(jīng)自己想要查找什么樣的內(nèi)容。比如:Boss直聘這款產(chǎn)品,用戶在使用搜索功能時(shí),會(huì)非常明確的知道自己想要搜索的信息維度,所以先分類再搜索可以提高搜索準(zhǔn)確率,減少用戶搜索后篩選的成本。

?Boss直聘

先搜索再分類則可以減少用戶使用搜索功能的成本,但是會(huì)增加對(duì)結(jié)果篩選的難度。一般的操作是系統(tǒng)根據(jù)搜索詞進(jìn)行算法匹配,把所有結(jié)果都展示出來(lái),然后提供分類篩選的功能。

這種方式對(duì)于用戶無(wú)目的搜索的體驗(yàn)會(huì)更好,一般多見(jiàn)于電商、知識(shí)類等信息和分類明確的產(chǎn)品中,比如:知乎的搜索邏輯,就是先根據(jù)搜索詞匹配結(jié)果,展示所有信息,提供用戶、話題、想法、專欄等分類搜索切換。

?知乎

脫離業(yè)務(wù)場(chǎng)景的產(chǎn)品設(shè)計(jì)都是耍流氓,這句可以代入的話適用于產(chǎn)品設(shè)計(jì)的每個(gè)環(huán)節(jié)。同樣的,搜索框的產(chǎn)品設(shè)計(jì)也需要考慮業(yè)務(wù)場(chǎng)景,而且必須遵循,否則搜索這個(gè)功能就會(huì)變成雞肋。

 

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 大部分產(chǎn)品是不需要搜索功能的,想象一下你的用戶,當(dāng)他在家里想買一個(gè)東西的時(shí)候,他第一時(shí)間會(huì)淘寶京東平多多這類平臺(tái)去找,而不會(huì)想到其他小平臺(tái)。如果他想解答某個(gè)問(wèn)題或者學(xué)某個(gè)知識(shí)點(diǎn),第一個(gè)想到的是百度,抖音,b站…因?yàn)橹挥袃?nèi)容豐富的平臺(tái),才能滿足用戶的需求,如果內(nèi)容過(guò)少,搜啥找不到啥

    如果你自家的產(chǎn)品名氣不大,那建議是把精力花在營(yíng)銷,優(yōu)惠之類的,或者留存上面多思考,搜索功能也就提出這個(gè)功能的這個(gè)人本身會(huì)在功能上線后試用

    來(lái)自廣東 回復(fù)
  2. 有些安卓情況下,輸入鍵盤(pán)是沒(méi)有搜索的。要統(tǒng)一兩端,最好還是搜索按鈕一般放置在搜索框的右側(cè),那么左側(cè)就一定會(huì)保留返回icon,這樣才能正常實(shí)現(xiàn)App的跳轉(zhuǎn)路徑。這種方式雖然比較規(guī)矩。

    來(lái)自廣東 回復(fù)