電商網(wǎng)站商品頁設(shè)計超全面指南

編者按：今天這篇文章讀完后，同學(xué)們可以來做一個小練習(xí)，根據(jù)文章，把優(yōu)設(shè)看做一個電商網(wǎng)站，文章看做商品，來分析一下哪篇文章是熱門，有哪些突出的方法，文章里藏有哪些引導(dǎo)用戶的細(xì)節(jié)等等，即學(xué)即用，不容易忘，分析得好，我給你點贊，手動的那種。

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

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

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

重慶網(wǎng)站建設(shè)，響應(yīng)式網(wǎng)站，網(wǎng)站設(shè)計供應(yīng)商

一、展示基本信息

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

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

二、鼠標(biāo)懸停時產(chǎn)生交互效果

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

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

三、出現(xiàn)適量的附加信息

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

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

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

四、始終帶給用戶指引

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

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

五、設(shè)置相關(guān)推薦，促成更多消費

用一種商品推動另一種商品的銷售，這是電子商務(wù)網(wǎng)站中的慣用營銷手法，但這樣的方式如果運用的太過生硬用戶一定不領(lǐng)情，網(wǎng)站應(yīng)該試著用柔和的方式傳達(dá)相同的意思，設(shè)計師也許也能為此出一份力。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司，品牌網(wǎng)站建設(shè)公司-創(chuàng)新互聯(lián)！

當(dāng)前標(biāo)題：電商網(wǎng)站商品頁設(shè)計超全面指南
網(wǎng)站URL：http://www.muchs.cn/news15/160065.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、小程序開發(fā)、建站公司、響應(yīng)式網(wǎng)站、品牌網(wǎng)站建設(shè)、用戶體驗

廣告

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