起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識交互基本功：如何設計一個好用的搜索框？
搜索框一種常見的交互控件，用于精準提取海量的信息中的準確內容。本文作者分享了設計一個搜索框的幾個要點，希望大家從中可以有所收獲。
1.什么是搜索框？
搜索框一種常見的交互控件，用于精準提取海量的信息中的準確內容。搜索框幾乎存在所有的網站和APP中，尤其是海量內容為導向的產品之中，例如音樂庫、電商類網站，做好搜索（框）尤其重要。
2.搜索框的應用場景
設計過那么多的搜索框，你所不知道的是，它還有以下幾種細分應用場景。
（1）作為搜索引擎入口
說到搜索，我們一般人首先會想到的是搜索引擎，例如谷歌，而在搜索引擎中，首頁十年始終如一的搜索框最深入人心。反過來說，正是因為搜索引擎巨頭的成功，搜索才越發備受重視，搜索框也是幾乎成為網站或者APP的標配。
（2）用于查找內容
典型的應用場景，放在網站頂部之類的顯眼位置，用于查找網站中的內容，一觸即達。
（3）用于快速定位
查找內容的變種，例如，在手機“設置”中，當設置的選項較多時，通過搜索框進行搜索，可以快速定位到想要的設置項。
（4）用于活動推薦
一些電商網站，巧妙利用搜索框中預置的詞，可以達到活動推薦的效果，例如下圖中搜索框內置“油煙機”一詞，用戶只需通過點擊搜索即可直達結果頁或者活動頁面。
3.搜索框的類別（APP）
什么？搜索框還分類別？不是都是放大鏡+線框組合么？但是，搜索框還有以下這些類別區分。
（1）隱藏式搜索框
只提供一個放大鏡圖標，需要再點擊圖標跳轉到搜索頁面；或者是需要下拉時才出現，例如微信首頁的搜索框。
（2）普通搜索框
通常固定在頁面頂部，包含搜索框的普通要素（放大鏡+線框）。
（3）有提示搜索框
此類搜索框的特征是，中間有提示語，通常這類的都可以復合搜索，例如可以搜名稱或者代碼。
（4）含圖片搜索框
顧名思義，與普通搜索框相比，增加可以“以圖識圖”的搜索功能，例如淘寶就可以通過上傳圖片，搜索與圖片同類的商品。
（5）帶語音搜索
語音交互是新的交互熱點，相比普通搜索框，帶語音搜索框可以明顯減輕用戶手工輸入文字的煩惱，現在語音識別的成功率已經達到了很高的地步。
（6）精準分類搜索
與其他搜索框相比，此類搜索框可以先選擇分類，再輸入關鍵詞搜索分類下的內容，亞馬遜的習慣做法，在商品分類較多，但又需要分類檢索的時候適用，日常生活中可見超市日用品、食品等分類法。
4.搜索框的交互設計（APP）
設計一個搜索框，不比設計一個頁面簡單，甚至可能更復雜，它涉及到用戶的精準轉化，屬于看起來簡單，但是實現復雜的功能之一。
（1）樣式
使用約定俗成的樣式（?+線框），不要增加額外的“搜索”按鈕，巧妙利用手機提供的鍵盤的自帶“搜索”按鈕。
(2）位置
放在頁面頂部位置，而不是頁面中部，更符合用戶的認知習慣。
（3）搜索過程及狀態
如圖所示，搜索框搜索的過程共分為四種狀態：默認、獲取焦點、輸入中、結果展示。交互設計的工作就是要清晰展示各種狀態對應的反饋及具體頁面細節呈現。
1.默認狀態
默認展示搜索提示詞
2.獲取焦點
跳轉到搜索頁，并展示熱門候選詞，最近搜索記錄
3.輸入中
根據輸入的內容展示聯想結果，如果候選詞包含在多個分類中，例如，煙花可能是一個歌手的名字，還有可能是一首歌曲的名稱，還需要提供分類展示頁面。
4.結果展示
用界面或者文字描述按照何種排序規則展示結果，如何展示。
（4）搜索結果
下面4個要點能讓搜索結果更專業，也能體現交互設計師在細節方面的把控能力。
1.給用戶想要的預期結果
用戶搜索的目標就是想得到預期需要的東西，搜索結果要符合用戶預期，且最吻合的結果排在最靠前。
2.保留用戶輸入
保留用戶輸入的內容，就像記住朋友的名字一樣，這是最基本的禮節。
3.自動糾偏
當年搜狗輸入法其中一個制勝點就是自動糾正用戶輸入的錯誤拼音，給出和錯誤拼音最貼切的（正確）結果。搜索結果同理。
4.無結果提示
需要提示用戶輸入的內容無結果，比“無結果”更好的方式是“給用戶推薦其他內容”，例如，在下圖中，“無結果”提示語下方可以根據用戶口味、或者當下熱門推薦一些歌曲。
最后，請思考一個問題：為什么帶語音/圖片搜索的按鈕通常放在搜索框的最右側？而不是最左邊？
本文由@夜雨 原創發布于人人都是產品經理，未經許可，禁止轉載。
作者辛苦了，不過對于有幾個點我想杠一下：
1.不是因為谷歌的成功所以大家才重視搜索
是因為信息傳播更快了（3G4G網絡），網上UGC內容爆發，用戶難以精準找到合適的內容。搜索才逐漸被需要
2.列舉了很多搜索框
但是脫離了產品生態/使用場景去評論效果，都是耍流氓。
我相信沒有一個搜索框能適用于所有使用場景，所以也不該有一個統一的標準去衡量所有搜索欄
偏離一點點，能看得出作者在交互細節上很專業，縱向能力很強。如果能關注高一點的層面會更好
碼了這么多，發現作者出書了…不對勿噴
關于搜索框是否置頂，并不能說置頂就是正確的做法，不置頂就是錯誤的。應該根據不同產品的不同產品目標跟需求結合實際來看，而不應該這么一概而論吧。
語音或圖片放在右側的原因，一個是符合用戶操作流程，從左至右，還有一個因素是用戶使用常用手（右手）操作，會更加方便
為什么語音/圖片會放在右側呢，有一個因素是左側作為重要的文字顯示區域，有時候用戶在打錯字的時候，用戶就習慣通過點擊文字把光標挪過去，如果這個時候把語音/圖片按鈕放在左側，點擊的時候就容易造成誤操作
額外增加一個搜索按鈕真的是錯誤的嗎？我看還有很多app是這么做的
我也有此疑問
鍵盤已經有按鈕了，屏幕頂部再加一個搜索，既不方便，也是多此一舉。
這個是分場景的，比如，當給提供歷史瀏覽記錄的list時候，向下滑動查看更多的時候鍵盤收起，你再點擊搜索框旁邊的搜索，而不需要再喚起鍵盤。
后臺系統一行就會存在多個搜索框，那排序上哪幾個位置比較符合用戶操作，或者說我應該把經常用到的字段放這幾個位置。
呵呵，哪有那么復雜，現在手機都是大尺寸，按鈕放左邊不好點啊，有沒有~~~~
喜歡這種調理清晰帶圖文的基礎教程
對于上述提到的搜索欄是否顯示“搜索”按鈕一事不敢茍同。安卓和ios的交互規范不同，安卓是需要顯示“搜索”按鈕，因為部分安卓機的鍵盤并沒有搜索按鈕
贊同
所以要適配
看了下安卓，貌似是的
個人認為，有2個理由，一是，用戶的自然瀏覽順序是從左至右，二是，當前使用較多的搜索方式是輸入文字搜索，因此會把重要的文字搜索放在左邊，加上搜索ICON來做引導，圖片或者語音搜索是目前使用較少的搜索方式，所以放在右邊，把對用戶重要的信息優先展示給用戶，如果未來圖片或者語音搜索被高頻使用，那搜索的格局也是肯定要發生變化的
關于作者留的作業，為什么照片和語音的按鈕會放在右邊。說說我的看法，搜索的首要功能是用戶通過文字輸入來表達它的意愿，在這個場景下，用戶的意愿無法通過文字來描述（例如商品圖片，例如聽到的一首歌），此時就需要引入照片&語音搜索來負責用戶意愿的表達。我們來考慮這樣一個場景，當用戶點擊搜索框后，發現自己想搜索的無法用文字表達，然而同在搜索框內有圖片&語音按鈕，是不是就在合適的時機提供了合適的代替方案？從布局上來說，文字&圖片&語音，這三者都是搜索的內容，所以都在搜索框內出現，是不是也合理多了？
聽歌識曲與語音輸入是兩個不同的概念，應用場景也有所不同
如何理解用戶到底是習慣于搜索框旁邊的按鈕，還是習慣于使用輸入法自帶的搜索按鈕。
點擊輸入的時候，一般用戶會根據視覺導向點擊放大鏡附近搜索，而用戶的觀察熱區應該就在這附近無疑了。增加用戶使用自己提供的音樂、圖片搜索對于企業來說，是一個小的戰略目標。希望用戶在日常搜索的時候可以注意到左側的【麥克風小圖標】與【圖片掃描】小圖標。從而嘗試使用。 ??
語音和圖片的搜索頻次遠不及文字的頻次高，而用戶長久的習慣是點擊左邊進行輸入，為了區分開來，定在用戶使用習慣場景少的右邊來對應搜索頻次低的語言和圖片就要合理一些，不知作者是怎么考慮這個問題的？
不知道作者是怎么看待這個問題的？
和“蒙其D邱比特”想的一致，不過問題沒有標準答案，有思考有理有據就行。
我也贊同，但是想補充的是-帶語音/圖片的搜索，這兩個功能都屬于比較“高級”的行為，按照用戶通常的操作習慣，越往右邊操作等級越高，是為了控制其質量，因為這個按鈕不易點到需要雙手協同去點擊，也就代表了，用戶準備去點擊的時候是經過思考了才決定去點擊（比如說內心早已想好要搜什么圖片，或者發什么語音）。這也就等同于操作的成本比較高，質量控制好，搜索的東西就會越精準。（一般操作等級都是從左往右排列）—-個人觀點哈。
搜索框的作用首先是被動的查漏補缺（功能和內容上），然后是主動的制造需求（驅動引導），衍生出來的還有排行榜等功能。谷歌搜索欄似乎一直被人模仿和推從，但是實際情況是，自從谷歌00年開始加入中文搜索后，直到09年的改版才把搜索欄的高度加高以更好的適應中文字效果。另外手氣不錯這個功能也是在新互聯網數據黑幕下也可以說是完全的失敗了。
衍生出來的還有排行榜等功能。贊同，例如微博的熱搜，白百何笑而不語。 ??
是根據用戶的習慣吧。正常情況，大多數人拍照或發語音都是左手拿手機，右手按手機屏幕發送。若放在搜索框的最左邊，與用戶的習慣相反，體驗不好，慢慢的這個功能也會流產。
左側不是已經放了搜索按鈕了嗎
有概念