淘寶:了解產(chǎn)品之搜索結(jié)果列表過濾器
![](http://image.woshipm.com/wp-files/img/69.jpg)
要設(shè)計(jì)一個(gè)產(chǎn)品,首先要徹底的了解它。在最近的項(xiàng)目中,要為選擇網(wǎng)店模板的list頁(yè)面設(shè)計(jì)一個(gè)過濾器,那就先來分析一下,現(xiàn)有電子商務(wù)網(wǎng)站中的過濾器都是怎樣的吧。知其優(yōu)勢(shì),知其劣勢(shì),在分析現(xiàn)有產(chǎn)品的過程中,理清自己的設(shè)計(jì)思路,也許對(duì)于剛剛開始積累的小菜鳥來說,是個(gè)好方法。
case1.淘寶女包
淘寶女包的過濾器,以外形、背包方式、價(jià)格、質(zhì)地、品牌、場(chǎng)合、風(fēng)格、流行元素等較多因素為維度。因?yàn)楹芏嗯栽谫?gòu)物之前,只是知道我想買什么,而并不確定自己到底要買一個(gè)什么樣的東西。這樣的多維度選擇,對(duì)用戶也起到一個(gè)提示的作用,推動(dòng)用戶更具體的確定購(gòu)買條件,這樣選擇的范圍就會(huì)更小,你看到的東西,都是符合你條件的東西,選擇的成本就會(huì)降低,購(gòu)買的幾率才會(huì)增加。這種提供很多具體條件的過濾器,在網(wǎng)購(gòu)中很受用,因?yàn)橛脩敉鶗?huì)面對(duì)海量的商品而不知所措,無從選擇。
用戶在選擇后,所選條件會(huì)出現(xiàn)在過濾器頂部“您已選擇”中,這樣用戶可以清晰的看到自己已選擇的條件。同時(shí),選擇過的條件會(huì)在下方的屬性組中隱藏。這樣做的好處,是用戶不會(huì)被過多的屬性所干擾。當(dāng)你選擇的條件已經(jīng)很具體時(shí),下方列出的屬性就會(huì)很少,用戶也就不再需要費(fèi)心的去看,哪些條件是選擇過的,哪些是沒選的。不過這樣也有一定的弊端,就是當(dāng)想更改一個(gè)條件時(shí),必須先叉掉一個(gè)已選的條件,否則同屬性的其他條件是不可見的。
很多時(shí)候圖形會(huì)比文字更具識(shí)別性,所以對(duì)于箱包外形,這里給出了圖示,可以讓用戶更直觀的選擇自己想要的外形。
在過濾器的右上角,還有一個(gè)使用多選的按鈕。
![](https://image.woshipm.com/wp-files/2014/08/00a9b08e2b36f6dd14d18b95064e9f12.jpg)
這給了用戶選擇的自由和隨意性,不過也增加了一些操作的復(fù)雜度。這種功能是否需要添加,要取決于對(duì)用戶需求分析,這個(gè)功能是不是被很多人所需要。
case2.淘寶手機(jī)
如果說女包的過濾器是通過做加法來選擇,那么淘寶手機(jī)就是做減法。以人們選擇手機(jī)最重要的一個(gè)維度為首要條件,當(dāng)選擇了第一個(gè)條件后,符合條件的品牌被全部勾選,告訴用戶哪些是你可以用的,因?yàn)橛行┤瞬⒉恢滥男┢放茖儆诎沧渴謾C(jī),哪些品牌屬于商務(wù)手機(jī)。然后再來做減法,去掉你不想要的品牌。然后再根據(jù)對(duì)高級(jí)選項(xiàng)中條件的限定,縮小選擇范圍,找到最最貼切你想要的手機(jī)的范圍。
不過這個(gè)過濾器中,“您已選擇”中的內(nèi)容略顯羅嗦。在熱門品牌中已有了直觀的呈現(xiàn),在“您已選擇”中,可以只顯示高級(jí)選項(xiàng)中選擇的范圍。
case3.淘寶筆記本
![](https://image.woshipm.com/wp-files/2014/08/34eaff993c18bf98703140d0331c87b9.jpg)
淘寶筆記本與女包的過濾器基本相似,不過在維度上只列出了最重要的因素,其他因素點(diǎn)擊更多后可以看到。對(duì)于筆記本這種電子商品來說,可比較的因素很多很多,可對(duì)于大多數(shù)消費(fèi)者來說,重要的因素又沒那么多。所以折疊隱藏是個(gè)很好的方式。
case4.凡客
![](https://image.woshipm.com/wp-files/2014/08/8fccf14b92a61d550b5663d3890d8f3a.jpg)
凡客則簡(jiǎn)約了許多,只是在所選條件上加紅,后面有個(gè)叉,用于刪除。凡客這種簡(jiǎn)約的設(shè)計(jì),也是源于其B2C的模式,沒有C2C那么海量的商品,過濾的條件和維度自然可以簡(jiǎn)單許多??墒菦]有“已選擇”的區(qū)域,對(duì)于用戶所選的條件,還是少了一個(gè)聚合的地方。
case5.Ebay、Ubid、Onsale、Yahoo等
![](https://image.woshipm.com/wp-files/2014/08/be97527844462fcb0a2a4b08dccf80a5.jpg)
與國(guó)內(nèi)電商習(xí)慣與把過濾器放置在商品上方不同,國(guó)外的電商網(wǎng)站清一色的把過濾器放置在商品左側(cè),呈樹狀結(jié)構(gòu)。其實(shí)放置在左側(cè),對(duì)于商品的選擇來說,是更方便的。用戶可以在選擇后直接看到右側(cè)的刷新,而不必向下滾動(dòng)頁(yè)面才看到刷新。當(dāng)然也有像TemplateMonster這樣的網(wǎng)站,將其放在頁(yè)面右側(cè),這也許是出于大多數(shù)人右手使用鼠標(biāo),點(diǎn)擊更方便的原因吧。
最后,借用怎樣設(shè)計(jì)好一個(gè)搜索結(jié)果列表過濾器這篇文章的一個(gè)總結(jié):
好的過濾器設(shè)置應(yīng)該有如下幾點(diǎn):
1.好多用戶對(duì)于自己要找什么樣子的東西,是非常模糊的,這需要一個(gè)設(shè)計(jì)者對(duì)于自己的類目的屬性要非常熟悉,才能將這些條件一一展示給用戶;
2 .用戶是經(jīng)?!胺椿凇?,好的過濾器能允許用戶能很好的撤銷已選的條件,選其他的條件;
3.對(duì)于一些條件,也許過濾器中沒有,好的過濾器應(yīng)該讓用戶參與進(jìn)來,一起創(chuàng)造出一些條件;
4.好的過濾器應(yīng)該是循循善誘的,將“條件”一一列出來給用戶,而不應(yīng)該一下子擺出所有的條件,最先應(yīng)擺出來的條件應(yīng)該是最大的最能影響結(jié)果的條件。
本文作者?子木yoyo
- 目前還沒評(píng)論,等你發(fā)揮!