还剩2页未读,继续阅读
文本内容:
第5章商品详情页视觉设计
一、商品主图设计
二、商品细节展示区设计教学内容
三、商品功效简介区设计
四、女鞋商品详情页视觉设计案例【知识目标】
1.了解商品主图的设计规范
2.熟悉商品主图的设计形式
3.掌握商品细节展示区设计教学要求
4.了解修饰元素在设计中的重要性【技能目标】
1.熟悉商品主图的设计形式
2.掌握商品细节展示区设计技巧
3.熟练掌握商品详情页各元素的设计方法
1.掌握商品主图的设计形式教学重点
2.掌握商品细节展示区设计技巧
3.熟悉商品详情页各元素的设计方法
1.掌握并运用商品主图的设计形式教学难点
2.熟练运用商品细节展示区设计技巧
3.熟练运用商品功效简介区各元素的设计方法教学方法讲授法、案例法课时数6课时教学内容第一节商品主图设计
一、商品主图的设计规范显示在搜索结果页面中的商品主图尺寸为220像素X220像素,而显示在商品详情页左上角的商品主图尺寸为4X像素X400像素商品主图的文件大小要小J-500KB,图片格式可以为JPG、PNG、GIF格式当上传的商品主图尺寸大于700像素x700像素时,商品详情页哙自动提供放大镜功能,即消费者将鼠标指针移到商品主图上时会显示局部放大效果,以便查看商品细节
二、商品主图的设计形式(-)展示商品的全貌利用白色背景展示商品的全貌是商品主图最常规的设计形式,特别是天猫商城,大多数行业都要求至少有一张白底主图
(二)场景化的设计商品主图另一种常规的设计形式是通过模特展示商品,或者根据商品的特点和用途搭建生活化、场景化的环境,这种设计形式的优点是可以让买家直观地感受商品的实际穿戴或使用效果,间接地向买家传达商品的适用人群和档次
(三)拼接式设计拼接式设计就是将多张商品图片合成一张商品主图,这种设计形式的优点是信息丰富,不但可以同时显示商品的外观和实际效果,还可•以让买家对商品的可选颜色-目了然;缺点是众多的商品图片放到一起,商品特征不够突显
(四)突出商品卖点品牌商品都会在商品主图的角放置品牌的Logo,这种方式可以有效地让买家识别品牌,唤醒老客户的消费记忆,吸引新客户的关注和消费
三、添加文案提高主图点击率商品主图是吸引消费者了解商品和进店浏览的关键,因此要充分利用商品主图的画面空间,在主图上添加一些描述商品特色和卖点,以及刺激消费者购物欲望的文案,进一步吸引消费者点击商品主图在添加主图文案时,需要注意以下两点
(1)文案说明信息的表达形式要简洁明了,要有引发消费者产生点击冲动的诱惑力;
(2)文案说明信息不能遮挡商品主体第二节商品细节展示区设计
一、商品细节展示区的表现形式(-)指示型表现形式指示型表现形式就是先将商品完整地展示出来,再把商品需要突出展示的局部细节图片以类似放大镜的形式排布在完整商品图的四周,并利用线条、箭头等设计元素将细节图片与完整的商品图连接起来,有时还会用简单的说明性语言来对细节进行解说
(二)局部图解型表现形式局部图解型表现形式的设计更简单,只需将商品的局部细节放大即可,不需对细节位置进行指示但是,局部图解型表现形式可以增加说明性文字内容,比较适用于外观简单、剧件少的商品及日常用品的细节展示
二、商品细节展示区通用设计方式想要让消费者全方位了解商品的特点,就只能依靠文字来进行说明
(一)利用文字对细节进行说明
(二)素材让细节展示更直观第三节商品功效简介区设计
一、商品功效简介区的设计规范商品功效简介区是商品详情页的一部分,其设计宽度受到商品详情页宽度的限制,高度上则不受限制下表为淘宝、天猫和京东的商品详情页设计尺寸规范电商平台商品详情页设计尺寸规范详情页左侧边栏宽190像素,中间空10像素,右侧宽750像素,加淘宝网起来总宽度为950像素如果关闭左侧边栏,就可以显示950像素宽,不然只显示750像素宽详情页布局与淘宝类似,不同之处在于大猫商城新版页面的宽度由天猫商城750像素变为790像素京东京东对详情页布局有统一要求,整体宽度不超过740像素商品功效简介区的设计重点就是对商品的功效进行总结与归纳,通过文字、色彩和修饰元素的完美搭配来提升文字的可读性
二、修饰元素在设计中的重要性在设计商品功效简介区时,为了将商品功效表述得更加直观、形象,可以使用多种修饰元素来丰富画面的内容,修饰元素的巧妙应用能够提升商品信息的可读性,让枯燥的文字变得更具象化,在给消费者带来美好的视觉享受的同时,有助于消费者深入了解商品的功效第四节女鞋商品详情页视觉设计案例通过本章的学习,我们对商品详情页视觉设计有了一个比较全面的认识,掌握了商品主图的设计规范、商品细节展示区设计以及商品功效简介区设计等内容建议读者在对商品详情页视觉设计进行研究时注意几点商品详情页是所有营销归纳与的落地点如果详情页不能满足消费者的需求,不能解决消费者的实际问题,就很难提高将流量转化为销量消费者在购买前一定会对详情页仔细看,反复看,甚至对比看,才决定是否购买。