淺析移動(dòng)端搜索交互體驗(yàn)設(shè)計(jì)

3 評(píng)論 9452 瀏覽 84 收藏 9 分鐘

本篇文章,作者從交互體驗(yàn)層面解析一下搜索功能,希望對(duì)你有所幫助。

搜索,幾乎是每一個(gè)涉及內(nèi)容的APP都具備的功能,這里所說的內(nèi)容包括但不限于商品、資訊、資料等。隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,無論從技術(shù)還是從體驗(yàn)層面,搜索功能都變得越來越強(qiáng)大,體驗(yàn)變得越來越精細(xì)。今天我們本篇文章,就從交互體驗(yàn)層面解析一下搜索功能。

基本流程

首先我們以蘇寧易購(gòu)為例來看一下搜索的基本流程:

從截圖中不難看出,搜索的基本流程包括:搜索入口->輸入關(guān)鍵詞->搜索->搜索結(jié)果。

接下來,我們?cè)購(gòu)拿總€(gè)環(huán)節(jié),進(jìn)行細(xì)節(jié)分析。

搜索入口

搜索入口設(shè)計(jì),一方面要基于對(duì)用戶行為的洞察,即用戶在應(yīng)用中什么時(shí)候需要搜索;另一方面要結(jié)合產(chǎn)品目標(biāo)的設(shè)定,即希望用戶在什么情況下使用搜索。為了說明這個(gè)結(jié)論,我們先來看幾張截圖:

在截圖中可以看到,有的搜索框是非常明顯的通欄,而有的則是提供一個(gè)按鈕。這個(gè)現(xiàn)象映射出的問題就是產(chǎn)品為什么要這樣設(shè)計(jì)。在移動(dòng)設(shè)計(jì)中,屏幕就那么大,某個(gè)元素占什么位置,多大區(qū)域,就代表其重要性是怎樣的。

一般情況下,電商類的搜索框都非常明顯,這是因?yàn)?0%以上的用戶使用電商類查找產(chǎn)品時(shí),首先會(huì)使用搜索,其次是活動(dòng)專題,再次是分類檢索。而對(duì)于新聞資訊類產(chǎn)品,對(duì)搜索的依賴就沒那么強(qiáng)烈,相反更多是基于大數(shù)據(jù)、云計(jì)算的推薦策略,例如今日頭條,就是以強(qiáng)大的個(gè)性化推薦為切入點(diǎn),快速占領(lǐng)了市場(chǎng)。

上面講的是形式的入口,下面我們?cè)賮砜纯磧?nèi)容的入口-搜索關(guān)聯(lián)。我們以美團(tuán)和網(wǎng)易新聞為例來說明一下。

首先看默認(rèn)搜索頁(yè)面

然后是輸入關(guān)鍵詞的關(guān)聯(lián)頁(yè)面

在美團(tuán)中,我們輸入一個(gè)“火鍋”關(guān)鍵字,美團(tuán)搜索框下方會(huì)出現(xiàn)非常詳細(xì)的關(guān)聯(lián)內(nèi)容,而這些內(nèi)容不僅是與關(guān)鍵詞高度關(guān)聯(lián),并且還是基于用戶LBS給出的。如此一來,用戶基本上不用看搜索結(jié)果,就能大致的了解情況,最大限度提高了用戶的搜索效率。

而在網(wǎng)易新聞中,我們輸入關(guān)鍵詞“英倫對(duì)決”,會(huì)發(fā)現(xiàn)搜索框下方與之相關(guān)的內(nèi)容,但沒有更多的內(nèi)容。

搜索及退出

關(guān)于搜索及退出,我們先來看一個(gè)案例,以下是(帶有搜索按鈕的搜索)的截圖

以下是(帶有取消按鈕的搜索)的截圖

這兩個(gè)的區(qū)別還是比較明顯的,那為什么要這么做呢,還是以上的兩個(gè)APP,帶有搜索按鈕的APP,我們會(huì)發(fā)現(xiàn)首頁(yè)的搜索框,會(huì)默認(rèn)顯示某個(gè)關(guān)鍵詞,點(diǎn)擊搜索框,進(jìn)入搜索頁(yè)面后,默認(rèn)關(guān)鍵詞還會(huì)存在。

到這也許大家就發(fā)現(xiàn)了,頁(yè)面進(jìn)來后,默認(rèn)情況下,鍵盤是不會(huì)彈起的,那如果用戶要搜索關(guān)鍵詞怎么辦呢?那就點(diǎn)擊搜索框后面的“搜索”按鈕就能進(jìn)行搜索。

而對(duì)于另一個(gè)APP,我們發(fā)現(xiàn)情況就不一樣了,首頁(yè)搜索框里面沒有搜素框,點(diǎn)擊搜索框,進(jìn)入搜索頁(yè)面,這時(shí)候看到的就是“取消”按鈕,只要我們點(diǎn)擊搜索框,鍵盤就會(huì)彈出,可以點(diǎn)擊搜索。

不過這里仍然有一個(gè)問題,鍵盤彈起來后,如果不輸入關(guān)鍵詞,點(diǎn)擊“搜索”會(huì)出現(xiàn)什么樣的情況,我們用今日頭條的搜索來看一下,會(huì)發(fā)現(xiàn)它是給了一個(gè)提示。這里個(gè)人感覺并不是特別妥當(dāng)。

更建議如果沒有輸入關(guān)鍵詞,鍵盤上的“搜索”可以置灰不可點(diǎn)擊。當(dāng)輸入關(guān)鍵詞后,再可以搜索。

而對(duì)于專項(xiàng)搜索而言,例如在線教育APP中,因?yàn)樗阉鞔蠖嗍撬阉髡n程,那可以考慮沒有輸入關(guān)鍵詞時(shí),點(diǎn)擊鍵盤上的“搜索”按鈕時(shí),可以列出所有課程。

另外一種情況,就是產(chǎn)品也可以根據(jù)自己的邏輯,把想要推薦的內(nèi)容列出來。

搜索結(jié)果

從前面的邏輯,我們?cè)賮砜纯此阉鹘Y(jié)果頁(yè)面,也會(huì)發(fā)現(xiàn)后面有很多需要思考的方面。我們先來看幾個(gè)截圖

通過京東的兩個(gè)搜索結(jié)果頁(yè)面可以看出,如果搜索的關(guān)鍵詞有相應(yīng)的京東自營(yíng)的店鋪,會(huì)先顯示相關(guān)的內(nèi)容,然后才是相關(guān)的商品列表;天貓基本也是同樣的道理。

而對(duì)于包含多版塊產(chǎn)品的搜索結(jié)果列表,則會(huì)按照版塊列出相應(yīng)的結(jié)果。例如今日頭條的搜索結(jié)果頁(yè)面:

搜索歷史

搜索歷史也是搜索過程中比較重要的點(diǎn)。搜索歷史設(shè)計(jì),需要考慮以下兩個(gè)方面:

  1. 未登錄/已登錄兩種狀態(tài)下的搜索歷史差異。首先是兩種狀態(tài)下是否都有搜索歷史,其次是如果有歷史,那兩種狀態(tài)下的搜索歷史是否一樣。
  2. 跨平臺(tái)設(shè)計(jì)。如果一個(gè)用戶在手機(jī)端搜索了若干內(nèi)容,再訪問PC版時(shí),相關(guān)的搜索歷史是否需要同步,以及如何同步,都是需要考慮的。

搜索總結(jié)

所有在用戶體驗(yàn)上的努力,都是為了提高用戶效率。從這個(gè)角度來梳理搜索背后的邏輯:首先我們有一個(gè)明確的產(chǎn)品定位,然后基于這個(gè)定位策劃用戶行為路徑,明確了用戶行為路徑,就可以確定搜索的定義以及具體的功能設(shè)計(jì),最后再通過用戶數(shù)據(jù)進(jìn)行驗(yàn)證,進(jìn)入迭代優(yōu)化階段。

最后一點(diǎn)需要提醒的是,同樣的APP在安卓版和蘋果版上還是有差別的,所以也需要關(guān)注版本的差異。

 

作者:古木 ?微信公眾號(hào):E木筆記

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

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

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

    回復(fù)
  2. mark

    回復(fù)