良好的交互體驗 網站list中的商品展示設計
來源:網站推廣 2013-01-23
商品聚集頁: 顧名思義,就是把商品列出來,形成具有某種共同特征的商品的匯集頁面。
目的就是為了提供給消費者更多的商品選擇,從而提高轉換率,盡量減少用戶的跳出率,保證瀏覽流暢。這就需要提供優質的視覺體驗和良好的交互體驗。
這里主要圍繞商品展示來展開。
目前商品展示設計主要有3種 :
1.按行列來排序(淘寶商城….京東)
2.瀑布流(蘑菇街)
讓商品最大限度的展示在用戶面前
3.特殊款突出(優眾)
自適應屏幕的商品展示,每個類目下,使用大圖重點推幾款商品或banner
錯落有致的排序,適合圖片優質的網站。
商品展示的基本信息
商品圖片/商品名稱/商品價格
圖片大小 :200X200左右
圖片稍大一些,使用戶不需要每次要點detail去看大圖,在list就能完成對物品了解的過程,從而不至于失去耐心。
增加圖片尺寸是否增加了交易量不得而知。但我們可以明顯的看到比較有圖有真相,圖大一些離真相越近。
但是電器類圖片可以較小,特別在外形差不多的商品時,商品名稱顯得更為重要。
商品名稱:
商品品牌、系列,描述,特性,個性文案級所參加的活動
商品價格:
原價-現價-折扣
突出現價,劃去原價,折扣輔助
根據網站或商品的特色增加一些模塊
信用 :用戶成功交易一次,就可以對交易對象作一次信用評價
標簽 :體現商品的銷售特性,例如新品,包郵
評論數 :是購買用戶最真切的反映,也是用戶最關心的元素之一
銷量 :不僅是一種排序方式,也是引導用戶購買,告知用戶是否受歡迎的重要元素
顏色 :在LIST就能知道有否你需要的顏色,直接明確。
商品展示的一些交互效果
hover單個商品區域:出現方框,強調用戶選中該商品所包含的區域。
出現附加信息:展示用戶更像進一步了解的內容
商城的化妝品LIST中,展示用戶對商品的使用感受
優眾:hover出現商品幾個角度的拍攝圖+視頻展示
韓國網站ogage
hover出現預覽,搜藏夾和購物車的按鈕
點擊圖片/商品名稱:
1.直接跳轉到DETAIL頁面
例如:淘寶 京東 亞馬遜……
2.彈出DETAIL頁面框
例如 優眾:適用于內容比較簡潔,需要用戶重點關注,且頁面內元素位置需固定的情況
對于產品的不同類型,商業訴求不一樣,但是其所要達到的目的是相同的,設計的終點也是相同的,只是形式有所區別。
文章來源:互聯網的一些事
文章編輯: 365webcall在線客服軟件(www.365webcall.com)
我的評論
| 登錄賬號： | 密碼： | 快速注冊 | 找回密碼 |  |
