《商品信息采编》教案第17课设计服装配饰类商品详情页.docx

课题设计服装配饰类商品详情页课时2课时(90min)教学目标知识技能目标：（1）了解商品详情页（2）掌握商品详情页的布局方式（3）了解服装配饰类商品详情页的模块安排（4）能够完成服装配饰类商品详情页的设计工作素质目标：增强积极思考、寻求解决方法的意识教学重睚点教学重点：商品详情页的布局方式，服装配饰类商品详情页的模块安排教学难点：服装配饰类商品详情页的设计教学方法问答法、讨论法、讲授法、实践法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：课前任务一考勤（2min）一问题导入（5min）一传授新知（18min）T任务实施（20min）第2节课：问题导入（3min）一任务实施（27min）一课堂讨论（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，预习本节课要学习的知识【学生】完成课前任务通过课前任务,使学生预习本节课要学习的知识,增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】班干部报请假人员及原因培养学生的组织纪律性,掌握学生的出勤情况问题导入（5min）【教师】提出以下问题：什么是商品详情页？具有什么作用？【学生】聆听、思考、举手回答通过问题导入，弓I导学生主动思考,激发学生的学习兴趣传授新知（18min）【教师】通过学生的回答引入要讲的知识，讲解商品详情页的相关内容6.1.1 商品详情页简介÷【教师】通过多媒体展示“耳机详情页”图片（详见教材），并进行讲解商品详情页是展示商品详细信息的页面,优秀的商品详情页有助于打消消费者的疑虑，提升转化率。商品详情页的宽度通常设置为750像素或790像素,高度自定（根据页面内容的多少设定），单张图片大小小于500kB,连体图片3MB以内，使用JPG或PNG等格式。6.1.2 商品详情页的布局方式÷【教师】通过多媒体展示“对齐布局”“延伸布局”图片（详见教材），并通过教师讲解和课堂讨论等方式,使学生了解商品详情页的概念、布局方式,以及服装配饰类商品详情页模块安排等相关知识随机邀请学生回答以下问题：对比一下这两种布局，说说延伸布局的优点有哪些？÷【学生】聆听、观看、思考、回答+【教师】总结学生的回答(1)延伸：相邻两个模块采用居中对齐布局时，会产生模块之间过渡生硬的情况；而延伸布局方式打破了两个模块之间的界限，不仅为页面增添了活力，还使两个模块的信息产生了关联。计【教师】通过多媒体展示“用直线分割模块”用曲线分割模块”图片(详见教材)，并随机邀请学生回答以下问题：对比一下这两种分割模块的方式，说说曲线分割模块有哪些优点?【学生】聆听、现看、思考、回答*【教师】总结学生的回答(2)曲线：在进行页面布局时,使用直线分割模块会让画面显得呆板，如图6-5所示；而通过改变分割线形状，如将直线改为曲线、折线等，能有效地解决这个问题.÷【教师】通过多媒体展示“平铺布局”“层鸨布局”图片(详见教材)，并随机邀请学生回答以下问题：对比一下平铺对局和层叠布局的效果图，说说哪一种更好，为什么？【学生】聆听、观看、思考、回答【教师】总结学生的回答(3)层售：商品详情页中通常包含图片、文案等元素，将这些元素平铺排列，能使页面显得干净利落，但缺少变化。如果将这些元素进行层叠，不仅能丰富画面效果，而且能增加画面的空间感、层次感和设计感。*【教师】通过多媒体展示“一字排开布局”"错位布局”图片(详见教材)，并随机邀请学生回答以下问题：对比一下这两种布局方式，说说哪一种更好，为什么?【学生】聆听、观看、思考、回答*【教师】总结学生的回答错位：在进行模块布局时，通常会遇到级别相同的多个元素，如多幅图片，将这些元素一字排开且间距相同，能给人整齐有序的感觉，但会使画面显得呆板。如果将这些元素错位列，则可为画面增加动感。6.1.3服装配饰类商品详情页的模块安排÷【教师】提出以下问题，随机邀请学生进行回答服装配饰类商品详情页通常会安排哪些模块？÷【学生】聆听、思考、回答÷【教师】总结学生的回答服装配饰类商品详情页通常会安排以下模块。(1)宣传或促销：通常，消费者进入商品详情页后，是按照从上到下的顺序浏览页面，因此，商品详情页页头(第一个模块)是一个非常好的广告位，可以安排商品促销或宣传模块。(2)搭配：服装配饰类商品详情页有时会安排商品搭配模块(通常位于页头后)，以强化商品的实用性，从而吸引消费者注意，或者引导消费者购买搭配的同款商品。(3)款式：一款商品可能会有多种款式，如一件连衣裙有多种颜色，需展示商品款式，让消费者知道其款式多样，有自由选择的空间，从而对商品产生浓厚的兴趣。(4)卖点：商品详情页需安排商品卖点模块，以展示商品的独特之处，从而激发消费者的购买欲望。(5)展示：商品详情页的重点就是商品展示模块(通常包括整体和细节)，其作用是让消费者全面、彻底地了解商品，从而毫无顾虑地购买商品。【知识链接】一些服装类商品详情页还会安排尺码对照模块方便消费者根据自身情况购买合适的商品，这是非常有必要的。【学生】聆听、思考、记录任务实施(20min)【教师】讲解设计针织杉详情页的具体步骤，并要求学生以小组为单位完成制作详情页宣传模块的任务÷【教师】组织学生扫码观看”设计针织衫详情页”视频(详见教材)，让学生对设计过程有一个大致地了解1.设计思路(1)模块安排：页头安排宣传内容，以吸引消费者注意；第二个模块安排款式信息，让消费者知道此款针织衫有多种颜色，可以根据自己的喜好选择；第三个模块展示针织衫的卖点，让消费者了解针织衫的特点；第四个模块为针织衫展示模块，展示从不同角度拍摄的针织衫，让消费者全面、深入地了解针织衫。(2)配色分析：整个页面用白色作为背景颜色，用黑色作为文案颜色，呈现出大气、简洁的效果。÷【教师】提出以下问题，随机邀请学生进行回答如果让你设计针织衫详情页，你会使用哪种布局方式？为什么？通过设计针织衫详情页任务,帮助学生熟悉制作详情页宣传模块的流程和方法÷【学生】聆听、思考、回答÷【教师】总结学生的回答，并通过多媒体展示“针织衫详情页效果”图片（详见教材）（3）布局方式：采用延伸和层叠布局方式，既加强了模块之间的关联性，又突出了画面的层次感.此外，有些地方用线条装饰，让画面更活泼.【教师】让学生分组讨论设计思路【学生】组内讨论、确定思路、由小组代表发表讨论结果【教师】点评、总结各组的发言2.设计步骤1）制作宣传模块【教师】演示并讲解设计步骤及具体操作步骤I新建一个名为"针织衫详情页"，宽度为750像素，高度自定，分辨率为72像素/英寸，颜色模式为RGB模式的文档。用"横排文字工具"在图像编辑区上方添加文本并设置文本属性，接着置入本书配套素材"素材与实例"一"项目4""针织衫""调整后"一"街头风组”文件夹中的"IMG_9339.jpg"文件，并调整其大小和位置。【小提示】商品详情页的高度会随着内容的多少发生变化，因此，可以先输入一个估计数值，然后在具体制作过程中根据实际需求进行增减。此外，本项目案例中的商品图片均使用项目4中美化后的商品图片，为简化描述，后续艮阐述打开的图片名，用户从项目4相应案例的文彳牛夹中直找即可。步骤2选择"钢笔工具"，并将工具属性栏中的工具模式设置为"形状"，然后在模特右侧绘制一条折线，设置其填充为无，描边色为白色，描边宽度为2像素。步骤3新建一个图层，用"椭圆选框工具"在折线顶端绘制一个宽度为7像素、高度为7像素的正圆选区，并为其填充白色，然后选中步骤2中创建的折线图层，按"Ctrl+E"组合键合并图层，最后为合并的图层添加投影图层样式，指示器绘制完成。步骤4用"横排文字工具"在指示器上方添加文本并设置文本属性，然后为其添加与折线一样的投影图层样式。步骤5复制一个指示器，并用变换工具将其旋转180°后移至模特左侧，然后复制步骤4创建的文本并移动位置，接着修改文本内容和文本属性（设置行距为"30点"）。至此，针织衫详情页页头制作完成。【小提示】商品详情页内容较多，每设计完一部分，应对其进行编组处理，以便于后续管理。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作宣传模块任务【教师】巡堂辅导、答疑解惑第二节课问题导入（3min）【教师】提出以下问题：上节课我们制作了详情页的宣传模块，那么接下来该制作哪些模块了呢？【学生】聆听、思考、举手回答通过问题导入，弓I导学生主动思考，激发学生的学习兴趣任务实施（27min）【教师】讲解设计针织杉详情页的具体步骤，并要求学生以小组为单位完成制作款式模块、卖点模块和制作商品展示模块的任务2）制作款式模块【教师】演示并讲解设计步骤及具体操作步骤I用"矩形工具”在页头下方绘制一个宽度为700像素、高度为170像素的矩形，并设置其填充色为白色,描边为无。步骤2在白色矩形上添加文本并设置文本属性。步骤3置入本书配套素材"IMG_9454.jpg""IMG_9456.jpg""IMG_9458.jpg""IMG_9459.jpg""IMG_9461.jpg""IMG_9464.jpg"文件，并调整它们的大小和位置，然后在每款针织衫下方添加文本并设置文本属性。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作款式模块任务【教师】巡堂辅导、答疑解惑3）制作卖点模块【教师】演示并讲解设计步骤及具体操作步骤1首先创建卖点模块标题，然后置入本书配套素材"IMG_9347.jpg"文件并调整其大小和位置，接着将其转换为普通图层（在图层上右击，从弹出的快捷菜单中选择"栅格化图层"项）。用"矩形选框工具”框选图片右侧多余的背景，并按ttDeIetew键删除，然后用"模糊工具"模格图片背景，使模特更突出，最后在图片右侧添加文本。步骤2置入本书配套素材"IMG_9485.jpg"文件，并调整其大坏口位置，然后复制此图并将复制图片等比例缩小后添加投影图层样式，接着选中原图层，选择"滤镜"一"模糊"T"高斯模糊”菜单项，在打开的“高斯模糊"对话框中设置半径为“3。"像素后单击"确定"按钮，将原图作为背景。步骤3新建T图层（置于最顶层），用"矩形选框工具"绘制T宽度为640像素、高度为880像素的矩形选区并为其填充白色，在白色矩形上再绘制一个宽度为600像素、高度为695像素的矩形选区，按"Deleie”键删除选区内容。步骤4在白色矩形上添加文本和矩形装饰。步骤5置入本书配套素材“IMG_9467.jpg""IMG_9482.jpg""IMG_9377.jpg"通过设计针织衫详情页任务，帮助学生熟悉制作洋情页款式模块、卖点模块和商品展示模块的流程和方法"IMG_9379.jpg"文件，并调整它们的大小和位置，然后复制三份步骤4中创建的文本和矩形装饰，修改内容后放在合适的位置。÷【教师】提出以下问题，随机邀请学生进行回答对于图片中颜色不均匀的地方一般如何处理？【学生】聆听、思考、回答【教师】总结学生的回答其中，罗纹圆领图片需用"色相/饱和度”命令调整色调（具体参数见图6-34）,使其更符合整体页面效果，另外要用"画笔工具"调整颜色过渡不均匀的地方。【学生】聆听、观看、理解、记忆【教师】让学生分组进彳谛IJ作【学生】组内分工，根据本组的设计思路完成制作卖点模块任务【教师】巡堂辅导、答疑解惑4）制作商品展示模块【教师】演示并讲解设计步骤及具体操作步骤1首先输入文本并设置文本属性，然后新建一个图层,用“矩形选框工具"绘制一个宽度为380像素、高度为70像素的矩形选区，选择"编辑""描边”菜单项,在打开的"描边"对话框中设置参数后单击“确定"按钮,按“CW+D"组合键取消选区.框选"模特展示"文本，按住"Shift”键的同时再框选"Modeldisplay"文本，并按"Deleie”键删除选区内容，最后按"Qrl+D"组合键取消选区。步骤2复制”制作卖点模块”步骤4中创建的标题并修改内容，然后将英文文本的字体样式改为“EU-B8",字体大小改为"20点"，接着将灰色矩形装饰根据文本的长短进行调整,最后置入本书配套素材"IMG_9294.jpg"文件。步骤3采用上述方法制作商品展示模块余下部分。至此，针织衫详情页制作完成.【小提示】设计商品展示模块时，在商品图片之间加入文本，可在避免画面显得呆板的同时宣传商品特点。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作商品展示模块任务【教师】巡堂辅导、答疑解惑【学生】制作完成后，由小组代表展示本组设计的商品详情页图片【教师】与学生一起评选出最佳商品详情页图片课堂讨论(10min)【教师】组织学生分组讨论女士挎包详情页的设计思路参照以下提示梳理女士挎包详情页的设计思路。(1)确定模块安排：确定女士挎包详情页中安排哪些模块，并根据模块安排确定具体内容，包括图片和文案。需要注意的是，在商品展示模块中可放置女士挎包内部结构图，以便于消费者全面了解商品。(2)确定配色方案：通常，设计以女性为目标消费者的商品详情页时，配色可以亮色调、暖色调为主，辅以黑白两色，既使整个页面充满女性气息，又能获得大气、简洁的画面效果。(3)确定布局方式：根据模块及模块中的元素安排选择合适的布局方式。【学生】组内讨论、确定思路、由小组代表发表讨论结果【教师】点评各组的发言通过小组讨论，帮助学生进一步巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课学习了商品详情页的概念、布局方式，以及服装配饰类商品详情页模块安排等相关知识，同时通过具体的设计任务，帮助大家熟悉了设计服装配饰类商品详情页的流程和方法，希望大家在课下多加复习，巩固所学知识，能够完成服装配饰类商品详情页的设计工作。【学生】总结回顾知识点总结知识点，巩固学生对商品详情页和设计服装配饰类商品详情页相关知识的印象作业布置(2min)【教师】布置课后作业完成任务6.1中"任务实训”的相关活动。【学生】完成课后任务通过课后作业复习巩固学到的知识，提高实际操作能力教学反思本节课学生接触了新的知识，学习兴趣较高。在教学中，教师要将学生作为教学的主体，时刻关注学生学习成绩、方法等各方面的变化，引导学生从被动学习转为自主学习和思考，从而提高学习的积极性和主动性。