網(wǎng)站設(shè)計(jì)、APP前端制作在不同業(yè)務(wù)類型、不同場(chǎng)景下，搜索的定位和形式可能大不相同，有沒(méi)有一種通用的思路，可以cover住各類搜索的體驗(yàn)設(shè)計(jì)呢？
無(wú)論網(wǎng)站設(shè)計(jì)或是App開(kāi)發(fā)，搜索功能幾乎成了標(biāo)配，在其間占據(jù)著或輕或重的位置。一方面，搜索可以幫助用戶節(jié)約時(shí)間、直達(dá)目的；另一方面，它也是用戶主動(dòng)表達(dá)意愿的一個(gè)窗口，可以幫助搜集用戶需求、引導(dǎo)用戶行為。
在不同業(yè)務(wù)類型、不同場(chǎng)景下，搜索的定位和形式可能大不相同，有沒(méi)有一種通用的思路，可以cover住各類搜索的體驗(yàn)設(shè)計(jì)呢？
我最近把玩了30+個(gè)App，涉及搜索、資訊、知識(shí)、電商、社交、視頻、音樂(lè)、導(dǎo)航、工具、O2O、生活服務(wù)等十幾種類別，歸納總結(jié)了搜索設(shè)計(jì)的一些套路和設(shè)計(jì)形式，將其拆解開(kāi)來(lái)，與大家分享、探討。大家可以結(jié)合自家的業(yè)務(wù)類型、具體的應(yīng)用場(chǎng)景，選取適合的形式，提升搜索體驗(yàn)。
網(wǎng)站設(shè)計(jì)搜索體驗(yàn)的“三度”
打造滿意的搜索體驗(yàn)，需做好三個(gè)“度”：速度、溫度、準(zhǔn)確度。
速度指讓用戶更快得到搜索結(jié)果、完成搜索過(guò)程。
溫度指搜索過(guò)程人性化，易于理解和操作，讓用戶感到貼心、甚至是驚喜。
準(zhǔn)確度指搜索結(jié)果準(zhǔn)確，符合用戶期望。
乍一看，速度和準(zhǔn)確度似乎與技術(shù)更相關(guān)，跟設(shè)計(jì)沒(méi)啥關(guān)系。但其實(shí)三者相輔相成，我們可以通過(guò)合理而帶有溫度的設(shè)計(jì)，提升搜索的效率和體驗(yàn)，讓用戶搜得更快、更準(zhǔn)、更舒心。
網(wǎng)站制作搜索體驗(yàn)的設(shè)計(jì)拆解
我們可以把搜索拆解為三個(gè)部分：搜索入口、搜索過(guò)程、搜索結(jié)果。
搜索過(guò)程又可拆解為三個(gè)動(dòng)作：點(diǎn)擊搜索框/icon → 輸入文字/字符 → 點(diǎn)擊搜索按鈕/關(guān)鍵詞。每個(gè)動(dòng)作觸發(fā)后，都會(huì)有相應(yīng)反饋：
圖1 網(wǎng)站制作搜索過(guò)程及反饋
接下來(lái)我會(huì)將各個(gè)部分拆分開(kāi)來(lái)，分析體驗(yàn)設(shè)計(jì)的要點(diǎn)。結(jié)構(gòu)及目錄見(jiàn)下圖：
圖2 網(wǎng)站制作搜索本文結(jié)構(gòu)與目錄
網(wǎng)站制作搜索功能第一部分 搜索入口
搜索入口具有提示和引導(dǎo)作用，常見(jiàn)的有 4 種：
-
獨(dú)立的一級(jí)tab
-
搜索框
-
搜索icon
-
隱藏式搜索框/icon
圖3 四類搜索入口形式
A.網(wǎng)站制作搜索功能之獨(dú)立的一級(jí)tab
把一個(gè)獨(dú)立的tab作為搜索入口，整個(gè)tab頁(yè)面圍繞搜索功能進(jìn)行展開(kāi)。這一整頁(yè)，為搜索功能的拓展提供了很大空間，可以做各種嘗試，適合將搜索作為重要流量入口的App。
代表有App Store、Twitter、新浪微博。App Store、Twitter的tab頁(yè)面中只保留了搜索框和搜索熱詞推薦。新浪微博的嘗試更加豐富，包括分類、話題以及不同類型的推薦，運(yùn)營(yíng)的空間更大。
B.網(wǎng)站制作搜索框
應(yīng)用最廣泛的一種形式，大多居于頁(yè)面頂部，較為醒目。有些App在滑動(dòng)頁(yè)面時(shí)，還會(huì)將搜索框吸頂顯示，便于用戶隨時(shí)使用。
搜索框內(nèi)一般會(huì)有預(yù)設(shè)文案，提示用戶可搜索的關(guān)鍵詞類型。目前越來(lái)越多的App（尤其是電商類）把搜索框作為運(yùn)營(yíng)的入口，放入一些熱詞、活動(dòng)、新品/新功能等，并且不局限于一個(gè)詞，可能是一個(gè)字、一個(gè)短語(yǔ)，甚至是一個(gè)句子。
圖4 搜索框中的預(yù)設(shè)文案
C.網(wǎng)站制作搜索icon
搜索icon應(yīng)用廣泛，位置一般在頁(yè)面右上角。相對(duì)搜索框來(lái)說(shuō)，搜索icon的引導(dǎo)性稍差，運(yùn)營(yíng)空間也有限，但可以節(jié)約導(dǎo)航欄空間，適合于將搜索作為輔助功能的場(chǎng)景。
比如得到的今日學(xué)習(xí)模塊，以feed流的形式，展示用戶每天的學(xué)習(xí)任務(wù)。這個(gè)模塊預(yù)設(shè)功能是瀏覽、收聽(tīng)，且內(nèi)容有限（只包括用戶付費(fèi)訂閱的內(nèi)容和平臺(tái)為該用戶個(gè)性化推薦的內(nèi)容），搜索在此僅僅是輔助功能，所以將入口弱化。并且得到將此處搜索設(shè)定為全局搜索（搜索全App），可以引導(dǎo)用戶發(fā)現(xiàn)更多內(nèi)容，避免出現(xiàn)無(wú)結(jié)果/少結(jié)果的情況。
圖5 得到今日學(xué)習(xí)模塊
D.網(wǎng)站制作隱藏式搜索框/icon
這種形式的搜索功能是被弱化的，入口在主頁(yè)上不可見(jiàn)，有的折疊在其它入口中，有的可通過(guò)手勢(shì)喚起。
典型的一種是下拉出現(xiàn)搜索框：平時(shí)搜索入口隱藏，不占用空間，需要時(shí)又可下拉迅速呼出。微信和ios桌面、備忘錄都采用了這種形式。
網(wǎng)站制作搜索功能第二部分 搜索過(guò)程
搜索過(guò)程是提高搜索體驗(yàn)的關(guān)鍵部分，過(guò)程可分為三個(gè)階段：點(diǎn)擊搜索框/icon → 輸入文字/字符 → 點(diǎn)擊搜索按鈕/關(guān)鍵詞。
第一階段的反饋如下：
本文的搜索頁(yè)，指點(diǎn)擊搜索框/icon后跳轉(zhuǎn)的頁(yè)面。
搜索頁(yè)包括兩部分，搜索欄和輔助區(qū)（搜索欄以外的部分）。進(jìn)入搜索頁(yè)后，一般默認(rèn)調(diào)起搜索鍵盤。
圖6 搜索頁(yè)結(jié)構(gòu)
搜索欄有兩種常見(jiàn)的形式：
圖7 網(wǎng)站制作搜索欄形式
兩種形式區(qū)別在于按鈕的設(shè)計(jì)，前者有“返回”和“搜索”兩個(gè)按鈕，后者僅有“取消”按鈕。這里“返回”和“取消”功能相同，都是結(jié)束搜索，返回上頁(yè)。
因?yàn)檎{(diào)起的鍵盤通常為搜索鍵盤，自帶“搜索”按鈕，并且從操作連貫性方面來(lái)說(shuō)，鍵盤上的搜索按鈕更符合用戶習(xí)慣。所以目前大多數(shù)App在界面上僅保留了取消按鈕，這樣也更利于用戶聚焦。
有些App突破了傳統(tǒng)搜索框樣式，采用了更突出的形式（如愛(ài)彼迎）。還有些增加了圖片、語(yǔ)音、二維碼識(shí)別的入口，這也為信息輸入提供了更多的途徑。
輔助區(qū)主要為用戶提供合適的推薦，以提高搜索效率。此外，也兼具運(yùn)營(yíng)屬性，可以作為推廣入口。
輔助區(qū)的推薦主要有歷史記錄、熱搜和分類。不同類型的App在設(shè)計(jì)上有所偏重，如電商類App，熱搜可以作為運(yùn)營(yíng)入口、為某些品類導(dǎo)量，但工具類App，如印象筆記，搜索功能主要用來(lái)查找用戶自己的筆記，不具備運(yùn)營(yíng)屬性，也就不需要熱搜。
圖8 輔助區(qū)中的歷史記錄、熱搜和分類
深圳網(wǎng)站制作博納網(wǎng)絡(luò)編輯整理，未完待續(xù)。
