优秀详情页的设计26页PPT

利用文字对细节 进行说明
对女鞋细节参数进行系统介 绍，让消费者一目了然了解
商品信息
系统介绍商品信息
5.2 商品细节展示区设计
2 商品细节展示区通用设计方式
素材让细节展示 更直观
箭头能将商品整体外观 图与细节图联系起来， 具有引导视线的作用
聊天气泡用于修饰细节图、 说明文字的边框，使文字和 图片能一一对应，准确传递
5.4 女鞋商品详情页视觉设计案例
03
添加文字
5.4 女鞋商品详情页视觉设计案例
04
绘制矩形并制作渐隐 效果
5.4 女鞋商品详情页视觉设计案例
05 添加文字和修饰直线
5.4 女鞋商品详情页视觉设计案例
06
添加商品图
5.4 女鞋商品详情页视觉设计案例
07
设置标题文字
5.4 女鞋商品详情页视觉设计案例
淘宝、天猫和京东的商品详情页设计尺寸规范：
电商平台
商品详情页设计尺寸规范
淘宝网
详情页左侧边栏宽190像素，中间空10像素，右侧宽750像素，加起 来总宽度为950像素。如果关闭左侧边栏，就可以显示950像素宽， 不然只显示750像素宽
天猫商城
详情页布局与淘宝类似，不同之处在于天猫商城新版页面的宽度由 750像素变为790像素
1 商品细节展示区的表现形式
指示型表 现形式
局部图解型 表现形式
5.2 商品细节展示区设计
指示型表 现形式
1 商品细节展示区的表现形式
完整的商品形象 展示
用实线连接
放大的局部细节
5.2 商品细节展示区设计
1 商品细节展示区的表现形式
局部图解型 表现形式
5.2 商品细节展示区设计

这个版块分布的顺序就像我们去超市购物，首先进入超市 会有很多优惠商品的推荐，当我们对某一商品感兴趣时会拿起 来看（部分一），看材质、手感、做工等，并询问服务员有何 种功能或使用方法等（部分二），产生购买意愿后会了解售后 服务、保修期及地点、公司是否有实力兑现售后承诺等（部分 三）。对于网店来说还可以用图片的方式展示仓储、买家评语、 公司面貌等，这样我们就可以完美的把商品给买家呈现了！
进入到人们眼前的宝贝详情页，这个页面的整体感觉会决 定买家是否会对店铺产生好感，最大化的促进用户购买才是我 们如何做好详情页的重要目标。详情页的热销商品、搭配套餐、 优惠方式等活动还会吸引店铺潜在顾客的眼球，荣誉、资质、 仓储等信息会成功的树立在买家心中企业品牌的形象，比实际 成交一笔订单所取得的收益更大。
这个页面很长我对 它进行了切分，大家可 以看到单单在一个搜索 页就有这么多同类型的 商品，可以想象在竞争 如此激烈的市场中，抓 不住买家的购买心理最 终牺牲的是销量。
择优挑选后 我们对商品主图 进行点击就进入 到了宝贝详情页 面，我们就此页 面第一个商品为 例进行再次选择 ，如图所示。
这个详情页我 切分了三部分才勉 强放在一个页面上 呈现，买家在这个 页面上可以看到内 容不仅全面，而且 随着买家对商品了 解的逐步深入，最 终可以产生购买的 欲望，从销量和人 气上我们可以判断 出它的页面做的是 成功的，否则也不 会出现在搜索第一 页的第一个商品的 位置上。
根据人们购物的心理需求详情页大致有三个部分
1、店内推荐、促销活动和当前商品的优势。 2、宝贝整体图片和细节图片。 3、各种网店售后信息等。
本张图是分成三部分来 展示，按照三大内容进行了 分块。第一张图分别对使用 效果视频、促销活动、热卖 推荐、产品优势进行的展示， 第二张图分别对产品细节、 优劣对比、产品参数进行的 展示，第三张图分别对线上 销售、销售分布图、公司介 绍、购物保障进行的展示。

商品主图与详情页设计
1
主图设计与详情页设计
大纲
1.主图设计的基本原则 2.主图设计的基本类型 3.主图设计方法 4.详情页设计方法
2
主图设计与详情页设计 1.主图设计的基本原则 1.保证图片的清晰、完整 尺寸：600*600，700*700
3
主图设计与详情页设计 1.主图设计的基本原则 2.主体突出，画面风格统一
33
替客户做决定 13.一定要发出购买号召，强调现在就应立刻到店里购买
34
替客户做决定 14.要有和购物相关的内容，比如邮费，怎么发货，怎么退换货，哪些售后服务？
35
替客户做决定 15.有跟这款商品相关的关联销售推荐图。
关联商品也要考虑次序问题，同类的商品优先推荐，不同类的 商品放到第二位推荐，最后是套餐的推荐！
10.用户非使用价值文案和图形设计
11.拥有后的感觉塑造
（强化信任，给客户一个100%的购买理由
信赖到想拥有
12.给掏钱人的购买理由——送恋人、送父母、送领导、送朋友等
13.发出购买号召
（为什么立刻，马上，在我店购买，替客户做 决定）
替客户做决定 14.购物须知
（邮费、发货等）
15.关联推荐商品图（可调换的最后）
4
主图设计与详情页设计 1.主图设计的基本类型 1.高清产品图
5
主图设计与详情页设计 1.主图设计的基本类型 2.产品聚合图
6
主图设计与详情页设计 1.主图设计的基本类型 3.场景图
7
主图设计与详情页设计 1.主图设计的基本类型 4.照片拼图
8
主图设计与详情页设计 3.主图设计方法：
设计主图的目的是什么
15
引发兴趣模块 1.品牌介绍(可调整到最后）

学习使用绘图工具、文字工具制作中式餐具详情页。
效果图ቤተ መጻሕፍቲ ባይዱ
效果图
6.6 商品信息设计
商品信息的基本概念 商品信息的设计规则 课堂案例-中秋月饼商品信息设计
6.6.1 商品信息的基本概念
商品信息即商品的真实数据，通常位于卖点提炼或细节展示下 方。网店美工人员需要将商品的尺寸、颜色等内容充分展示给消 费者，以起到全面介绍商品、引导消费者了解的作用。
商品信息展示
切图优化
6.7 其他模块设计
其他模块的基本概念 其他模块的设计规则 课堂案例-中秋月饼其他模块设计
6.7 其他模块设计
需要网店美工人员重点设计的除了以上几个模块之外，还有包括 质量保证、品牌实力和快递售后等其他模块。这些模块通常位于详情 页底部，在最后时刻完成着促成购买的艰巨任务。下面对其他模块的 设计知识内容进行详细地讲解。
6.4.3 课堂案例-中秋月饼商品展示设计
使用“新建参考线版面”命令建立参考 线，使用“置入嵌入对象”命令置入图片， 使用“横排文字”工具添加文字，使用“矩 形”工具、“圆角矩形”工具、“椭圆”工 具绘制基本形状，使用创建剪贴蒙版命令实 现中秋月饼商品展示。
效果图
6.5 细节展示设计
细节展示的基本概念 细节展示的设计规则 课堂案例-中秋月饼细节展示设计
6.7.3 课堂案例-中秋月饼其他模块设计
使用“新建参考线版面”命令建立参考线，使用“置入嵌入对 象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形 ”工具绘制基本形状。
效果图
6.8 课堂练习-国风耳机详情页设计
学习使用绘图工具、文字工具制作国风耳机详情页。
效果图
6.9 课后习题-中式餐具详情页设计
6.5 细节展示设计

演讲人
01.
02.
03.
04.
目录
视觉营销的重要性
详情页视觉营销设计要素
详情页视觉营销设计技巧
视觉营销案例分析
1
提高转化率
吸引用户注意力：通过视觉设计吸引用户，提高点击率和浏览时间
增强用户信任度：通过高质量的视觉设计，增强用户对产品的信任度
降低跳出率：通过良好的视觉设计，降低用户跳出率，提高转化率
总结与启示
1
视觉营销案例分析可以帮助我们更好地理解视觉营销的原理和技巧。
2
成功的视觉营销案例可以提供借鉴和启示，帮助我们在实际工作中更好地运用视觉营销策略。

3
视觉营销案例分析可以帮助我们了解不同行业的视觉营销特点和趋势，从而更好地把握市场动态。
4
视觉营销案例分析可以激发我们的创意和灵感，帮助我们在实际工作中创造出更具吸引力和影响力的视觉营销作品。
创意设计：运用创意设计手法，提高页面的吸引力和独特性
3
突出产品特点
展示产品核心功能：突出产品的核心功能和优势，让消费者一目了然
强调产品独特性：强调产品的独特性和差异化，让消费者印象深刻
运用对比手法：通过与其他产品的对比，突显产品的优势
运用视觉元素：运用色彩、形状、图片等视觉元素，吸引消费者的注意力
优化用户体验：关注页面加载速度和兼容性，确保用户在各种设备上都能获得良好的体验
4
成功案例解析
案例一：可口可乐
01
案例二：耐克
02
案例三：苹果
03
案例四：星巴克
04
案例五：麦当劳
05
案例六：宝马
06
案例七：奔驰
07
案例八：奥迪

详情 页 01
转化率：8%
图片有些许不足，设计较弱 但是有卖点，够营销，并且有一个 核心，最终买家对产品有一个明确
的定义
详情 页 02
转化率： 2%
图片好，设计感足 只是不够营销，缺乏重点，内容比 较泛，买家不能明确感知到产品哪
里好
找到产品的核心卖点，重复！
3详情页制作
接下来，我们进入详情页的排版
使用 老A详情页镜像拍立得
收集图片素材
把对手的宝贝链接粘贴在地址栏
拖动网页，保 证所有图片都
展开
点击拍网页镜像把详情页保成为图片
选择保存的位置和名称
点击保存详情 页的所有素材
如上图，就是保存成功 后的文件
收集好素材以后，我们开始排详情页
我们先了解一下
排版原 理
① 确认这个产品是我要的 ② 感受门店的人气跟服务
优秀详情页设计
目 录
一、选图和文字 二、认识什么是好的详情页
三、详情页制作
1选图和文字
详情页的两大组成部分
文 图
有人 说
一张图
片
等于1000个
做淘宝，就是卖图片！ 图片的好坏，直接影响转化率！
模糊的图片其实给人的感觉是很不安的…… 喂！！！挡住啦！！！！！
还 要 无 码!
另外，爆款都是有引导语的！
会呼吸的BB霜 正品保证，假一罚十 我们支持15天无理由退换（包来回邮费）
全面遮瑕 匀透轻薄 自然粉嫩 一屏搞定，懒人也有无瑕瓷肌 原价79，今天带走39.9包邮
会呼吸的BB霜 正品保证，假一罚十
我们支持15天无理由退换（包来回邮费）
全面遮瑕 匀透轻薄 自然粉嫩 一屏搞定，懒人也有无瑕瓷肌
原价79，今天带走39.9包邮

3）营销引导环节（从信任到信赖）。 4）深度营销环节（从信赖到想拥有）。 5）替客户做决定环节。
有一句话是这样说的：“有道无术,术尚可求,有术无道,止于术”。意思是说有方法理论但是没 有技术，技术尚且是可以学到和培养，如果只有技术但缺少理论方向的支持，则只能停留于技 术层次，个人发展很容易到瓶颈，无法进一步发展，只能止步不前。网上有些人把美工分为技 术型美工和运营型美工，这个也是美工自我发展的一个过程。从营销学的角度分析，详情页的 设计思路基本上遵循以上五部曲。
京东商城
≤790px（像素）
自定义
Aliexpress（速卖通） ≤790px（像素）
自定义
— 17 —
6.2.2 PC端详情页设计
1.模板设计
步骤1 打开Photoshop软件，选择“文件”|“新建”菜单项，新建一个750像素*600像素空白文档，将文件 保存为“四件套详情.psd”。 步骤2 选择工具箱中的“横排文字工具”Ｔ，输入相应的文本“商品在展示”及“Commodity Display”， 设置字体为“微软雅黑”，颜色为“＃3ca5b8”，如图6-12左边部分所示。 步骤3 选择工具箱中的“矩形工具”，绘制一个颜色为“＃3ca5b8”的矩形，如图如图6-12右边部分所示。
— 15 —
6.2.1 页面内容布局
— 16 —
6.2.2 PC端详情页设计
在各大电商平台的宝贝详情页中，都有各自不同的详情页图片尺寸 和标准，以下为主流平台详情页图片建议尺寸
平台
详情页建议图片宽度 详情页单张图片高度
淘宝
≤750px（像素）
≤1500px
天猫商城
≤790px（像素）
≤1500px
在生产工艺上有无特别之处 消费者是否喜欢通过这种工艺生产的产品

二、实操案例：手表网店商品详情页设计
1 设计理念
由于手表表带颜色为低饱和度的黑色，所以首焦轮播区 的颜色选择了饱和度较高的蓝色渐变色进行搭配，背景 色选择白色和浅灰色，产生简约、大气的视觉效果。
采用错落有致的图像放置方法，让页面版式显得灵活多 变，富有设计感。
使用矩形对每组商品细节进行分割，使买家能够更加直 观、准确地了解商品信息。
对于单个商品页面的设计而言，商品信息的编辑与设计尤为重要。 除了展示商品本身的外观、性能等各种细节外，还可以让买家在商品详情页中更加
直观地查看店铺内的优惠打折信息，如“包邮”“买一送一”“搭配促销”等。
一、商品详情页及其设计思路 2 商品详情页的设计思路
在商品详情页中，为了让买家真实 地体验到商品的实际效果，通常需 要设计“使用感受”“尺码标示” 和“商品细节”等内容。
一、商品详情页及其设计思路 2 商品详情页的设计思路
实拍商品照片是最基本的要求，这能让 买家明白这是商家的商品质量是完全可 以信赖的。
在很多时候，卖家在商品详情页的开始 就会对商品图片进行详细的说明。例如， 说明商品的洗涤要求以及商品照片的色 差问题。
一、商品详情页及其设计思路 2 商品详情页的设计思路
CHAPTER EIGHT
商品详情页的设计
学习目标
了解商品详情页设计的重要性。 了解商品详情页的设计思路。 能够抓住不同商品的特点设计出别具一格的商品详情页。
商品详情页是整个店铺的亮点和聚焦点，没有一个买家在网购时
是不看商品详情页就直接下订单购买的。一个充满设计感的商品 详情页能够刺激买家的消费欲望，促使其快速下订单购买。
Contents 目录
1 商品详情页及其设计思路 2 实操案例：手表网店商品详情页设计 3 实操案例：女鞋网店商品详情页设计 4 综合实训 5 技能扩展

;.
13
;.
14
2.5电脑端描述
;.
15
内容包括型号规格、交易说明、配送说明、服务保障、相关信息等， 排版格式可按大图分流、展示“爆”的图片、宝贝基本信息表格、包装图、细 节图、设计师灵感、实景图+文案、盒子包装图、解释买家的常问问题、质检报 告、购物须知、评价成交服务质量图、正品描述等放心购买标志
2021202125电脑端描述2021内容包括型号规格交易说明配送说明服务保障相关信息等排版格式可按大图分流展示爆的图片宝贝基本信息表格包装图细节图设计师灵感实景图文案盒子包装图解释买家的常问问题质检报告购物须知评价成交服务质量图正品描述等放心购买标志2021何鲜生四川攀枝花凯特芒果pk广西桂七大青芒新鲜水果8斤包邮康鲜生四川攀枝花凯特芒果胜玉芒大青芒新鲜水果8斤包邮呀诺达芒果海南青芒果热带新鲜水果生鲜澳芒大青芒5斤礼盒装包邮现货芒果攀枝花新鲜现摘凯特芒果新鲜水果坏包赔10斤包20211
;.
16
【何鲜生】四川攀枝花凯特芒果 pk广西桂七大青芒新鲜水果8斤包邮 【康鲜生】四川攀枝花凯特芒果胜玉芒大青芒新鲜水果8斤包邮 呀诺达芒果 海南青芒果热带新鲜水果生鲜澳芒大青芒5斤礼盒装包邮 现货芒果 攀枝花新鲜现摘凯特芒果 新鲜水果 坏包赔 10斤包
;.
17
练一练
1.列提纲：详情至少包括五部分内容，列出主要内容与排版顺序， 以WORD形式上交 2.做详情页
如何给商品做详情页 以芒果为例
;.
1
1.选择类目
;.
22.Leabharlann 写宝贝基本信息;.3
2.1宝贝标题与宝贝卖点
;.
4
2.2 宝贝属性
;.
5
;.
6

包邮、打折、套餐优惠、虚拟兑换 功效、用途、材质、细节、场景展示
产品需要另外说明的东西，物流问题、 介意勿拍
保修、损坏赔付、退换货等
可编辑课件PPT
6
详情页的设计逻辑
可编辑课件PPT
7
根据顾客对产品的关注点来设计详情页
性能
产品亮点
价值
顾客痛点
使用效果
品牌效应
可编辑课件PPT
8
根据产品和用户来排版详情页
详情页是什么
可编辑课件PPT
1
商品详情页
商品的详细说明 店铺的促销阵地
店铺特色展示
可编辑课件PPT
2
详情页的作用
可编辑课件PPT
3
描述商品 展示商品
关联营销 口碑宣传
说服客户
促销信息
促成交易
二次购买
可编辑课件PPT
4
详情页的构成
可编辑课件PPT
5
优惠促销信息 产品详情展示 关联销售产品 商品、物流说明 品牌、公信力展示 售后说明
产品定位
用户定位
可编辑课件PPT
9
详情页的设计原则
可编辑课件PPT
10
首屏聚焦
价值塑造
场景带入
卖点强化
可编辑课件PPT
11
如何打造自己的详情页
Hale Waihona Puke 可编辑课件PPT12
自主设计
产品定位
客户定位
如果想要打造自主品牌、 捕捉精准用户、持续增长， 那最好自主设计，只有自 己懂，才能让别人懂
套用模板
热门模板
详情页是什么可编辑课件ppt商品详情页商品的详细说明店铺的促销阵地店铺特色展示可编辑课件ppt详情页的作用可编辑课件ppt描述商品展示商品说服客户促成交易关联营销口碑宣传促销信息二次购买可编辑课件ppt详情页的构成可编辑课件ppt优惠促销信息产品详情展示关联销售产品商品物流说明品牌公信力展示售后说明包邮打折套餐优惠虚拟兑换功效用途材质细节场景展示产品需要另外说明的东西物流问题介意勿拍保修损坏赔付退换货等可编辑课件ppt详情页的设计逻辑可编辑课件ppt根据顾客对产品的关注点来设计详情页价值性能使用效果顾客痛点产品亮点品牌效应可编辑课件ppt产品定位用户定位根据产品和用户来排版详情页可编辑课件ppt10详情页的设计原则可编辑课件ppt11场景带入卖点强化可编辑课件ppt12如何打造自己的详情页可编辑课件ppt13自主设计套用模板产品定位客户定位热门模板优质同行如果想要打造自主品牌捕捉精准用户持续增长那最好自主设计只有自己懂才能让别人懂如果只想赚钱或者做分销那就借鉴别人做后知者跟着先知走14感谢亲观看此幻灯片此课件部分内容来源于网络如有侵权请及时联系我们删除谢谢配合

商品图片设计——商品图片展现位置
商品图片设计——商品图片设计形式
商品图片设计——商品图片设计原则
常规的消费者原型有英雄、探险者 破坏者、照顾者、玩世不恭者等。
商品图片设计——商品图片设计原则
详情页视觉营销设计——详情描述主要模块
一个优秀的详情描述页面能激发消费者的购买欲望，促使消费者尽快下单成交
商品详情描述
主图视频 详情页视频
商品价格 规格颜色 尺寸库存
商品的功能和特性 向消费者介绍商品 关联商品的销售
商品详情页布局——不同平台详情页布局
➢ 图片格式和大小 ➢ 图片设计要求
➢ 视频时长和大小 ➢ 视频格式 ➢ 视频要求
➢ 详情内容及形式 ➢ 详情描述顺序及逻辑
淘宝平台 速卖通平台 亚马逊平台
详情页设计与制作
详情页设计与制作
02 商品详情页文案设计 04 详情页视觉营销设计
01 商品详情页布局
03 商品图片设计
商品详情页布局
实用 美观 直观
激发消费者消费的欲望 赢得消费者的信任感
提高转化率的重要入口
商品详情页布局——商品详情页构成要素
商品图片
主图 细节图 营销图
商品视频
商品参数信息
购物心理分析逻辑
引起 兴趣
激发 需求
从信任 到依赖
从信赖 到拥有
促成消费 者下单
详情页视觉营销设计——详情描述的设计逻辑
问题解决方案逻辑
描述消费者正在面临的问题（痛点） 通过提问解决问题
详情页视觉营销设计——详情描述设计流程
设计商品详情描述遵循的前提 调查结果及产品分析 宝贝卖点的挖掘
设计前的市场调查 关于商品定位 开始准备设计元素