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

《《商品信息采编》教案第17课设计服装配饰类商品详情页.docx》由会员分享，可在线阅读，更多相关《《商品信息采编》教案第17课设计服装配饰类商品详情页.docx（7页珍藏版）》请在优知文库上搜索。

1、课题设计服装配饰类商品详情页课时2课时(90min)教学目标知识技能目标：（1）了解商品详情页（2）掌握商品详情页的布局方式（3）了解服装配饰类商品详情页的模块安排（4）能够完成服装配饰类商品详情页的设计工作素质目标：增强积极思考、寻求解决方法的意识教学重睚点教学重点：商品详情页的布局方式，服装配饰类商品详情页的模块安排教学难点：服装配饰类商品详情页的设计教学方法问答法、讨论法、讲授法、实践法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：课前任务一考勤（2min）一问题导入（5min）一传授新知（18min）T任务实施（20min）第2节课：问题导入（3min）一任务实施（27min

2、）一课堂讨论（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，预习本节课要学习的知识【学生】完成课前任务通过课前任务,使学生预习本节课要学习的知识,增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】班干部报请假人员及原因培养学生的组织纪律性,掌握学生的出勤情况问题导入（5min）【教师】提出以下问题：什么是商品详情页？具有什么作用？【学生】聆听、思考、举手回答通过问题导入，弓I导学生主动思考,激发学生的学习兴趣传授新知（18min）【教师

3、】通过学生的回答引入要讲的知识，讲解商品详情页的相关内容6.1.1 商品详情页简介【教师】通过多媒体展示“耳机详情页”图片（详见教材），并进行讲解商品详情页是展示商品详细信息的页面,优秀的商品详情页有助于打消消费者的疑虑，提升转化率。商品详情页的宽度通常设置为750像素或790像素,高度自定（根据页面内容的多少设定），单张图片大小小于500kB,连体图片3MB以内，使用JPG或PNG等格式。6.1.2 商品详情页的布局方式【教师】通过多媒体展示“对齐布局”“延伸布局”图片（详见教材），并通过教师讲解和课堂讨论等方式,使学生了解商品详情页的概念、布局方式,以及服装配饰类商品详情页模块安排等相关知

4、识随机邀请学生回答以下问题：对比一下这两种布局，说说延伸布局的优点有哪些？【学生】聆听、观看、思考、回答+【教师】总结学生的回答(1)延伸：相邻两个模块采用居中对齐布局时，会产生模块之间过渡生硬的情况；而延伸布局方式打破了两个模块之间的界限，不仅为页面增添了活力，还使两个模块的信息产生了关联。计【教师】通过多媒体展示“用直线分割模块”用曲线分割模块”图片(详见教材)，并随机邀请学生回答以下问题：对比一下这两种分割模块的方式，说说曲线分割模块有哪些优点?【学生】聆听、现看、思考、回答*【教师】总结学生的回答(2)曲线：在进行页面布局时,使用直线分割模块会让画面显得呆板，如图6-5所示；而通过改变

5、分割线形状，如将直线改为曲线、折线等，能有效地解决这个问题.【教师】通过多媒体展示“平铺布局”“层鸨布局”图片(详见教材)，并随机邀请学生回答以下问题：对比一下平铺对局和层叠布局的效果图，说说哪一种更好，为什么？【学生】聆听、观看、思考、回答【教师】总结学生的回答(3)层售：商品详情页中通常包含图片、文案等元素，将这些元素平铺排列，能使页面显得干净利落，但缺少变化。如果将这些元素进行层叠，不仅能丰富画面效果，而且能增加画面的空间感、层次感和设计感。*【教师】通过多媒体展示“一字排开布局”错位布局”图片(详见教材)，并随机邀请学生回答以下问题：对比一下这两种布局方式，说说哪一种更好，为什么?【学

6、生】聆听、观看、思考、回答*【教师】总结学生的回答错位：在进行模块布局时，通常会遇到级别相同的多个元素，如多幅图片，将这些元素一字排开且间距相同，能给人整齐有序的感觉，但会使画面显得呆板。如果将这些元素错位列，则可为画面增加动感。6.1.3服装配饰类商品详情页的模块安排【教师】提出以下问题，随机邀请学生进行回答服装配饰类商品详情页通常会安排哪些模块？【学生】聆听、思考、回答【教师】总结学生的回答服装配饰类商品详情页通常会安排以下模块。(1)宣传或促销：通常，消费者进入商品详情页后，是按照从上到下的顺序浏览页面，因此，商品详情页页头(第一个模块)是一个非常好的广告位，可以安排商品促销或宣传模块。

7、(2)搭配：服装配饰类商品详情页有时会安排商品搭配模块(通常位于页头后)，以强化商品的实用性，从而吸引消费者注意，或者引导消费者购买搭配的同款商品。(3)款式：一款商品可能会有多种款式，如一件连衣裙有多种颜色，需展示商品款式，让消费者知道其款式多样，有自由选择的空间，从而对商品产生浓厚的兴趣。(4)卖点：商品详情页需安排商品卖点模块，以展示商品的独特之处，从而激发消费者的购买欲望。(5)展示：商品详情页的重点就是商品展示模块(通常包括整体和细节)，其作用是让消费者全面、彻底地了解商品，从而毫无顾虑地购买商品。【知识链接】一些服装类商品详情页还会安排尺码对照模块方便消费者根据自身情况购买合适的商

8、品，这是非常有必要的。【学生】聆听、思考、记录任务实施(20min)【教师】讲解设计针织杉详情页的具体步骤，并要求学生以小组为单位完成制作详情页宣传模块的任务【教师】组织学生扫码观看”设计针织衫详情页”视频(详见教材)，让学生对设计过程有一个大致地了解1.设计思路(1)模块安排：页头安排宣传内容，以吸引消费者注意；第二个模块安排款式信息，让消费者知道此款针织衫有多种颜色，可以根据自己的喜好选择；第三个模块展示针织衫的卖点，让消费者了解针织衫的特点；第四个模块为针织衫展示模块，展示从不同角度拍摄的针织衫，让消费者全面、深入地了解针织衫。(2)配色分析：整个页面用白色作为背景颜色，用黑色作为文案颜

9、色，呈现出大气、简洁的效果。【教师】提出以下问题，随机邀请学生进行回答如果让你设计针织衫详情页，你会使用哪种布局方式？为什么？通过设计针织衫详情页任务,帮助学生熟悉制作详情页宣传模块的流程和方法【学生】聆听、思考、回答【教师】总结学生的回答，并通过多媒体展示“针织衫详情页效果”图片（详见教材）（3）布局方式：采用延伸和层叠布局方式，既加强了模块之间的关联性，又突出了画面的层次感.此外，有些地方用线条装饰，让画面更活泼.【教师】让学生分组讨论设计思路【学生】组内讨论、确定思路、由小组代表发表讨论结果【教师】点评、总结各组的发言2.设计步骤1）制作宣传模块【教师】演示并讲解设计步骤及具体操作步骤I

10、新建一个名为针织衫详情页，宽度为750像素，高度自定，分辨率为72像素/英寸，颜色模式为RGB模式的文档。用横排文字工具在图像编辑区上方添加文本并设置文本属性，接着置入本书配套素材素材与实例一项目4针织衫调整后一街头风组”文件夹中的IMG_9339.jpg文件，并调整其大小和位置。【小提示】商品详情页的高度会随着内容的多少发生变化，因此，可以先输入一个估计数值，然后在具体制作过程中根据实际需求进行增减。此外，本项目案例中的商品图片均使用项目4中美化后的商品图片，为简化描述，后续艮阐述打开的图片名，用户从项目4相应案例的文彳牛夹中直找即可。步骤2选择钢笔工具，并将工具属性栏中的工具模式设置为形状

11、，然后在模特右侧绘制一条折线，设置其填充为无，描边色为白色，描边宽度为2像素。步骤3新建一个图层，用椭圆选框工具在折线顶端绘制一个宽度为7像素、高度为7像素的正圆选区，并为其填充白色，然后选中步骤2中创建的折线图层，按Ctrl+E组合键合并图层，最后为合并的图层添加投影图层样式，指示器绘制完成。步骤4用横排文字工具在指示器上方添加文本并设置文本属性，然后为其添加与折线一样的投影图层样式。步骤5复制一个指示器，并用变换工具将其旋转180后移至模特左侧，然后复制步骤4创建的文本并移动位置，接着修改文本内容和文本属性（设置行距为30点）。至此，针织衫详情页页头制作完成。【小提示】商品详情页内容较多，

12、每设计完一部分，应对其进行编组处理，以便于后续管理。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作宣传模块任务【教师】巡堂辅导、答疑解惑第二节课问题导入（3min）【教师】提出以下问题：上节课我们制作了详情页的宣传模块，那么接下来该制作哪些模块了呢？【学生】聆听、思考、举手回答通过问题导入，弓I导学生主动思考，激发学生的学习兴趣任务实施（27min）【教师】讲解设计针织杉详情页的具体步骤，并要求学生以小组为单位完成制作款式模块、卖点模块和制作商品展示模块的任务2）制作款式模块【教师】演示并讲解设计步骤及具体操作步骤I用矩形工具”在页头下方绘

13、制一个宽度为700像素、高度为170像素的矩形，并设置其填充色为白色,描边为无。步骤2在白色矩形上添加文本并设置文本属性。步骤3置入本书配套素材IMG_9454.jpgIMG_9456.jpgIMG_9458.jpgIMG_9459.jpgIMG_9461.jpgIMG_9464.jpg文件，并调整它们的大小和位置，然后在每款针织衫下方添加文本并设置文本属性。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作款式模块任务【教师】巡堂辅导、答疑解惑3）制作卖点模块【教师】演示并讲解设计步骤及具体操作步骤1首先创建卖点模块标题，然后置入本书配套素材

14、IMG_9347.jpg文件并调整其大小和位置，接着将其转换为普通图层（在图层上右击，从弹出的快捷菜单中选择栅格化图层项）。用矩形选框工具”框选图片右侧多余的背景，并按ttDeIetew键删除，然后用模糊工具模格图片背景，使模特更突出，最后在图片右侧添加文本。步骤2置入本书配套素材IMG_9485.jpg文件，并调整其大坏口位置，然后复制此图并将复制图片等比例缩小后添加投影图层样式，接着选中原图层，选择滤镜一模糊T高斯模糊”菜单项，在打开的“高斯模糊对话框中设置半径为“3。像素后单击确定按钮，将原图作为背景。步骤3新建T图层（置于最顶层），用矩形选框工具绘制T宽度为640像素、高度为880像素

15、的矩形选区并为其填充白色，在白色矩形上再绘制一个宽度为600像素、高度为695像素的矩形选区，按Deleie”键删除选区内容。步骤4在白色矩形上添加文本和矩形装饰。步骤5置入本书配套素材“IMG_9467.jpgIMG_9482.jpgIMG_9377.jpg通过设计针织衫详情页任务，帮助学生熟悉制作洋情页款式模块、卖点模块和商品展示模块的流程和方法IMG_9379.jpg文件，并调整它们的大小和位置，然后复制三份步骤4中创建的文本和矩形装饰，修改内容后放在合适的位置。【教师】提出以下问题，随机邀请学生进行回答对于图片中颜色不均匀的地方一般如何处理？【学生】聆听、思考、回答【教师】总结学生的回答其中，罗纹圆领图片需用色相/饱和度”命令调整色调（具体参数见图6-34）,使其更符合整体页面效果，另外要用画笔工具调整颜色过渡不均匀的地方。【学生】聆听、