移動(dòng)端搜索功能設(shè)計(jì):3個(gè)階段解析搜索流程設(shè)計(jì)要點(diǎn)
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
移動(dòng)端搜索功能設(shè)計(jì):3個(gè)階段解析搜索流程設(shè)計(jì)要點(diǎn)
人人都是產(chǎn)品經(jīng)理 2017-01-04 18:08:02
這篇文章筆者想和大家聊一聊有關(guān)搜索功能的設(shè)計(jì),搜索功能是每個(gè)內(nèi)容型APP的核心,它的易用性決定了用戶是否能從APP里快速找到自己想找的內(nèi)容,那么決定搜索體驗(yàn)好壞的關(guān)鍵點(diǎn)又是什么呢?這里我總結(jié)了兩點(diǎn),“操作的易用性”和“結(jié)果的準(zhǔn)確性”??此坪?jiǎn)單的兩點(diǎn)卻有很多的學(xué)問(wèn),筆者把搜索的交互流程劃分成三個(gè)關(guān)鍵階段,“搜索前、搜索中及搜索后”,接下來(lái)將從這三個(gè)階段逐一分析整個(gè)搜索流程中的相關(guān)設(shè)計(jì)。
搜索入口——依據(jù)功能權(quán)重來(lái)判斷入口的表現(xiàn)形式
在不同的APP或者不同的場(chǎng)景下搜索入口有著不同的表現(xiàn)形式,具體的表現(xiàn)形式取決于產(chǎn)品對(duì)搜索功能權(quán)重的定義,如果說(shuō)在某一場(chǎng)景下搜索功能是用戶常用的核心功能那么他在界面上所表現(xiàn)出來(lái)的權(quán)重就要高些,反之則低些。下圖是常見(jiàn)的搜索功能的入口形式,他們的權(quán)重從左到右依次降低,筆者將對(duì)他們一一進(jìn)行分析
方式一:如下圖APP Store的搜索入口
如下圖APP Store的搜索形式,搜索放在標(biāo)簽欄上作為一個(gè)獨(dú)立的功能模塊,它的功能層級(jí)是最高的。不管用戶操作到哪里都可以隨時(shí)進(jìn)入搜索頁(yè)面,這樣的搜索入口通常用在搜索場(chǎng)景非常多的內(nèi)容型APP上,方便用戶在任何時(shí)候快速進(jìn)入搜索頁(yè)面。
方式二:搜索框外漏在nav bar上
如下圖是京東app的搜索入口,它將搜索框外漏在nav bar上,這樣的形式有著兩個(gè)設(shè)計(jì)的關(guān)鍵點(diǎn):
關(guān)鍵點(diǎn)一:搜索框外漏在頂部導(dǎo)航條上
搜索框直接外漏在導(dǎo)航條上是為了突顯該功能,這一功能往往是用戶在該頁(yè)面非常核心的操作任務(wù),類(lèi)似天貓京東這類(lèi)電商型app,通常情況下用戶都是帶著明確目的來(lái)購(gòu)買(mǎi)東西的,那么他們采取的最快最直接的方式就是搜索。
關(guān)鍵點(diǎn)二:在向上滾動(dòng)界面時(shí),搜索框一直懸停在頂部
這樣做的場(chǎng)景是這樣的,在用戶滾動(dòng)頁(yè)面尋找內(nèi)容時(shí),可能并不能找到自己想要的內(nèi)容,搜索框一直懸停一是為了暗示用戶可以進(jìn)行搜索,二是為了讓用戶在想搜索時(shí)快速觸發(fā)搜索
方式三:出現(xiàn)在NAV BAR下面,默認(rèn)隱藏或顯示
如下圖是微信在聊天頁(yè)面和通訊錄頁(yè)面的搜索入口,初始化狀態(tài)時(shí)聊天頁(yè)面的搜索框是不出現(xiàn)在用戶的可視范圍內(nèi)的,當(dāng)頁(yè)面下滑時(shí)搜索框才出現(xiàn),而在通訊錄頁(yè)面里搜索框是默認(rèn)出現(xiàn)在用戶的可視范圍內(nèi)的。
分析:微信在最近聯(lián)系人和通訊錄上搜索框的默認(rèn)狀態(tài)不同,這很好地詮釋了這兩種場(chǎng)景下的搜索功能的權(quán)重。最近聯(lián)系人頁(yè)面上的搜索入口顯得更加隱蔽,因?yàn)樵谶@個(gè)頁(yè)面下用戶產(chǎn)生搜索的場(chǎng)景很少,把其隱藏簡(jiǎn)化了界面的元素,提升了界面的美觀性。
方式四:通過(guò)點(diǎn)擊icon觸發(fā)搜索
如下圖是淘票票的搜索的入口,通過(guò)點(diǎn)擊右上角的搜索icon進(jìn)入搜索頁(yè)面:
分析:在界面權(quán)重上,這樣的方式相對(duì)于以上三種方式來(lái)說(shuō)顯得較弱一點(diǎn),因?yàn)樵谶@樣的場(chǎng)景下用戶使用搜索的概率并不是很高,如果把搜索外漏就會(huì)占據(jù)更多的屏幕空間,破壞界面的權(quán)重等級(jí)和美觀性。
總結(jié):依據(jù)用戶的需求場(chǎng)景,搜索入口放在不同的位置,如果說(shuō)在該頁(yè)面搜索是一個(gè)主要的功能,我們就應(yīng)該去突顯它,提升它在界面上的權(quán)重,反之則減輕它的權(quán)重。
搜索中間頁(yè)——運(yùn)營(yíng)的重災(zāi)區(qū),用戶搜索行為的關(guān)鍵點(diǎn)
搜索中間頁(yè)本來(lái)應(yīng)該是一個(gè)輕量化的頁(yè)面,用戶在這里輸入內(nèi)容進(jìn)行搜索即可。但隨著運(yùn)營(yíng)需求的擴(kuò)張,這個(gè)頁(yè)面逐漸成為了一個(gè)運(yùn)營(yíng)重災(zāi)區(qū),多了很多推薦的內(nèi)容。筆者將從“輸入框提示信息、搜索分類(lèi)、搜索歷史、搜索推薦、搜索輸入、搜索建議”等方面分析一下這個(gè)頁(yè)面的設(shè)計(jì)。
1. 輸入框提示信息
搜索框內(nèi)的提示信息通常是提示用戶當(dāng)下可以搜索什么樣的內(nèi)容,如下圖bilibi的搜索提示,告訴用戶可以進(jìn)行“視頻、番劇、UP主或者AV號(hào)”的搜索,這樣的提示信息對(duì)用戶也是一種良性的引導(dǎo),給用戶提供了一個(gè)心理預(yù)期,同時(shí)也對(duì)用戶隨意輸入關(guān)鍵詞造成無(wú)結(jié)果的傷害體驗(yàn)的可能進(jìn)行了限制。例如一個(gè)房產(chǎn)APP,搜索框內(nèi)提示輸入樓盤(pán)或小區(qū)名,如果沒(méi)有這樣的提示有的用戶可能就會(huì)去輸入價(jià)格去篩選房源,這句提示語(yǔ)很好地降低了這樣的風(fēng)險(xiǎn)。
但隨著人們對(duì)APP使用的熟悉,用戶在這里的認(rèn)知負(fù)擔(dān)基本消除,運(yùn)營(yíng)人員逐漸搶占了這塊地方,這句話變成了內(nèi)容的推薦或者產(chǎn)品的Slogan,這些推薦的內(nèi)容可以是運(yùn)營(yíng)人員手動(dòng)維護(hù)的也可以是依據(jù)用戶的購(gòu)買(mǎi)和行為習(xí)慣進(jìn)行推薦的。如下圖右邊是淘寶的搜索提示,搜索框的文案變成了“紅人最?lèi)?ài)潮牌名服”,這就是運(yùn)營(yíng)人員在為特定內(nèi)容進(jìn)行導(dǎo)流。
2. 搜索分類(lèi)
在內(nèi)容型APP中搜索時(shí)通常會(huì)對(duì)內(nèi)容進(jìn)行分類(lèi)搜索,這是為了幫助用戶更地找到相關(guān)內(nèi)容,分類(lèi)的操作可以發(fā)生在搜索前也可以發(fā)生在搜索后,如下圖是“淘寶、微信、網(wǎng)易云音樂(lè)”搜索分類(lèi)的方式,筆者將分別對(duì)他們進(jìn)行分析。
淘寶是將搜索分類(lèi)前置,默認(rèn)搜索寶貝,點(diǎn)擊后彈出浮層進(jìn)行切換。這樣的方式存在一個(gè)明顯的缺點(diǎn)就是由于該入口所占空間位置不顯著,會(huì)導(dǎo)致用戶感知太弱。 這樣的方式通常用在用戶大多數(shù)情況下只搜索某一分類(lèi)的內(nèi)容,如淘寶這樣,用戶大部分的搜索場(chǎng)景都是在尋找寶貝。
微信默認(rèn)搜索所有內(nèi)容,將分類(lèi)通過(guò)通過(guò)三個(gè)很顯著的入口放在搜索框下方,當(dāng)點(diǎn)擊某一分類(lèi)時(shí)跳轉(zhuǎn)到該分類(lèi)的搜索界面,同時(shí)搜索框的文案以及搜索界面的內(nèi)容發(fā)生相應(yīng)變化,提示用戶搜索范圍被改變。這種方式通常用在這些分類(lèi)搜索的場(chǎng)景都很常見(jiàn)時(shí),它的缺點(diǎn)在于,從界面表現(xiàn)形式來(lái)看,這三個(gè)分類(lèi)更像是三個(gè)功能的入口,他們與搜索框聯(lián)系得不是很緊密,很多用戶最開(kāi)始使用時(shí)并不知道點(diǎn)擊這些分類(lèi)是進(jìn)行搜索范圍的限制。經(jīng)測(cè)試3個(gè)從未使用過(guò)該功能的用戶,他們都認(rèn)為點(diǎn)擊朋友圈后就是進(jìn)入朋友圈,點(diǎn)擊文章后就是顯示所有文章。
網(wǎng)易云音樂(lè)是將搜索分類(lèi)進(jìn)行后置了,在下文關(guān)于搜索結(jié)果的展示我會(huì)分析它的優(yōu)劣勢(shì)。
3.搜索歷史
搜索歷史記住用戶的足跡,方便用戶快速向以前搜索過(guò)的內(nèi)容進(jìn)行轉(zhuǎn)換。設(shè)計(jì)上我們需要注意的一點(diǎn)就是需要把搜索歷史和搜索推薦區(qū)分開(kāi)來(lái),在位置上,盡量讓搜索歷史靠近搜索框(如下圖),因?yàn)閺恼J(rèn)知心理學(xué)上來(lái)講,越靠近搜索框的內(nèi)容越能表示它是搜索歷史。在表現(xiàn)形式上,搜索歷史和搜索推薦盡量采用不同的表現(xiàn)形式。搜索歷史伴隨的交互操作有刪除單條或者清空搜索歷史
4. 搜索推薦
這里的搜索推薦通常有三種來(lái)源:
-
按照用戶的搜索熱度進(jìn)行推薦;
-
運(yùn)營(yíng)手動(dòng)配置;
-
按照搜索行為進(jìn)行計(jì)算和推薦;
它存在的目的主要有兩個(gè):
-
一是挖掘用戶的潛在需求,讓用戶更快地找到想找的內(nèi)容;
-
二是作為運(yùn)營(yíng)位為特定的內(nèi)容導(dǎo)流。
建議:
-
不要漏出太多的推薦內(nèi)容,畢竟它帶有一些運(yùn)營(yíng)和廣告性質(zhì),用戶的接受度并不會(huì)很高
-
在界面上讓推薦內(nèi)容和搜索歷史有明顯的區(qū)分,方便用戶在形式上一眼就能區(qū)分出搜索歷史和推薦內(nèi)容
-
盡量推薦一些對(duì)用戶有真正價(jià)值的內(nèi)容
5. 搜索輸入
受移動(dòng)端操控方式的限制,在輸入內(nèi)容時(shí)存在兩個(gè)明顯的痛點(diǎn):“修改內(nèi)容”和“輸入速度”。
關(guān)于修改內(nèi)容:當(dāng)用戶想更改語(yǔ)句中一部分文字時(shí),將光標(biāo)移動(dòng)到想要更改的地方是一件很難的事,點(diǎn)擊操作真的很令人發(fā)狂,通常情況下我寧愿重新輸入。但是針對(duì)這一點(diǎn)搜狗輸入法做了一個(gè)很人性的交互,當(dāng)用戶按住鍵盤(pán)左右滑動(dòng)時(shí)就能移動(dòng)光標(biāo)(如下圖)。
關(guān)于輸入速度:很早之前偶然間發(fā)現(xiàn)了UC瀏覽器在輸入文字時(shí)的一個(gè)交互功能,如下圖所示,當(dāng)輸入文字后,用戶可以將搜索建議的詞語(yǔ)直接加入到搜索框中然后繼續(xù)輸入文字。這樣的需求場(chǎng)景在很常見(jiàn),比如我想搜索“交互設(shè)計(jì)師的前景”,當(dāng)我輸入交互二字后就會(huì)有“交互設(shè)計(jì)”的搜索建議,點(diǎn)擊搜索建議后面的箭頭將這個(gè)詞直接加入搜索框,然后就出現(xiàn)了“交互設(shè)計(jì)師的前景”的搜索建議,點(diǎn)擊搜索建議后進(jìn)入搜索結(jié)果的頁(yè)面,這個(gè)過(guò)程中我少打了很多字,對(duì)我的搜索速度有很大的提升。
6.搜索建議
當(dāng)用戶輸入內(nèi)容后,搜索框下面出現(xiàn)了眾多的搜索建議,這些搜索建議是為了幫助用戶快速向目標(biāo)進(jìn)行轉(zhuǎn)化,如下圖是京東的搜索建議,當(dāng)我輸入畫(huà)框后,一系列畫(huà)框的搜索建議就出來(lái)了,它還有一個(gè)亮點(diǎn)就是在此提供了細(xì)化篩選條件,畫(huà)框后面緊跟了“長(zhǎng)方形、實(shí)木、正方形”等關(guān)鍵的篩選條件,為用戶省去了到結(jié)果頁(yè)進(jìn)行篩選的步驟。
搜索結(jié)果——背后的邏輯決定了用戶是否能找到準(zhǔn)確的內(nèi)容
搜索結(jié)果是搜索過(guò)程中最關(guān)鍵的點(diǎn),結(jié)果的準(zhǔn)確性確定了用戶體驗(yàn)的好壞,筆者將從“搜索結(jié)果的形式、搜索結(jié)果的操作、搜索結(jié)果的分類(lèi)、搜索結(jié)果的排序”等方面來(lái)對(duì)搜索結(jié)果進(jìn)行分析。
1. 搜索結(jié)果的形式
搜索結(jié)果一般分為兩種,一種是所見(jiàn)即所得,用戶輸入內(nèi)容后出現(xiàn)在搜索框下面的搜索建議就是搜索結(jié)果,這種搜索通常出現(xiàn)在一些輕量化的APP中,因?yàn)樗阉鹘ㄗh對(duì)應(yīng)的就是唯一的搜索結(jié)果,如下圖微信的搜索一樣。
第二種形式就是一個(gè)關(guān)鍵詞對(duì)應(yīng)了多個(gè)搜索建議,每個(gè)搜索建議又對(duì)應(yīng)了多個(gè)搜索結(jié)果,當(dāng)用戶點(diǎn)擊搜索后進(jìn)入了一個(gè)專(zhuān)門(mén)的搜索結(jié)果頁(yè),如下圖京東的搜索一樣。
2. 搜索結(jié)果的操作
依據(jù)用戶的需求目的,在搜索結(jié)果的列表上我們可以外漏用戶大部分情況下會(huì)采取的操作,比如說(shuō)視頻類(lèi)網(wǎng)站,用戶搜索到某一內(nèi)容后,最常采取的操作就是播放,我們就可以把播放按鈕外漏,縮短用戶的操作路徑(如下圖愛(ài)奇藝的搜索結(jié)果頁(yè))
3. 搜索結(jié)果的分類(lèi)
通常的分類(lèi)方式是TAB切和卡片,以下是微信和網(wǎng)易云音樂(lè)的分類(lèi)。
這兩種方式有各自的應(yīng)用場(chǎng)景,TAB切主要應(yīng)用在搜索結(jié)果有固定的幾種分類(lèi),并且通常的情況下搜索結(jié)果都有很多的內(nèi)容,如上圖的網(wǎng)易云音樂(lè),每一個(gè)分類(lèi)都有很多的搜索結(jié)果,如果它采用卡片式的瀑布流布局,用戶需要不停往下翻才能看到第二種分類(lèi)的內(nèi)容??ㄆ街饕\(yùn)用在搜索結(jié)果的內(nèi)容不多,如微信這樣的情況,每一類(lèi)結(jié)果并不是很多,卡片式的瀑布流布局能讓用戶快速定位到自己想要的內(nèi)容,如果這里用TAB切就很尷尬了,因?yàn)槊恳活?lèi)的內(nèi)容都很少或者很多類(lèi)里根本沒(méi)有內(nèi)容,這樣的用戶感受就不好了。
4. 搜索結(jié)果的排序
搜索結(jié)果的排序是一個(gè)比較復(fù)雜的工作,里面涉及了很多的算法邏輯,筆者對(duì)這塊也不是很清楚,但是一般的垂直內(nèi)容型APP并沒(méi)有這么復(fù)雜的算法在里面,就是按照搜索的關(guān)鍵字去一一匹配。
如下圖是說(shuō)我在QQ閱讀輸入一個(gè)“男”字,然后就給我建議第一個(gè)字是“男”的所有可能的結(jié)果,當(dāng)?shù)谝粋€(gè)字匹配完后就匹配第二個(gè)字,這樣以此類(lèi)推。他們的整體順序就是按照匹配關(guān)鍵字的先后進(jìn)行排列的,其實(shí)在排序中還牽涉了很多的算法,比如說(shuō)它可能會(huì)摻雜一些“熱度、人氣、人為意圖、語(yǔ)義”等因素的權(quán)重,這里不展開(kāi)贅述了。
以上就是筆者對(duì)搜索功能的介紹和思考,希望能對(duì)大家有所幫助。
本文由 @不知名設(shè)計(jì)師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)