起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識UX設計之——電子商務網站的搜索體驗
你不可能賣出一個連用戶都無法找到的商品。對于要構建一個有利可圖的應用程序/網站來講，搜索無疑是其中的一項基本（主要）功能/元素。用戶在使用你的程序/網站來查詢和了解商品信息時都期待有一個流暢的體驗過程，通常情況下，他們會根據一兩組搜索結果來快速判斷你程序的應用價值。
一個優秀的搜索方案應該幫助用戶快速輕松地找到他們想找的東西。這篇文章中，我們將探討如何使它成為可能。
1、搜索的布置
用戶通常會非?？斓囊苿友矍騺韺ふ翼撁嬷械乃阉鞴δ?，基本上是尋找一個可以輸入的文本框（搜索框的通用設計形式已經培養了用戶的意識）。
目標:?搜索欄設計清晰可見，用戶能夠快速識別。
（1）在顯著位置突出搜索框
對于電子商務類網站/應用程序來講，搜索是其中的一個基本（主要）功能，其應該設計顯著，能快速被用戶發現。如若不夠顯著，必將使用戶失望并降低其瀏覽效率。
左側的搜索功能別隱藏到菜單選項之下
這類程序應該在其首頁頂部位置突顯搜索功能（如果首頁過長，應在底部重復顯示）。尤其對于要顯示大量商品信息的程序，默認顯示搜索框的做法既能夠確保搜索功能顯著又得以快速使用。
在首屏頂部放置一個高識別度的搜索框
（2）放大鏡圖標與搜索框同在
在我們日常使用中，能見到少量的具有通用意義的圖標。放大鏡圖標就是其中之一。用戶即使在沒有文本標簽的情況下也會自然的將該圖標視作搜索的意義。
你應該使用一個示意型的圖標，就如下面這種放大鏡圖標的最簡單版本，因為這種沒有多少圖形細節的設計能夠加快用戶的識別：
放大鏡圖標
（3）作用域欄（僅適用于iOS）
在iOS中，搜索框可以伴隨一條標示作用域的欄目，能夠讓用戶快速切換搜索的作用域，比如使用明確的條件或者類別名稱：
作用域欄可以添加到搜索欄下，讓用戶精確搜索的范圍
然而，相比于這種做法，改善搜索結果顯然是更好的方式。
2、詮釋查詢詞
用戶要去搜索其實是有一定工作量的，因為他們不光要想到要用的查詢關鍵詞，還得把它們打出來。而打字本來又是一個既容易出錯又耗時的活動（在手機這樣小的屏幕上尤其如此）。
目標：應該盡量減少用戶數據輸入的工作量，提供即時性的結果。
（1）自動建議
普通用戶在構建搜索詞時往往表現的很差：如果在第一嘗試后沒有獲得好的搜索結果，之后的搜索嘗試就很難成功。事實上，他們常常就會放棄。自動建議機制是通過用戶已經輸入的字符來預測可能的搜索關鍵詞，這樣一來就幫助用戶減少了必要的輸入。如果這種機制表現良好，能夠很大程度上幫助用戶實現更好的查詢效果。
這種機制從根本上并不是要加快搜索過程，而是為了引導用戶構造他們的查詢關鍵詞。
自動建議的機制可以降低用戶的出錯率
但是一定要確保你的設計有效，糟糕的設計會使用戶困惑并分散他們的注意力。因此你應該嘗試讓你的搜索方法能夠實現自動糾正拼寫錯誤、識別詞根并預測完整的關鍵詞等來提升搜索效率。
（2）最近搜索
應用程序應該保存所有的用戶行為，包括最近搜索和最近購買，以便于用戶在下次搜索時可能用到。這就節省了用戶在搜索同一樣物品時的時間和精力，提升了用戶體驗。
3、搜索過程
理想情況下，搜索結果應該即時顯示，如果辦不到應該向用戶提供一種恰當的視覺反饋。無論如何，請記住，減緩了數據的加載時間就意味著可能令用戶沮喪，并稀釋他們的注意力。
目標：想方設法讓用戶感知到搜索時間要比實際花費的短。
（1）搜索占位符
一般情況下，延時在0.1-1秒之間時不需要額外的反饋信息。但是如果搜索過程確實需要更久的時間，你至少應該努力讓用戶在等待過程更為愉快，這時候不妨考慮使用一個臨時的信息展現狀態——使用占位符。
使用占位符標明數據類型
（2）延遲加載
這是一種常見的技術方法，即先加載一部分數據使之顯示再去加載另一部分數據。采用這種設計，頁面通常加載很快因為一開始只需加載少量商品信息。
使用了延遲加載的應用程序
對商品列表使用該方法時，最好先加載顯示文本信息，這樣心急的用戶也有余地在等待圖片信息加載出來之前挑選目標商品。
4、呈現搜索結果
目標：確保搜索結果是有用的。加快搜索進程，保證用戶有始有終轉換。
（1）開頭的幾個搜索結果要高度相關
為了要在大小如此限制的手機屏幕中顯示搜索結果且減少用戶滾動查看的壓力，一定要保證用戶一開始就能看到一組高度相關的搜索結果（比如開始的3個或5個），這之后如果他們不滿意再去滾動查找。
（2）過濾和排序
在關于移動電子商務的可用性研究中，Bayard研究所指出，有超過50%的用戶會試圖在當前的導航目錄下繼續內部搜索，以期繼續過濾篩選出更加滿足要求的商品。 然而事實上，94% 的電子商務類網站/程序都沒有給用戶這種選擇權。
當搜索結果看起來不相關或結果太多時，用戶往往會不知所措。而過濾和排序功能則能進一步幫助用戶縮減和組織有效結果的范圍，否則用戶可能真的需要上下滾動/翻頁去找到滿意的結果。
左側中過濾和排序機制都沒有
（3）內部搜索
這么做的好處是鼓勵用戶在內部繼續搜索而不是應用傳統的過濾器，用戶對商品列表也有了完全自主的把控。下面就是一個應用了內部搜索框的例子：
在NewEgg中，允許并鼓勵用戶在當前目錄下繼續搜索
（4）有用的無結果頁面
用戶在搜索時，不可避免的會遇到沒有搜索結果的頁面。此時，不良的設計就會導致用戶面對一個毫無出路的頁面。
在HP中，一個設計欠缺的空頁面
你應該避免使用戶遭遇這種設計，而要嘗試向用戶提供一些其他的有價值的替代信息，比如展示一些相似的商品。為了進一步幫助用戶，你可以使用一個“智能搜索”功能，可以單數、復數和拼寫錯誤等。
Amazon在沒有搜索結果時會給出查詢建議
5、引導導航（產品類別）
面對跟他們的期望不一致的菜單類別，用戶往往是難以理解和區分的。所以菜單類別應該足夠清晰，互相之間沒有重疊。當一個用戶從常規的搜索查詢中逃脫出來（搜索查詢不滿意），轉到菜單類別作為最后的查詢手段時，這一點會顯得尤為重要。
商品分類應該足夠清晰，避免困擾用戶
結論
當今已經有30%的網上購物行為發生在手機端上，電子商務類應用程序/網站所面臨的挑戰也前所未有。你的應用程序/網站應該適應所有類型的搜索，并能針對商品類別、商品名稱以及商品描述返回高度相關的結果。當移動端零售的用戶體驗流暢無阻時，消費者將更有可能在其手機上下單購買而不只是搜索。
作者：三達不留點gpj
譯自：https://uxplanet.org/mobile-ecommerce-how-to-design-ux-search-77e06aba27ba#.dxxdhs6ga
本文由 @三達不留點gpj 翻譯發布于人人都是產品經理。未經許可，禁止轉載。
??????