電商網站商品頁設計全麵指南.

電商網站商品頁設計全麵指南

       hulianwangshidaixia，dianzishangwupingtaidefazhanyijingshishehuifazhanxuyaodezhongyaozuchengbufen，yinci，dianzishangwuwangzhandeshejiyeshihenyoujiangjiude
，yibandeqingkuangxia，womenhuigenjushangpindebutongfenleiheyouxiaotedian，jiehexiandaixiaofeirenqundeguannianlaijinxingsheji
，qizuizhongyaodeyidianshiyaofuheyonghudeliulantiyan。dianzishangwuzhongdeshangpinliebiaoyeyebeichengweishangpinjuheye
，shiweilenengweixiaofeizhetigonggengwanshandeshangpinzhongleixuanze

，zheyileiyemiandezuidatedianjiushixinxiliangda
、圖片多
，所以布局是否清晰合理，以及如何盡可能的壓縮內容是商品列表頁設計的重點部分。

       目前，國內電商網站的商品列表頁常見的表現形式有三種：行列排列
、瀑布流和特別款突出。這三種形式各有特點，在設計的時候應該根據商品的特色選擇最適合的表現手法。

       如(ru)果(guo)商(shang)品(pin)的(de)種(zhong)類(lei)多(duo)
，並(bing)且(qie)繁(fan)雜(za)，規(gui)規(gui)整(zheng)整(zheng)的(de)行(xing)列(lie)排(pai)列(lie)方(fang)式(shi)更(geng)利(li)於(yu)用(yong)戶(hu)找(zhao)到(dao)瀏(liu)覽(lan)規(gui)律(lv)
，瀑(pu)布(bu)流(liu)的(de)形(xing)式(shi)更(geng)多(duo)的(de)適(shi)用(yong)於(yu)當(dang)下(xia)流(liu)行(xing)時(shi)尚(shang)領(ling)域(yu)的(de)電(dian)商(shang)平(ping)台(tai)中(zhong)，特(te)別(bie)款(kuan)突(tu)出(chu)的(de)方(fang)式(shi)可(ke)以(yi)為(wei)日(ri)常(chang)的(de)一(yi)些(xie)節(jie)日(ri)活(huo)動(dong)的(de)宣(xuan)傳(chuan)促(cu)銷(xiao)而(er)準(zhun)備(bei)，我(wo)們(men)公(gong)司(si)本(ben)身(shen)也(ye)是(shi)從(cong)事(shi)網(wang)建(jian)這(zhe)一(yi)塊(kuai)的(de)，對(dui)於(yu)電(dian)商(shang)平(ping)台(tai)的(de)開(kai)發(fa)有(you)著(zhe)豐(feng)富(fu)的(de)經(jing)驗(yan)，也(ye)做(zuo)個(ge)很(hen)多(duo)大(da)型(xing)的(de)電(dian)商(shang)網(wang)站(zhan)平(ping)台(tai)的(de)開(kai)發(fa)。下(xia)麵(mian)我(wo)們(men)就(jiu)來(lai)舉(ju)例(li)說(shuo)明(ming)。

一、展示基本信息

       zhengyinweishangpinliebiaoyexiangjiaoyuqitayemianhuixiandeyouxieyongji
，yincizaishejideshihougengyinggaibaozhezaiyouxiandefanweineizhanxianzuiyouyongdexinxidexintailaishejiwangye。yexuyoudeyonghuzailiulanshangpinliebiaoyedeshihouduishangpindexijiemiaoshubushihenzaiyi
，cishideliulanmoshigengpianxiangyuzoumaguanhua
，jianmingeyaodetupian、商品名稱以及價格說明就已經能夠滿足用戶在該頁中的需求了。

       美(mei)嘉(jia)購(gou)物(wu)也(ye)是(shi)我(wo)們(men)公(gong)司(si)開(kai)發(fa)的(de)商(shang)城(cheng)網(wang)站(zhan)之(zhi)一(yi)
，整(zheng)個(ge)商(shang)品(pin)列(lie)表(biao)頁(ye)麵(mian)看(kan)起(qi)來(lai)很(hen)簡(jian)單(dan)，但(dan)展(zhan)示(shi)的(de)商(shang)品(pin)信(xin)息(xi)並(bing)不(bu)亞(ya)於(yu)其(qi)他(ta)的(de)商(shang)城(cheng)網(wang)站(zhan)，用(yong)戶(hu)真(zhen)正(zheng)希(xi)望(wang)得(de)到(dao)的(de)資(zi)訊(xun)都(dou)得(de)到(dao)了(le)很(hen)好(hao)的(de)體(ti)現(xian)。

二、鼠標懸停時產生的交互效果

       很hen多duo商shang城cheng網wang站zhan在zai設she計ji的de時shi候hou有you可ke能neng會hui忽hu略lve鼠shu標biao懸xuan停ting時shi應ying該gai產chan生sheng的de交jiao互hu效xiao果guo

，其qi中zhong也ye不bu乏fa一yi些xie知zhi名ming電dian商shang，雖sui然ran隻zhi是shi很hen小xiao的de效xiao果guo，但dan是shi它ta存cun在zai的de意yi義yi卻que遠yuan不bu僅jin如ru此ci，甚shen至zhi承cheng載zai了le一yi份fen網wang站zhan與yu用yong戶hu之zhi間jian的de互hu動dong和he反fan饋kui。

       這zhe個ge也ye是shi我wo們men公gong司si給gei國guo外wai客ke戶hu所suo做zuo的de商shang城cheng網wang站zhan之zhi一yi
，當dang鼠shu標biao懸xuan停ting在zai商shang品pin範fan圍wei時shi，周zhou圍wei會hui出chu現xian淺qian色se的de線xian框kuang，並bing且qie在zai底di部bu會hui出chu現xian兩liang個ge有you紅hong色se代dai表biao的de方fang框kuang
，這zhe樣yang便bian於yu將jiang與yu其qi他ta商shang品pin很hen快kuai的de區qu分fen開kai來lai，而er且qie底di部bu的de紅hong色se方fang框kuang正zheng好hao與yu網wang站zhan的de主zhu色se調tiao相xiang同tong，這zhe樣yang
，也ye讓rang整zheng體ti表biao現xian得de不bu突tu兀wu。

三、出現適量的附加信息    

       剛剛提到了商品頁應該盡量做到簡潔
，但在此基礎上適量的增加一些對用戶挑選商品有幫助的附加信息

，可以起到錦上添花的效果。

       聚ju美mei優you品pin在zai列lie表biao頁ye采cai用yong了le特te別bie款kuan突tu出chu的de表biao現xian形xing式shi
，並bing且qie向xiang用yong戶hu展zhan示shi了le商shang品pin的de多duo視shi角jiao圖tu片pian，讓rang用yong戶hu無wu需xu進jin到dao詳xiang情qing頁ye就jiu能neng看kan到dao商shang品pin全quan貌mao
，間jian接jie的de降jiang低di了le商shang品pin詳xiang情qing頁ye的de跳tiao出chu率lv。

       meilishuoshiyigepianxiangyushishangnianqinghuadewangzhan，yincishejishishiyonglezheleirenqundounengjieshoudepubuliudebiaoxianshoufa，meilishuodeshangpinliebiaoyedetedianzaiyuzengjialeqitayonghupinglundemokuai
，zheyeshirenmenzaiwangshanggouwudeshihouhenzhuzhongdebufen。

四
、始終帶給用戶指引

       其qi實shi有you很hen多duo的de商shang城cheng網wang站zhan認ren為wei
，當dang用yong戶hu在zai商shang品pin列lie表biao頁ye麵mian停ting留liu的de時shi候hou，就jiu意yi味wei著zhe即ji將jiang找zhao到dao自zi己ji所suo需xu要yao的de商shang品pin，而er現xian實shi卻que告gao訴su我wo們men，用yong戶hu很hen可ke能neng在zai不bu斷duan的de翻fan頁ye的de過guo程cheng中zhong會hui不bu知zhi不bu覺jiao的de改gai變bian之zhi前qian的de目mu標biao商shang品pin，因yin此ci
，網wang站zhan始shi終zhong為wei用yong戶hu提ti供gong指zhi引yin，帶dai給gei他ta們men明ming確que的de方fang向xiang感gan。

       YOHO的(de)商(shang)品(pin)列(lie)表(biao)頁(ye)有(you)利(li)有(you)弊(bi)，側(ce)邊(bian)導(dao)航(hang)始(shi)終(zhong)存(cun)在(zai)於(yu)頁(ye)麵(mian)上(shang)，為(wei)用(yong)戶(hu)的(de)頁(ye)麵(mian)跳(tiao)轉(zhuan)提(ti)供(gong)了(le)很(hen)大(da)程(cheng)度(du)的(de)便(bian)利(li)
，但(dan)不(bu)足(zu)之(zhi)處(chu)是(shi)側(ce)邊(bian)導(dao)航(hang)呈(cheng)現(xian)靜(jing)態(tai)，如(ru)果(guo)能(neng)實(shi)現(xian)動(dong)態(tai)
，可(ke)以(yi)隨(sui)著(zhe)用(yong)戶(hu)鼠(shu)標(biao)的(de)滾(gun)動(dong)而(er)始(shi)終(zhong)保(bao)持(chi)在(zai)屏(ping)幕(mu)之(zhi)中(zhong)是(shi)最(zui)好(hao)的(de)。

五、設置相關推薦
，促成更多消費

       用(yong)一(yi)種(zhong)商(shang)品(pin)推(tui)動(dong)另(ling)一(yi)種(zhong)商(shang)品(pin)的(de)銷(xiao)售(shou)
，這(zhe)是(shi)電(dian)子(zi)商(shang)務(wu)網(wang)站(zhan)中(zhong)的(de)慣(guan)用(yong)營(ying)銷(xiao)手(shou)法(fa)，但(dan)這(zhe)樣(yang)的(de)方(fang)式(shi)如(ru)果(guo)運(yun)用(yong)的(de)太(tai)過(guo)生(sheng)硬(ying)用(yong)戶(hu)一(yi)定(ding)不(bu)領(ling)情(qing)，網(wang)站(zhan)應(ying)該(gai)試(shi)著(zhe)用(yong)柔(rou)和(he)的(de)方(fang)式(shi)傳(chuan)達(da)相(xiang)同(tong)的(de)意(yi)思(si)
，設(she)計(ji)師(shi)也(ye)許(xu)也(ye)能(neng)為(wei)此(ci)出(chu)一(yi)份(fen)力(li)。

       淘寶網就是典型的例子，淘寶對此的做法是將推薦信息融入到列表頁的每一個商品中。“找同款”和“找相似”的字樣也不會讓用戶覺得有太濃重的商業味。

六、掃清頁麵死角

       頁麵中的每一個區域都有它的價值和意義，可能隻是用戶視覺的感知程度不同而已，隻要做好布局，頁麵死角可以變得不存在。

       商品列表頁的死角多見於頁麵側邊和底部，而京東將這兩片區域使用為其他產品的推廣途徑
，比如銷量排行和商品精選等。

     七

、用特色商品激發購物欲

       如(ru)果(guo)你(ni)覺(jiao)得(de)特(te)色(se)主(zhu)推(tui)性(xing)質(zhi)的(de)商(shang)品(pin)隻(zhi)能(neng)放(fang)在(zai)網(wang)站(zhan)首(shou)頁(ye)你(ni)就(jiu)錯(cuo)了(le)，首(shou)頁(ye)首(shou)屏(ping)的(de)確(que)是(shi)整(zheng)個(ge)網(wang)站(zhan)最(zui)佳(jia)的(de)宣(xuan)傳(chuan)黃(huang)金(jin)位(wei)置(zhi)

，但(dan)所(suo)得(de)到(dao)的(de)效(xiao)果(guo)卻(que)不(bu)一(yi)定(ding)是(shi)最(zui)理(li)想(xiang)的(de)，根(gen)據(ju)商(shang)品(pin)的(de)類(lei)型(xing)安(an)排(pai)布(bu)局(ju)才(cai)能(neng)達(da)到(dao)事(shi)半(ban)功(gong)倍(bei)的(de)效(xiao)果(guo)。

       如易迅網
，手機產品的相關推薦就放在手機商品的列表頁的頭部，讓真正有購買需求的用戶都能看到。

八
、吸引人的商品活動盡量置後

       把相對吸引人或是目的性強的商品活動放在偏後一點的位置
，有利於整個網站的運營。

       一號店將有針對性的“熱賣推薦”和“與您瀏覽記錄相關的商品”放在頁麵最後，讓原本可能打算結束瀏覽的用戶重新發現新的感興趣的內容。

  九
、減少操作步驟

       在zai商shang品pin列lie表biao頁ye中zhong，力li所suo能neng及ji的de步bu驟zhou減jian少shao隻zhi有you從cong商shang品pin加jia入ru購gou物wu車che開kai始shi著zhe手shou。但dan在zai此ci之zhi前qian的de大da前qian提ti是shi商shang品pin信xin息xi展zhan現xian的de足zu夠gou全quan麵mian和he完wan整zheng，要yao在zai小xiao區qu域yu內nei表biao達da出chu所suo有you內nei容rong也ye的de確que是shi一yi件jian比bi較jiao困kun難nan的de事shi。

       在商品列表頁上直接顯示“加入購物車”按鈕並不少見，但能同時顯示購買數量的就不多了，DHC官網實現了這一操作

，讓用戶能夠直接選擇商品數量和種類。

十、從眾效應

       congzhongxinlishiwangshanggouwurenqundepubianzhuangtai

，yinci
，maiguogaishangpindegukeduicizuochudepingjiaduiyuyonghulaishuohenyoushuofuli
，shangjiakeyiliyongzheyidianzaiwangyedeshejishangzuochuyixiexiaogaibian。

       樂蜂網在商品列表頁增加了用戶很看重的評論和購買人數模塊，這樣能讓用戶更直觀的看到商品的人氣指數。