“搜索”交互的相關(guān)技巧
本文作者對(duì)目前市面上4款主流產(chǎn)品的搜索界面進(jìn)行了拆解分析,對(duì)其背后的設(shè)計(jì)思路和設(shè)計(jì)邏輯進(jìn)行了總結(jié)。搜索是用戶通過(guò)輸入關(guān)鍵詞,檢索到想要的信息。搜索功能對(duì)于一個(gè)產(chǎn)品,存在的意義就是幫助用戶快速?gòu)凝嫶笮畔⒅姓业较胍男畔ⅰ?/span>
隨著搜索功能的不斷迭代,大部分產(chǎn)品在用戶搜索的過(guò)程會(huì)做一些推薦和提供歷史搜索功能,給用戶在搜索過(guò)程中提供更快觸達(dá)到想要的結(jié)果。
01 淘寶
對(duì)于淘寶這樣的購(gòu)物平臺(tái)而言,幾乎一半以上訂單的購(gòu)買是基于搜索。
用戶使用淘寶購(gòu)買的場(chǎng)景很多,有的是無(wú)目的閑逛,看到心儀的產(chǎn)品,完成購(gòu)買,有的是基于之前的購(gòu)物車和收藏完成購(gòu)買。剩下的基本是基于搜索,找到便宜的店鋪完成購(gòu)買。搜索前
搜索位于淘寶首頁(yè)狀態(tài)欄之下,幾乎占據(jù)淘寶首頁(yè)最核心的位置。可能是為了強(qiáng)化搜索功能,最新版本的淘寶,將搜索按鈕展示出來(lái),估計(jì)是為了強(qiáng)化搜索這個(gè)功能,引導(dǎo)用戶使用搜索,畢竟搜索太核心、太重要了。
淘寶首頁(yè)的視覺(jué)搶點(diǎn)太多了,首頁(yè)每個(gè)小模塊都做的特別搶眼,重視覺(jué),這也導(dǎo)致首頁(yè)反而沒(méi)重點(diǎn)了。
搜索欄左側(cè)有掃一掃入口,搜索欄里面還有一個(gè)掃一掃的入口,兩個(gè)入口,同時(shí)里面的功能不一樣,對(duì)于小白用戶難以理解其中的邏輯和區(qū)別,應(yīng)該可以整合在一個(gè)入口。用戶點(diǎn)擊搜索框里面的相機(jī)圖標(biāo),進(jìn)入掃一掃界面,掃一掃默認(rèn)識(shí)別實(shí)物,這也是目前ai技術(shù)的一個(gè)體現(xiàn)。
搜索中
當(dāng)用戶激活輸入框時(shí),新頁(yè)面浮現(xiàn)。新頁(yè)面中包含三個(gè)模塊,分別為歷史搜索、搜索發(fā)現(xiàn)和全網(wǎng)熱榜。
歷史記錄是基于搜索過(guò)的歷史關(guān)鍵詞。有時(shí)候用戶經(jīng)常去看一款產(chǎn)品,并查看價(jià)格變化。所以歷史記錄可以減少用戶的輸入,提升搜索效率。搜索發(fā)現(xiàn)是基于搜索記錄,系統(tǒng)推薦類似的產(chǎn)品,幫用戶購(gòu)買做出推薦。
全網(wǎng)熱榜是將目前淘寶平臺(tái)熱賣的排榜,展示給用戶,讓用戶了解目前淘寶大家都在購(gòu)買什么。
搜索中/后
搜索過(guò)程中,系統(tǒng)會(huì)針對(duì)搜索詞,做出關(guān)聯(lián)詞聯(lián)想匹配,用戶可根據(jù)匹配的關(guān)鍵詞選擇,快速達(dá)到結(jié)果頁(yè),減少搜索時(shí)間,提升搜索效率。
用戶點(diǎn)擊聯(lián)想匹配項(xiàng)目,或點(diǎn)擊鍵盤上的搜索,達(dá)到結(jié)果頁(yè)。
用戶點(diǎn)擊取消,回到上一級(jí)頁(yè)面。
02 微信
作為全民App,微信的搜索具有參考價(jià)值。微信iOS版本,默認(rèn)搜索框展示出現(xiàn)。PS:iOS原生默認(rèn)搜索欄不展示,下拉展示。
激活輸入框,進(jìn)入搜索頁(yè)面,鍵盤調(diào)出,用戶可直接輸入。用戶點(diǎn)擊取消,回到上一級(jí)頁(yè)面。
微信是為數(shù)不多的將搜索范圍前置,而其他的app大部分是將搜索范圍后置。即搜索出現(xiàn)結(jié)果,通過(guò)tab展示不同的搜索結(jié)果,例如b站。
為什么微信將搜索范圍前置呢?我在網(wǎng)上找到了比較靠譜的回答,以下是來(lái)自純銀社群Tony的回答:
針對(duì)這個(gè)問(wèn)題的答案是:微信目前沒(méi)有能力去做全搜索結(jié)果的后置分類。
這里的“沒(méi)有能力”是個(gè)中性詞,因?yàn)楹途W(wǎng)頁(yè)這種格式化標(biāo)準(zhǔn)化的內(nèi)容組織形式不一樣,微信內(nèi)部的內(nèi)容格式高度不統(tǒng)一,難以統(tǒng)一搜索。
比如現(xiàn)在微信的搜索結(jié)果是有分類的,分類是1,最常使用;2,聯(lián)系人;3,群聊;4,公眾號(hào);5,聊天記錄;6,收藏;7,內(nèi)容搜索(搜一搜)。其中有可能還插入一個(gè)“游戲類別”。同時(shí)前置也有分類,分別是“朋友圈”,“文章”,“表情”,“小說(shuō)”,“音樂(lè)”,“表情”。
可以看到這些分類對(duì)應(yīng)的內(nèi)容可能是通訊錄的聯(lián)系人,可能是群聊名稱,也可能是公眾號(hào)名稱等等。這些格式不統(tǒng)一的內(nèi)容之間,缺乏一種像網(wǎng)頁(yè)pagerank,社交媒體feed的edgerank的排名算法,這在技術(shù)上就形成了很大的挑戰(zhàn),微信很可能“沒(méi)有能力”。因?yàn)閮?nèi)容形式不統(tǒng)一,就很難用同一個(gè)標(biāo)準(zhǔn)算法衡量每種內(nèi)容的權(quán)重,即使是淘寶的商品,因?yàn)榻y(tǒng)一是商品,所以基于“好評(píng)”“購(gòu)買量”“價(jià)格”等特征來(lái)做rank的技術(shù)挑戰(zhàn)也比微信要在“聯(lián)系人”“群聊”“公眾號(hào)”“朋友圈”“表情”這些紛雜的內(nèi)容形態(tài)之間做rank要簡(jiǎn)單的多。
簡(jiǎn)單說(shuō),如果只搜聯(lián)系人,微信能做排名;只搜朋友圈,微信也能做排名;但是揉在一起,微信就不知道怎么做排名了:聯(lián)系人應(yīng)該排第一欄還是朋友圈內(nèi)容應(yīng)該排第一欄,或者說(shuō)是表情包應(yīng)該排第一欄?這個(gè)結(jié)論如何得出?
因?yàn)槲⑿艣](méi)有能力做這些不同格式內(nèi)容的搜索排名,或者說(shuō)控制不了把多種不同格式內(nèi)容糅合在一起進(jìn)行搜索的用戶體驗(yàn)。他只能采取“后置分類傾向于IM產(chǎn)品的應(yīng)用內(nèi)搜索,如聯(lián)系人,群聊,公眾號(hào)”,“前置分類傾向于內(nèi)容分類搜索,如表情,小說(shuō),音樂(lè)”。來(lái)達(dá)到一個(gè)雖然不如google百度這樣流暢自然,但足夠可控的,比較穩(wěn)定的搜索體驗(yàn)。
微信搜索過(guò)程中,因?yàn)樗阉鲀?nèi)容都是本地,所以采用即時(shí)搜索機(jī)制,這一過(guò)程中體驗(yàn)很好,用戶不需要點(diǎn)擊鍵盤上的搜索按鈕,因?yàn)楫?dāng)前頁(yè)即代表結(jié)果頁(yè)。
微信搜索結(jié)果排序邏輯很復(fù)雜,以后可以單獨(dú)拿出一期來(lái)講微信搜索匹配邏輯。
03 知乎
作為一個(gè)信息流產(chǎn)品。使用知乎產(chǎn)品的大部分用戶是直接瀏覽知乎推薦的內(nèi)容。剩下的部分是通過(guò)知乎搜索找到想要的答案內(nèi)容。
知乎的搜索位置和其他產(chǎn)品一樣,位于首頁(yè)的狀態(tài)欄之下。
知乎和其他產(chǎn)品有些不同的是,直接將熱搜內(nèi)容顯示在搜索框中,通過(guò)輸入框的內(nèi)容吸引用戶,讓用戶產(chǎn)生興趣并激活輸入框進(jìn)行搜索。但是激活搜索框之后,之前的信息提示語(yǔ)消失了,這點(diǎn)做的不夠好。
當(dāng)激活搜索框時(shí),進(jìn)入新浮層頁(yè)面時(shí),知乎依舊在強(qiáng)推熱搜內(nèi)容。搜索歷史放在了第二個(gè)模塊的位置。熱搜利用tab切換的方式來(lái)展示更多內(nèi)容。用戶通過(guò)點(diǎn)擊熱搜內(nèi)容時(shí),搜索框?qū)崴褍?nèi)容的核心關(guān)鍵詞帶入搜索框進(jìn)行搜索。
在搜索過(guò)程中,知乎會(huì)優(yōu)先展示匹配的話題。用戶點(diǎn)擊鍵盤上的搜索,會(huì)進(jìn)入結(jié)果頁(yè)列表。結(jié)果頁(yè)列表也是以tab的形式展示不同的結(jié)果范圍。
04 愛(ài)奇藝
愛(ài)奇藝支持語(yǔ)音搜索,輸入框會(huì)置于搜索發(fā)現(xiàn)的資源詞,吸引用戶點(diǎn)擊搜索。進(jìn)入搜索頁(yè)面,頁(yè)面展示含有兩塊內(nèi)容,一塊是搜索歷史,另一塊是搜索發(fā)現(xiàn)。愛(ài)奇藝的搜索設(shè)計(jì)和知乎很像。只是在側(cè)重點(diǎn)上有所區(qū)別,愛(ài)奇藝強(qiáng)化搜索歷史。
點(diǎn)擊搜索范圍,出現(xiàn)下拉選項(xiàng),有三種篩選緯度。
搜索過(guò)程中出現(xiàn)聯(lián)想匹配。搜索結(jié)果按照電影或者電視劇的排序展示,并且包含主角百科、相關(guān)搜索、焦點(diǎn)資訊等。
總結(jié)
通過(guò)以上4個(gè)產(chǎn)品的對(duì)比,可以看出。如果想強(qiáng)化搜索功能,則可以像淘寶搜索那樣通過(guò)強(qiáng)化按鈕視覺(jué)去讓用戶知道,這里含有搜索功能。
進(jìn)入搜索界面,可根據(jù)具體情況是否需要?dú)v史搜索和推薦搜索,并根據(jù)產(chǎn)品的業(yè)務(wù)訴求,合理設(shè)計(jì)其布局。
結(jié)果頁(yè)可采用tab的形式進(jìn)行搜索結(jié)果的篩選。
以上就是關(guān)于搜索的簡(jiǎn)單解析。希望這篇文章可以對(duì)你有所幫助。
轉(zhuǎn)載聲明:本文來(lái)源于網(wǎng)絡(luò),不作任何商業(yè)用途

全部評(píng)論


暫無(wú)留言,趕緊搶占沙發(fā)
熱門資訊

成長(zhǎng)貼丨美女學(xué)姐從平面小白到視覺(jué)UI設(shè)計(jì)師華麗升級(jí)...

游戲UI教程:PS繪制金屬質(zhì)感的游戲登錄界面...

深圳美工設(shè)計(jì)培訓(xùn)班哪個(gè)專業(yè)?

UI設(shè)計(jì)師和ued設(shè)計(jì)師的區(qū)別是什么?

ue交互設(shè)計(jì)師要掌握什么技能嗎?

深圳學(xué)設(shè)計(jì)哪家學(xué)校有名?

電商美工要掌握哪些軟件呢?

學(xué)設(shè)計(jì)和編程哪個(gè)比較好?

北京UI設(shè)計(jì)培訓(xùn)學(xué)校排名前十名有哪些呢?
