解析：移動端電商的搜索框設計

       任何一家商家無法去賣一個用戶找不到的產品，搜索是用戶最基本的行為，也是構建一個可盈利的APP或網站的重要元素。用戶在發現和學習產品時期，希望在APP中有流暢的體驗，而他們會根據搜索結果迅速判斷一個APP的價值。一個好的搜索控件應當幫助用戶迅速簡便的幫助用戶搜索到用戶想要的內容。下面，我們就和大家一起來探討如何將其實現？

        一、搜素如何放置

        用戶在尋找搜索的入口時通常是迅速的粗暴的。他們會通常瀏覽一個頁面，然后尋找能輸入文字的框。

        目標：搜索框設計得明顯可見且很容易識別

        1、搜索區域放在明顯的位置

        搜索是電商類APP或網站的基礎功能，需要放在顯眼的位置，讓用戶很容易發現。搜索框如果不放在顯眼的位置，會給用戶瀏覽網站或產品時造成困惑，降低用戶的效率。

        如圖1：

        電商類APP應該將搜索框設置在首頁的頂部位置（如果首頁很長，應當將搜索框固定在頂部位置），如果APP的詳細目錄有很多，搜索區域應當放置在默認位置，確保用戶很容易找到且快速使用。

        如圖2：

        2、搜索框里帶有放大鏡icon

        能夠讓用戶有廣泛共識的icon確實不多，放大鏡就是其中的一個。用戶甚至不需要有預置文字的提醒，就可以知道放大鏡是搜素的意思。使用最簡單的放大鏡icon圖標就可以，因為icon圖片的細節并不能加快用戶的識別：

        如圖3：

        二、解析搜素需求

        搜素使得用戶做的更多，因為用戶不僅要提出搜素需求，還要講問題輸入相應位置，打字是容易出錯并且是非常耗時間的行為（尤其是在手機屏幕上）。

        目標：盡量降低用戶輸入成本并能迅速提供結果

        1、自動推薦

        普通用戶是不了解查詢公式的：如果他們在前幾個列表中沒有找到合適的結果，后來嘗試的成功率就很低。自動推薦機制是基于用戶現有的特征嘗試預測結果，從而幫助用戶尋找到合適的結果。當完全自動的推薦結果湊效時，有助于用戶準確表達搜索詞條。自動推薦機制不在于提升搜索的速度，而在于引導用戶，幫助他們構建他們的搜索詞條。

        如圖4：

        但是請確保自動推薦是對用戶是有所幫助的，如果設計得不好，有可能會使用戶產生疑惑。因此可以通過使用拼寫自動矯正，識別詞根和預測內容等方式來提高工具的可用性。

        如圖5：

        2、最近搜索

        APP應該儲存用戶的交互數據，包括最近查找和最近購買記錄，為用戶執行下一次搜索操作時提供數據支撐。這將有利于節約用戶查找同一件商品的時間和精力，同時提升用戶體驗。

        如圖6：

        三、搜索進展

        理想狀態下，搜索結果應該實時顯示，如果不能做到的話應該有一個適當的視覺反饋。但是搜索占用的時間更長，至少應該盡量將用戶的等待做得更令用戶滿意，那么，加在容器就顯得很重要了。

        如圖7：

       1、懶加載

       懶加載是一種常見的技術，當一些結果展示出來的同時，另一些內容正在加載。這種方式加載很快，因為部分產品是原先加載好的。

       如圖8：

       對于懶加載的產品，最好是優先展示出產品的文字信息，這樣缺乏賴心的用戶可以通過文字先篩選出目標產品，無需等到所有圖片都加在完成。

       如圖9：

      四、搜索結果展示

       目標：確保搜索的結果是有用的。提高搜索進度，讓用戶始終感覺出在人物之中。

       1、優先展示關聯度最高的結果

       在手機首屏展示的結果條數是有限的，所以要確保用戶看到的是最相關的3-5個結果，然后再滑動查看其它的結果。

       2、帥選和分類

       在移動端電商可用性的研究中Baymard，超過50%的用戶都是在他們最近搜索過的分類路徑中搜索，力圖用搜索詞條來帥選出所需要的產品。然而，94%的移動端電商網站或APP都不支持這種模式。當搜索出來的結果是不相關的，或數量非常多的時候，用戶會覺得不知所措，篩選和分類可以幫助用戶縮小結果的范圍，否則用戶需要大量的滑動屏幕，或者在很小的屏幕上做分頁處理。

        如圖10：

        3、一定范圍內的搜索

        這種做法的好處是鼓勵用戶在一定的范圍內搜索，而不是運用傳統的篩選，這將會為用戶帶來前所未有的優質搜索結果。

        如圖11：

        4、有用的“無查詢結果”頁面

        當用戶在搜索過程中不可避免的會出現“無查詢結果”頁面。如果設計得不好，對用戶來說，可能就是一個死胡同。

        如圖12：

        當用戶的搜索沒有相應的結果時，避免給用戶造成走進死胡同的體驗，為用戶提供有價值的備選方案，比如相似的分來產品。為了更好的幫助用戶，你可以使用“智能搜索“，矯正單復數或拼寫錯誤。

        如圖13：

      五、引導導航（產品分類）

        1、友好的分類菜單

        如果菜單和用戶預期的不匹配，用戶需要費很大的力氣去解析和辨別。分類菜單需要清晰且不重復。因為當用戶經歷了之前的困惑后，會將菜單作為最后的解決方案。

        如圖14：

       總結

       考慮到現在30%的線上購物都是通過移動端手機，關于電商APP和網站的賭注是前所未有的，你的APP或網站應當適配所有類型的搜索，針對分類、產品和產品特性返回相關搜素結果。當移動端零售體驗變得順暢了，消費者將會在手機上不僅僅是搜素，有可能是購買產品。