交互基本功：如何設計一個好用的搜索框？

搜索框一種常見的交互控制項，用於精準提取海量的信息中的準確內容。本文作者分享了設計一個搜索框的幾個要點，希望大家從中可以有所收穫。

1.什麼是搜索框？

搜索框一種常見的交互控制項，用於精準提取海量的信息中的準確內容。搜索框幾乎存在所有的網站和APP中，尤其是海量內容為導向的產品之中，例如音樂庫、電商類網站，做好搜索（框）尤其重要。

2.搜索框的應用場景

設計過那麼多的搜索框，你所不知道的是，它還有以下幾種細分應用場景。

（1）作為搜索引擎入口

說到搜索，我們一般人首先會想到的是搜索引擎，例如谷歌，而在搜索引擎中，首頁十年始終如一的搜索框最深入人心。反過來說，正是因為搜索引擎巨頭的成功，搜索才越發備受重視，搜索框也是幾乎成為網站或者APP的標配。

（2）用於查找內容

典型的應用場景，放在網站頂部之類的顯眼位置，用於查找網站中的內容，一觸即達。

（3）用於快速定位

查找內容的變種，例如，在手機「設置」中，當設置的選項較多時，通過搜索框進行搜索，可以快速定位到想要的設置項。

（4）用於活動推薦

一些電商網站，巧妙利用搜索框中預置的詞，可以達到活動推薦的效果，例如下圖中搜索框內置「油煙機」一詞，用戶只需通過點擊搜索即可直達結果頁或者活動頁面。

3.搜索框的類別（APP）

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

（1）隱藏式搜索框

只提供一個放大鏡圖標，需要再點擊圖標跳轉到搜索頁面；或者是需要下拉時才出現，例如微信首頁的搜索框。

（2）普通搜索框

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

（3）有提示搜索框

此類搜索框的特徵是，中間有提示語，通常這類的都可以複合搜索，例如可以搜名稱或者代碼。

（4）含圖片搜索框

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

（5）帶語音搜索

語音交互是新的交互熱點，相比普通搜索框，帶語音搜索框可以明顯減輕用戶手工輸入文字的煩惱，現在語音識別的成功率已經達到了很高的地步。

（6）精準分類搜索

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

4.搜索框的交互設計（APP）

設計一個搜索框，不比設計一個頁面簡單，甚至可能更複雜，它涉及到用戶的精準轉化，屬於看起來簡單，但是實現複雜的功能之一。

（1）樣式

使用約定俗成的樣式（