商品聚集页的商品展示设计 提升视觉体验


  商品聚集页: 顾名思义,就是把商品列出来,形成具有某种共同特征的商品的汇集页面。

  目的就是为了提供给消费者更多的商品选择,从而提高转换率,尽量减少用户的跳出率,保证浏览流畅。这就需要提供优质的视觉体验和良好的交互体验。

  这里主要围绕商品展示来展开。

  目前商品展示设计主要有3种 :

  1.按行列来排序(淘宝商城….京东)

  2.瀑布流(蘑菇街)

  让商品最大限度的展示在用户面前

  3.特殊款突出(优众)

  自适应屏幕的商品展示,每个类目下,使用大图重点推几款商品或banner

  错落有致的排序,适合图片优质的网站。


  商品展示的基本信息

  商品图片/商品名称/商品价格

  图片大小 :200X200左右

  图片稍大一些,使用户不需要每次要点detail去看大图,在list就能完成对物品了解的过程,从而不至于失去耐心。

  增加图片尺寸是否增加了交易量不得而知。但我们可以明显的看到比较有图有真相,图大一些离真相越近。

  但是电器类图片可以较小,特别在外形差不多的商品时,商品名称显得更为重要。


  商品名称:

  商品品牌、系列,描述,特性,个性文案级所参加的活动

  商品价格:

  原价-现价-折扣

  突出现价,划去原价,折扣辅助

  根据网站或商品的特色增加一些模块

  信用 :用户成功交易一次,就可以对交易对象作一次信用评价

  标签 :体现商品的销售特性,例如新品,包邮

  评论数 :是购买用户最真切的反映,也是用户最关心的元素之一

  销量 :不仅是一种排序方式,也是引导用户购买,告知用户是否受欢迎的重要元素

  颜色 :在LIST就能知道有否你需要的颜色,直接明确。


  商品展示的一些交互效果

  hover单个商品区域:出现方框,强调用户选中该商品所包含的区域。

  出现附加信息:展示用户更像进一步了解的内容

  商城的化妆品LIST中,展示用户对商品的使用感受


  优众:hover出现商品几个角度的拍摄图+视频展示


  韩国网站ogage

  hover出现预览,搜藏夹和购物车的按钮


  点击图片/商品名称:

  1.直接跳转到DETAIL页面

  例如:淘宝 京东 亚马逊……

  2.弹出DETAIL页面框

  例如 优众:适用于内容比较简洁,需要用户重点关注,且页面内元素位置需固定的情况


  对于产品的不同类型,商业诉求不一样,但是其所要达到的目的是相同的,设计的终点也是相同的,只是形式有所区别。

  文章来源:互联网的一些事

时间: 2025-01-21 02:30:49

商品聚集页的商品展示设计 提升视觉体验的相关文章

天猫将开始规范统一商品详情页页面布局,提升消费者购物体验

2月10日消息,有业内人士透露,天猫将从2月20日开始对商品详情页的页面布局进行规范和统一. 天猫要求商家只能在规定的自定义区域内进行自定义装修,不能影响固定区域.如果商家违反相关规定,随意在宝贝详情页进行自定义装修,天猫有权对该店铺依据滥发消息规则作出相应的处理. 天猫表示,此举是为了提高天猫的整体形象,提升消费者的购物体验.有商家表示支持天猫此举措,因为商品详情页中存在大量和商品无关的信息,不仅在视觉上违背了用户体验,而且降低了消费者对商品本身的关注.

B2C网站商品详情页如何设计相关商品推荐?

为什么要做相关商品推荐? 商品详情是可能挖出金子的岛屿,我们都知道. 于是我们使了各种招式,终于让用户来到了商品详情页.我们悄悄念起魔鬼的咒语,恨不得用户马上去点全页最醒目的那个"加入购物车"或"立刻购买".可是,绝大部分B2C商详页的UV转化率不超过5%(何况是PV!),绝大部分用户最终是不会购买这个商品的,有可能他是被大胸的模特图骗进来的,有可能价格不合适,有可能商品细节不喜欢,有可能大多数的好评里有一个让他难以接受的差评,总之,他不想买. 难道让用户就这么流失

【转】构建需求响应式亿级商品详情页

商品详情页是什么 商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流量和订单的入口.京东商城目前有通用版.全球购.闪购.易车.惠买车.服装.拼购.今日抄底等许多套模板.各套模板的元数据是一样的,只是展示方式不一样.目前商品详情页个性化需求非常多,数据来源也是非常多的,而且许多基础服务做不了的都放我们这,因此我们需要一种架构能快速响应和优雅的解决这些需求问题.因此我们重新设计了商品详情页的架构,主要包括三部分:商品详情页系统.商品详情页统一服务系统和商品详情页动态服务系统:商品详情页系统

京东技术架构(二)构建需求响应式亿级商品详情页

该文章是根据velocity 2015技术大会的演讲<京东网站单品页618实战>细化而来,希望对大家有用. 商品详情页是什么 商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流量和订单的入口.京东商城目前有通用版.全球购.闪购.易车.惠买车.服装.拼购.今日抄底等许多套模板.各套模板的元数据是一样的,只是展示方式不一样.目前商品详情页个性化需求非常多,数据来源也是非常多的,而且许多基础服务做不了的都放我们这,因此我们需要一种架构能快速响应和优雅的解决这些需求问题.因此我们重新设计了商

Android仿京东、天猫app的商品详情页的布局架构, 以及功能实现

前言 电商内app,重点在于详情页商品展示,用户不仅要看到图,可以看到各种描述,以及相关规格参数. 有需要做电商类app的童鞋可以看看, 首先先看看效果实现 本项目使用的第三方框架: 加载网络图片使用的 Fresco 头部的商品图轮播 ConvenientBanner 导航栏切换 PagerSlidingTabStrip 先看看效果实现 由于代码量过多, 就不一一讲解只介绍几个核心的自定义控件) 不想看的童鞋可以下载apk或者在github上下载源码使用 github地址 apk下载 最外层的布

手机客户端信息最终页的布局设计问题

文章描述:手机客户端信息最终页的布局设计问题. 上周末,与kent.zhu.安姐喝茶闲聊,聊到关于手机客户端信息最终页的布局设计问题. 其实就两个问题:1 对单条信息纬度多的情况,是顶部分tab,还是往下一直显示,还是左右滑动显示?2 对信息的操作放哪? 其中聊到一些设计原则,比如:1 取决于目标用户对信息浏览顺序是否一致,就是说他们关注的重点是有次序的,还是发散的.2 产品鼓励以及期望如何引导什么样的路径和用例?3 往下滑动交互上成本理论上是最小的. 在我观察到不少信息详情页面,在早期,都有过

7个提高着陆页转化率的设计技巧(上篇)

设计一个最优的着陆页并不是一件非常容易的事.如果你想获得一个可观的转化率,那就更不简单.然而,对于以转化为核心的设计理念你懂得多少呢? 以转化为核心的设计(CCD)是一门学科,专门针对为实现某个单一的业务目标的设计经验.它的意图在于,通过使用有说服力的设计和心理诱因来引导访客完成一个具体的行动,来增加转化率. 着陆页是CCD设计的核心.着陆页的设计元素会同电子邮件的设计保持一致,它的目的是使来到页面的访客能够有效的转化至目标路径的终点,走完整个转化路径.而在着陆页面上,我们可以收集到访客的浏览数

淘宝-可以嵌入.net的商品详情编辑器及数据库设计

问题描述 可以嵌入.net的商品详情编辑器及数据库设计 有没有像淘宝天猫店铺后台那种可以编辑宝贝详情的编辑器,求源代码,可以嵌入.net的. 如果没有的话,怎么把商品介绍连带格式保存到数据库里.或者是在页面下方自动调用指定的htm文件.

仿淘宝商品详情页上拉弹出新ViewController

新项目就要开始做了,里面有购物那块,就试着先把淘宝商品详情页的效果做了一下. 1.需求 1.第一次上拉时,A视图拉到一定距离将视图B从底部弹出,A视图也向上 2.显示B视图时下拉时,有刷新效果,之后将A回到原处,B向下 3.A视图再次上拉时,能看到B视图,拉到一定距离时,和1一样A.B向上 2.思路 刚看到时,我是想到我们小区宝2.0的登录弹出效果,想着A向上滑动一定距离时A.B向上,B向下滑动时让A.B向下滑动,实现了之后和小伙伴讨论了一下,发现了一些细节这样是实现不了的,就是A上拉时可以看到