“搜索”是產(chǎn)品中一個非常必要的功能模塊灌曙，搜索就像為用戶提供了一條便捷的綠色通道，方便用戶快速檢索內(nèi)容节芥。
搜索動作在App中依靠搜索框來完成在刺，好用的搜索框很大程度上決定了產(chǎn)品的搜索體驗如何。大多數(shù)搜索框存在相似性头镊，但真正好的搜索框會在細節(jié)上為用戶帶來差異化的反饋蚣驼，帶來很暖很貼心的感覺。
1相艇、搜索框結(jié)構(gòu)分析?
從體驗層面上看颖杏，一個良好的用戶體驗需要具備完整的流程。搜索框的使用流程可以簡單劃分為：
使用前-找到搜索框入口坛芽；
使用中-點擊輸入內(nèi)容留储；
使用后-展示搜索結(jié)果。
其中使用中會涉及到跳轉(zhuǎn)和輸入兩種不同的狀態(tài)咙轩，在下面的文章里我會展開來分析获讳。
?2、搜索框的常見類型?
回想常用App的搜索框活喊，好像它們的樣式看起來差別并不是很大丐膝，但其實每個搜索框的細節(jié)都是經(jīng)過精心設計的，下面總結(jié)了幾種常見的搜索框類型钾菊。
搜索圖標
頁面上只提供一個放大鏡圖標帅矗，通常需要用戶點擊圖標后才能跳轉(zhuǎn)到搜索頁面，例如小紅書就將搜索圖標放置在頁面右上角煞烫。
基本搜索框
基本的搜索框組成包括放大鏡圖標浑此、文字提示、輸入框三部分滞详。微信主頁的搜索框采用了這種基本形式凛俱，文字提示為搜索喘落，簡潔清晰。
文字提示類搜索框
和基本搜索框的唯一不同的地方在于最冰，這類搜索框中的文字提示部分不再是搜索兩個字瘦棋，而是根據(jù)產(chǎn)品需求支持預置多組文字提示并在搜索框內(nèi)循環(huán)展示。
▲?在大眾點評的頂部搜索框中暖哨，文字提示部分循環(huán)展示了三組不同的內(nèi)容赌朋，引導用戶快速檢索到好吃的和好玩的。
功能類搜索框
之所以叫做功能類搜索框篇裁，是在文字提示類搜索框的基礎上根據(jù)產(chǎn)品功能的需要額外添加了常用的功能性圖標沛慢，如掃碼圖標、拍照圖標达布、語音圖標等团甲，賦予搜索框更多的功能屬性。
▲?經(jīng)常使用豆瓣看書評的同學可能會注意到豆瓣主頁的搜索框中有一個掃碼圖標黍聂，點擊之后可以快速掃描圖書條碼或二維碼躺苦，快速識別書的內(nèi)容，省去檢索的麻煩产还。
▲?淘寶搜索框的組成更復雜匹厘，除了支持掃碼外還有相機圖標，方便用戶拍照識別商品脐区。
3愈诚、搜索框設計狀態(tài)分析?
使用搜索框搜索的過程總體可以分為四部分：搜索前、點擊搜索框牛隅、輸入中炕柔、搜索后。設計分析過程中我們要先理清整體的搜索流程媒佣，再考慮每個狀態(tài)對應的交互細節(jié)及反饋匕累，這樣才能保持邏輯清晰。
搜索前-默認狀態(tài)
位置
大多數(shù)搜索框出現(xiàn)在頁面頂部丈攒，作為一個大的觸摸目標更符合用戶的認知習慣哩罪，更容易被用戶發(fā)現(xiàn)和使用。
▲?在蘋果自帶的地圖應用中巡验，搜索框放在頁面中部偏下的位置，相比于頂部搜索框碘耳，這樣的位置分布更方便用戶單手操作显设。
樣式
搜索前的狀態(tài)除了前面講的幾種常見的搜索框樣式外，有些產(chǎn)品會直接在搜索框增加“搜索”按鈕辛辨。
▲?阿里系產(chǎn)品包括淘寶捕捂、支付寶瑟枫、閑魚等主頁搜索框都額外添加了“搜索”按鈕，相比于點擊搜索框再點擊鍵盤搜索內(nèi)容推薦指攒，直接點擊按鈕簡化了搜索流程慷妙。
點擊后-獲取焦點
搜索框
點擊搜索框后，框內(nèi)的放大鏡圖標會消失允悦，出現(xiàn)閃爍的光標引導用戶輸入膝擂，搜索框右側(cè)會出現(xiàn)“取消”按鈕。
▲?點擊大眾點評的搜索框后隙弛，搜索頁會出現(xiàn)三個選項架馋，點擊每一個選項，搜索框內(nèi)的文字提示都會改變全闷，有效幫助用戶提升搜索準確度叉寂，雖然是很小的點但做的很用心。
鍵盤
點擊搜索框后會彈起鍵盤总珠，在不輸入內(nèi)容的情況下屏鳍，點擊鍵盤自帶的“搜索”按鈕能查詢搜索框中推薦的內(nèi)容。
搜索頁
搜索頁的內(nèi)容通常包括歷史搜索局服、搜索發(fā)現(xiàn)孕蝉、熱門推薦等版塊，記錄用戶的搜索行為腌逢，推薦目標商品或服務降淮，提高轉(zhuǎn)化率。
▲?豆瓣將最熱門的內(nèi)容都展現(xiàn)在搜索頁中搏讶，包括實時更新的熱門書影音榜單佳鳖、熱門小組、熱門話題等媒惕，為用戶提供有效的引導系吩。
關于歷史搜索我們還可以繼續(xù)深入分析，思考這些記錄怎么排序妒蔚、最多顯示幾條記錄……
▲?網(wǎng)易云音樂的歷史搜索最多可以保留10條穿挨，采用橫向滑動的手勢交互可以節(jié)省屏幕空間。根據(jù)內(nèi)容長短一屏一次可以顯示2-3條記錄肴盏，這會導致排在后面的歷史記錄不容易被用戶快速發(fā)現(xiàn)科盛。
▲?淘寶的歷史搜索可以容納更多的數(shù)量，當搜索記錄超過兩行時會有一個小的展開按鈕菜皂，點擊按鈕可以查看早期的記錄贞绵，這樣既能節(jié)省屏幕空間也能最大化容納歷史記錄。
搜索中-輸入內(nèi)容
刪除/取消
當開始輸入內(nèi)容時恍飘，在搜索框的右側(cè)會出現(xiàn)刪除圖標榨崩，方便用戶一鍵刪除輸入的內(nèi)容谴垫，這里要注意區(qū)分刪除和取消的區(qū)別。
▲?在淘寶中點擊“刪除”圖標母蛛，頁面會返回到上一級也就是搜索頁翩剪；
▲?點擊“取消”按鈕，頁面會直接返回到主頁也就是搜索前的狀態(tài)彩郊。
搜索提示
在用戶輸入內(nèi)容時前弯，產(chǎn)品會根據(jù)用戶輸入的內(nèi)容提供相對應的搜索推薦，這是搜索框的必備的交互反饋焦辅。
通過合理的詞條推薦能極大降低用戶的思考時間博杖，提高搜索效率，同時省去再次點擊搜索按鈕的流程筷登，降低用戶的操作步驟剃根。
字數(shù)限制
目前我所知道的大多數(shù)App在搜索時都沒有字數(shù)限制問題。
回顧一下搜索使用場景會發(fā)現(xiàn)用戶在搜索框內(nèi)輸入任何內(nèi)容都是有可能的前方，盡量不要約束用戶的輸入內(nèi)容狈醉。無論用戶輸入多少內(nèi)容，點擊都可以完成基本的搜索操作惠险，這樣整個流程才完整苗傅。
▲?在百度中輸入過多字符時，會提示查詢限制在38個漢字以內(nèi)班巩，多的字符會被忽略渣慕，雖然給出了提示但并未打斷用戶的操作流程，可以讓用戶繼續(xù)完成搜索抱慌。
搜索后-展示結(jié)果
符合預期
搜索的理想狀態(tài)是搜索到的結(jié)果符合用戶的預期逊桦，滿足用戶的搜索需求，并把最吻合的搜索結(jié)果排在前面抑进，為用戶帶來清晰的結(jié)果展示强经。
智能提示
智能提示是對用戶輸入內(nèi)容上的一種提示或糾正，如果用戶輸入的內(nèi)容有問題或不夠標準寺渗，在搜索結(jié)果中會能給最貼切的搜索結(jié)果匿情。
▲?在淘寶中輸入“shouji”或“souji”，淘寶會根據(jù)拼音給出“手機”的搜索結(jié)果信殊，但仍保留原標簽炬称，方便用戶再次點擊搜索；輸入“手ji”時鸡号，會直接給出“手機”標簽转砖，這種差異化的反饋能更好的為用戶服務。
無結(jié)果提示
如果沒有搜索到用戶輸入的內(nèi)容鲸伴，搜索頁會顯示一個空狀態(tài)府蔗，提示用戶沒有搜索結(jié)果。關于空狀態(tài)如何設計可以看我之前寫的一篇文章——如何做好空狀態(tài)設計汞窗？來看資深設計師的總結(jié)姓赤！詳細分析了空狀態(tài)的設計方法。
▲?相比于直接顯示搜索無結(jié)果的狀態(tài)仲吏，拼多多的搜索結(jié)果首先會標明相關商品較少不铆，然后將搜索內(nèi)容拆分成不同的標簽進一步引導用戶來發(fā)現(xiàn)內(nèi)容。
?最后?
這里介紹了關于搜索框設計的一些基本體驗裹唆，學會從整體到局部再到具體細節(jié)一步步分析誓斥，大家會挖掘到更多更細的設計要點。
慢慢來比較快许帐，如覺得有幫助劳坑，請點個贊，謝謝成畦！
精彩推薦：
