淘宝商品详情页设计&框架讲解 主讲：张方岩.

Presentation on theme: "淘宝商品详情页设计&框架讲解 主讲：张方岩."— Presentation transcript:

1 淘宝商品详情页设计&框架讲解 主讲：张方岩

2 张方岩 2009年3月获得Adobe认证平面设计师（ACCD)证书。 2010年6月被Adobe公司授予软件设计师，电子商务设计师证书。
国有国法，家有家规；如果一个网站没有了设计规则，那么整个网站有可能会被设计的五花八门，千奇百怪，特别是大型的商业网站更需要设计规范进行指导； 张方岩 2009年3月获得Adobe认证平面设计师（ACCD)证书。 2010年6月被Adobe公司授予软件设计师，电子商务设计师证书。 2009年5月—2014年4月，担任多家淘宝店铺美工总监。 主讲：张方岩

3 一、淘宝用户购物特点 二、详情页面设计的作用 三、详情页面展示内容 3.1 标题 宝贝主图与价格 3.2 DRS产品信息
中文字体是经过设计师手绘出来的；英文字体已经有了字体安装包； 三、详情页面展示内容 3.1 标题 宝贝主图与价格 3.2 DRS产品信息 3.3 方案 Banner图片 四、详情页面展示的内容类别 4.1 商品展示类 4.2 实力展示类 4.3 吸引购买类 4.4 交易说明类 4.5 促销说明类 五、详情页面的排版 5.1 用户认知规律 5.2 用户对页面的注视点 5.3 图文排版的快速识别性 5.4 页面长度的控制 主讲：张方岩

4 淘宝用户购物特点 主讲：张方岩

5 线上购物与线下购物的区别！ 买家逛街 进入店铺 挑选商品 通过搜索 各专题页入口 通过单品页 入进店铺 进入单品页 主讲：张方岩

6 小结 那么大家都知道了！WHY？ 差异就是…… 线上顾客购物都是从窗子口爬进来的！ 主讲：张方岩

7 栅格系统英文为“grid systems”，也有人翻译为“网格系统”，是一种平面设计的方法与风格。如今，栅格系统也已经被运用到网页中。它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
详情页面设计的作用 主讲：张方岩

8 这个产品怎么使用呢 为什么你的产品 值这样的价钱 有色差吗 不知道尺码合不合适呢 售后有保障吗 这东西好吗 这个品牌不知道好不好呢
雅虎采用的栅格是40px；网易是60px；淘宝的栅格系统源于雅虎； 这东西好吗 这个产品怎么使用呢 这个品牌不知道好不好呢 售后有保障吗 为什么你的产品 值这样的价钱 不知道尺码合不合适呢 有色差吗 不知道穿在身上好不好看 主讲：张方岩

9 如何去解答买家的问题 吸引买家，最终达成交易呢？ 小结 那么大家都知道了! WHY? 当然是解决用户想的拉……
淘宝的栅格系统是以40px的栅格为基础的； 为了顺应显示器宽度的发展，原有的950宽度和公式，逐渐将被990宽度取代； 990宽度的栅格为50px； 根据栅格和列数，我们可以得到一系列的宽度数据； 小结 那么大家都知道了! WHY? 当然是解决用户想的拉…… 我相信大多数店家都解决好了部分问题！ 但最重要的是……！ 如何去解答买家的问题 吸引买家，最终达成交易呢？ 主讲：张方岩

10 详情页面展示的内容 根据淘宝的栅格系统，我们可以制定出常用的页面布局结构； 两栏式和三栏式可反转使用； 至少有一列符合栅格宽度；
主讲：张方岩

11 标题、宝贝主图与价格 基础篇 运用篇 A 品牌+系列名称+男（女）+产品名称+产品货号 B
一个标题就仅仅30个汉字，如何发挥它的作用呢？ 之前的是20%原则，新加入了导航和搜索区； A 基础篇 品牌+系列名称+男（女）+产品名称+产品货号 B 运用篇 品牌+系列名称+男（女）+热词+产品名称+产品货号 注：热词--添加当季搜索热词增加曝光率 但一定要与产品有足够的关联性 主讲：张方岩

12 1 2 这样看，是不是去掉 背景更好 实物拍摄，但背景没有选好 降低了商品的档次（800PX没有满格）
全网吊顶承载着整个淘宝网对消费者公共核心部分，各业务线不得对内容形式进行更改； 已有现成的公共文件，使用时include调用即可； 全站有活动时，可在吊顶区域增加通栏； 这样看，是不是去掉 背景更好 实物拍摄，但背景没有选好 降低了商品的档次（800PX没有满格） 主讲：张方岩

13 立体感 品质感 清晰细节图+品牌标识 主题不明确 背景凌乱 颜色较多 主讲：张方岩

14 宝贝价格 大众路线 品质路线 OR 不是所有商家降低利润都能吸引买家！ 找到自己产品的定位才是关键！
各业务线应用时，不得对内容形式进行修改； 不是所有商家降低利润都能吸引买家！ 找到自己产品的定位才是关键！ 大众路线 品质路线 OR 主讲：张方岩

15 DRS 产品信息 主讲：张方岩

16 小结 本来这个没什么好讲的 但是若你的店铺需要直通车推广 在关键词的选择方面 你就要最大限度的接近你的产品标题和DRS产品信息
注意微软雅黑字体的使用；方正字体是淘宝唯一购买使用的授权字体； 本来这个没什么好讲的 但是若你的店铺需要直通车推广 在关键词的选择方面 你就要最大限度的接近你的产品标题和DRS产品信息 这样才能做到精准推广 主讲：张方岩

17 文案 / Banner图 研究发现互网上 60%的文字信息用户是不会去阅读的 主讲：张方岩

18 真实好评位置上 提，让买家能够更容易浏览到 （真实的好评） 主讲：张方岩

19 怎样的文案图片组合才能够吸引买家 主讲：张方岩

20 淘宝业务线众多，各业务线根据自己的特色制定了不同的Banner设计规范，但万变不离其宗：
主讲：张方岩

21 A B 这张图设计排版文案 都很好 但是背景有点抢了主 题的视角 你的视角在哪儿？ 建议就是 背景稍微 虚化模糊 包包也是 制造一种
前台交易以淘宝橙色为主；后台以蓝色为主； B 建议就是 背景稍微 虚化模糊 包包也是 制造一种 从近到远的感觉 主角也就凸显了 主讲：张方岩

22 栅格规范对广告位的应用； 详情页面展示的内容 主讲：张方岩

23 详情页面展示的内容类别 商品展示类 实力展示类 吸引购买类 交易说明类 促销说明类 平拍 模特 色彩 细节 卖点 场景效果 搭配 包装
目前各自产品线根据自己的产品特性，自定义链接和文本文字的颜色； 平拍 模特 色彩 细节 卖点 场景效果 搭配 包装 商品展示类 品牌 荣誉 资质 销量 生产 仓储 实力展示类 情感打动 品质打动 实力打动 买家评价 吸引购买类 尺码规格 维护保养 购买 发货 验货 退换货 保修 交易说明类 店内活动 关联销售 搭配商品 优惠方式 促销说明类 主讲：张方岩

24 框架结构图 留白体现了一个页面的透气性，让用户在阅读的时候产生节奏感； 主讲：张方岩

25 小结 记住不要千篇一律！ 首先说明，关于你的类别的排列顺序 大家见仁见智，根据你产品的特点来选择先展示什么类别。
标题、title； 首先说明，关于你的类别的排列顺序 大家见仁见智，根据你产品的特点来选择先展示什么类别。 但一定不要乱，不要像第2个案例一样， 在同一屏内穿插两个类别的信息 这样会极大的降低产品详情页的用户体验 记住不要千篇一律！ 主讲：张方岩

26 在同一页面中，尽量使用统一样式的控件，降低用户的使用成本；
详情页面的排版 主讲：张方岩

27 买家的认知规律 通常在需要用户进行二次确认操作时使用； 主讲：张方岩

28 买家对商品详细页的关注点 一、利用好第一屏 二、150PX侧栏其实也很重要 三、不一定要每个宝贝第二屏都 是关联销售 主讲：张方岩

29 页面长度的控制 关联销售 ● 和本商品是否有关联性 ● 减少排版占屏 ● 建议首屏或者二屏关联销售3-5款即可
● 每张图片设定顾客3-4秒浏览，减少信息 ● 突出主题 如：“升级版” “纯棉” 主讲：张方岩

30 模特图 ● 同一场景同一角度图片要减少 主讲：张方岩

31 色彩展示 ● 多个色彩服装，可以将一个颜色作为主打色 展示 （或者两个） ● 多个色彩服装的上身效果，可以一字排开
大斑马线和小斑马线之分；40px，20px； 淘宝搜索结果页也是斑马线的应用； ● 多个色彩服装，可以将一个颜色作为主打色 展示 （或者两个） ● 多个色彩服装的上身效果，可以一字排开 ● 多个色彩服装的裁剪都一致时，不需要每个 颜色都重复展示背面、侧面

32 主讲：张方岩