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

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

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

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

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

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

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

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

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

四、始終帶給用戶(hù)指引可能很多電商網(wǎng)站都認(rèn)為，當(dāng)用戶(hù)在商品列表頁(yè)面停留就意味著即將找到自己需要的商品;而現(xiàn)實(shí)卻告訴我們，用戶(hù)很可能在不斷翻頁(yè)的過(guò)程中會(huì)不知不覺(jué)的改變了之前的目標(biāo)商品，因此，網(wǎng)站應(yīng)該始終為用戶(hù)提供指引，帶給他們明確的方向感。

YOHO的商品列表頁(yè)有利有弊。側(cè)邊導(dǎo)航始終存在于頁(yè)面上，為用戶(hù)的頁(yè)面跳轉(zhuǎn)提供了很大程度的便利;但不足之處是側(cè)邊導(dǎo)航呈靜態(tài)，如果能實(shí)現(xiàn)動(dòng)態(tài)，可以隨著用戶(hù)鼠標(biāo)的滾動(dòng)而始終保持在屏幕之中就更好了。

五、設(shè)置相關(guān)推薦，促成更多消費(fèi)用一種商品推動(dòng)另一種商品的銷(xiāo)售，這是電子商務(wù)網(wǎng)站中的慣用營(yíng)銷(xiāo)手法，但這樣的方式如果運(yùn)用的太過(guò)生硬用戶(hù)一定不領(lǐng)情，網(wǎng)站應(yīng)該試著用柔和的方式傳達(dá)相同的意思，設(shè)計(jì)師也許也能為此出一份力。

淘寶對(duì)此的做法是將推薦信息融入到列表頁(yè)的每一個(gè)商品中。“找同款”和“找相似”的字樣也不會(huì)讓用戶(hù)覺(jué)得有太濃重的商業(yè)味。

六、掃清頁(yè)面死角頁(yè)面中的每一個(gè)區(qū)域都有它的價(jià)值和意義，可能只是用戶(hù)視覺(jué)的感知程度不同而已，只要做好布局，頁(yè)面死角可以變得不存在。

商品列表頁(yè)的死角多見(jiàn)于頁(yè)面?zhèn)冗吅偷撞?，而京東將這兩片區(qū)域使用為其他產(chǎn)品的推廣途徑，比如銷(xiāo)量排行和商品精選等。

七、用特色商品激發(fā)購(gòu)物欲如果你覺(jué)得特色主推性質(zhì)的商品只能放在網(wǎng)站首頁(yè)你就錯(cuò)了，首頁(yè)首屏的確是整個(gè)網(wǎng)站好的宣傳黃金位置，但所得到的效果卻不一定是最理想的，根據(jù)商品的類(lèi)型安排布局才能達(dá)到事半功倍的效果。

如易迅網(wǎng)案例所示，手機(jī)產(chǎn)品的相關(guān)推薦就放在手機(jī)商品的列表頁(yè)頭部，讓真正有購(gòu)買(mǎi)需求的用戶(hù)都能看到。

八、吸引人的商品活動(dòng)盡量置后中國(guó)有句諺語(yǔ)，“好戲總在后頭”，這句話(huà)也同樣適用于電商商品列表頁(yè)的設(shè)計(jì)中。把相對(duì)吸引人或是目的性強(qiáng)的商品活動(dòng)放在偏后一點(diǎn)的位置，有利于整個(gè)網(wǎng)站的運(yùn)營(yíng)。

一號(hào)店將有針對(duì)性的“熱賣(mài)推薦”和“與您瀏覽記錄相關(guān)的商品”放在頁(yè)面最后，讓原本可能打算結(jié)束瀏覽的用戶(hù)重新發(fā)現(xiàn)新的感興趣的內(nèi)容。

九、減少操作步驟在商品列表頁(yè)中，力所能及的步驟減少只有從商品加入購(gòu)物車(chē)開(kāi)始著手。但在此之前的大前提是商品信息展現(xiàn)的足夠全面和完整，要在小區(qū)域內(nèi)表達(dá)出所有內(nèi)容也的確是一件比較困難的事。

在商品列表頁(yè)上直接顯示“加入購(gòu)物車(chē)”按鈕并不少見(jiàn)，但能同時(shí)顯示購(gòu)買(mǎi)數(shù)量的就不多了，DHC官網(wǎng)實(shí)現(xiàn)了這一操作，讓用戶(hù)能夠直接選擇商品數(shù)量和種類(lèi)。

十、從眾效應(yīng)從眾心理是網(wǎng)上購(gòu)物人群的普遍狀態(tài)，因此，買(mǎi)過(guò)該商品的顧客對(duì)此做出的評(píng)價(jià)對(duì)于用戶(hù)來(lái)說(shuō)很有說(shuō)服力，商家可以利用這一點(diǎn)在網(wǎng)頁(yè)的設(shè)計(jì)上做出一些小改變。

樂(lè)蜂網(wǎng)在商品列表頁(yè)增加了用戶(hù)很看重的評(píng)論和購(gòu)買(mǎi)人數(shù)模塊，這樣能讓用戶(hù)更直觀的看到商品的人氣指數(shù)。

小編總結(jié)：我們認(rèn)為，商品列表頁(yè)是用戶(hù)真正進(jìn)入網(wǎng)上購(gòu)物狀態(tài)的第一環(huán)節(jié)，因此，舒適的用戶(hù)體驗(yàn)變得尤為重要，設(shè)計(jì)師應(yīng)該根據(jù)商品或行業(yè)的不同商業(yè)訴求作為首要考慮因素。

分享文章：電商網(wǎng)站商品頁(yè)設(shè)計(jì)全面指南
標(biāo)題來(lái)源：http://jinyejixie.com/news35/151535.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、做網(wǎng)站、ChatGPT、網(wǎng)頁(yè)設(shè)計(jì)公司、搜索引擎優(yōu)化、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)