你不可能賣出一個(gè)連用戶都無法找到的商品。對(duì)于要構(gòu)建一個(gè)有利可圖的應(yīng)用程序/網(wǎng)站來講，搜索無疑是其中的一項(xiàng)基本（主要）功能/元素。用戶在使用你的程序/網(wǎng)站來查詢和了解商品信息時(shí)都期待有一個(gè)流暢的體驗(yàn)過程，通常情況下，他們會(huì)根據(jù)一兩組搜索結(jié)果來快速判斷你程序的應(yīng)用價(jià)值。

一個(gè)優(yōu)秀的搜索方案應(yīng)該幫助用戶快速輕松地找到他們想找的東西。這篇文章中，我們將探討如何使它成為可能。

1、搜索的布置

用戶通常會(huì)非?？斓囊苿?dòng)眼球來尋找頁面中的搜索功能，基本上是尋找一個(gè)可以輸入的文本框（搜索框的通用設(shè)計(jì)形式已經(jīng)培養(yǎng)了用戶的意識(shí)）。

目標(biāo):?搜索欄設(shè)計(jì)清晰可見，用戶能夠快速識(shí)別。

（1）在顯著位置突出搜索框

對(duì)于電子商務(wù)類網(wǎng)站/應(yīng)用程序來講，搜索是其中的一個(gè)基本（主要）功能，其應(yīng)該設(shè)計(jì)顯著，能快速被用戶發(fā)現(xiàn)。如若不夠顯著，必將使用戶失望并降低其瀏覽效率。

左側(cè)的搜索功能別隱藏到菜單選項(xiàng)之下

這類程序應(yīng)該在其首頁頂部位置突顯搜索功能（如果首頁過長(zhǎng)，應(yīng)在底部重復(fù)顯示）。尤其對(duì)于要顯示大量商品信息的程序，默認(rèn)顯示搜索框的做法既能夠確保搜索功能顯著又得以快速使用。

在首屏頂部放置一個(gè)高識(shí)別度的搜索框

（2）放大鏡圖標(biāo)與搜索框同在

在我們?nèi)粘Ｊ褂弥校芤姷缴倭康木哂型ㄓ靡饬x的圖標(biāo)。放大鏡圖標(biāo)就是其中之一。用戶即使在沒有文本標(biāo)簽的情況下也會(huì)自然的將該圖標(biāo)視作搜索的意義。

你應(yīng)該使用一個(gè)示意型的圖標(biāo)，就如下面這種放大鏡圖標(biāo)的最簡(jiǎn)單版本，因?yàn)檫@種沒有多少圖形細(xì)節(jié)的設(shè)計(jì)能夠加快用戶的識(shí)別：

放大鏡圖標(biāo)

（3）作用域欄（僅適用于iOS）

在iOS中，搜索框可以伴隨一條標(biāo)示作用域的欄目，能夠讓用戶快速切換搜索的作用域，比如使用明確的條件或者類別名稱：

作用域欄可以添加到搜索欄下，讓用戶精確搜索的范圍

然而，相比于這種做法，改善搜索結(jié)果顯然是更好的方式。

2、詮釋查詢?cè)~

用戶要去搜索其實(shí)是有一定工作量的，因?yàn)樗麄儾还庖氲揭玫牟樵冴P(guān)鍵詞，還得把它們打出來。而打字本來又是一個(gè)既容易出錯(cuò)又耗時(shí)的活動(dòng)（在手機(jī)這樣小的屏幕上尤其如此）。

目標(biāo)：應(yīng)該盡量減少用戶數(shù)據(jù)輸入的工作量，提供即時(shí)性的結(jié)果。

（1）自動(dòng)建議

普通用戶在構(gòu)建搜索詞時(shí)往往表現(xiàn)的很差：如果在第一嘗試后沒有獲得好的搜索結(jié)果，之后的搜索嘗試就很難成功。事實(shí)上，他們常常就會(huì)放棄。自動(dòng)建議機(jī)制是通過用戶已經(jīng)輸入的字符來預(yù)測(cè)可能的搜索關(guān)鍵詞，這樣一來就幫助用戶減少了必要的輸入。如果這種機(jī)制表現(xiàn)良好，能夠很大程度上幫助用戶實(shí)現(xiàn)更好的查詢效果。

這種機(jī)制從根本上并不是要加快搜索過程，而是為了引導(dǎo)用戶構(gòu)造他們的查詢關(guān)鍵詞。

自動(dòng)建議的機(jī)制可以降低用戶的出錯(cuò)率

但是一定要確保你的設(shè)計(jì)有效，糟糕的設(shè)計(jì)會(huì)使用戶困惑并分散他們的注意力。因此你應(yīng)該嘗試讓你的搜索方法能夠?qū)崿F(xiàn)自動(dòng)糾正拼寫錯(cuò)誤、識(shí)別詞根并預(yù)測(cè)完整的關(guān)鍵詞等來提升搜索效率。

（2）最近搜索

應(yīng)用程序應(yīng)該保存所有的用戶行為，包括最近搜索和最近購(gòu)買，以便于用戶在下次搜索時(shí)可能用到。這就節(jié)省了用戶在搜索同一樣物品時(shí)的時(shí)間和精力，提升了用戶體驗(yàn)。

3、搜索過程

理想情況下，搜索結(jié)果應(yīng)該即時(shí)顯示，如果辦不到應(yīng)該向用戶提供一種恰當(dāng)?shù)囊曈X反饋。無論如何，請(qǐng)記住，減緩了數(shù)據(jù)的加載時(shí)間就意味著可能令用戶沮喪，并稀釋他們的注意力。

目標(biāo)：想方設(shè)法讓用戶感知到搜索時(shí)間要比實(shí)際花費(fèi)的短。

（1）搜索占位符

一般情況下，延時(shí)在0.1-1秒之間時(shí)不需要額外的反饋信息。但是如果搜索過程確實(shí)需要更久的時(shí)間，你至少應(yīng)該努力讓用戶在等待過程更為愉快，這時(shí)候不妨考慮使用一個(gè)臨時(shí)的信息展現(xiàn)狀態(tài)——使用占位符。

使用占位符標(biāo)明數(shù)據(jù)類型

（2）延遲加載

這是一種常見的技術(shù)方法，即先加載一部分?jǐn)?shù)據(jù)使之顯示再去加載另一部分?jǐn)?shù)據(jù)。采用這種設(shè)計(jì)，頁面通常加載很快因?yàn)橐婚_始只需加載少量商品信息。

使用了延遲加載的應(yīng)用程序

對(duì)商品列表使用該方法時(shí)，最好先加載顯示文本信息，這樣心急的用戶也有余地在等待圖片信息加載出來之前挑選目標(biāo)商品。

4、呈現(xiàn)搜索結(jié)果

目標(biāo)：確保搜索結(jié)果是有用的。加快搜索進(jìn)程，保證用戶有始有終轉(zhuǎn)換。

（1）開頭的幾個(gè)搜索結(jié)果要高度相關(guān)

為了要在大小如此限制的手機(jī)屏幕中顯示搜索結(jié)果且減少用戶滾動(dòng)查看的壓力，一定要保證用戶一開始就能看到一組高度相關(guān)的搜索結(jié)果（比如開始的3個(gè)或5個(gè)），這之后如果他們不滿意再去滾動(dòng)查找。

（2）過濾和排序

在關(guān)于移動(dòng)電子商務(wù)的可用性研究中，Bayard研究所指出，有超過50%的用戶會(huì)試圖在當(dāng)前的導(dǎo)航目錄下繼續(xù)內(nèi)部搜索，以期繼續(xù)過濾篩選出更加滿足要求的商品。 然而事實(shí)上，94% 的電子商務(wù)類網(wǎng)站/程序都沒有給用戶這種選擇權(quán)。

當(dāng)搜索結(jié)果看起來不相關(guān)或結(jié)果太多時(shí)，用戶往往會(huì)不知所措。而過濾和排序功能則能進(jìn)一步幫助用戶縮減和組織有效結(jié)果的范圍，否則用戶可能真的需要上下滾動(dòng)/翻頁去找到滿意的結(jié)果。

左側(cè)中過濾和排序機(jī)制都沒有

（3）內(nèi)部搜索

這么做的好處是鼓勵(lì)用戶在內(nèi)部繼續(xù)搜索而不是應(yīng)用傳統(tǒng)的過濾器，用戶對(duì)商品列表也有了完全自主的把控。下面就是一個(gè)應(yīng)用了內(nèi)部搜索框的例子：

在NewEgg中，允許并鼓勵(lì)用戶在當(dāng)前目錄下繼續(xù)搜索

（4）有用的無結(jié)果頁面

用戶在搜索時(shí)，不可避免的會(huì)遇到?jīng)]有搜索結(jié)果的頁面。此時(shí)，不良的設(shè)計(jì)就會(huì)導(dǎo)致用戶面對(duì)一個(gè)毫無出路的頁面。

在HP中，一個(gè)設(shè)計(jì)欠缺的空頁面

你應(yīng)該避免使用戶遭遇這種設(shè)計(jì)，而要嘗試向用戶提供一些其他的有價(jià)值的替代信息，比如展示一些相似的商品。為了進(jìn)一步幫助用戶，你可以使用一個(gè)“智能搜索”功能，可以單數(shù)、復(fù)數(shù)和拼寫錯(cuò)誤等。

Amazon在沒有搜索結(jié)果時(shí)會(huì)給出查詢建議

5、引導(dǎo)導(dǎo)航（產(chǎn)品類別）

面對(duì)跟他們的期望不一致的菜單類別，用戶往往是難以理解和區(qū)分的。所以菜單類別應(yīng)該足夠清晰，互相之間沒有重疊。當(dāng)一個(gè)用戶從常規(guī)的搜索查詢中逃脫出來（搜索查詢不滿意），轉(zhuǎn)到菜單類別作為最后的查詢手段時(shí)，這一點(diǎn)會(huì)顯得尤為重要。

商品分類應(yīng)該足夠清晰，避免困擾用戶

結(jié)論

當(dāng)今已經(jīng)有30%的網(wǎng)上購(gòu)物行為發(fā)生在手機(jī)端上，電子商務(wù)類應(yīng)用程序/網(wǎng)站所面臨的挑戰(zhàn)也前所未有。你的應(yīng)用程序/網(wǎng)站應(yīng)該適應(yīng)所有類型的搜索，并能針對(duì)商品類別、商品名稱以及商品描述返回高度相關(guān)的結(jié)果。當(dāng)移動(dòng)端零售的用戶體驗(yàn)流暢無阻時(shí)，消費(fèi)者將更有可能在其手機(jī)上下單購(gòu)買而不只是搜索。

作者：三達(dá)不留點(diǎn)gpj

譯自：https://uxplanet.org/mobile-ecommerce-how-to-design-ux-search-77e06aba27ba#.dxxdhs6ga

本文由 @三達(dá)不留點(diǎn)gpj 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。