Zi 字媒體

搜索框一種常見的交互控制項，用於精準提取海量的信息中的準確內容。本文作者分享了設計一個搜索框的幾個要點，希望大家從中可以有所收穫。1.什麼是搜索框？搜索框一種常見的交互控制項，用於精準提取海量的信息中的準確內容。搜索框幾乎存在所有的網站和APP中，尤其是海量內容為導向的產品之中，例如音樂庫、電商類網站，做好搜索（框）尤其重要。2.搜索框的應用場景設計過那麼多的搜索框，你所不知道的是，它還有以下幾種細分應用場景。（1）作為搜索引擎入口說到搜索，我們一般人首先會想到的是搜索引擎，例如谷歌，而在搜索引擎中，首頁十年始終如一的搜索框最深入人心。反過來說，正是因為搜索引擎巨頭的成功，搜索才越發備受重視，搜索框也是幾乎成為網站或者APP的標配。（2）用於查找內容典型的應用場景，放在網站頂部之類的顯眼位置，用於查找網站中的內容，一觸即達。（3）用於快速定位查找內容的變種，例如，在手機「設置」中，當設置的選項較多時，通過搜索框進行搜索，可以快速定位到想要的設置項。（4）用於活動推薦一些電商網站，巧妙利用搜索框中預置的詞，可以達到活動推薦的效果，例如下圖中搜索框內置「油煙機」一詞，用戶只需通過點擊搜索即可直達結果頁或者活動頁面。3.搜索框的類別（APP）什麼？搜索框還分類別？不是都是放大鏡+線框組合么？但是，搜索框還有以下這些類別區分。（1）隱藏式搜索框只提供一個放大鏡圖標，需要再點擊圖標跳轉到搜索頁面；或者是需要下拉時才出現，例如微信首頁的搜索框。（2）普通搜索框通常固定在頁面頂部，包含搜索框的普通要素（放大鏡+線框）。（3）有提示搜索框此類搜索框的特徵是，中間有提示語，通常這類的都可以複合搜索，例如可以搜名稱或者代碼。（4）含圖片搜索框顧名思義，與普通搜索框相比，增加可以「以圖識圖」的搜索功能，例如淘寶就可以通過上傳圖片，搜索與圖片同類的商品。（5）帶語音搜索語音交互是新的交互熱點，相比普通搜索框，帶語音搜索框可以明顯減輕用戶手工輸入文字的煩惱，現在語音識別的成功率已經達到了很高的地步。（6）精準分類搜索與其他搜索框相比，此類搜索框可以先選擇分類，再輸入關鍵詞搜索分類下的內容，亞馬遜的習慣做法，在商品分類較多，但又需要分類檢索的時候適用，日常生活中可見超市日用品、食品等分類法。4.搜索框的交互設計（APP）設計一個搜索框，不比設計一個頁面簡單，甚至可能更複雜，它涉及到用戶的精準轉化，屬於看起來簡單，但是實現複雜的功能之一。（1）樣式使用約定俗成的樣式（