不管是在2C還是2B產(chǎn)品，“搜索”是產(chǎn)品中最常見且必不可少的功能模塊之一。對于用戶來說，在眾多功能模塊和信息層級中如何快速定位到目標(biāo)，通過輸入已知的關(guān)鍵詞進(jìn)行搜索是最便捷的方式，沒有之一。所以，做為一名交互設(shè)計師、體驗(yàn)設(shè)計師，應(yīng)該如何設(shè)計“搜索框”并構(gòu)建良好的用戶體驗(yàn)?zāi)兀?/p>

一、搜索框的定義

輸入框+按鈕=搜索框

搜索框是由兩種基本元素“輸入框”、“按鈕”組合而成的一種組件。

在AntDesign（螞蟻金服出品的設(shè)計體系）中，輸入框（Input）的定義為：通過鼠標(biāo)或鍵盤輸入內(nèi)容，是最基礎(chǔ)的表單域的包裝。

其應(yīng)用場景之一就是“帶搜索的輸入框”。按鈕（Button）的定義為：用于開始一個即時操作。其應(yīng)用場景有“標(biāo)記一個操作命令”、“響應(yīng)用戶點(diǎn)擊行為”、“觸發(fā)相應(yīng)的業(yè)務(wù)邏輯”。

綜上，可以給“搜索框”一個基礎(chǔ)定義：通過輸入內(nèi)容以觸發(fā)搜索行為的組件。

但是，這只是在UI層面解釋了什么是“搜索框”，從體驗(yàn)層面上看，良好的用戶體驗(yàn)要反映在“搜索框”的使用流程中，可將其劃分為3步：Before、Doing、After。

• Before：使用前，搜索框要具有醒目的視覺位置，以便用戶能迅速找到。
• Doing：使用過程中，搜索框要能根據(jù)用戶的輸入內(nèi)容有所反饋，與用戶產(chǎn)生交互。
• After：使用后，給用戶想要的結(jié)果。

搜索框的的使用流程

本文選取“搜索框”的三種用戶常見場景以進(jìn)行說明：搜索引擎—百度、電商—蘇寧易購、站內(nèi)—阿里云。

二、搜索引擎—百度

根據(jù)最新統(tǒng)計：百度搜索（http://www.baidu.com）在國內(nèi)市場份額占比超過70%。

在日常生活中，經(jīng)常會聽到人說去“百度一下”，可見百度在用戶生活中影響之深。

以“百度”為例：

Before

進(jìn)入百度首頁，搜索框占其主要頁面十分醒目，不僅提供文字輸入，也提供圖片搜索功能

百度搜索-Before

Doing

以前段時間熱門電影《我不是藥神》的名稱為例：在輸入過程中，搜索框推薦了輸入內(nèi)容的相關(guān)詞條。

相比于需要大腦組織語言并提煉關(guān)鍵詞的“輸入”操作，用戶更愿意通過點(diǎn)點(diǎn)點(diǎn)達(dá)到目的。因此，如果推薦中出現(xiàn)了用戶目標(biāo)中相符的詞條，用戶會更愿意“無需思考”點(diǎn)擊而不再輸入。

這種根據(jù)用戶輸入內(nèi)容、推薦相關(guān)詞條的交互反饋，能極大降低用戶的思考時間，提高搜索效率，因?yàn)樵陉P(guān)鍵詞的輸入時需要用戶在大腦中開展一段思考活動。點(diǎn)擊推薦詞條，會直接跳轉(zhuǎn)至搜索結(jié)果頁，省卻“百度一下”，又降低用戶的操作步驟。

百度搜索-Doing

After

用戶點(diǎn)擊推薦詞條，或輸入內(nèi)容后“百度一下”，跳轉(zhuǎn)至搜索結(jié)果頁面。

百度默認(rèn)將“網(wǎng)頁”結(jié)果作為首選頁面，同時提供“視頻、圖片、貼吧”等其他模塊內(nèi)容的Tab切換。在模塊Tab下，告知用戶搜索的結(jié)果數(shù)目，讓用戶對搜索結(jié)果有一個心理預(yù)告。

百度搜索-After

PS：

當(dāng)輸入較多字符時，會提示用戶需要將搜索關(guān)鍵詞限制在38個漢字以內(nèi)。

雖然字符超過百度的規(guī)定，但并沒有禁用搜索功能、提示用戶刪減字符，而是繼續(xù)完成搜索、未打斷用戶的操作流程，并在搜索結(jié)果頁面提示用戶“超過規(guī)定字符數(shù)之后的內(nèi)容忽略”。這樣如果搜索頁面不符合用戶目標(biāo)，用戶再次搜索前會根據(jù)自己需要進(jìn)行刪減字符。

這種交互有兩個好處：一是不打斷用戶使用流程，二是用戶懂得如何二次搜索。

百度搜索-輸入字符限制提示

三、電商搜索—蘇寧易購

2018年全國網(wǎng)上零售額超9萬億，占社會消費(fèi)總額23%。電商已成為用戶高頻使用的軟件之一，用戶在瀏覽電商網(wǎng)站時，如果有明確的購物需求，一般會直接使用搜索來查找目標(biāo)寶貝。

以蘇寧易購（http://www.suning.com）為例：

Before

搜索框在頂部主要位置，用戶進(jìn)入首頁后能迅速注意到“搜索框”在頂部。其后不管用戶瀏覽到哪個位置，都能通過“回到頂部”這一想法而定位到搜索框。

需要注意的是：在輸入框內(nèi)會默認(rèn)給出一條搜索內(nèi)容，并且在搜索框下面緊貼著有多個關(guān)鍵詞，和上文的百度推薦詞類似，點(diǎn)擊后可直接跳轉(zhuǎn)至相應(yīng)的營銷頁面。

這個位置往往是近期需大力推廣的活動或商品，也會根據(jù)用戶的用戶行為記錄，推薦目標(biāo)商品，提高轉(zhuǎn)化率。

蘇寧易購搜索-Before

Doing

最近天氣炎熱，空調(diào)是居家旅行必備之物，就以“空調(diào)”為搜索條件。

輸入“空調(diào)”后，與上文百度搜索一樣，會出現(xiàn)推薦詞條，細(xì)看能發(fā)現(xiàn)有點(diǎn)不一樣——這里的推薦內(nèi)容出現(xiàn)了分類：空調(diào)類別推薦、關(guān)鍵詞匹配、相關(guān)店鋪。

這種是主動幫用戶預(yù)設(shè)目標(biāo)場景（空調(diào)—商業(yè)空調(diào)、空調(diào)—空調(diào)1.5匹、空調(diào)—空調(diào)店鋪），能極大提高用戶的搜索準(zhǔn)確度，并節(jié)省用戶查找過程中消耗的網(wǎng)絡(luò)資源、時間成本。

蘇寧易購搜索-Doing

After

當(dāng)點(diǎn)擊“搜索”按鈕或推薦詞后，跳轉(zhuǎn)至搜索結(jié)果頁面。

基于電商的兩大特征“商品SKU量大、廣告收入來源豐厚”導(dǎo)致了搜索結(jié)果頁面的“賣家吆喝”的特點(diǎn)，主要表現(xiàn)在以下幾點(diǎn)：推廣最新活動（特價促銷），加大曝光相關(guān)品牌（知名品牌），介紹爆款商品（人氣旺盛）。這些的目標(biāo)只有一個，幫助用戶快速找到目標(biāo)商品下單購買。

在商品列表上，有一行不起眼的Tab是排序條件，默認(rèn)為“綜合”，同時提供“銷量、評價數(shù)”的排序選項(xiàng)，這利用了用戶的從眾心理。

蘇寧易購搜索-After

PS：電商的本質(zhì)是賣貨，需要服從于營收，因此有時候搜索結(jié)果雖然符合用戶需求，但也符合電商的需求，那就是讓用戶迅速掏錢購買、盡可能掏出更多的錢購買。因此當(dāng)，搜索結(jié)果為空的時候，仍然會提供推薦商品，以提高用戶掏錢的概率。

蘇寧易購搜索-搜索為空時提供商品推薦

四、站內(nèi)搜索—阿里云

2018自然年阿里云（http://www.aliyun.com）營收規(guī)模達(dá)到213.6億元，4年間增長了約20倍，已成長為全球第三大云服務(wù)提供商。以阿里云為例，用戶如果想查看站內(nèi)的某一內(nèi)容，最便捷的方式就是使用搜索功能。

Before

在阿里云內(nèi)，搜索框位于頂部固定菜單欄。相比于同一級別菜單內(nèi)其他功能，搜索的優(yōu)先級不是特別明顯，因此納入統(tǒng)一操作級別是合理的。

固定的位置帶來的好處就是：用戶不管在哪個位置都能迅速定位至搜索功能。

有意思的是：搜速框內(nèi)也推薦了默認(rèn)關(guān)鍵詞，這和電商類似，應(yīng)該也是促使用戶買買買的手段之一。

阿里云搜索-Before

Doing

以“對象存儲”為搜索詞進(jìn)行輸入，輸入“對象”后，與上文百度搜索一樣會出現(xiàn)推薦詞條， 細(xì)看推薦內(nèi)容不僅有產(chǎn)品名稱，也有貌似是操作手冊內(nèi)容“如何退訂”字樣（點(diǎn)擊后確認(rèn)是幫助文檔內(nèi)容）。

因?yàn)樵谶@種工具型產(chǎn)品中，如何操作對用戶是需要學(xué)習(xí)成本的。因此，將幫助文檔納入搜索體系與產(chǎn)品并存，拓寬了搜索的價值，也提高了用戶的使用效率，無需先進(jìn)入幫助文檔然后再搜索。

阿里云搜索-Doing

After

選擇“對象存儲”點(diǎn)擊進(jìn)入搜索結(jié)果頁面。搜索結(jié)果根據(jù)阿里云功能模塊進(jìn)行了分類“全部、網(wǎng)站、幫助文檔、云棲社區(qū)…”，并且每種類別名稱后面注有搜索的結(jié)果數(shù)目，以方便用戶快速進(jìn)行判斷。

與百度直接顯示詳細(xì)數(shù)目不同，這里最多只顯示“999+”字樣，對于這種站內(nèi)搜索，數(shù)目越多帶給用戶的不一定是好感，也有可能是惶恐。

與電商類似，搜索結(jié)果也有產(chǎn)品的推廣，以達(dá)到讓用戶掏錢的目的。

在搜索框、產(chǎn)品推廣，列表旁邊均有推薦產(chǎn)品搜索內(nèi)容，目的也是猜測用戶相關(guān)需求，例如：從產(chǎn)品信息、如何使用、資源鏈接等多維度幫助用戶全面了解“對象存儲”產(chǎn)品，節(jié)省用戶下單購買的考慮時間。

阿里云搜索-After

PS：阿里云雖然是一個2B產(chǎn)品，但具有一些2C的特征。因?yàn)榘⒗镌撇粌H要提供用戶功能的使用，更要向用戶售賣更多的云服務(wù)及產(chǎn)品。這種屬性決定了阿里云不僅是一個2B工具，也要做好2C的一面以提高營收。

五、總結(jié)

通過對以上百度、蘇寧易購、阿里云三個產(chǎn)品內(nèi)搜索框的分析，能夠發(fā)現(xiàn)“搜索框”良好的體驗(yàn)設(shè)計具有如下一些特點(diǎn)：

1. 功能復(fù)雜的產(chǎn)品中都會有搜索框，并且優(yōu)先級不低。
2. 搜索內(nèi)容不管類別有多少，搜索框只有一個，即搜索功能的入口唯一。
3. 搜索框內(nèi)輸入任何內(nèi)容都是有可能的，盡量不約束用戶的輸入內(nèi)容。
4. 根據(jù)用戶輸入提供推薦是搜索框的必備交互反饋。
5. 搜索的結(jié)果類別最好要劃分清晰，方便用戶迅速做出判斷。
6. 搜索結(jié)果的數(shù)目最好要讓用戶可知，提供心理預(yù)期。
7. 搜索出現(xiàn)為空的時候，盡量告知用戶其原因，避免二次犯錯。
8. 不管在搜索的哪個階段，內(nèi)容推薦永遠(yuǎn)有“機(jī)”可乘。
9. …

構(gòu)建良好體驗(yàn)的“搜索框”還有很多方法和設(shè)計范式，此文僅為拋磚引玉。

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

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