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

PAGE2

PAGE2

PAGE3

PAGE3

课题

精准转化——商品详情页（一）

课时

2课时（90min）

教学目标

知识目标：

（1）认识商品详情页

（2）熟悉商品详情页的内容安排和布局方式

（3）掌握商品详情页的设计技巧与制作方法

技能目标：

能够完成商品详情页的设计与制作工作

素质目标：

遵守日常操作规范，养成良好的个人习惯

教学重难点

教学重点：商品详情页的内容安排和布局方式

教学难点：商品详情页的设计技巧与制作方法

教学方法

问答法、讨论法、讲授法、案例分析法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，了解商品详情页的相关知识

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】按照老师要求签到

问题导入

【教师】提出以下问题

一个吸人眼球的商品详情页应包含哪些元素？

【学生】聆听、思考、回答

传授新知

【教师】通过大家的发言，引入新的知识点，讲解商品详情页的基础知识

4.1认识商品详情页

商品详情页是展示商品详细信息的页面。在电子商务交易中，消费者无法直接接触商品，只能通过商品详情页来了解商品，所以商品详情页的质量在很大程度上影响着商品的销量。

【师生互动】

【教师】展示“商品详情页”的图片（详见教材），随机邀请学生回答问题：

在设计与制作商品详情页时，应注意哪些方面？

【学生】聆听、观察、思考、回答

【教师】总结学生的回答

(1)使用精美的图片。商品详情页中使用的图片要清晰、美观，如果是商品图片，要保证图片中的商品无瑕疵。

(2)遵循实事求是的原则。商品详情页中的商品图片和文案必须真实地反映和介绍商品的属性，否则会产生不必要的售后纠纷，影响店铺的信誉。

4.2商品详情页的内容安排

【师生互动】

【教师】随机邀请学生回答问题：

商品详情页一般包括哪些内容？

【学生】聆听、思考、回答

【教师】总结学生的回答

(1)商品促销与宣传版块。通常，消费者进入商品详情页后，是按照从上到下的顺序浏览页面。因此，商品详情页页头是一个非常好的广告位，这里可以安排商品打折、特价等促销信息，以及品牌形象展示、新品发布等宣传信息。

(2)商品信息描述版块。商品信息描述版块主要对商品的尺寸、规格、型号、注意事项等基本信息进行展示，其作用是让消费者全面、深入地了解商品，从而毫无顾虑地购买商品。

【教师】通过展示“服装类商品详情页中的商品信息描述版块”的图片（详见教材），让学生直观了解商品信息描述版块的内容

(3)商品卖点版块。商品卖点版块主要用来展示从商品的使用价值、外观、质量、手感、包装等诸多信息中提炼的与消费者真实需求最匹配的“人无我有、人有我优”的卖点，以增加商品的竞争力。

(4)售后服务版块。售后服务版块用于展示店铺服务承诺、品质保障、7天无理由退换货等信息，以真挚的服务打消消费者的顾虑，从而促进消费者购买。

4.3商品详情页的布局方式

【师生互动】

【教师】随机邀请学生回答问题：

商品详情页的布局指的是哪些内容？

【学生】聆听、思考、回答

【教师】总结学生的回答

【教师】通过展示“居中对齐布局”“延伸布局”“采用延伸布局的页面”的图片（详见教材），讲解延伸布局的优点

(1)延伸布局。相邻两个版块采用居中对齐布局时，会产生版块之间过度生硬的情况。而延伸布局方式打破了两个版块之间的界限，不仅为页面增添了活力，还使两个版块的信息产生了关联。

【师生互动】

【教师】通过展示“用直线分割版块”“用曲线分割版块”图片（详见教材），随机邀请学生回答问题：

对比这两种布局方式，说说哪种布局更好？为什么？

【学生】聆听、观察、思考、回答

【教师】总结学生的回答

(2)曲线分割。在进行页面布局时，用直线分割版块会让画面显得呆板。而通过改变分割线形状，如将直线改为曲线、折线等，能有效地解决这个问题。

【教师】通过展示“平铺布局”“层叠布局”“采用层叠布局的页面”的图片（详见教材），讲解层叠布局的优点

(3)层叠布局。商品详情页中通常包含图片、文案等元素，将这些元素平铺排列，能使页面显得干净利落，但缺少变化。如果将这些元素进行层叠，不仅能丰富画面效果，而且能增加画面的空间感、层次感和设计感。

【师生互动】

【教师】通过展示“一字排开布局”“错位布局”“采用错位布局的页面”的图片（详见教材），随机邀请学生回答问题：

对比图片，说说错位布局有什么优点？

【学生】聆听、观察、思考、回答

【教师】总结学生的回答

(4)错位布局。在进行页面布局时，通常会遇到级别相同的多个元素，如多幅图片，将这些元素一字排开且间距相同，能给人整齐有序的感觉，但会使画面显得呆板。如果将这些元素错位排列，可为画面增