我想多去研究和借鑒這種優(yōu)秀產(chǎn)品的交互設(shè)計(jì)，基于場(chǎng)景去思考為什么這個(gè)功能要這樣設(shè)計(jì)，那個(gè)功能要那樣設(shè)計(jì)，有沒(méi)有優(yōu)化的空間，就會(huì)漸漸培養(yǎng)出自己的產(chǎn)品感。

微信，是一個(gè)生活方式。走過(guò)六個(gè)年頭的微信，如今的確與我們的生活有著千絲萬(wàn)縷的聯(lián)系，從某種程度上說(shuō)，拋棄百度，光是用微信的搜索功能，就已經(jīng)能獲取大部分我們想要的信息。當(dāng)人們都在談小程序、微信被迫關(guān)閉iOS端贊賞功能時(shí)，你是否留意過(guò)微信的搜索體驗(yàn)到底有多棒？微信的搜索入口和流程經(jīng)過(guò)怎么樣的細(xì)節(jié)設(shè)計(jì)？

本文就微信搜索的交互流程和細(xì)節(jié)進(jìn)行分析。

微信的搜索入口層級(jí)

微信在“微信”和“通訊錄”這兩個(gè)tab頁(yè)面下設(shè)計(jì)了全局搜索入口，也還在聊天記錄、公眾號(hào)、收藏、表情、游戲下設(shè)置了子入口。這就可以幫助用戶在某個(gè)頁(yè)面模塊下，不需要返回一級(jí)菜單，就可快速找到想要的內(nèi)容。

搜索入口有四種常見(jiàn)形式

1. 放在tab bar上，例如App Storel、微博、b站；
2. 放在nav bar上，例如淘寶、京東；
3. 放在nav bar下，例如微信、QQ；
4. 點(diǎn)擊搜索icon，如網(wǎng)易云課堂。

微信的全局搜索入口

微信的全局搜索入口是第三種，位于nav bar下，而且只在“微信”和“通訊錄”這兩個(gè)tab下的頁(yè)面設(shè)計(jì)了入口。視覺(jué)設(shè)計(jì)上和頁(yè)面主體顏色接近。在交互上有3個(gè)關(guān)鍵點(diǎn)：

1. 在“微信”tab頁(yè)，初始化狀態(tài)時(shí)時(shí)搜索框是隱藏的（用戶初次打開(kāi)“收藏”時(shí)也是同樣的設(shè)計(jì)），而在“通訊錄”tab頁(yè)，搜索框是默認(rèn)顯示的。
2. 當(dāng)用戶向下滑動(dòng)時(shí)，搜索框再次會(huì)被隱藏。
3. 當(dāng)用戶下滑后再回到頂部時(shí)或做下滑刷新手勢(shì)操作時(shí)，搜索框才顯示出來(lái)。

分析：

微信的核心場(chǎng)景是聊天，搜索是其輔助功能，這就決定了布局上、視覺(jué)上、交互上的層級(jí)不需要像電商或內(nèi)容型產(chǎn)品那樣突出，以保持頁(yè)面的簡(jiǎn)潔。

在“微信”和“通訊錄”tab頁(yè)，搜索框的初始化狀態(tài)分別做隱藏和顯示的兩種不同的處理，這非常體現(xiàn)了場(chǎng)景化思維，如果不是一流的產(chǎn)品經(jīng)理，很難會(huì)想得這么細(xì)。相對(duì)來(lái)說(shuō)，用戶來(lái)到“通訊錄”頁(yè)比在“微信”頁(yè)更容易產(chǎn)生搜索的動(dòng)作，所以搜索框在“微信”頁(yè)做得更加隱蔽。

對(duì)于用戶的手勢(shì)交互，微信也是別有用心，當(dāng)用戶向下滑動(dòng)頁(yè)面時(shí)，通常都很清楚自己要找什么，所以搜索框就被隱藏了，減少對(duì)用戶注意力的干擾。只有當(dāng)用戶回到頂部時(shí)，才有可能進(jìn)行搜索操作。這就給用戶一種感覺(jué)，“我不需要你時(shí)，你從不打擾，而我需要你時(shí)，你恰好出現(xiàn)?！?/p>

分類搜索

分類搜索通常有3種常見(jiàn)形態(tài)

1. 在搜索框下方顯示不同的入口；
2. 點(diǎn)擊彈出浮層進(jìn)行切換，例如淘寶、當(dāng)當(dāng)、微博、豆瓣；
3. 在搜索框下方顯示不同的tab，如網(wǎng)易云音樂(lè)、知乎;

分析

微信的分類搜索采取的是第一種方式。

從戰(zhàn)略角度來(lái)說(shuō)，微信正在締造一個(gè)騰訊生態(tài)圈，更加滲入人們的生活。從產(chǎn)品體驗(yàn)角度來(lái)說(shuō)，當(dāng)一個(gè)產(chǎn)品越能幫助用戶找到、并且連接到他想要的東西，用戶黏性就越高。從某種程度上來(lái)說(shuō)，微信搜索的信息時(shí)效性都要高于百度，微信前陣子推出的微信指數(shù)，讓我覺(jué)得微信正在低調(diào)地爭(zhēng)奪百度搜索入口的流量。

落到具體的交互體驗(yàn)層面上，我們分析下為什么沒(méi)有選用另外兩種設(shè)計(jì)呢？

微信的搜索是默認(rèn)搜索全部?jī)?nèi)容的，在用戶沒(méi)有選擇下方入口時(shí)，默認(rèn)優(yōu)先搜索聯(lián)系人、群聊、游戲、公眾號(hào)、聊天記錄、收藏。為什么它們?cè)谒阉骺蛳路經(jīng)]有做入口？因?yàn)檫@些和用戶的關(guān)系更深一些，如果需要點(diǎn)擊入口再跳轉(zhuǎn)新的頁(yè)面，路徑就會(huì)變長(zhǎng)，體驗(yàn)就不好。另外搜索的類別很多的話，以tab形式展現(xiàn)，用戶需要不斷切換tab，這樣會(huì)比較麻煩。

第二種設(shè)計(jì)針對(duì)的場(chǎng)景是每個(gè)類別的搜索頻率是差別比較大的，通常默認(rèn)第一種分類就能滿足大多數(shù)人的搜索需求，如在淘寶里很多人都是搜寶貝。

對(duì)于類別不多的產(chǎn)品，每個(gè)類別下結(jié)果又很多，而且用戶并不明確自己的搜索類別時(shí)，第三種tab切是更好的設(shè)計(jì)，視覺(jué)比第二種更直接，路徑也比第一種更短，用戶不需要跳轉(zhuǎn)三級(jí)頁(yè)面縮小搜索范圍，直接切換tab就可瀏覽不同類型下的搜索結(jié)果。

搜索結(jié)果的分類

通常的分類方式是tab切和卡片，如網(wǎng)易和微信。tab切的好處前面已經(jīng)簡(jiǎn)單提到過(guò)。對(duì)于微信這種每一類結(jié)果可能不是很多的情況下，卡片式的瀑布流布局能讓快速定位到自己想要的內(nèi)容。

搜索推薦

微信的搜索推薦做得非常輕量化，僅有“朋友圈熱文”。其實(shí)對(duì)于擁有龐大活躍用戶數(shù)的微信來(lái)說(shuō)，如果想要做一些個(gè)性化推薦的內(nèi)容，會(huì)帶來(lái)不菲的廣告收入。個(gè)人猜測(cè)沒(méi)有這樣做的原因是，用戶數(shù)越多，眾口越難調(diào)，也就越考驗(yàn)算法，如果沒(méi)做好，反而損害用戶體驗(yàn)。

微信為什么沒(méi)有搜索提示語(yǔ)、搜索歷史？

很多產(chǎn)品在搜索框都會(huì)有提示用戶可以搜索的信息，例如網(wǎng)易云音樂(lè)會(huì)提示“搜索音樂(lè)、歌詞、電臺(tái)”，或者也會(huì)給出用戶具體的內(nèi)容進(jìn)行引流，例如優(yōu)酷會(huì)提示“人民的名義”。提示語(yǔ)都可以引導(dǎo)用戶，幫助用戶更加理解產(chǎn)品的定位，同時(shí)也避免了用戶隨意輸入關(guān)鍵詞搜不到結(jié)果，而對(duì)產(chǎn)品產(chǎn)生不好的印象。

當(dāng)光標(biāo)聚焦搜索框時(shí)，也會(huì)出現(xiàn)搜索歷史，而微信搜索框僅有“搜索”二字，也沒(méi)有搜索歷史。

這很符合微信的極簡(jiǎn)設(shè)計(jì)，但卻不可以輕易效仿，因?yàn)檫@里面有對(duì)產(chǎn)品的定位思考。微信，是一個(gè)生活方式，既然是生活，那就是無(wú)所不包。設(shè)想一下：如果微信設(shè)置了提示語(yǔ)：搜索聯(lián)系人、聊天記錄、公眾號(hào)、收藏……，那豈不是限制了用戶的思維，而且視覺(jué)上也顯得信息冗余。

再者，考慮一個(gè)功能要不要做，可以想一下如果有和沒(méi)有的差別會(huì)不會(huì)帶來(lái)使用體驗(yàn)上的巨大差別？沒(méi)有提示語(yǔ)，用戶也會(huì)本能想到搜索聯(lián)系人、聊天記錄、公眾號(hào)……等等，而且以微信的億級(jí)用戶量，每個(gè)人的搜索內(nèi)容可能都是天壤之別的，簡(jiǎn)單反而給用戶更大的范圍去探索。

那為什么不做搜索歷史呢？

在手機(jī)QQ上，是有搜索歷史的，個(gè)人猜測(cè)微信沒(méi)做也許是需求優(yōu)先級(jí)不夠高，畢竟沒(méi)有這個(gè)功能，影響也不是很大。結(jié)合場(chǎng)景來(lái)思考的話，用戶什么時(shí)候才需要搜索歷史呢？搜過(guò)的結(jié)果還會(huì)再用。這種場(chǎng)景是不是很多呢？我個(gè)人好像就不多。不知道你是否希望微信提供搜索歷史呢？

總結(jié)

知乎上曾有一個(gè)問(wèn)題，“有哪些產(chǎn)品經(jīng)理認(rèn)為很簡(jiǎn)單，實(shí)則開(kāi)發(fā)很難的技術(shù)？”，搜索功能光榮上榜多次。本文僅僅是從交互體驗(yàn)的角度分析，就發(fā)現(xiàn)光是要做好一個(gè)搜索功能，PM可不得花很多心思去思考?。∥蚁攵嗳パ芯亢徒梃b這種優(yōu)秀產(chǎn)品的交互設(shè)計(jì)，基于場(chǎng)景去思考為什么這個(gè)功能要這樣設(shè)計(jì)，那個(gè)功能要那樣設(shè)計(jì)，有沒(méi)有優(yōu)化的空間，就會(huì)漸漸培養(yǎng)出自己的產(chǎn)品感。

參考文章

@不知名設(shè)計(jì)師：《移動(dòng)端搜索功能設(shè)計(jì)：3個(gè)階段解析搜索流程設(shè)計(jì)要點(diǎn)》。

作者：小蠢俠，16年畢業(yè)，負(fù)責(zé)ToB端的產(chǎn)品經(jīng)理。坐標(biāo)上海。

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