你有沒有曾思考過這樣一個(gè)問題：為什么搜索框總是在頂部而輸入框卻總在下方？針對這個(gè)問題，作者將自己的思考整理如下。

有設(shè)計(jì)師給出了一些解答，譬如搜索框應(yīng)易尋、大部分人會(huì)首先使用搜索等。而我認(rèn)為，在功能模塊眾多，信息架構(gòu)復(fù)雜的當(dāng)下，搜索這一組件的重要性將愈發(fā)突出。

在近期參與的產(chǎn)品中，我經(jīng)歷了多個(gè)搜索界面的設(shè)計(jì)，借此機(jī)會(huì)，整理一下搜索設(shè)計(jì)的一些思路。

一、常用搜索組件分解

入口

從左至右：微博 谷歌 唯物

1. 獨(dú)立標(biāo)簽頁 微博9.0改版中，原本用于發(fā)微博的標(biāo)簽頁中間位置改為“發(fā)現(xiàn)”頁，這一改動(dòng)將內(nèi)容產(chǎn)生權(quán)重降低，內(nèi)容消費(fèi)權(quán)重上升。發(fā)現(xiàn)標(biāo)簽頁正是獨(dú)立標(biāo)簽頁類型的搜索入口，這一形式適用于坐擁龐大內(nèi)容的成熟SNS產(chǎn)品，例如抖音、推特也使用了此樣式，根據(jù)產(chǎn)品的不同，搜索標(biāo)簽頁的架構(gòu)也各有不同；
2. 搜索框式 除了百度和谷歌，一些資源聚合類網(wǎng)站依然使用此樣式，譬如圖片分享網(wǎng)站Flickr。在寸土寸金的移動(dòng)端，搜索框一般會(huì)搭配推薦內(nèi)容出現(xiàn)；
3. icon式 搜索功能需要較好的功能可見性，但不代表它需要占據(jù)較高視覺權(quán)重，此外，“放大鏡”是一個(gè)成熟而準(zhǔn)確的意符，作為icon，用戶很容易理解“這里可以進(jìn)行搜索”這一含義。當(dāng)你希望提供搜索功能，又不想打破界面沉浸感時(shí)，在右上角提供一個(gè)icon作為入口會(huì)是較好的選擇。

中間頁

用戶準(zhǔn)備輸入時(shí)展開的臨時(shí)界面，常見于移動(dòng)端，桌面端多為下拉菜單。

左：美團(tuán) 右：唯物

1. 歷史記錄 有些產(chǎn)品中也會(huì)以“上次使用項(xiàng)”呈現(xiàn)；
2. 熱門推薦 當(dāng)你需要引導(dǎo)用戶時(shí)，推薦項(xiàng)是一個(gè)較好的交互方式。此外，歷史記錄和熱門推薦常組合使用。

引導(dǎo)語

用于揭示搜索結(jié)果。

從左至右：推特 三星Bixby 淘寶

1. 功能頁本身反映 推特的發(fā)現(xiàn)頁會(huì)根據(jù)用戶熱點(diǎn)進(jìn)行模糊推薦：“這會(huì)是你想搜索的內(nèi)容嗎？”
2. 中間頁展現(xiàn) 表面上看，中間頁與功能頁沒有太大區(qū)別。實(shí)際上兩者不同主要在交互邏輯上，中間頁是搜索時(shí)產(chǎn)生的臨時(shí)頁面，而功能頁則是獨(dú)立模塊。
3. 文案 主要有兩種方式，一種是使用引導(dǎo)語鼓勵(lì)用戶使用搜索。另一種則是根據(jù)用戶數(shù)據(jù)推斷用戶可能感興趣的搜索目標(biāo)，淘寶、網(wǎng)易云音樂都使用了這一形式。

搜索中

左：谷歌 右：今日頭條

1. 搜索聯(lián)想/即時(shí)建議；
2. 過渡動(dòng)畫 搜索通常需要較長響應(yīng)時(shí)間，可以在搜索過程中添加過渡動(dòng)畫。

結(jié)果呈現(xiàn)

大部分app會(huì)將多種方式組合使用，這里只需要一個(gè)釘釘?shù)慕Y(jié)果頁作為例子就可以了

釘釘搜索結(jié)果頁

1. 多維度展示；
2. 通過篩選導(dǎo)航；
3. 關(guān)鍵字高亮；
4. 結(jié)果糾錯(cuò)（模糊匹配）。

順便一提，釘釘中用戶輸入的同時(shí)會(huì)動(dòng)態(tài)呈現(xiàn)搜索結(jié)果。也就是說，它的中間頁和結(jié)果頁相同，在下文將會(huì)分析此功能。

二、實(shí)際案例

在項(xiàng)目中，搜索功能的設(shè)計(jì)常包含多個(gè)元素復(fù)合使用的情況，這也是其難點(diǎn)所在，而解決方案仍然是基于使用情景進(jìn)行設(shè)計(jì)。

下面以我近期產(chǎn)品（教育類）為例，探討一下設(shè)計(jì)思路。（考慮保密問題，與實(shí)際產(chǎn)品有一定出入）

視頻模塊搜索界面設(shè)計(jì)

在中后臺(tái)產(chǎn)品的搜索設(shè)計(jì)中，難點(diǎn)主要在搜索和篩選的優(yōu)先級取舍，我們要做的是讓用戶快速完成目標(biāo)任務(wù)。此模塊提供視頻內(nèi)容給教師用于課堂展示，一個(gè)常見的情況是：教學(xué)視頻的標(biāo)題通常以數(shù)字進(jìn)行分類，如“第一課”、“No.3+課程標(biāo)題”等形式，這也意味著，作為使用者的教師未必能記得搜索目標(biāo)名稱。

因此，此界面篩選優(yōu)先于搜索，而軟件本身可讀取當(dāng)前班級的科目信息，預(yù)先進(jìn)行一級篩選，此外，“上次使用”功能相當(dāng)于模糊檢索結(jié)果，大概率減少用戶操作路徑。搜索結(jié)果的呈現(xiàn)則使用關(guān)鍵字高亮的方式，易于閱讀。

現(xiàn)實(shí)中龐大的資料、檔案往往伴隨著復(fù)雜而有序的排列方式。譬如，電視劇中表現(xiàn)警察檢查檔案的場景時(shí)，會(huì)展現(xiàn)一大排資料架，各類文件按照時(shí)間或A-Z的順序排列，警察們從架子上逐個(gè)挑選，抱下一堆資料反復(fù)查看。

然而在軟件中，用戶不需要做這樣的事情，他們往往很明確自己的目標(biāo)：要么是資料的名稱，要么是資料相關(guān)者——總之，用戶所希望的是他們在搜索框中輸入這樣一個(gè)關(guān)鍵詞，就直接得到想要的結(jié)果，而翻找資料的工作，應(yīng)當(dāng)由程序來完成。

資料檢索頁的條件篩選

此界面中，搜索框的大小反映了其優(yōu)先級。而條件篩選未必沒有意義——它以下拉菜單的形式呈現(xiàn)，當(dāng)搜索框中無內(nèi)容時(shí)，它承擔(dān)模糊檢索的功能，在搜索時(shí)，它承擔(dān)中間頁的功能，而當(dāng)用戶收起篩選菜單時(shí)，意味著搜索條件被清空，用戶可以再次搜索所有內(nèi)容。

篩選組件中標(biāo)簽的交互

模糊檢索這一訴求也應(yīng)得到滿足。資料模塊與視頻模塊不同之處在于：我們難以預(yù)測用戶檢索內(nèi)容，并依此簡化操作。因此我采用“熱門”作為二級標(biāo)簽列表，將常用類目作為內(nèi)容，當(dāng)用戶點(diǎn)擊“熱門”標(biāo)簽中對象（乙瑛碑）時(shí)，搜索該對象并高亮顯示結(jié)果，采用提供線索的方式進(jìn)行篩選模塊設(shè)計(jì)。

最后，以國民應(yīng)用微信的搜索功能分析作為結(jié)尾。

微信搜索中間頁

點(diǎn)擊右上角搜索icon后，用戶便打開了微信搜索中間頁。可以看到此頁采用標(biāo)簽頁形式劃分了六個(gè)模塊，用戶點(diǎn)擊后可以搜索特定模塊，另一方面，這些模塊名稱也起到引導(dǎo)語的作用，揭示搜索結(jié)果。

搜索中&搜索結(jié)果頁面

搜索中與搜索結(jié)果是同一頁面，在用戶輸入的同時(shí)動(dòng)態(tài)顯示結(jié)果，并以多維度分類展現(xiàn)。這一搜索方式適用于搜索本地資源（內(nèi)部搜索），畢竟外部搜索需要較長響應(yīng)時(shí)間，QQ、釘釘也采用了類似的策略，順便一提，QQ采用了同時(shí)即時(shí)顯示內(nèi)部和外部結(jié)果的策略，但外部結(jié)果加載耗時(shí)較長，因此放在內(nèi)部結(jié)果下方。

最下方的“搜一搜”則是微信的外部搜索入口，此外，我們知道“發(fā)現(xiàn)”標(biāo)簽頁中也有搜一搜的入口，并且，此處的搜一搜中間頁除了六個(gè)標(biāo)簽頁之外，還有微信熱點(diǎn)這一功能。

“發(fā)現(xiàn)”標(biāo)簽頁中的搜一搜

從進(jìn)入微信到搜一搜結(jié)果有兩種路徑

從程序邏輯上來說，他們都是搜一搜模塊，只不過有不同方式可以到達(dá)，但對用戶來說，這是兩種不同的功能。搜索按鈕中，搜一搜結(jié)果是對內(nèi)部搜索的補(bǔ)充，不將多余的內(nèi)容呈現(xiàn)給用戶，保持克制，而“發(fā)現(xiàn)”中的搜一搜，則是將微信龐大的內(nèi)容展現(xiàn)給用戶。

參考文章：

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

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