編輯導(dǎo)語：在現(xiàn)今互聯(lián)網(wǎng)時(shí)代，大家肯定有過在APP或網(wǎng)站上搜索的經(jīng)歷，因此搜索大家肯定都不陌生，但搜索設(shè)計(jì)并沒有我們看到的那樣簡單。里面包含了很多細(xì)節(jié)。本文圍繞搜索設(shè)計(jì)展開了講述，推薦對(duì)此感興趣的伙伴閱讀。

搜索設(shè)計(jì)看似簡單，展現(xiàn)形式上只有一個(gè)輸入框和搜索按鈕就可以了，但是里面隱藏了很多交互細(xì)節(jié)。最近工作中剛好有搜索相關(guān)的設(shè)計(jì)需求，今天就來總結(jié)下搜索中的交互細(xì)節(jié)設(shè)計(jì)。

一、搜索的作用

用戶是懶惰的，不愿意花太多精力去記憶信息，“無腦刷”的抖音玩法讓億萬用戶樂在其中。因此產(chǎn)品設(shè)計(jì)時(shí)需要盡可能的降低用戶的行為門檻，“千人千面”推薦機(jī)制越來越重要。

但是搜索查詢是用戶主動(dòng)行為，相對(duì)更有掌控感，始終都是產(chǎn)品設(shè)計(jì)中非常重要的方式。搜索主要是幫助用戶從海量數(shù)據(jù)中快速找到想要瀏覽的內(nèi)容，例如百度、谷歌等搜索引擎能夠成為單獨(dú)的產(chǎn)品，可以看出搜索在互聯(lián)網(wǎng)時(shí)代具有極其重要的作用。主要包含以下兩個(gè)方面：

1. 降低用戶的行為門檻

搜索實(shí)現(xiàn)了簡單的輸入，快速輸出，只要幾個(gè)關(guān)鍵字就可以獲得符合用戶需求的內(nèi)容，將原有的用戶行為成本轉(zhuǎn)移給系統(tǒng)，從而讓購物消費(fèi)更加快捷、輕松。而語音輸入和拍照搜索進(jìn)一步降低了用戶行為門檻。

2. 減少用戶操作，縮短行為路徑

搜索功能可以幫助用戶快速定位信息，從而提高了用戶對(duì)內(nèi)容的觸達(dá)效率。例如當(dāng)用戶有明確的購物需求時(shí)，不需要一步步點(diǎn)擊商品分類，選擇商品類型、品牌等信息，就可以快速直達(dá)自己所需的商品。

二、搜索的形式

搜索欄是搜索功能的起點(diǎn)，內(nèi)容不復(fù)雜，但是也有多種形式。我簡單的將其分為完全形式、簡化形式以及類搜索形式3種類型。

1. 完全形式

我們大多見到的搜索欄是由輸入框和搜索按鈕組成的，用戶輸入相關(guān)內(nèi)容后，點(diǎn)擊按鈕或者回車就可以執(zhí)行搜索了。在完全形式下，根據(jù)搜索范圍的設(shè)定，又可以分為全量搜索和定向搜索兩種形式。全量搜索就是直接對(duì)全平臺(tái)內(nèi)容執(zhí)行搜索，在搜索結(jié)果中分類展示。例如騰訊云Web端搜索功能，用戶只需要輸入關(guān)鍵字進(jìn)行模糊搜索就可以了。

定向搜索則是用戶可以預(yù)先設(shè)定搜索范圍，可以減少后續(xù)用戶的篩選操作。例如淘寶Web端搜索欄可以設(shè)定“寶貝、天貓、店鋪”3個(gè)搜索類別。

微信搜索欄兼具了兩者的功能，既可以直接輸入關(guān)鍵詞完成全平臺(tái)內(nèi)容搜索，也可以設(shè)定范圍定向搜索。

完全搜索欄包含了分類項(xiàng)、輸入框、搜索按鈕等形式，因此占據(jù)的頁面空間也相對(duì)較大，更適合重搜索場景的產(chǎn)品。例如在電商移動(dòng)端產(chǎn)品中，雖然頁面寸土寸金，但是搜索欄仍然采用完全搜索欄形式，輔助關(guān)鍵詞引導(dǎo)，可以更好的抓住用戶視線。

2. 簡化形式

簡化形式主要用于弱搜索的場景中，通常只是用圖標(biāo)來告知用戶存在搜索功能，更有利于頁面空間布局。

當(dāng)然形式也是隨著頁面的不同而改變的。今日頭條的首頁都是采用了完全搜索欄的形式，進(jìn)入到資訊詳情頁面時(shí)，用戶的核心任務(wù)是查看頁面信息，用戶的搜索需求則變成了弱需求，只是提供了圖標(biāo)入口，能夠滿足用戶的快捷操作即可。

3. 類搜索形式

如果用戶沒有直接的搜索需求，而是在瀏覽商品過程中，對(duì)某類型商品產(chǎn)生了興趣，希望查看更多相似商品。電商平臺(tái)專門增加了“查看相似”的功能，用戶不需要輸入任何內(nèi)容，只需要點(diǎn)擊按鈕就可以查找相似商品，從而提高了用戶的搜索效率。

三、搜索的交互設(shè)計(jì)原則

完整的搜索流程包含了各種細(xì)節(jié)。例如搜索欄的形式、光標(biāo)停留、輸入狀態(tài)、異常數(shù)據(jù)、搜索結(jié)果、二次篩選等等。整個(gè)過程沒有非常艱深的業(yè)務(wù)內(nèi)容，主要是交互的細(xì)節(jié)設(shè)計(jì)，可以總結(jié)以下3個(gè)設(shè)計(jì)原則。

1. 信息引導(dǎo)

移動(dòng)端產(chǎn)品中頁面空間有限，搜索欄更多的是作為入口，通常會(huì)增加關(guān)鍵詞引導(dǎo)用戶點(diǎn)擊。用戶點(diǎn)擊操作后會(huì)進(jìn)入到專門的落地頁面，里面平鋪了各種搜索信息，例如搜索歷史、推薦內(nèi)容，甚至各類營銷榜單等，方便用戶快速操作的同時(shí)，增強(qiáng)的內(nèi)容的曝光和引導(dǎo)性。

而在PC端產(chǎn)品具有頁面空間優(yōu)勢(shì)，用戶的搜索過程完全是通過搜索欄完成的。

為了做好用戶引導(dǎo)，搜索欄中會(huì)增加歷史搜索記錄，下方增加推薦關(guān)鍵詞，幫助用戶快速完成搜索。同時(shí)也可以喚醒用戶對(duì)某些商品的興趣和記憶，從而挖掘用戶潛在的搜索需求。

2.用戶效率

搜索是效率型操作，如何快速幫助用戶完成輸入、結(jié)果查詢是最主要的設(shè)計(jì)目標(biāo)。例如當(dāng)光標(biāo)停留時(shí)，搜索欄就會(huì)呈現(xiàn)各種已有信息，方便用戶選擇輸入。用戶輸入過程中，搜索欄通常會(huì)展示關(guān)鍵詞聯(lián)想信息，方便用戶快速選擇相關(guān)內(nèi)容。

淘寶甚至給出了二級(jí)的商品標(biāo)簽，引導(dǎo)用戶更準(zhǔn)確的定義商品，從而提高搜索的準(zhǔn)確率，最終更好的提升用戶的購物效率。當(dāng)關(guān)鍵詞與內(nèi)容不匹配時(shí)，反饋結(jié)果前置可以減少用戶的后續(xù)操作。

騰訊云搜索欄輸入的關(guān)鍵詞不符合內(nèi)容時(shí)，并沒有跳轉(zhuǎn)到結(jié)果頁面再給出信息反饋，而是直接在搜索欄中做出反饋，從而減少了用戶的跳轉(zhuǎn)次數(shù)。

由于PC頁面的展示空間更大，用戶的行為成本相對(duì)更高，為了幫助用戶實(shí)時(shí)搜索，首頁內(nèi)容滾動(dòng)時(shí)還會(huì)增加吸頂搜索浮層，方便用戶快速操作。

3. 隱私保護(hù)

搜索歷史有利有弊，不經(jīng)意間可能會(huì)泄露自己的隱私。為了打消用戶的顧慮，搜索通常都會(huì)增加清除記錄功能。

而在今日頭條中細(xì)化了隱私保護(hù)項(xiàng)，搜索歷史不是簡單的全部清空，而是可以單獨(dú)刪除，便于用戶保留所需的內(nèi)容。另外還增加了無痕搜索模式，避免用戶搜索之后會(huì)忘記刪除關(guān)鍵詞的場景。

四、寫在最后

設(shè)計(jì)就是細(xì)節(jié)不斷打磨提升的過程。搜索中還有很多細(xì)節(jié)設(shè)計(jì)，例如關(guān)鍵詞的視覺引導(dǎo)性、常搜選項(xiàng)置頂、搜索結(jié)果的二次篩選等等，今天就不一一討論了，歡迎大家留言交流。

#專欄作家#

子牧先生。公眾號(hào)：子牧UXD（HelloDesign），人人都是產(chǎn)品經(jīng)理專欄作家。產(chǎn)品體驗(yàn)設(shè)計(jì)師。8年互聯(lián)網(wǎng)行業(yè)經(jīng)驗(yàn)，擅長體驗(yàn)設(shè)計(jì)思維、設(shè)計(jì)方法論、交互設(shè)計(jì)研究。

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

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