電子商務(wù)中的商品列表頁(yè)也被稱為商品聚合頁(yè)，是為了能為消費(fèi)者提供更完善的商品種類選擇。這一類頁(yè)面的最大特點(diǎn)就是信息量大、圖片多，所以布局是否清晰合理，以及如何盡可能的壓縮內(nèi)容是商品列表頁(yè)設(shè)計(jì)的重點(diǎn)部分。

目前，國(guó)內(nèi)電商網(wǎng)站的商品列表頁(yè)常見表現(xiàn)形式有三種，分別是行列排列、瀑布流和特別款突出。這三種形式各有特點(diǎn)，設(shè)計(jì)師應(yīng)該根據(jù)商品特色選擇最適合的表現(xiàn)手法。

如果商品的種類數(shù)量多且繁雜，規(guī)規(guī)整整的行列排列方式更利于用戶找到瀏覽規(guī)律；瀑布流的形式更多的在流行時(shí)尚領(lǐng)域的電商中使用；特別款突出的方式可以為一些節(jié)日活動(dòng)的宣傳促銷而準(zhǔn)備。在下面的案例中也會(huì)一一提及。

延伸閱讀：

• 電子商務(wù)網(wǎng)站設(shè)計(jì)分析系列之一：首頁(yè)導(dǎo)航
• 電子商務(wù)網(wǎng)站設(shè)計(jì)分析系列之二：首屏設(shè)計(jì)
• 電子商務(wù)網(wǎng)站設(shè)計(jì)分析三：登陸注冊(cè)頁(yè)設(shè)計(jì)
• 電子商務(wù)網(wǎng)站設(shè)計(jì)分析之四：面包屑導(dǎo)航
• 電子商務(wù)網(wǎng)站設(shè)計(jì)分析六：商品詳情頁(yè)設(shè)計(jì)

1.展示基本信息

正因?yàn)樯唐妨斜眄?yè)相較于其他頁(yè)面會(huì)顯得有些擁擠，因此設(shè)計(jì)師更應(yīng)該抱著在限制的區(qū)域范圍內(nèi)展現(xiàn)最有用的信息的心態(tài)來(lái)設(shè)計(jì)網(wǎng)頁(yè)。正在瀏覽商品列表頁(yè)的用戶也許對(duì)商品的細(xì)節(jié)描述并不是很在意，此時(shí)的瀏覽模式更偏于走馬觀花，因此，簡(jiǎn)單扼要的圖片、商品名稱，以及價(jià)格說明就已經(jīng)能夠滿足用戶在該頁(yè)中的需求了。

順豐優(yōu)選的整個(gè)商品列表頁(yè)面看起來(lái)很簡(jiǎn)明，但展示的商品信息卻并沒有弱于其他電商網(wǎng)站，用戶真正希望得到的資訊都得到了完整的體現(xiàn)。

2.鼠標(biāo)懸停時(shí)產(chǎn)生交互效果

很多網(wǎng)站都會(huì)忽略鼠標(biāo)懸停時(shí)應(yīng)該產(chǎn)生的交互效果，其中也不乏一些知名電商。雖然只是一個(gè)很小的效果，但它存在的意義卻遠(yuǎn)不僅如此，甚至承載了一份網(wǎng)站與用戶之間的互動(dòng)和反饋。

天貓的商品列表頁(yè)在給予用戶即時(shí)反饋這方面做得很到位。當(dāng)鼠標(biāo)懸停在商品范圍時(shí)，顯眼的紅色線框就馬上將該商品與其他商品區(qū)分開來(lái)，而線框的紅色與網(wǎng)站主色調(diào)相同，這樣也讓整體表現(xiàn)得不突兀。

3.出現(xiàn)適量的附加信息

剛才提到了商品列表頁(yè)應(yīng)該盡量做到簡(jiǎn)單簡(jiǎn)潔，但在此基礎(chǔ)上適量的增加一些對(duì)用戶挑選商品有幫助的附加信息可以起到錦上添花的作用。

聚美優(yōu)品的在列表頁(yè)采用了特別款突出的表現(xiàn)形式，并且向用戶展示了商品的多視角圖片，讓用戶無(wú)需進(jìn)入到詳情頁(yè)就看到商品全貌，間接降低了商品詳情頁(yè)的跳出率。

美麗說是一個(gè)偏向時(shí)尚年輕化的網(wǎng)站，因此設(shè)計(jì)師使用了這類人群都能接受的瀑布流展現(xiàn)方法。美麗說的商品列表頁(yè)的特點(diǎn)在于增加了其他用戶的評(píng)論模塊，這也是人們?cè)诰W(wǎng)上購(gòu)物時(shí)很注重的部分。

標(biāo)簽： 網(wǎng)站設(shè)計(jì) 電子商務(wù) 電商網(wǎng)站設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。