原作者：Nick Babich? 翻譯者：Puddinnng

本教程為翻譯教程，原文地址為：

http://babich.biz/mobile-ecommerce-how-to-design-ux-search/

如果顧客都搜不到想買的東西，你還怎么指望你的產(chǎn)品能賣出去？搜索功能是營(yíng)利性 app 和網(wǎng)站上，很基本也很關(guān)鍵的功能。在搜索、了解產(chǎn)品時(shí)，用戶期盼著流暢的 app 內(nèi)搜索體驗(yàn)。而且他們常常根據(jù)一兩組的搜索結(jié)果，很快地對(duì) app 的好壞做出評(píng)價(jià)。

完善的搜索功能應(yīng)該能讓用戶快速簡(jiǎn)單地找到他們想找的。這篇文章中，我們會(huì)探究如何使之成為可能。

1.搜索欄的放置位置

用戶尋找搜索欄時(shí)，可謂是又快又狠。他們常常只是掃描一下頁面去尋找“我可以輸入的那個(gè)小框”。

目標(biāo)：設(shè)計(jì)能被快速發(fā)現(xiàn)而且明晰的搜索欄。

1.1將搜索欄放置在醒目的位置

搜索欄是用戶找產(chǎn)品最快速的一種途徑，所以它是電商app/網(wǎng)站的主要功能，也應(yīng)該被放置在醒目的位置。將搜索欄放在隱蔽位置的app會(huì)讓用戶覺得沮喪，也會(huì)讓用戶的操作流程變慢。

左邊：搜索功能被藏在目錄旁邊。

電商app應(yīng)該將搜索欄放在的首頁頂部（如果你的首屏很長(zhǎng)，那么在底部也放上搜索欄）。對(duì)擁有大量商品的app來說，將搜索欄放在這樣的位置，能夠讓它既明顯又能夠很快被找到。

放置一個(gè)能輕易辨別的搜索欄在屏幕頂部

1.2將放大鏡圖標(biāo)和搜索欄放一起

只有少數(shù)圖標(biāo)具有世界范圍內(nèi)的廣泛認(rèn)知度，放大鏡圖標(biāo)恰恰是其中一個(gè)。就算你沒有使用文字標(biāo)簽說明，用戶也能將放大鏡圖標(biāo)看作是“搜索”的意思。

你應(yīng)該使用一個(gè)粗線條，最簡(jiǎn)化的放大鏡圖標(biāo)。因?yàn)閳D形細(xì)節(jié)越少，認(rèn)知速度越快。

放大鏡圖標(biāo)

1.3范圍欄（iOS系統(tǒng)特有）

在iOS系統(tǒng)中，搜索欄會(huì)伴隨一個(gè)范圍欄，這個(gè)范圍欄能夠讓用戶快速地選擇搜索范圍。

范圍欄可以被加在搜索欄之后，以便用戶能夠再次縮小搜索范圍。

然而，更好的辦法還是優(yōu)化搜索結(jié)果，省得用戶自己給搜索劃范圍。

2.理解搜索欄中的問句

搜索欄迫使用戶做更多的工作，不僅因?yàn)橛脩粜枰岢鰡柧?，他們還需要將它打出來。輸入是一件浪費(fèi)時(shí)間的事情（特別是在手機(jī)上）。

目標(biāo)：嘗試降低用戶輸入數(shù)據(jù)的難度，同時(shí)提供即時(shí)的搜索結(jié)果。

2.1自動(dòng)建議

大多數(shù)用戶不擅長(zhǎng)于構(gòu)建問句：第一次搜索時(shí)，如果他們找不到想要的結(jié)果，之后的嘗試也很少成功。事實(shí)上，大多數(shù)情況是他們直接放棄了。自動(dòng)建議機(jī)制通過用戶輸入的文字，來預(yù)測(cè)用戶想查找的內(nèi)容，幫助用戶找到合適的問法。自動(dòng)建議機(jī)制幫助用戶更好地構(gòu)建問句。

自動(dòng)建議機(jī)制不在于加快搜索的過程，但卻能指導(dǎo)用戶輸入合適的問句。

自動(dòng)建議工具能過減少用戶犯錯(cuò)的可能

但是確保自動(dòng)建議機(jī)制是有用的。設(shè)計(jì)糟糕的自動(dòng)建議機(jī)制會(huì)使用戶感到困惑。所以請(qǐng)使用拼寫自動(dòng)更正功能來優(yōu)化這個(gè)工具。

2.2近期的搜索記錄

app應(yīng)該儲(chǔ)存下所有交互過程，包括最近的搜索和購(gòu)買記錄，以便在用戶下次搜索時(shí)供他們使用。這會(huì)讓用戶在搜索相同物件時(shí)節(jié)省不少時(shí)間和力氣，也能提升用戶體驗(yàn)。

搜索記錄在電商app中很重要，因?yàn)橛脩魰?huì)重復(fù)他們的搜索和購(gòu)買行為。

3.搜索過程

最理想的情況是搜索結(jié)果能立刻展現(xiàn)，如果做不到的話，你也應(yīng)該提供合適的視覺反饋。但要記住，漫長(zhǎng)的加載過程會(huì)讓用戶沮喪，還會(huì)有失去他們注意力的可能性。

目標(biāo)：讓用戶感知到的搜索時(shí)間短于實(shí)際時(shí)間。

3.1搜索占位符

一般來說，0.1s以下的延遲不必提供特別的反饋。但如果長(zhǎng)于這個(gè)時(shí)間，你至少要嘗試讓等待的過程變愉悅。這時(shí)，臨時(shí)的消息占位符就很適合展示。

使用占位符來吸引用戶注意

3.2延遲加載

延遲加載是一種常用的技術(shù)。它可以確保展示一部分的內(nèi)容的同時(shí)，另一部分繼續(xù)加載。用這種方式頁面加載地非?？欤?yàn)樽畛踔恍杓虞d少量的產(chǎn)品信息。

延遲加載技術(shù)用在手機(jī)app中

延遲加載產(chǎn)品時(shí)，最好先將產(chǎn)品文字說明加載出來。這樣，沒耐心的用戶也能先通過瀏覽文字信息找尋目標(biāo)商品，而不必等待所有圖片都加載出來。

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

目標(biāo)：確保搜索結(jié)果是有用的。加快搜索過程，同時(shí)保持用戶對(duì)接下來任務(wù)的注意。

4.1前幾條搜索結(jié)果具有高度相關(guān)性

因?yàn)椴恍杌瑒?dòng)就能看到的手機(jī)屏幕太小了，你要確保用戶最先能看到一組高度相關(guān)的結(jié)果（3或5個(gè)）；這之后，他們才需要滑動(dòng)屏幕去瀏覽更多內(nèi)容。

4.2篩選和分類

在一項(xiàng)關(guān)于電商app可用性的研究中，Baymard 機(jī)構(gòu)發(fā)現(xiàn)，超過半數(shù)的用戶嘗試在目前的頁面“中搜索”，為的是“用搜索過濾掉更多產(chǎn)品”。然而，94%的手機(jī)電子商務(wù)app或網(wǎng)站不支持這個(gè)功能。

用戶會(huì)被大量看起來不相關(guān)的搜索結(jié)果吞沒。過濾和分類選項(xiàng)，能夠幫助用戶縮小和組織搜索結(jié)果。否則，用戶就需要不停地滑動(dòng)小小的手機(jī)屏幕。

左邊：沒有過濾和分類選項(xiàng)，用戶需要瀏覽太多產(chǎn)品了。

4.3“在其中搜索”區(qū)域

這個(gè)功能能鼓勵(lì)用戶在搜索結(jié)果中“再次搜索”，而不是使用傳統(tǒng)的過濾功能。而這個(gè)功能會(huì)讓你的用戶更好地掌控他的搜索結(jié)果。下方你可以看見具有“在其中搜索”功能的頁面示例：

4.4有用處的“沒有結(jié)果”頁面

用戶搜索時(shí)難免會(huì)遇到“沒有結(jié)果”頁面。缺乏設(shè)計(jì)的“沒有結(jié)果”頁面對(duì)于用戶來說是一個(gè)死胡同。

就算用戶搜索不到任何產(chǎn)品，也要避免讓他在你的 app 中遇到死胡同。當(dāng)沒有匹配結(jié)果時(shí)，你應(yīng)該提供可替換的選擇給用戶，比如相似類別的產(chǎn)品。為了更好的幫到用戶，你應(yīng)該開發(fā)出“智能搜索”功能來。它們能夠覆蓋單雙數(shù)修正以及錯(cuò)誤拼寫糾正等功能。

5.產(chǎn)品分類

5.1不友好的分類目錄

用戶在理解那些，不按照他們期待的方式排列的分類目錄時(shí)，會(huì)很吃力。分類目錄應(yīng)該做到明確而且沒有重疊的部分。因?yàn)楫?dāng)用戶被搜索結(jié)果折騰得疲憊不堪時(shí)，目錄會(huì)是他們最后的招數(shù)了。

結(jié)論

鑒于目前30%的網(wǎng)絡(luò)購(gòu)物行為發(fā)生在手機(jī)端上，電商 app 的擔(dān)子從未如此之重。你的 app 需要包含各種類型的搜索方式，也要給用戶提供相關(guān)的搜索結(jié)果。當(dāng)在手機(jī)上購(gòu)物變得簡(jiǎn)單時(shí)，用戶才更有可能用手機(jī)來購(gòu)買，而不僅僅是搜索。