第5章商品详情页视觉设计

1、第5章 商品详情页视觉设计教学内容一、商品主图设计二、商品细节展示区设计三、商品功效简介区设计四、女鞋商品详情页视觉设计案例教学要求【知识目标】1了解商品主图的设计规范。2熟悉商品主图的设计形式。3掌握商品细节展示区设计。4了解修饰元素在设计中的重要性。【技能目标】1熟悉商品主图的设计形式。2掌握商品细节展示区设计技巧。3熟练掌握商品详情页各元素的设计方法。教学重点1掌握商品主图的设计形式。2掌握商品细节展示区设计技巧。3熟悉商品详情页各元素的设计方法。教学难点1掌握并运用商品主图的设计形式。2熟练运用商品细节展示区设计技巧。3熟练运用商品功效简介区各元素的设计方法。教学方法讲授法、案例法课时

2、数6课时教学内容第一节 商品主图设计一、商品主图的设计规范显示在搜索结果页面中的商品主图尺寸为220像素×220像素，而显示在商品详情页左上角的商品主图尺寸为400像素×400像素。商品主图的文件大小要小于500KB，图片格式可以为JPG、PNG、GIF格式。当上传的商品主图尺寸大于700像素×700像素时，商品详情页会自动提供放大镜功能，即消费者将鼠标指针移到商品主图上时会显示局部放大效果，以便查看商品细节。二、商品主图的设计形式（一）展示商品的全貌利用白色背景展示商品的全貌是商品主图最常规的设计形式，特别是天猫商城，大多数行业都要求至少有一张白底主图（二）场景

3、化的设计商品主图另一种常规的设计形式是通过模特展示商品，或者根据商品的特点和用途搭建生活化、场景化的环境，这种设计形式的优点是可以让买家直观地感受商品的实际穿戴或使用效果，间接地向买家传达商品的适用人群和档次。（三）拼接式设计拼接式设计就是将多张商品图片合成一张商品主图，这种设计形式的优点是信息丰富，不但可以同时显示商品的外观和实际效果，还可以让买家对商品的可选颜色一目了然；缺点是众多的商品图片放到一起，商品特征不够突显。（四）突出商品卖点品牌商品都会在商品主图的一角放置品牌的Logo，这种方式可以有效地让买家识别品牌，唤醒老客户的消费记忆，吸引新客户的关注和消费。三、添加文案提高主图点击率商

4、品主图是吸引消费者了解商品和进店浏览的关键，因此要充分利用商品主图的画面空间，在主图上添加一些描述商品特色和卖点，以及刺激消费者购物欲望的文案，进一步吸引消费者点击商品主图。在添加主图文案时，需要注意以下两点：（1）文案说明信息的表达形式要简洁明了，要有引发消费者产生点击冲动的诱惑力；（2）文案说明信息不能遮挡商品主体。第二节 商品细节展示区设计一、商品细节展示区的表现形式（一）指示型表现形式指示型表现形式就是先将商品完整地展示出来，再把商品需要突出展示的局部细节图片以类似放大镜的形式排布在完整商品图的四周，并利用线条、箭头等设计元素将细节图片与完整的商品图连接起来，有时还会用简单的说明性语言

5、来对细节进行解说。（二）局部图解型表现形式局部图解型表现形式的设计更简单，只需将商品的局部细节放大即可，不需对细节位置进行指示。但是，局部图解型表现形式可以增加说明性文字内容，比较适用于外观简单、部件少的商品及日常用品的细节展示。二、商品细节展示区通用设计方式想要让消费者全方位了解商品的特点，就只能依靠文字来进行说明。（一）利用文字对细节进行说明。（二）素材让细节展示更直观。第三节 商品功效简介区设计一、商品功效简介区的设计规范商品功效简介区是商品详情页的一部分，其设计宽度受到商品详情页宽度的限制，高度上则不受限制。下表为淘宝、天猫和京东的商品详情页设计尺寸规范。电商平台商品详情页设计尺寸规范

6、淘宝网详情页左侧边栏宽190像素，中间空10像素，右侧宽750像素，加起来总宽度为950像素。如果关闭左侧边栏，就可以显示950像素宽，不然只显示750像素宽天猫商城详情页布局与淘宝类似，不同之处在于天猫商城新版页面的宽度由750像素变为790像素京东京东对详情页布局有统一要求，整体宽度不超过740像素商品功效简介区的设计重点就是对商品的功效进行总结与归纳，通过文字、色彩和修饰元素的完美搭配来提升文字的可读性。二、修饰元素在设计中的重要性在设计商品功效简介区时，为了将商品功效表述得更加直观、形象，可以使用多种修饰元素来丰富画面的内容，修饰元素的巧妙应用能够提升商品信息的可读性，让枯燥的文字变得更具象化，在给消费者带来美好的视觉享受的同时，有助于消费者深入了解商品的功效。第四节 女鞋商品详情页视觉设计案例略归纳与提高通过本章的学习，我们对商品详情页视觉设计有了一个比较全面的认识，掌握了商品主图的设计规范、商品细节展示区设计以及商品功效简介区设计等内容。建议读者在对商品详情页视觉设计