电商视觉设计-PPT第5章.pptVIP

第5章 商品详情页视觉设计了解商品主图的设计规范掌握商品主图的设计形式掌握商品细节展示区设计技巧了解修饰元素在设计中的重要性熟练掌握商品详情页各元素的设计方法学习目标 目 录商品主图设计5.1商品细节展示区设计5.2商品功效简介区设计5.3女鞋商品详情页视觉设计案例5.4 5.1 商品主图设计商品主图的设计规范1商品主图的设计形式2添加文案提高主图点击率3 5.1 商品主图设计 1 商品主图的设计规范商品主图尺寸要求有哪些信誉好的足球投注网站结果页面中的商品主图尺寸为220像素×220像素商品详情页中的商品主图尺寸为400像素×400像素 5.1 商品主图设计 2 商品主图的设计形式展示商品的全貌1拼接式设计3突出商品卖点4场景化的设计2 5.1 商品主图设计 2 商品主图的设计形式展示商品的全貌1白色背景商品主图 5.1 商品主图设计 2 商品主图的设计形式场景化的设计2场景展示商品主图 5.1 商品主图设计 2 商品主图的设计形式拼接式设计3 5.1 商品主图设计 2 商品主图的设计形式突出商品卖点4 5.1 商品主图设计 3 添加文案提高主图点击率添加主图文案添加价格信息，以激发消费者的购买欲望，提高点击率添加商品的材质简介，提升商品形象，让消费者了解更多商品信息 5.1 商品主图设计 3 添加文案提高主图点击率添加品牌徽标 5.1 商品主图设计 3 添加文案提高主图点击率添加品牌信息 5.2 商品细节展示区设计商品细节展示区的表现形式1商品细节展示区通用设计方式2 5.2 商品细节展示区设计 1 商品细节展示区的表现形式指示型表现形式局部图解型表现形式 5.2 商品细节展示区设计 1 商品细节展示区的表现形式完整的商品形象展示 用实线连接放大的局部细节指示型表现形式 5.2 商品细节展示区设计 1 商品细节展示区的表现形式局部图解型表现形式 5.2 商品细节展示区设计 2 商品细节展示区通用设计方式利用文字对细节进行说明素材让细节展示更直观 5.2 商品细节展示区设计 2 商品细节展示区通用设计方式标题文字：对该细节图的内容进行概括和归纳，应用画龙点睛的关键词进行文案设计段落说明文字：详细阐述该细节图的内容，对标题文字进行展开说明利用文字对细节进行说明 5.2 商品细节展示区设计 2 商品细节展示区通用设计方式利用文字对细节进行说明系统介绍商品信息对女鞋细节参数进行系统介绍，让消费者一目了然了解商品信息 5.2 商品细节展示区设计 2 商品细节展示区通用设计方式素材让细节展示更直观 箭头能将商品整体外观 图与细节图联系起来， 具有引导视线的作用聊天气泡用于修饰细节图、说明文字的边框，使文字和图片能一一对应，准确传递商品信息 5.2 商品细节展示区设计 2 商品细节展示区通用设计方式素材让细节展示更直观方框规范了文字的显示范围圆形素材的使用让图像之间产生一定的联系矩形与圆形素材的使用 5.3 商品功效简介区设计商品功效简介区的设计规范1修饰元素在设计中的重要性2 5.3 商品功效简介区设计 1 商品功效简介区的设计规范淘宝、天猫和京东的商品详情页设计尺寸规范：电商平台商品详情页设计尺寸规范淘宝网详情页左侧边栏宽190像素，中间空10像素，右侧宽750像素，加起来总宽度为950像素。如果关闭左侧边栏，就可以显示950像素宽，不然只显示750像素宽天猫商城详情页布局与淘宝类似，不同之处在于天猫商城新版页面的宽度由750像素变为790像素京东京东对详情页布局有统一要求，整体宽度不超过740像素 5.3 商品功效简介区设计 1 商品功效简介区的设计规范将商品的功效分为几个不同的关键点进行介绍商品功效简介区设计 5.3 商品功效简介区设计 2 修饰元素在设计中的重要性使用图表对商品的某些功效进行具象表现，利用数据、比例上的优势来增强说服力，提升商品功效简介的可信度复选框素材的使用，加强了对商品功效的肯定作用聊天气泡具有一定的指引视线和修饰作用将洗衣液的功效用对比图的方式表现出来，提升功效的可信性 5.4 女鞋商品详情页视觉设计案例 5.4 女鞋商品详情页视觉设计案例01新建图像文件 5.4 女鞋商品详情页视觉设计案例02导入广告并调整大小 5.4 女鞋商品详情页视觉设计案例03添加文字 5.4 女鞋商品详情页视觉设计案例04绘制矩形并制作渐隐效果 5.4 女鞋商品详情页视觉设计案例05添加文字和修饰直线 5.4 女鞋商品详情页视觉设计案例06添加商品图 5.4 女鞋商品详情页视觉设计案例07设置标题文字 5.4 女鞋商品详情页视觉设计案例08添加商品属性信息 5.4 女鞋商品详情页视觉设计案例09导入背景图像 5.4 女鞋商品详情页视觉设计案例10输入文字并进行修饰 5.4 女鞋商品详情页视觉设计案例11绘制图形并导入商品图 5.4 女鞋商品详情