一個(gè)好的搜索功能設(shè)計(jì)能夠很好的幫助客戶(hù)直達(dá)想要的地方，實(shí)現(xiàn)好的用戶(hù)體驗(yàn)，今天分享幾個(gè)搜素框的設(shè)計(jì)技巧，希望可以給大家?guī)?lái)啟發(fā)。你無(wú)法去賣(mài)一個(gè)用戶(hù)找不到的產(chǎn)品。搜索是用戶(hù)最基本的行為，也是構(gòu)建一個(gè)可盈利的app或網(wǎng)站的重要元素。用戶(hù)在發(fā)現(xiàn)和學(xué)習(xí)產(chǎn)品時(shí)期望在app中有流暢的體驗(yàn)，他們會(huì)根據(jù)搜索結(jié)果迅速判斷出一個(gè)app的價(jià)值。

一個(gè)好的搜索控件應(yīng)當(dāng)幫助用戶(hù)迅速簡(jiǎn)便地找到用戶(hù)想要的內(nèi)容。在本文中我們將探討如何將其實(shí)現(xiàn)。

1.搜索如何放置

用戶(hù)在尋找搜索的入口時(shí)通常是迅速且粗暴的。他們通常會(huì)瀏覽一個(gè)頁(yè)面然后尋找能輸入文字的框。目標(biāo)：搜索框設(shè)計(jì)得明顯可見(jiàn)且很容易識(shí)別。搜索區(qū)域放在明顯的位置搜索是電商類(lèi)app或網(wǎng)站的基礎(chǔ)功能，需要放在顯眼的位置，讓用戶(hù)很容易發(fā)現(xiàn)。搜索如果不放在顯眼的位置，會(huì)給用戶(hù)造成困惑,降低用戶(hù)的效率。

搜索功能隱藏在菜單選項(xiàng)后面電商類(lèi)app應(yīng)該將搜索放在主頁(yè)的頂部（如果首頁(yè)很長(zhǎng)，搜索應(yīng)當(dāng)固定在頂部）。如果app的詳細(xì)目錄有很多，搜索區(qū)域應(yīng)當(dāng)放在默認(rèn)位置，確保用戶(hù)很容易找到且快速可以用。搜索框里帶有放大鏡icon能夠讓用戶(hù)有廣泛共識(shí)的icon確實(shí)不多，放大鏡就是其中的一個(gè)。用戶(hù)甚至不需要有預(yù)置文字的提醒就可以知道放大鏡是搜索的意思。使用最簡(jiǎn)單的放大鏡icon圖標(biāo)就可以了，因?yàn)閕con圖片的細(xì)節(jié)并不能加快用戶(hù)的識(shí)別：范圍選擇欄（只適用于iOS版本）在iOS中，搜索有相應(yīng)的范圍選擇欄，用戶(hù)可以迅速選擇搜索的范圍，比如明確的標(biāo)準(zhǔn)或分類(lèi)。然而，最好是提高搜索結(jié)果的準(zhǔn)確性，否則用戶(hù)不需要設(shè)置搜索的范圍。

2. 解析搜索需求

搜索使得用戶(hù)做得更多，因?yàn)橛脩?hù)不僅要提出搜索需求，還要將問(wèn)題輸入相應(yīng)位置。打字是容易出錯(cuò)并且耗費(fèi)時(shí)間的行為（尤其是在手機(jī)屏幕上）。

目標(biāo)：盡量降低用戶(hù)輸入成本并迅速提供結(jié)果。

自動(dòng)推薦

普通用戶(hù)是不了解查詢(xún)公式的：如果他們?cè)谇皫讉€(gè)列表中沒(méi)有找到合適的結(jié)果，后來(lái)嘗試的成功率就很低。事實(shí)上，他們常常就放棄了。自動(dòng)推薦機(jī)制是基于用戶(hù)的現(xiàn)有特征嘗試去預(yù)測(cè)結(jié)果，從而幫助用戶(hù)尋找到合適的結(jié)果。當(dāng)完全自動(dòng)的推薦結(jié)果奏效時(shí)，有助于用戶(hù)準(zhǔn)確表達(dá)搜索詞條。

自動(dòng)推薦機(jī)制不在于提升搜索的速度，而在于引導(dǎo)用戶(hù)，幫助他們構(gòu)建他們的搜索詞條。

但是請(qǐng)確保自動(dòng)推薦是對(duì)用戶(hù)有所幫助的。如果設(shè)計(jì)得不好，有可能會(huì)使用戶(hù)產(chǎn)生疑惑。因此可以通過(guò)使用拼寫(xiě)自動(dòng)矯正，識(shí)別詞根和預(yù)測(cè)內(nèi)容等方式來(lái)提高工具的可用性。

最近搜索

app應(yīng)該儲(chǔ)存用戶(hù)的交互數(shù)據(jù)，包括最近查找和最近購(gòu)買(mǎi)記錄，為用戶(hù)下一次執(zhí)行搜索操作時(shí)提供數(shù)據(jù)支撐。這將有利于節(jié)約用戶(hù)查找同一件商品的時(shí)間和精力，同時(shí)提升用戶(hù)體驗(yàn)。

3. 搜索進(jìn)展

理想狀態(tài)下，搜索結(jié)果應(yīng)該實(shí)時(shí)顯示，如果不能做到的話(huà)應(yīng)該有一個(gè)適當(dāng)?shù)囊曈X(jué)反饋。但是請(qǐng)記得減慢加載時(shí)間會(huì)是用戶(hù)產(chǎn)生困惑，甚至是流失。

目標(biāo)：努力使用戶(hù)感知到的查找時(shí)間比實(shí)際時(shí)間要短。

搜索占位符

通常情況下，延遲0.1-1秒的時(shí)間是不需要給用戶(hù)特殊的反饋的。但是如果搜索占用的時(shí)間更長(zhǎng)，至少應(yīng)該盡量將用戶(hù)的等待做的更令用戶(hù)滿(mǎn)意。加載容器就顯得重要了。

懶加載

懶加載是一種常見(jiàn)的技術(shù)，當(dāng)一些結(jié)果已經(jīng)展示出來(lái)的同時(shí)另一些內(nèi)容正在加載。這種方式加載很快，因?yàn)椴糠之a(chǎn)品是原先加載好的。

對(duì)于懶加載的產(chǎn)品，最好是優(yōu)先展示出產(chǎn)品的文字信息，這樣缺乏耐心的用戶(hù)可以通過(guò)文字先篩選出目標(biāo)產(chǎn)品，無(wú)需等待所有圖片加載完成。

4. 搜索結(jié)果展示

目標(biāo)：確保搜索的結(jié)果是有用的。提高搜索進(jìn)度，讓用戶(hù)始終感覺(jué)處在任務(wù)之中。

優(yōu)先展示關(guān)聯(lián)度高的結(jié)果

在手機(jī)首屏展示的結(jié)果條數(shù)是有限的，所以要確保用戶(hù)看到的是最相關(guān)的3-5個(gè)結(jié)果，然后在滑動(dòng)查看其它的結(jié)果。

篩選和分類(lèi)

在移動(dòng)端電商的可用性研究中Baymard研究院注意到超過(guò)50%的用戶(hù)都是在他們最近搜索過(guò)的分類(lèi)路徑中進(jìn)行搜索，力圖用搜索詞條來(lái)篩選出所要的產(chǎn)品。然而，94%的移動(dòng)端電商網(wǎng)站和app都不支持這種模式。

當(dāng)搜索出來(lái)的結(jié)果是不相關(guān)的或數(shù)量非常多的時(shí)候，用戶(hù)會(huì)覺(jué)得不知所措。篩選和分類(lèi)可以幫助用戶(hù)縮小結(jié)果的范圍，否則用戶(hù)需要大量的滑動(dòng)屏幕，或是需要在很小的屏幕上做分頁(yè)處理。

左圖中不包括篩選和分類(lèi)，用戶(hù)需要瀏覽大量的產(chǎn)品

一定范圍內(nèi)的搜索

這種做法的好處是鼓勵(lì)用戶(hù)在一定范圍內(nèi)搜索，而不是運(yùn)用傳統(tǒng)的篩選，這將會(huì)為用戶(hù)帶來(lái)前所未有的優(yōu)質(zhì)搜索結(jié)果。下圖所示就是精心設(shè)計(jì)的范圍內(nèi)搜索。

有用的“無(wú)查詢(xún)結(jié)果”頁(yè)面

當(dāng)用戶(hù)在搜索過(guò)程中不可避免的會(huì)出現(xiàn)“無(wú)查詢(xún)結(jié)果”的頁(yè)面。如果設(shè)計(jì)得不好，對(duì)用戶(hù)來(lái)說(shuō)可能就是一個(gè)死胡同。

△ 以惠普為例，“無(wú)查詢(xún)結(jié)果”頁(yè)面對(duì)用戶(hù)來(lái)說(shuō)就是一個(gè)死胡同

當(dāng)用戶(hù)的搜索沒(méi)有相應(yīng)的結(jié)果時(shí)，避免給用戶(hù)造成走進(jìn)死胡同的體驗(yàn)，為用戶(hù)提供有價(jià)值的備選方案，比如相似分類(lèi)的產(chǎn)品。為了更好的幫助用戶(hù)，你可以使用“智能搜索”，矯正單復(fù)數(shù)或拼寫(xiě)等錯(cuò)誤。

5. 引導(dǎo)導(dǎo)航（產(chǎn)品分類(lèi)）

友好的分類(lèi)菜單

如果菜單和用戶(hù)預(yù)期的不匹配，用戶(hù)需要費(fèi)很大力氣去解析和辨別。分類(lèi)菜單需要清晰且不重復(fù)。這是尤其重要的，因?yàn)楫?dāng)用戶(hù)在經(jīng)歷了之前的困惑后，會(huì)將菜單作為最后的解決方案。

總結(jié)

考慮到現(xiàn)在30%的線(xiàn)上購(gòu)物都是通過(guò)移動(dòng)端手機(jī)，關(guān)于電商app和網(wǎng)站的賭注是前所未有的。你的app或網(wǎng)站應(yīng)當(dāng)適配所有類(lèi)型的搜索，針對(duì)分類(lèi)、產(chǎn)品和產(chǎn)品特性返回相關(guān)搜索結(jié)果。當(dāng)移動(dòng)端零售體驗(yàn)變得順暢了，消費(fèi)者將會(huì)在手機(jī)網(wǎng)站上不僅僅是搜索，更有可能購(gòu)買(mǎi)產(chǎn)品。

網(wǎng)頁(yè)標(biāo)題：5個(gè)方面解析手機(jī)網(wǎng)站移動(dòng)端電商的搜索框設(shè)計(jì)
本文地址：http://www.rwnh.cn/news/32129.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)