搜索框一種常見的交互控件，用于精準(zhǔn)提取海量的信息中的準(zhǔn)確內(nèi)容。本文作者分享了設(shè)計(jì)一個(gè)搜索框的幾個(gè)要點(diǎn)，希望大家從中可以有所收獲。

1.什么是搜索框？

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

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

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

（1）作為搜索引擎入口

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

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

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

（3）用于快速定位

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

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

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

3.搜索框的類別（APP）

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

（1）隱藏式搜索框

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

（2）普通搜索框

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

（3）有提示搜索框

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

（4）含圖片搜索框

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

（5）帶語音搜索

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

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

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

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

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

（1）樣式

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

(2）位置

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

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

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

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

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

2.獲取焦點(diǎn)

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

3.輸入中

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

4.結(jié)果展示

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

（4）搜索結(jié)果

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

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

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

2.保留用戶輸入

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

3.自動(dòng)糾偏

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

4.無結(jié)果提示

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

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

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