本文作者對(duì)目前市面上4款主流產(chǎn)品的搜索界面進(jìn)行了拆解分析，對(duì)其背后的設(shè)計(jì)思路和設(shè)計(jì)邏輯進(jìn)行了總結(jié)。

搜索是用戶通過輸入關(guān)鍵詞，檢索到想要的信息。

搜索功能對(duì)于一個(gè)產(chǎn)品，存在的意義就是幫助用戶快速從龐大信息中找到想要的信息。

隨著搜索功能的不斷迭代，大部分產(chǎn)品在用戶搜索的過程會(huì)做一些推薦和提供歷史搜索功能，給用戶在搜索過程中提供更快觸達(dá)到想要的結(jié)果。

本節(jié)主要通過4個(gè)產(chǎn)品來看看目前市面上主流產(chǎn)品在做搜索的不同思路和設(shè)計(jì)邏輯。4個(gè)產(chǎn)品如下所示：

1. 淘寶
2. 微信
3. 知乎
4. 愛奇藝

01 淘寶

對(duì)于淘寶這樣的購物平臺(tái)而言，幾乎一半以上訂單的購買是基于搜索。

用戶使用淘寶購買的場(chǎng)景很多，有的是無目的閑逛，看到心儀的產(chǎn)品，完成購買，有的是基于之前的購物車和收藏完成購買。剩下的基本是基于搜索，找到便宜的店鋪完成購買。搜索前

搜索位于淘寶首頁狀態(tài)欄之下，幾乎占據(jù)淘寶首頁最核心的位置?？赡苁菫榱藦?qiáng)化搜索功能，最新版本的淘寶，將搜索按鈕展示出來，估計(jì)是為了強(qiáng)化搜索這個(gè)功能，引導(dǎo)用戶使用搜索，畢竟搜索太核心、太重要了。

淘寶首頁的視覺搶點(diǎn)太多了，首頁每個(gè)小模塊都做的特別搶眼，重視覺，這也導(dǎo)致首頁反而沒重點(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í)，新頁面浮現(xiàn)。新頁面中包含三個(gè)模塊，分別為歷史搜索、搜索發(fā)現(xiàn)和全網(wǎng)熱榜。

歷史記錄是基于搜索過的歷史關(guān)鍵詞。有時(shí)候用戶經(jīng)常去看一款產(chǎn)品，并查看價(jià)格變化。所以歷史記錄可以減少用戶的輸入，提升搜索效率。搜索發(fā)現(xiàn)是基于搜索記錄，系統(tǒng)推薦類似的產(chǎn)品，幫用戶購買做出推薦。

全網(wǎng)熱榜是將目前淘寶平臺(tái)熱賣的排榜，展示給用戶，讓用戶了解目前淘寶大家都在購買什么。

搜索中/后

搜索過程中，系統(tǒng)會(huì)針對(duì)搜索詞，做出關(guān)聯(lián)詞聯(lián)想匹配，用戶可根據(jù)匹配的關(guān)鍵詞選擇，快速達(dá)到結(jié)果頁，減少搜索時(shí)間，提升搜索效率。

用戶點(diǎn)擊聯(lián)想匹配項(xiàng)目，或點(diǎn)擊鍵盤上的搜索，達(dá)到結(jié)果頁。

用戶點(diǎn)擊取消，回到上一級(jí)頁面。

02 微信

作為全民App，微信的搜索具有參考價(jià)值。微信iOS版本，默認(rèn)搜索框展示出現(xiàn)。PS：iOS原生默認(rèn)搜索欄不展示，下拉展示。

激活輸入框，進(jìn)入搜索頁面，鍵盤調(diào)出，用戶可直接輸入。用戶點(diǎn)擊取消，回到上一級(jí)頁面。

微信是為數(shù)不多的將搜索范圍前置，而其他的app大部分是將搜索范圍后置。即搜索出現(xiàn)結(jié)果，通過tab展示不同的搜索結(jié)果，例如b站。

為什么微信將搜索范圍前置呢？我在網(wǎng)上找到了比較靠譜的回答，以下是來自純銀社群Tony的回答：

針對(duì)這個(gè)問題的答案是：微信目前沒有能力去做全搜索結(jié)果的后置分類。

這里的“沒有能力”是個(gè)中性詞，因?yàn)楹途W(wǎng)頁這種格式化標(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í)前置也有分類，分別是“朋友圈”，“文章”，“表情”，“小說”，“音樂”，“表情”。

可以看到這些分類對(duì)應(yīng)的內(nèi)容可能是通訊錄的聯(lián)系人，可能是群聊名稱，也可能是公眾號(hào)名稱等等。這些格式不統(tǒng)一的內(nèi)容之間，缺乏一種像網(wǎng)頁pagerank，社交媒體feed的edgerank的排名算法，這在技術(shù)上就形成了很大的挑戰(zhàn)，微信很可能“沒有能力”。因?yàn)閮?nèi)容形式不統(tǒng)一，就很難用同一個(gè)標(biāo)準(zhǔn)算法衡量每種內(nèi)容的權(quán)重，即使是淘寶的商品，因?yàn)榻y(tǒng)一是商品，所以基于“好評(píng)”“購買量”“價(jià)格”等特征來做rank的技術(shù)挑戰(zhàn)也比微信要在“聯(lián)系人”“群聊”“公眾號(hào)”“朋友圈”“表情”這些紛雜的內(nèi)容形態(tài)之間做rank要簡單的多。

簡單說，如果只搜聯(lián)系人，微信能做排名；只搜朋友圈，微信也能做排名；但是揉在一起，微信就不知道怎么做排名了：聯(lián)系人應(yīng)該排第一欄還是朋友圈內(nèi)容應(yīng)該排第一欄，或者說是表情包應(yīng)該排第一欄？這個(gè)結(jié)論如何得出？

因?yàn)槲⑿艣]有能力做這些不同格式內(nèi)容的搜索排名，或者說控制不了把多種不同格式內(nèi)容糅合在一起進(jìn)行搜索的用戶體驗(yàn)。他只能采取“后置分類傾向于IM產(chǎn)品的應(yīng)用內(nèi)搜索，如聯(lián)系人，群聊，公眾號(hào)”，“前置分類傾向于內(nèi)容分類搜索，如表情，小說，音樂”。來達(dá)到一個(gè)雖然不如google百度這樣流暢自然，但足夠可控的，比較穩(wěn)定的搜索體驗(yàn)。

微信搜索過程中，因?yàn)樗阉鲀?nèi)容都是本地，所以采用即時(shí)搜索機(jī)制，這一過程中體驗(yàn)很好，用戶不需要點(diǎn)擊鍵盤上的搜索按鈕，因?yàn)楫?dāng)前頁即代表結(jié)果頁。

微信搜索結(jié)果排序邏輯很復(fù)雜，以后可以單獨(dú)拿出一期來講微信搜索匹配邏輯。

03 知乎

作為一個(gè)信息流產(chǎn)品。使用知乎產(chǎn)品的大部分用戶是直接瀏覽知乎推薦的內(nèi)容。剩下的部分是通過知乎搜索找到想要的答案內(nèi)容。

知乎的搜索位置和其他產(chǎn)品一樣，位于首頁的狀態(tài)欄之下。

知乎和其他產(chǎn)品有些不同的是，直接將熱搜內(nèi)容顯示在搜索框中，通過輸入框的內(nèi)容吸引用戶，讓用戶產(chǎn)生興趣并激活輸入框進(jìn)行搜索。但是激活搜索框之后，之前的信息提示語消失了，這點(diǎn)做的不夠好。

當(dāng)激活搜索框時(shí)，進(jìn)入新浮層頁面時(shí)，知乎依舊在強(qiáng)推熱搜內(nèi)容。搜索歷史放在了第二個(gè)模塊的位置。熱搜利用tab切換的方式來展示更多內(nèi)容。用戶通過點(diǎn)擊熱搜內(nèi)容時(shí)，搜索框?qū)崴褍?nèi)容的核心關(guān)鍵詞帶入搜索框進(jìn)行搜索。

在搜索過程中，知乎會(huì)優(yōu)先展示匹配的話題。用戶點(diǎn)擊鍵盤上的搜索，會(huì)進(jìn)入結(jié)果頁列表。結(jié)果頁列表也是以tab的形式展示不同的結(jié)果范圍。

04 愛奇藝

愛奇藝支持語音搜索，輸入框會(huì)置于搜索發(fā)現(xiàn)的資源詞，吸引用戶點(diǎn)擊搜索。進(jìn)入搜索頁面，頁面展示含有兩塊內(nèi)容，一塊是搜索歷史，另一塊是搜索發(fā)現(xiàn)。愛奇藝的搜索設(shè)計(jì)和知乎很像。只是在側(cè)重點(diǎn)上有所區(qū)別，愛奇藝強(qiáng)化搜索歷史。

點(diǎn)擊搜索范圍，出現(xiàn)下拉選項(xiàng)，有三種篩選緯度。

搜索過程中出現(xiàn)聯(lián)想匹配。搜索結(jié)果按照電影或者電視劇的排序展示，并且包含主角百科、相關(guān)搜索、焦點(diǎn)資訊等。

總結(jié)

通過以上4個(gè)產(chǎn)品的對(duì)比，可以看出。如果想強(qiáng)化搜索功能，則可以像淘寶搜索那樣通過強(qiáng)化按鈕視覺去讓用戶知道，這里含有搜索功能。

進(jìn)入搜索界面，可根據(jù)具體情況是否需要?dú)v史搜索和推薦搜索，并根據(jù)產(chǎn)品的業(yè)務(wù)訴求，合理設(shè)計(jì)其布局。

結(jié)果頁可采用tab的形式進(jìn)行搜索結(jié)果的篩選。

以上就是關(guān)于搜索的簡單解析。希望這篇文章可以對(duì)你有所幫助。

#專欄作家#

UX，人人都是產(chǎn)品經(jīng)理專欄作家。前美團(tuán)點(diǎn)評(píng)高級(jí)交互設(shè)計(jì)師。微信公眾號(hào)：Echo的設(shè)計(jì)筆記，歡迎關(guān)注

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

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