1.什么是搜索框？
搜索框一種常見的交互控件恭垦，用于精準(zhǔn)提取海量的信息中的準(zhǔn)確內(nèi)容。搜索框幾乎存在所有的網(wǎng)站和APP中格嗅，尤其是海量內(nèi)容為導(dǎo)向的產(chǎn)品之中番挺，例如音樂庫、電商類網(wǎng)站屯掖，做好搜索（框）尤其重要玄柏。
2.搜索框的應(yīng)用場景
設(shè)計(jì)過那么多的搜索框，你所不知道的是贴铜，它還有以下幾種細(xì)分應(yīng)用場景粪摘。
（1）作為搜索引擎入口
說到搜索瀑晒，我們一般人首先會(huì)想到的是搜索引擎，例如谷歌徘意，而在搜索引擎中苔悦，首頁十年始終如一的搜索框最深入人心。反過來說椎咧，正是因?yàn)樗阉饕婢揞^的成功玖详，搜索才越發(fā)備受重視，搜索框也是幾乎成為網(wǎng)站或者APP的標(biāo)配勤讽。
（2）用于查找內(nèi)容
典型的應(yī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è)頁面簡單眉孩，甚至可能更復(fù)雜，它涉及到用戶的精準(zhǔn)轉(zhuǎ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)枷颊。
①默認(rèn)狀態(tài)
默認(rèn)展示搜索提示詞
②獲取焦點(diǎn)
跳轉(zhuǎn)到搜索頁，并展示熱門候選詞该面，最近搜索記錄
③輸入中
根據(jù)輸入的內(nèi)容展示聯(lián)想結(jié)果夭苗，如果候選詞包含在多個(gè)分類中，例如隔缀，煙花可能是一個(gè)歌手的名字题造，還有可能是一首歌曲的名稱，還需要提供分類展示頁面猾瘸。
④結(jié)果展示
用界面或者文字描述按照何種排序規(guī)則展示結(jié)果界赔，如何展示。
（4）搜索結(jié)果
下面4個(gè)要點(diǎn)能讓搜索結(jié)果更專業(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é)果同理福侈。
④無結(jié)果提示
需要提示用戶輸入的內(nèi)容無結(jié)果，比“無結(jié)果”更好的方式是“給用戶推薦其他內(nèi)容”卢未，例如肪凛，在下圖中堰汉，“無結(jié)果”提示語下方可以根據(jù)用戶口味、或者當(dāng)下熱門推薦一些歌曲显拜。
最后衡奥，請(qǐng)思考一個(gè)問題：為什么帶語音/圖片搜索的按鈕通常放在搜索框的最右側(cè)爹袁？而不是最左邊远荠？
@夜雨原創(chuàng)文章，未經(jīng)授權(quán)失息，禁止轉(zhuǎn)載譬淳。
