《网店美工与店铺装修》教案第6课精准转化——商品详情页（一）.docx

《《网店美工与店铺装修》教案第6课精准转化——商品详情页（一）.docx》由会员分享，可在线阅读，更多相关《《网店美工与店铺装修》教案第6课精准转化——商品详情页（一）.docx（5页珍藏版）》请在优知文库上搜索。

1、课题精准转化商品详情页(一)课时2课时（90min）教学目标知识目标：(1)认识商品详情页(2)熟悉商品详情页的内容安抖坏口布局方式(3)掌握商品详情页的设计技巧与制作方法技能目标：能够完成商品详情页的设计与制作工作素质目标：遵守日常操作规范，养成良好的个人习惯教学重难点教学重点：商品详情页的内容安排和布局方式教学难点：商品详情页的设计技巧与制作方法教学方法问答法、讨论法、讲授法、案例分析法教学用具电脑、投影仪、多媒体课件、教材教学过程主要教学内容及步骤课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，了解商品详情页的相关知识【学生】完成课前任务考勤【教

2、师】使用APP迸行签到【学生】按照老师要求签到问题导入【教师】提出以下问题一个吸人眼球的商品详情页应包含哪些元素？【学生】聆听、思考、回答传授新知【教师】通过大家的发言，引入新的知识点，讲解商品详情页的基础知识4.1 认识商品详情页商品详情页是展示商品详细信息的页面。在电子商务交易中，消费者无法直接接触商品，只能通过商品详情页来了解商品，所以商品详情页的质量在很大程度上影响着商品的销量。【师生互动】【教师】展示“商品详情页”的图片(详见教材)，随机邀请学生回答问题：在设计与制作商品详情页时，应注意哪些方面？【学生】聆听、观察、思考、回答【教师】总结学生的回答(1)使用精美的图片。商品详情页中使

3、用的图片要清晰、美观，如果是商品图片，要保证图片中的商品无瑕疵。(2)遵循实事求是的原则。商品详情页中的商品图片和文案必须真实地反映和介绍商品的属性，否则会产生不必要的售后纠纷，影响店铺的信誉。4.2商品详情页的内容安排【师生互动】【教师】随机邀请学生回答问题：商品详情页一般包括哪些内容？【学生】聆听、思考、回答【教师】总结学生的回答（1）商品促销与宣传版块。通常，消费者进入商品详情页后，是按照从上到下的顺序浏览页面。因此，商品详情页页头是一个非常好的广告位，这里可以安排商品打折、特价等促销信息，以及品牌形象展示、新品发布等宣传信息。商品信息描述版块。商品信息描述版块主要对商品的尺寸、规格、型

4、号、注意事项等基本信息进行展示.其作用是让消费者全面、深入地了解商品，从而毫无顾虑地购买商品。【教师】通过展示“服装类商品详情页中的商品信息描述版块”的图片（详见教材），让学生直现了解商品信息描述版块的内容商品卖点版块。商品卖点版块主要用来展示从商品的使用价值、外观、质量、手感、包装等诸多信息中提炼的与消费者真实需求最匹配的人无我有、人有我优的卖点，以增加商品的竞争力。（4）售后服务版块。售后服务版块用于展示店铺服务承诺、品质保障、7天无理由退换货等信息，以真挚的服务打消消费者的顾虑，从而促进消费者购买。4.3商品详情页的布局方式【师生互动】【教师】随机邀请学生回答问题：商品详情页的布局指的是

5、哪些内容？【学生】聆听、思考、回答【教师】总结学生的回答【教师】通过展示“居中对齐布局”“延伸布局”采用延伸布局的页面”的图片（详见教材），讲解延伸布局的优点延伸布局。相邻两个版块采用居中对齐布局时，会产生版块之间过度生硬的情况。而延伸布局方式打破了两个版块之间的界限，不仅为页面增添了活力，还使两个版块的信息产生了关联。【师生互动】【教师】通过展示“用直线分割版块”“用曲线分割版块”图片（详见教材）,随机邀请学生回答问题：对比这两种布局方式，说说明的布局更好？为什么？【学生】聆听、观察、思考、回答【教师】总结学生的回答（2）曲线分割。在进行页面布局时，用直线分割版块会让画面显得呆板。而通过改变

6、分割线形状，如将直线改为曲线、折线等，能有效地解决这个问题。【教师】通过展示“平铺布局层叠布局”“采用层叠布局的页面”的图片（详见教材），讲解层叠布局的优点(3)层叠布局。商品详情页中通常包含图片、文案等元素，将这些元素平铺排列，能使页面显得干净利落，但缺少变化。如果将这些元素进行层叠，不仅能丰富画面效果，而且能增加画面的空间感、层次感和设计感。【师生互动】【教师】通过展示“一字排开布局”错位布局”“采用错位布局的页面”的图片(详见教材)，随机邀请学生回答问题：对比图片，说说错位布局有什么优点？【学生】聆听、观察、思考、回答【教师】总结学生的回答(4)错位布局。在进行页面布局时，通常会遇到级别

7、相同的多个元素，如多幅图片，将这些元素一字排开且间距相同，能给人整齐有序的感觉，但会使画面显得呆板。如果将这些元素错位fiF列，可为画面增加动感。4.4设计与制作针织杉详情页【教师】组织学生扫码播放”设计与制作针织彩详情页”视频(详见教材)，让学生了解商品详情页的设计技巧与制作方法，通过展示“针织杉详情页效果”的图片(详见教材)，讲解案例最终效果1 .4.1设计针织杉详情页(1)内容安排。页头安排针织衫宣传版块，以吸引消费者驻足；其次安排针织衫信息描述版块，展示不同颜色的针织衫，让消费者知道此款针织衫有多种颜色，以便其根据自己的喜好进行选择；再次安排针织衫卖点版块，展示针织衫细节及不同角度，表

8、现针织衫较好的质量、时尚的外观，让消费者全面、深入地了解针织衫；最后安排售后服务版块，用于打消消费者的顾虑。配色分析。商品详情页的设计要与商品主图契合。针织衫主图的颜色是白色与黑色搭配使用，所以针织衫详情页的颜色也选用白色和黑色。因此，针织衫详情页将用白色作为背景色，结合精美的针织衫图片，再加上黑色文字的点缀，使画面呈现出大气、简洁的效果。【师生互动】【教师】随机邀请学生回答问题：如果让你设计针织衫洋情页，你会使用哪种布局方式？为什么？【学生】聆听、思考、回答(3)布局方式确定。针织衫详情页采用延伸和层叠布局方式，既可以加强版块之间的关联性，又可以增加画面的层次感。此外，详情页中有些地方用线条

9、作为装饰，可使画面更加活泼。2 .4.2制织杉详情页【教师】示范并讲解制作商品详情页的相关操作3 .制作针织衫宣传版块步骤1新建一个名为针织衫详情页，宽度为750像素，高度为2300像素，分辨率为72像素/英寸，颜色模式为RGB颜色的文档。【提示】不同平台对商品详情页尺寸的要求有所不同，通常淘宝PC端店铺装修要求商品详情页的宽度不超过750像素，高度自定(根据页面内容的多少设定)。因此，可以先设置一个预估高度，然后在具体制作过程中根据实际需求进行调整。步骤2选择横文字工具，在图像编辑区上方单击添加文本光标后，输入HOTSELLlNG”,然后按Clrl+A组合键全选文本，接着在工具属性栏中设置文

10、本的字体为EU-B8,字体大小为75点，字体颜色为黑色(#000000)。采用同样方法输入其他文本并设置文本属性。置入本书配套素材素材与实例一CM针织衫”文件夹中的模特Ljpg”文件，并调整其大小和位置。步骤3选择钢笔工具，在工具属性栏的选择工具模式”下拉列表中选择形状项，然后设置填充色为无，描边色为白色，描边宽度为2像素，接着在模特右侧绘制一条折线。步骤4新建一个图层，选择椭圆选框工具，按住Shift”键的同时在折线左侧顶端绘制一个直径为7像素的正圆选区，然后将前景色设置为白色，接着按Al+Deleie组合键填充选区，最后按Ctrl+D组合键取消选区。步骤5同时选中步骤3的折线图层和步骤4创

11、建的正圆图层，按“CE+E”组合键将其合并.双击合并图层的名称，然后在激活的编辑框中输入指示器，接着按Ener键确认，为合并图层重命名。最后为合并图层添加投影图层样式。至此指示器绘制完成。【提示】商品详情页内容较多，因此会创建很多图层,需及时对图层进行重命名，方便后续编辑区分。步骤6使用横排文字工具在指示器上方添加文本并设置文本属性，然后为文本添加与指示器一样的投影图层样式。步骤7采用步骤3步骤6的方法，在模特左侧绘制指示器并添加文本，然后选中文本，选择“窗口一字符菜单项，打开字符面板，在设置行距”编辑框中输入30点，并按Enter键确认,调整文本行距。选中除“背景图层外的所有图层，按Clrl

12、+G组合键进行编组并设置组名为1。【提示】商品详情页内容较多,每制作完一个版块，应对版块中的所有图层进行编组并自定义组名，便于后续操作与管理。4 .制作针织彩信息描述版块步骤1使用矩形工具在针织衫宣传版块下方绘制一个宽度为700像素，高度为170像素的矩形，并设置其填充色为白色，描边色为无。步骤2在白色矩形上添加文本并设置文本属性，制作版块标题。步骤3置入本书配套素材素材与实例一Ch4一针织衫一信息描述”文件夹中的“白jpg黄jpg粉Jpg灰.jpg蓝jpg绿jpg”文件，并调整它们的大/厢位置，然后在每款针织衫下方添加文本并设置文本属性。【提示】由于本款针织衫为均码，故不安排尺寸信息。5 .

13、制作针织杉卖点版块步骤1选择图像一画布大小”菜单项，打开“圆布大小”对话框，单击定位中的联钮，然后在“高度”编辑框中输入5000”,单击确定按钮，增加文档高度.步骤2利用横排文字工具在针织衫信息描述版块下方添加文本并设置文本属性，然后在文本下方置入素材文件夹中的模特2.jpg文件，并调整其大小和位置，接着在当前图层上右击，并从弹出的下拉列表中选择栅格化图层项，将其转换为普通图层。使用矩形选框工具框选图片右侧多余的背景，并按Delete”键将其删除。选择模棉工具，在工具属性栏中自定义画笔属性，然后在图片背景处涂抹模糊背景，使模特更突出，最后在图片右侧添加文本并设置文本属性。步骤3置入素材文件夹中

14、的细节Ljpg文件，并调整其大4年口位置.按TtrkJff组合键复制细节图片，然后将其等比例缩小，接着为其添加“投影图层样式。步骤4选中细节1图层，选择滤镜一模糊一高斯模糊”菜单项，打开高斯模糊”对话框，在其中设置半径为3.0像素，然后单击确定按钮，模糊图片。步骤5步骤13详见教材4.制作针织衫售后服务版块步骤1绘制一个适当大小的灰色矩形，然后在灰色矩形上添加文本并设置文本属性。步骤2在步骤1添加的文本下方绘制两个大/环等的灰色矩形，并设置大矩形的描边色为白色，描边宽度10像素。步骤3选中小矩形所在的图层，置入素材文件夹中的“绵羊jpg”文件，然后将其适当缩放后移至小矩形上，接着将光标移至两个

15、图层之间（当前图层与小矩形图层），按住“Alt键，当光标呈状时单击，将图片剪切到小矩形中。采用同样方法将素材文件夹中的“棉花Jpg”剪切到大矩形中。步骤4采用制作针织衫宣传版块中步骤3步骤5的方法，制作黑色指示器，然后在指示器旁边添加文本并设置文本属性，接着绘制灰色矩形作为装饰。步骤5步骤7详见教材【学生】聆听、观看、思考、理解、记忆课堂实训【教师】让学生分组进行练习，制作针织衫详情页【学生】组内分工、完成练习【教师】巡堂辅导课堂小结【教师】简要总结本节课的要点商品详情页的内容安W轿口布局方式、商品详情页的设计技巧与制作方法【学生】总结回顾知识点作业布置【教师】布置课后作业任选T商品制作详情页。【学生】完成课后任务教学反思