1、了解商品主图的设计规范掌握商品主图的设计形式掌握商品细节展示区设计技巧了解修饰元素在设计中的重要性熟练掌握商品详情页各元素的设计方法学习目标目 录商品主图设计5.1商品细节展示区设计5.2商品功效简介区设计5.3女鞋商品详情页视觉设计案例5.45.1 商品主图设计商品主图的设计规范1商品主图的设计形式2添加文案提高主图点击率35.1 商品主图设计商品主图尺寸要求搜索结果页面中的商品主图尺寸为220像素220像素商品详情页中的商品主图尺寸为400像素400像素5.1 商品主图设计展示商品的全貌1拼接式设计3突出商品卖点4场景化的设计25.1 商品主图设计展示商品的全貌1白色背景商品主图5.1 商
2、品主图设计场景化的设计2场景展示商品主图5.1 商品主图设计拼接式设计35.1 商品主图设计突出商品卖点45.1 商品主图设计添加主图文案添加价格信息，以激发消费者的购买欲望，提高点击率添加商品的材质简介，提升商品形象，让消费者了解更多商品信息5.1 商品主图设计添加品牌徽标5.1 商品主图设计添加品牌信息5.2 商品细节展示区设计商品细节展示区的表现形式1商品细节展示区通用设计方式25.2 商品细节展示区设计商品细节展示区的表现形式指示型表现形式局部图解型表现形式5.2 商品细节展示区设计商品细节展示区的表现形式完整的商品形象展示 用实线连接放大的局部细节指示型表现形式5.2 商品细节展示区
3、设计商品细节展示区的表现形式局部图解型表现形式5.2 商品细节展示区设计商品细节展示区通用设计方式5.2 商品细节展示区设计商品细节展示区通用设计方式标题文字：对该细节图的内容进行概括和归纳，应用画龙点睛的关键词进行文案设计段落说明文字：详细阐述该细节图的内容，对标题文字进行展开说明5.2 商品细节展示区设计商品细节展示区通用设计方式系统介绍商品信息对女鞋细节参数进行系统介绍，让消费者一目了然了解商品信息5.2 商品细节展示区设计商品细节展示区通用设计方式 箭头能将商品整体外观 图与细节图联系起来，具有引导视线的作用聊天气泡用于修饰细节图、说明文字的边框，使文字和图片能一一对应，准确传递商品信
4、息5.2 商品细节展示区设计商品细节展示区通用设计方式方框规范了文字的显示范围圆形素材的使用让图像之间产生一定的联系矩形与圆形素材的使用5.3 商品功效简介区设计商品功效简介区的设计规范1修饰元素在设计中的重要性25.3 商品功效简介区设计商品功效简介区的设计规范淘宝、天猫和京东的商品详情页设计尺寸规范：电商平台商品详情页设计尺寸规范淘宝网详情页左侧边栏宽190像素，中间空10像素，右侧宽750像素，加起来总宽度为950像素。如果关闭左侧边栏，就可以显示950像素宽，不然只显示750像素宽天猫商城详情页布局与淘宝类似，不同之处在于天猫商城新版页面的宽度由750像素变为790像素京东京东对详情页
5、布局有统一要求，整体宽度不超过740像素5.3 商品功效简介区设计商品功效简介区的设计规范将商品的功效分为几个不同的关键点进行介绍商品功效简介区设计5.3 商品功效简介区设计使用图表对商品的某些功效进行具象表现，利用数据、比例上的优势来增强说服力，提升商品功效简介的可信度复选框素材的使用，加强了对商品功效的肯定作用聊天气泡具有一定的指引视线和修饰作用将洗衣液的功效用对比图的方式表现出来，提升功效的可信性5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视
6、觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例5.4 女鞋商品详情页视觉设计案例课后练习题简述商品主图如何设计才能提高点击率。请找出五个不同类目的店铺，并分析它们的商品细节展示区有何异同。请为美食类店铺设计一个商品详情页，效果如右图所示。找出两家卖同一类商品的店铺，并思考如果你是买家会选择哪一家购买，并说明购买原因。
