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

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

一、搜索的作用

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

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

1. 降低用戶的行為門檻

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

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

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

二、搜索的形式

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

1. 完全形式

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

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

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

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

2. 簡化形式

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

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

3. 類搜索形式

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

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

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

1. 信息引導(dǎo)

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

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

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

2.用戶效率

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

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

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

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

3. 隱私保護

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

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

四、寫在最后

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

#專欄作家#

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

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

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