电子商务视觉设计--教案-第6章-电商网店详情页视觉设计

('课题（项目、章节）第6章电商网店详情页视觉设计课时教学目标知识目标：1.了解和认知电商网店详情页2.掌握商品主图视觉设计方法3.掌握关联营销图视觉设计方法4.掌握商品细节图视觉设计方法5.掌握商品功能图视觉设计方6.掌握商品展示设计方法技能目标：1.能够运用Photoshop软件相关操作与命令制作网店店铺详情页2.能够完成电商网店详情页装修。重点难点重点：电商网店详情页视觉设计方法难点：电商网店详情页视觉设计制作方法手段方法：讲授法，讨论法，直观展示法，自主学习法，任务驱动法，课堂教学等手段：多媒体幻灯片和投影仪教学过程与内容教学环节设计第一节电商网店详情页认知一、创设意境，导入新课二、新课教学一：详情页意义电商网店详情页是展示商品信息的页面，通常消费者注意到感兴趣的首页后，最想浏览的就是详情页，它直接决定了电商网店能否留住消费者，达成交易。三、新课教学二：详情页营销流程电商网店的整个销售过程没有实体店的交流与互动，完全处于静态。因此，在产品详情页的装修中要注意阐述逻辑这个关键点，让文字和图片活起来。详情页的基本营销思路是首先介绍商品详情，其次描述商品细节，进行商品展示，再次说服消费者产生购买欲望，最后达成购买事实。四、新课教学三：详情页尺寸一般情况下，电商网店详情页中的商品描述图的宽度是750像素，高度没有固定限制，要根据商品的具体内容来定义。合理地处理图片，才能让电商网店看起来正规可信，并且更加专业。五、新课教学四：详情页设计要点要根据产品定位和用户定位来排版详情页。根据消费者对产品的关注点来安排内容，比如产品的性能、价格、亮点和使用效果等。六、新课教学五：详情页设计类型电商网店详情页包含的内容较多，由于不同的商品所要表现的重点也不同，因此要想设计出能够展现商品价值的详情页，需要清楚了解详情页的类型。（一）功能型功能型的详情页主要介绍产品的功能。例如，在制作床品店铺的详情页时，需要考虑的是消费者除关注花色和尺寸外，还关注床品的材质、洗涤方法等。（二）符号型1.新课导入2.新课讲授3.学生练习4.教师总结课题（项目、章节）第6章电商网店详情页视觉设计课时教学目标知识目标：1.了解和认知电商网店详情页2.掌握商品主图视觉设计方法3.掌握关联营销图视觉设计方法4.掌握商品细节图视觉设计方法5.掌握商品功能图视觉设计方6.掌握商品展示设计方法技能目标：1.能够运用Photoshop软件相关操作与命令制作网店店铺详情页2.能够完成电商网店详情页装修。重点难点重点：电商网店详情页视觉设计方法难点：电商网店详情页视觉设计制作方法手段方法：讲授法，讨论法，直观展示法，自主学习法，任务驱动法，课堂教学等手段：多媒体幻灯片和投影仪教学过程与内容教学环节设计第二节电商网店详情页认知一、创设意境，导入新课二、新课教学一：商品主图认知当消费者在电商平台进行商品搜索时，显示在搜索结果页面中的商品图片就是商品主图。商品主图是消费者对商品的第一印象，尺寸为220像素×220像素。显示在商品详情页中的主图也叫商品橱窗照，如下图所示。为了网页浏览的顺畅，多数网站要求的商品主图的文件大小不能大于500KB，图片格式可以是JPG、PNG和GIF格式。三、新课教学二、商品主图设计形式（一）摆拍设计：商品主图的基本要求是可以清晰地展示商品全貌。商品摆拍可以使用纯白背景或简洁背景，这种设计的优点是直接、干净，可以让消费者快速了解商品的外观与颜色，最能直观地表现商品特点和属性。（二）场景设计：场景设计是指通过模特进行商品展示，或者根据产品特点和用途搭建生活化、场景化的环境。这种设计在展示商品的同时，还可以起到烘托商品氛围的作用。场景设计通常需要较高的成本和一定的拍摄技巧，如果场景运用不得当，就会增加图片的无效信息，分散主体的注意力。场景图如图6-8所示。1.复习、新课导入2.新课讲授3.学生练习4.教师总结课题（项目、章节）第6章电商网店详情页视觉设计课时教学目标知识目标：1.了解和认知电商网店详情页2.掌握商品主图视觉设计方法3.掌握关联营销图视觉设计方法4.掌握商品细节图视觉设计方法5.掌握商品功能图视觉设计方6.掌握商品展示设计方法技能目标：1.能够运用Photoshop软件相关操作与命令制作网店店铺详情页2.能够完成电商网店详情页装修。重点难点重点：电商网店详情页视觉设计方法难点：电商网店详情页视觉设计制作方法手段方法：讲授法，讨论法，直观展示法，自主学习法，任务驱动法，课堂教学等手段：多媒体幻灯片和投影仪教学过程与内容教学环节设计第三节关联营销图视觉设计原则一、创设意境，导入新课二、新课教学一：关联营销图视觉设计认知电商网店关联营销图是指一个产品页同时放了其他同类、同品牌等可搭配的有关联产品，由此达到让客户由此及彼的浏览，以便提高点击率，提高购买率，增加产品销售量，是一种建立在双方互利互益基础上的营销方式。关联营销图因具有快速提高购买率，让更多的人来购买；缩短购物路径，将浏览者变为购买者；增加用户关注、提高店铺忠诚度；提高客单价，让消费者一次买更多；提高店内产品曝光率等优势，成为电商网店装修详情页必不可少的内容。三、新课教学二、关联营销图视觉设计原则（一）基于需求：关联产品的选择要基于用户的需求，不能有强加感，在图片表现上要注意商品色调的一致性和商品风格的统一性。（二）保障利润：为了让消费者感受到搭配销售的实惠，同时保障自己的利润，关联产品尽量选择高定价产品，在关联营销图上形成直观的对比。1.复习、新课导入2.新课讲授3.学生练习4.教师总结课题（项目、章节）第6章电商网店详情页视觉设计课时教学目标知识目标：1.了解和认知电商网店详情页2.掌握商品主图视觉设计方法3.掌握关联营销图视觉设计方法4.掌握商品细节图视觉设计方法5.掌握商品功能图视觉设计方6.掌握商品展示设计方法技能目标：1.能够运用Photoshop软件相关操作与命令制作网店店铺详情页2.能够完成电商网店详情页装修。重点难点重点：电商网店详情页视觉设计方法难点：电商网店详情页视觉设计制作方法手段方法：讲授法，讨论法，直观展示法，自主学习法，任务驱动法，课堂教学等手段：多媒体幻灯片和投影仪教学过程与内容教学环节设计第五节产品功能图视觉设计一、创设意境，导入新课二、新课教学一：商品功能图认知商品功能图对商品的功能或作用进行翔实、透彻的分析和说明。整个商品详情页中商品功能图的位置相对靠后，能坚持浏览到这里的消费者说明已经对商品产生了很大兴趣。因此，商品功能图视觉设计的好坏，直接影响消费者对商品的持续认可，进而影响消费者下单。三、新课教学二、商品功能图设计规范（一）尺寸因为产品功能图是电商网店详情页的一部分，所以其设计宽度受商品详情页宽度的影响，而高度上则没有限制。例如，天猫商城新版页面宽度为790像素，京东统一要求详情页布局宽度不超过740像素。（二）文字产品功能图主要阐述商品的作用和功能，这些信息若平铺直叙，则会显得单调枯燥，让消费者失去阅读的热情，从而降低购买率。因此，产品功能图的视觉设计重点就是对描述高品作用和功能的文字进行归纳和总结，并通过色彩和装饰元素进行艺术化处理，从而提升文字的可读性。1.复习、新课导入2.新课讲授3.学生练习4.教师总结',)