护肤类商品淘宝详情页的制作教案

来源网络侵权请联系删除2.4护肤类商品详情页的制作教案基本信息课题名称网店美工课程性质专业拓展课授课教材网店美工授课地点计算机机房授课专业电子商务专业授课年级202*级授课形式理实一体、线上线下混合式教学授课学时2学情分析学生特点：学生的形象思维和灵活性较强，能进行知识迁移，但逻辑思维较弱。学习基础：同学们已经学习过《电子商务概论》、《电子商务平台建设》、《电子商务物流》等电商相关专业课程，具有一定的课程基础，但是大多数学生对基础知识掌握不够扎实。大多数同学的学习态度认真，对该课程有兴趣。教学目标知识目标1.认识详情页制作的要点；2.熟悉护肤品详情页的制作。能力目标1.能够说出详情页制作的要点；2.掌握护肤品详情页的制作。素质目标1.培养自主学习能力以及团队协作能力；2.提升职业认同感，追求卓越的工匠精神，敬业报国。教学重难点【重点】：详情页制作的要点；【难点】：护肤品详情页的制作。教学方法与策略在教学过程中我们采用“理论与实践一体化”的项目教学法。教师引导学生树立“学习即工作、工作是学习”的思想，在将某一课题以及需要解决的问题或需要完成任务的形式交给学生，由学生自己按照实际工作的完成过程进行工作。其工作过程一般包括：收集信息、制定计划、实施、检验成果和评估总结。这种教学方式不仅可以改变教师单项传播的呆板，还可以充分调动学生的主动性和积极性，发挥了学生创造性解决问题的能力。教学资源网络教学资源超星学习通Photoshop软件其他教学资源多媒体教室课本、教案等文本资料网络教学视频教学活动安排（一）课前准备课前内容预习教学活动教学手段及设计意图教师活动学生活动1.发送讨论话题：在超星学习通发布讨论话题：详情页制作的要点有哪些？2.发送资料与作业反馈：在学习通中将护肤类商品详情页的制作的相关文字及视频资料发送到资料库，并将作业反馈推送给学生。1.完成老师发布的讨论题，结合实习经验进行本节课知识的初印象。2.查阅上一章课后练习的反馈，并预习相关知识完成对护肤类商品详情页的制作的再印象。通过作业反馈以及课前预习，承上启下，完成对本节课内容了解。课前准备的流程可以用以下示意图来表示：（二）课中提升课堂内容讲解教学活动教学手段及设计意图教师活动学生活动课堂导入1.发布签到二维码2.发布课堂作业与前期预习的评价1.学生完成学习通签到2.查看前期作业及预习内容的反馈，反思总结。1.超星学习通平台2.旨在完成学生考勤并通过复习订单处理作业情况以及预习温故而知新。教学过程一、详情页制作要点宝贝详情页中的常见板块包括：收藏关注+优惠券，焦点图、推荐热销商品、商品详情、模特图、场景图、商品细节图、同类商品对比图、买家秀或信誉展示图、搭配推荐、购物须知、品牌文化简介等内容。详情页就像实体店铺中的导购员，过于死板的信息说明就像是推销员的态度过于生硬，会让用户产生反感，甚至关掉详情页面。因此，制作详情页时，应该做的生动些，切记生硬死板。卖家可以根据自己店铺的实际情况选择详情页版块内容。护肤品类商品详情页制作时，大多包含这几部分：关联营销、商品详情、专业商品效果测试以及买家秀等信息。（一）关联营销关联营销是爽肤水常用的版块，爽肤水是护肤开始的第一步，后面会用到精华、面霜、防晒等商品，因此在制作爽肤水详情页的时候，卖家一般都会加入精华、面霜、防晒等商品的关联营销或者是成套商品的关联营销，如图2-60所示。设置这种关联营销后，有相关需求的用户会点击查看，从而提高整个网店的客单价。图2-60关联营销（二）商品文字详情说明区别于其他商品，护肤类商品制作详情页时也会融入商品文字详细说明，如产地、保质期、适用年龄、主要成分等，不同于商品详情页中的图片介绍，这里将所有内容集中在一起，更加便于用户全面了解商品信息，如图2-61所示。图2-61商品详情（三）商品细节说明爽肤水的细节说明也呈现出不同的特点，如瓶子材质，玻璃材质或者塑料材质；使用方式，是直接倒取式的还是按压泵式；商品粘稠度的展示等，如图2-62至图2-64所示。这些细节展示，不仅可以让用户了解商品详情，还可以让用户了解商品人性化的设计。有时候仅仅在设计方面的差异性就可以获取或者流失一个用户，因此在商品细节展示方面应该尽可能详细，并重点突出商品的优点。图2-62商品细节图1图2-63商品细节图2图2-64商品细节图3（四）目标用户与其他商品不同，购买护肤品类商品的用户通常是带着保湿、美白、抗皱这些诉求去寻找商品的。如果在详情页制作过程中可以设置目标用户，被用户选中的机会就会多一些。如图2-65所示，图中列举了这几类目标用户，几乎包含了所有爱美的女性，当用户看到图中的目标用户时，总能从中找到一点自己的影子，购买商品的机会就增大。图2-65目标用户（五）商品优势如何抓住用户的眼球，让其在琳琅满目的爽肤水中选择卖家的商品，就需要在详情页中将商品的优势说明。例如，可以从商品的制作原料、使用效果测试等出发，如图2-66、2-67所示。这些数据和资料指直接表明商品的科技含量及其功效，也更能说服用户做出选择。图2-66商品优势解析图2-67专业商品效果测试（六）使用方法同样的护肤品使用不同的方法，最终的效果也是不同的。如果能在详情中加入使用方法，不仅能够体现品牌的专业性，而且能更好地帮助用户使用商品，如图2-68所示。图2-68商品使用方法介绍（七）品牌详情详情页中加入品牌简介，用户通过对品牌的深入了解，可以增强对商品的信任感。如图2-69、2-70所示，通过对线下专柜以及品牌发展历程的简介，可以打破用户对品牌仅仅是“著名品牌”的简单认知，增强品牌的影响力。图2-69品牌详情1图2-70品牌详情2至此，护肤品的详情页就讲完了，卖家只需按照上面讲到的知识点在photoshop中将要所需的图片处理好，然后登录卖家账号，进入后台，运用“神笔”工具制作出详情页即可，具体操作，参看项目一相关内容。二、护肤品详情页的制作1、新建画布，建议最初可以先将高度设置为10000像素，在之后作图中如果画布不够可使用［裁剪工具］或菜单栏中“图像”-“画布大小”进行高度调整。图2-712、将“头图背景素材”拖入画布，缩放到合适大小。图2-72拖入头图背景素材3、新建图层，使用[选框]工具，在头图背景左右各绘制一道相同宽度的黑色矩形，并使用菜单栏中滤镜-模糊-高斯模糊，参数开到4以上，做出如图效果。图2-73具体效果4、将素材“01”打开，并进行[钢笔]抠图，将抠好的产品图放入头图背景上，对产品进行图层样式-投影的添加，具体参数效果如图。图2-74具体参数设置5、添加头图海报文案。图2-75添加文案6、使用[形状]工具-椭圆工具，绘制一个无填充仅描边的圆，描边像素为“3”，绘制完成后，将该图层进行栅格化，由形状变为普通图层。使用[选框]工具，选取圆形中间部分进行删除，得到如下效果。图2-76具体效果7、将该图层进行复制，注意图层间的相对位置，写入文案。头图海报制作完成。图2-77头图海报8、使用钢笔工具绘制如下形状，颜色填充为“57867d”。图2-78绘制形状9、复制一层“步骤7”中的图层，向上移动10像素，将向下一层的图层颜色改为渐变，渐变颜色分别为“9e7e59”“ad8f6b”“997752”“ac8f6b”“997752”“ac8f6b”“997752”“ad8f6b”“9e7e59”渐变效果如图所示。图2-79参数设置及效果图10、绘制一个矩形，并在四角减去四个相同大小的圆，填充颜色为“4c8171”，描边为渐变，颜色参考步骤8，效果如图。图2-80参数设置效果图11、将素材“02”嵌套进形状中，效果如图。图2-81效果图12、在步骤9的图层下层，绘制一个与步骤9相同参数的矩形，描边像素比步骤9的小一点。调整好位置。图2-82效果图13、添加装饰。装饰素材使用[形状]工具中的直线工具进行无填充仅描边的设置，设置描边选项为虚线，效果如图。图2-83效果图14、添加相关文案。图2-84效果图15、在下方绘制三个相同的形状，绘制方法如步骤9，填充为渐变“13443a”“295c52”“13443a”，并填充文案，放入“素材组”中的素材，效果如图。图2-85效果图16、在下方绘制一个“f4f4f4”的矩形，添加相关文案和“素材组”素材。图2-86效果图17、复制步骤7、步骤8中的形状，移动到合适的位置，并复制产品信息文案组，改为“产品卖点”，效果如图。图2-87效果图18、绘制一个只有描边的矩形，栅格化后，使用[选框]工具，将描边矩形下方删除掉一部分，效果如图。图2-88效果图19、添加相关文案和“素材组”中的素材。效果如图图2-89效果图20、使用步骤17/18相同方法绘制剩下两个产品卖点。图2-90效果图21、制作用户体验模块、使用步骤模块、原料供应模块和产品直排模块，方法上同，不在此赘述。图2-91效果图22、在详情页的最后一个模块，添加一部分售后服务模块。完成所有制作。图2-92售后服务模块总结评价对本次课的内容进行总结，并结合学生们的表现进行评价。根据老师的总结找到自己需要提高的地方，并对评价进行反思改进学习通、Photoshop软件，旨在对课堂表现行总结。（三）课后拓展相关知识扩展教学活动教学手段及设计意图教师活动学生活动1.将实训等相关视频发到学习通中2.将课后练习题发到学习通中1.完成视频观看2.复习知识并完成练习题1.学习通2.旨在复习并扩展相关知识教学创新1、教学方法：本次课程运用讲授法、小组讨论法、案例分析法以及自主探究学习法并结合视频及动画演示以巩固教学效果。在讲授完成后进行实训系统的练习，即熟悉了知识又为接下来机房操作奠定了基础。2、信息化运