商品會(huì)萃頁(yè): 顧名思義,就是把商品列出來(lái),形成具有某種共同特征的商品的匯集頁(yè)面。
目的就是為了提供應(yīng)消費(fèi)者更多的商品選擇,從而進(jìn)步轉(zhuǎn)換率,盡量減少用戶(hù)的跳出率,保證瀏覽流暢。這就需要提供優(yōu)質(zhì)的視覺(jué)體驗(yàn)和良好的交互體驗(yàn)。
這里主要圍繞商品展示來(lái)展開(kāi)。
目前商品展示設(shè)計(jì)主要有3種 :
1.按行列來(lái)排序(淘寶商城….京東)
2.瀑布流(蘑菇街)
讓商品最大限度的展示在用戶(hù)眼前
3.特殊款凸起(優(yōu)眾)
自適應(yīng)屏幕的商品展示,每個(gè)類(lèi)目下,使用大圖重點(diǎn)推幾款商品或banner
錯(cuò)落有致的排序,適合圖片優(yōu)質(zhì)的網(wǎng)站。
商品展示的基本信息
商品圖片/商品名稱(chēng)/商品價(jià)格
圖片大小 :200X200左右
圖片稍大一些,使用戶(hù)不需要每次要點(diǎn)detail去看大圖,在list就能完成對(duì)物品了解的過(guò)程,從而不至于失去耐心。
增加圖片尺寸是否增加了交易量不得而知。但我們可以顯著的看到比較有圖有真相,圖大一些離真相越近。
但是電器類(lèi)圖片可以較小,特別在形狀差未幾的商品時(shí),商品名稱(chēng)顯得更為重要。
商品名稱(chēng):
商品品牌、系列,描述,特性,個(gè)性案牘級(jí)所參加的流動(dòng)
商品價(jià)格:
原價(jià)-現(xiàn)價(jià)-折扣
凸起現(xiàn)價(jià),劃去原價(jià),折扣輔助
根據(jù)網(wǎng)站或商品的特色增加一些模塊
信用 :用戶(hù)成功交易一次,就可以對(duì)交易對(duì)象作一次信用評(píng)價(jià)
標(biāo)簽 :體現(xiàn)商品的銷(xiāo)售特性,例如新品,包郵
評(píng)論數(shù) :是購(gòu)買(mǎi)用戶(hù)最真切的反映,也是用戶(hù)最關(guān)心的元素之一
銷(xiāo)量 :不僅是一種排序方式,也是引導(dǎo)用戶(hù)購(gòu)買(mǎi),告知用戶(hù)是否受歡迎的重要元素
顏色 :在LIST就能知道有否你需要的顏色,直接明確。
商品展示的一些交互效果
hover單個(gè)商品區(qū)域:泛起方框,夸大用戶(hù)選中該商品所包含的區(qū)域。
泛起附加信息:展示用戶(hù)更像進(jìn)一步了解的內(nèi)容
商城的化妝品LIST中,展示用戶(hù)對(duì)商品的使用感慨感染
優(yōu)眾:hover泛起商品幾個(gè)角度的拍攝圖+視頻展示
韓國(guó)網(wǎng)站ogage
hover泛起預(yù)覽,搜藏夾和購(gòu)物車(chē)的按鈕
點(diǎn)擊圖片/商品名稱(chēng):
1.直接跳轉(zhuǎn)到DETAIL頁(yè)面
例如:淘寶 京東 亞馬遜……
2.彈出DETAIL頁(yè)面框
例如 優(yōu)眾:合用于內(nèi)容比較簡(jiǎn)潔,需要用戶(hù)重點(diǎn)關(guān)注,且頁(yè)面內(nèi)元素位置需固定的情況
對(duì)于產(chǎn)品的不同類(lèi)型,貿(mào)易訴求不一樣,但是其所要達(dá)到的目的是相同的,設(shè)計(jì)的終點(diǎn)也是相同的,只是形式有所區(qū)別。
|