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

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

        一、搜素如何放置

        用戶在尋找搜索的入口時通常是迅速的粗暴的。他們會通常瀏覽一個頁麵

，然後尋找能輸入文字的框。

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

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

        搜索是電商類APPhuowangzhandejichugongneng，xuyaofangzaixianyandeweizhi，rangyonghuhenrongyifaxian。sousuokuangruguobufangzaixianyandeweizhi，huigeiyonghuliulanwangzhanhuochanpinshizaochengkunhuo
，jiangdiyonghudexiaolv。

        如圖1：

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

        如圖2：

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

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

        如圖3：

        二
、解析搜素需求

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

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

        1
、自動推薦

        普通用戶是不了解查詢公式的：如(ru)果(guo)他(ta)們(men)在(zai)前(qian)幾(ji)個(ge)列(lie)表(biao)中(zhong)沒(mei)有(you)找(zhao)到(dao)合(he)適(shi)的(de)結(jie)果(guo)，後(hou)來(lai)嚐(chang)試(shi)的(de)成(cheng)功(gong)率(lv)就(jiu)很(hen)低(di)。自(zi)動(dong)推(tui)薦(jian)機(ji)製(zhi)是(shi)基(ji)於(yu)用(yong)戶(hu)現(xian)有(you)的(de)特(te)征(zheng)嚐(chang)試(shi)預(yu)測(ce)結(jie)果(guo)，從(cong)而(er)幫(bang)助(zhu)用(yong)戶(hu)尋(xun)找(zhao)到(dao)合(he)適(shi)的(de)結(jie)果(guo)。當(dang)完(wan)全(quan)自(zi)動(dong)的(de)推(tui)薦(jian)結(jie)果(guo)湊(cou)效(xiao)時(shi)，有(you)助(zhu)於(yu)用(yong)戶(hu)準(zhun)確(que)表(biao)達(da)搜(sou)索(suo)詞(ci)條(tiao)。自(zi)動(dong)推(tui)薦(jian)機(ji)製(zhi)不(bu)在(zai)於(yu)提(ti)升(sheng)搜(sou)索(suo)的(de)速(su)度(du)，而(er)在(zai)於(yu)引(yin)導(dao)用(yong)戶(hu)，幫(bang)助(zhu)他(ta)們(men)構(gou)建(jian)他(ta)們(men)的(de)搜(sou)索(suo)詞(ci)條(tiao)。

        如圖4：

        但(dan)是(shi)請(qing)確(que)保(bao)自(zi)動(dong)推(tui)薦(jian)是(shi)對(dui)用(yong)戶(hu)是(shi)有(you)所(suo)幫(bang)助(zhu)的(de)，如(ru)果(guo)設(she)計(ji)得(de)不(bu)好(hao)，有(you)可(ke)能(neng)會(hui)使(shi)用(yong)戶(hu)產(chan)生(sheng)疑(yi)惑(huo)。因(yin)此(ci)可(ke)以(yi)通(tong)過(guo)使(shi)用(yong)拚(pin)寫(xie)自(zi)動(dong)矯(jiao)正(zheng)，識(shi)別(bie)詞(ci)根(gen)和(he)預(yu)測(ce)內(nei)容(rong)等(deng)方(fang)式(shi)來(lai)提(ti)高(gao)工(gong)具(ju)的(de)可(ke)用(yong)性(xing)。

        如圖5：

        2、最近搜索

        APP應(ying)該(gai)儲(chu)存(cun)用(yong)戶(hu)的(de)交(jiao)互(hu)數(shu)據(ju)，包(bao)括(kuo)最(zui)近(jin)查(zha)找(zhao)和(he)最(zui)近(jin)購(gou)買(mai)記(ji)錄(lu)，為(wei)用(yong)戶(hu)執(zhi)行(xing)下(xia)一(yi)次(ci)搜(sou)索(suo)操(cao)作(zuo)時(shi)提(ti)供(gong)數(shu)據(ju)支(zhi)撐(cheng)。這(zhe)將(jiang)有(you)利(li)於(yu)節(jie)約(yue)用(yong)戶(hu)查(zha)找(zhao)同(tong)一(yi)件(jian)商(shang)品(pin)的(de)時(shi)間(jian)和(he)精(jing)力(li)，同(tong)時(shi)提(ti)升(sheng)用(yong)戶(hu)體(ti)驗(yan)。

        如圖6：

        三、搜索進展

        lixiangzhuangtaixia，sousuojieguoyinggaishishixianshi

，ruguobunengzuodaodehuayinggaiyouyigeshidangdeshijiaofankui。danshisousuozhanyongdeshijiangengchang
，zhishaoyinggaijinliangjiangyonghudedengdaizuodegenglingyonghumanyi，name，jiazairongqijiuxiandehenzhongyaole。

        如圖7：

       1、懶加載

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

       如圖8：

       對dui於yu懶lan加jia載zai的de產chan品pin，最zui好hao是shi優you先xian展zhan示shi出chu產chan品pin的de文wen字zi信xin息xi
，這zhe樣yang缺que乏fa賴lai心xin的de用yong戶hu可ke以yi通tong過guo文wen字zi先xian篩shai選xuan出chu目mu標biao產chan品pin，無wu需xu等deng到dao所suo有you圖tu片pian都dou加jia在zai完wan成cheng。

       如圖9：

      四、搜索結果展示

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

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

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

       2、帥選和分類

       在移動端電商可用性的研究中Baymard
，超過50%的用戶都是在他們最近搜索過的分類路徑中搜索，力圖用搜索詞條來帥選出所需要的產品。然而
，94%的移動端電商網站或APP都dou不bu支zhi持chi這zhe種zhong模mo式shi。當dang搜sou索suo出chu來lai的de結jie果guo是shi不bu相xiang關guan的de，或huo數shu量liang非fei常chang多duo的de時shi候hou
，用yong戶hu會hui覺jiao得de不bu知zhi所suo措cuo，篩shai選xuan和he分fen類lei可ke以yi幫bang助zhu用yong戶hu縮suo小xiao結jie果guo的de範fan圍wei
，否fou則ze用yong戶hu需xu要yao大da量liang的de滑hua動dong屏ping幕mu
，或huo者zhe在zai很hen小xiao的de屏ping幕mu上shang做zuo分fen頁ye處chu理li。

        如圖10：

        3
、一定範圍內的搜索

        這種做法的好處是鼓勵用戶在一定的範圍內搜索

，而不是運用傳統的篩選
，這將會為用戶帶來前所未有的優質搜索結果。

        如圖11：

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

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

        如圖12：

        當dang用yong戶hu的de搜sou索suo沒mei有you相xiang應ying的de結jie果guo時shi，避bi免mian給gei用yong戶hu造zao成cheng走zou進jin死si胡hu同tong的de體ti驗yan，為wei用yong戶hu提ti供gong有you價jia值zhi的de備bei選xuan方fang案an，比bi如ru相xiang似si的de分fen來lai產chan品pin。為wei了le更geng好hao的de幫bang助zhu用yong戶hu
，你ni可ke以yi使shi用yong“智能搜索“，矯正單複數或拚寫錯誤。

        如圖13：

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

        1、友好的分類菜單

        如(ru)果(guo)菜(cai)單(dan)和(he)用(yong)戶(hu)預(yu)期(qi)的(de)不(bu)匹(pi)配(pei)，用(yong)戶(hu)需(xu)要(yao)費(fei)很(hen)大(da)的(de)力(li)氣(qi)去(qu)解(jie)析(xi)和(he)辨(bian)別(bie)。分(fen)類(lei)菜(cai)單(dan)需(xu)要(yao)清(qing)晰(xi)且(qie)不(bu)重(zhong)複(fu)。因(yin)為(wei)當(dang)用(yong)戶(hu)經(jing)曆(li)了(le)之(zhi)前(qian)的(de)困(kun)惑(huo)後(hou)，會(hui)將(jiang)菜(cai)單(dan)作(zuo)為(wei)最(zui)後(hou)的(de)解(jie)決(jue)方(fang)案(an)。

        如圖14：

       總結

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

，消費者將會在手機上不僅僅是搜素，有可能是購買產品。