1.什么是搜索框？

搜索框一種常見(jiàn)的交互控件，用于精準(zhǔn)提取海量的信息中的準(zhǔn)確內(nèi)容。搜索框幾乎存在所有的網(wǎng)站和APP中，尤其是海量?jī)?nèi)容為導(dǎo)向的產(chǎn)品之中，例如音樂(lè)庫(kù)、電商類(lèi)網(wǎng)站，做好搜索（框）尤其重要。

2.搜索框的應(yīng)用場(chǎng)景

設(shè)計(jì)過(guò)那么多的搜索框，你所不知道的是，它還有以下幾種細(xì)分應(yīng)用場(chǎng)景。

（1）作為搜索引擎入口

說(shuō)到搜索，我們一般人首先會(huì)想到的是搜索引擎，例如谷歌，而在搜索引擎中，首頁(yè)十年始終如一的搜索框最深入人心。反過(guò)來(lái)說(shuō)，正是因?yàn)樗阉饕婢揞^的成功，搜索才越發(fā)備受重視，搜索框也是幾乎成為網(wǎng)站或者APP的標(biāo)配。

（2）用于查找內(nèi)容

典型的應(yīng)用場(chǎng)景，放在網(wǎng)站頂部之類(lèi)的顯眼位置，用于查找網(wǎng)站中的內(nèi)容，一觸即達(dá)。

（3）用于快速定位

查找內(nèi)容的變種，例如，在手機(jī)“設(shè)置”中，當(dāng)設(shè)置的選項(xiàng)較多時(shí)，通過(guò)搜索框進(jìn)行搜索，可以快速定位到想要的設(shè)置項(xiàng)。

（4）用于活動(dòng)推薦

一些電商網(wǎng)站，巧妙利用搜索框中預(yù)置的詞，可以達(dá)到活動(dòng)推薦的效果，例如下圖中搜索框內(nèi)置“油煙機(jī)”一詞，用戶只需通過(guò)點(diǎn)擊搜索即可直達(dá)結(jié)果頁(yè)或者活動(dòng)頁(yè)面。

3.搜索框的類(lèi)別（APP）

什么？搜索框還分類(lèi)別？不是都是放大鏡+線框組合么？但是，搜索框還有以下這些類(lèi)別區(qū)分。

（1）隱藏式搜索框

只提供一個(gè)放大鏡圖標(biāo)，需要再點(diǎn)擊圖標(biāo)跳轉(zhuǎn)到搜索頁(yè)面；或者是需要下拉時(shí)才出現(xiàn)，例如微信首頁(yè)的搜索框。

（2）普通搜索框

通常固定在頁(yè)面頂部，包含搜索框的普通要素（放大鏡+線框）。

（3）有提示搜索框

此類(lèi)搜索框的特征是，中間有提示語(yǔ)，通常這類(lèi)的都可以復(fù)合搜索，例如可以搜名稱或者代碼。

（4）含圖片搜索框

顧名思義，與普通搜索框相比，增加可以“以圖識(shí)圖”的搜索功能，例如淘寶就可以通過(guò)上傳圖片，搜索與圖片同類(lèi)的商品。

（5）帶語(yǔ)音搜索

語(yǔ)音交互是新的交互熱點(diǎn)，相比普通搜索框，帶語(yǔ)音搜索框可以明顯減輕用戶手工輸入文字的煩惱，現(xiàn)在語(yǔ)音識(shí)別的成功率已經(jīng)達(dá)到了很高的地步。

（6）精準(zhǔn)分類(lèi)搜索

與其他搜索框相比，此類(lèi)搜索框可以先選擇分類(lèi)，再輸入關(guān)鍵詞搜索分類(lèi)下的內(nèi)容，亞馬遜的習(xí)慣做法，在商品分類(lèi)較多，但又需要分類(lèi)檢索的時(shí)候適用，日常生活中可見(jiàn)超市日用品、食品等分類(lèi)法。

4.搜索框的交互設(shè)計(jì)（APP）

設(shè)計(jì)一個(gè)搜索框，不比設(shè)計(jì)一個(gè)頁(yè)面簡(jiǎn)單，甚至可能更復(fù)雜，它涉及到用戶的精準(zhǔn)轉(zhuǎn)化，屬于看起來(lái)簡(jiǎn)單，但是實(shí)現(xiàn)復(fù)雜的功能之一。

（1）樣式

使用約定俗成的樣式（??+線框），不要增加額外的“搜索”按鈕，巧妙利用手機(jī)提供的鍵盤(pán)的自帶“搜索”按鈕。

（2）位置

放在頁(yè)面頂部位置，而不是頁(yè)面中部，更符合用戶的認(rèn)知習(xí)慣。

（3）搜索過(guò)程及狀態(tài)

如圖所示，搜索框搜索的過(guò)程共分為四種狀態(tài)：默認(rèn)、獲取焦點(diǎn)、輸入中、結(jié)果展示。交互設(shè)計(jì)的工作就是要清晰展示各種狀態(tài)對(duì)應(yīng)的反饋及具體頁(yè)面細(xì)節(jié)呈現(xiàn)。

①默認(rèn)狀態(tài)

默認(rèn)展示搜索提示詞

②獲取焦點(diǎn)

跳轉(zhuǎn)到搜索頁(yè)，并展示熱門(mén)候選詞，最近搜索記錄

③輸入中

根據(jù)輸入的內(nèi)容展示聯(lián)想結(jié)果，如果候選詞包含在多個(gè)分類(lèi)中，例如，煙花可能是一個(gè)歌手的名字，還有可能是一首歌曲的名稱，還需要提供分類(lèi)展示頁(yè)面。

④結(jié)果展示

用界面或者文字描述按照何種排序規(guī)則展示結(jié)果，如何展示。

（4）搜索結(jié)果

下面4個(gè)要點(diǎn)能讓搜索結(jié)果更專(zhuān)業(yè)，也能體現(xiàn)交互設(shè)計(jì)師在細(xì)節(jié)方面的把控能力。

①給用戶想要的預(yù)期結(jié)果

用戶搜索的目標(biāo)就是想得到預(yù)期需要的東西，搜索結(jié)果要符合用戶預(yù)期，且最吻合的結(jié)果排在最靠前。

②保留用戶輸入

保留用戶輸入的內(nèi)容，就像記住朋友的名字一樣，這是最基本的禮節(jié)。

③自動(dòng)糾偏

當(dāng)年搜狗輸入法其中一個(gè)制勝點(diǎn)就是自動(dòng)糾正用戶輸入的錯(cuò)誤拼音，給出和錯(cuò)誤拼音最貼切的（正確）結(jié)果。搜索結(jié)果同理。

④無(wú)結(jié)果提示

需要提示用戶輸入的內(nèi)容無(wú)結(jié)果，比“無(wú)結(jié)果”更好的方式是“給用戶推薦其他內(nèi)容”，例如，在下圖中，“無(wú)結(jié)果”提示語(yǔ)下方可以根據(jù)用戶口味、或者當(dāng)下熱門(mén)推薦一些歌曲。

最后，請(qǐng)思考一個(gè)問(wèn)題：為什么帶語(yǔ)音/圖片搜索的按鈕通常放在搜索框的最右側(cè)？而不是最左邊？

@夜雨原創(chuàng)文章，未經(jīng)授權(quán)，禁止轉(zhuǎn)載。