网店装修（第三版） 教案全套 庄标英 学习情境1-7 岗位认识与网店视觉规范-搭建高带货力的直播间

学习情境一岗位认识与网店视觉规范PAGE8任务一电商美工岗位认识 一、教学目标1.知识目标了解电商美工的岗位要求、职责及工作流程。2.技能目标能正确理解电商美工岗位的要求、职责及工作流程。3.情感目标培养学生团队合作等职业素养。二、教学内容分析电商美工是电商行业中比较重要的一个岗位，主要负责电商相关平台的视觉设计，包括商品图片处理、活动图制作、网店装修等。认识该岗位的岗位要求、职责及工作流程，能为后面的网店装修学习做好准备。教学重点：电商美工岗位的要求、职责及工作流程。教学难点：提升自身的美工岗位职业素养。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示电商美工岗位工作日常的视频。思考电商美工岗位的工作内容有哪些？通过观看视频初步认识电商美工的工作日常。通过展示视频，激发学生的学习兴趣。2.新课讲解一、电商美工岗位要求电商美工是电商行业中比较重要的一个岗位，主要负责电商相关平台的视觉设计，包括商品图片处理、活动图制作、网店装修等。电商美工人员需要具备以下能力。（一）专业技能需要熟练掌握Photoshop（PS）、Illustrator（AI）等图像处理软件，具备扎实的修图、图像合成、配色、字体选择、排版等技能。了解Dreamweaver（DW）等网页设计软件，掌握一定的HTML代码知识，能完成网店装修基本操作。了解商品图片与视频拍摄，能熟练操作PremierePro（Pr）、剪映等视频剪辑软件。了解一些电商平台的设计规范和要求，如淘宝、京东、拼多多、抖音等平台对网店图片内容、尺寸、格式、分辨率等的规定，避免因违规而影响网店正常运营。（二）创意与创新能力紧跟电商设计趋势，将创意与创新融入网店设计中，能够根据商品特点和运营需要，从营销角度提出独特的创意和设计，提升点击率和转化率。（三）协作与沟通能力需要与客户、运营、客服等进行沟通协作，了解客户的需求、运营的营销思路，将其转化为具体的设计；与客服沟通了解买家反馈，再对设计进行优化；能清晰地表达自己的设计思路及其可行性。二、电商美工岗位职责（一）商品图片处理能对商品拍摄后的图片进行后期技术处理，包括抠图、修图、调色等，以提升图片的质量和视觉效果，从而更好地展示商品信息。网店页面设计能根据网店定位或商品特点统一网店风格视觉设计，包括海报、商品主图、商品详情页、首页、自定义页、直播间设计等。更新网店页面根据网店运营需要，定期或不定期对网店页面进行更新及优化。三、电商美工职业发展路径电商美工可以从初级电商美工、资深电商美工、电商美工主管、电商设计师、视觉设计经理/总监垂直晋升，也可以向电商运营、产品经理方向横向拓展。具备一定的经验和资源后，电商美工也可以选择自主创业，承接多平台网店设计，成立自己的设计工作室或电商公司。电商美工岗位工作流程电商美工需要与运营、客户、客服等多部门沟通协作，倾听其他部门意见，理解不同部门的需求，结合运营策略和消费者需求，通过有效的团队协作，提高工作效率，设计出点击率、转化率高的设计内容。其主要工作流程如下。需求分析明确任务目标与运营、客户方等进行沟通，了解本次任务的目标，如新品上新、页面优化、主题活动等。2.了解产品卖点了解产品的参数、功能、使用方法等，更好地表达产品的卖点。3.了解目标人群了解目标人群的年龄、性别、消费习惯等，使设计更符合目标消费人群的喜好，提高点击率。（二）制订计划（1）根据任务需求和沟通结果，规划设计风格、色彩搭配、字体选择等。（2）对首页、详情页、自定义页等复杂页面，先使用Photoshop或Excel制作框架图，如主体图、文案、背景的摆放位置，为后期设计提供框架。（3）针对框架图与团队成员进行沟通，听取意见和建议，然后进行优化和完善。（三）任务实施1.素材准备根据计划，收集和整理所需的素材，如商品图片、品牌LOGO、背景图等。2.页面设计按照框架图进行页面设计。（四）审核及上传（1）完成初稿后，先自我检查，然后提交给组长进行审核。（2）根据组长审核意见，对初稿进行修改直至达到审核要求。（3）将修改后的设计稿提交验收人进行审核。根据验收人的反馈，再次进行优化以满足运营或客户需求。（4）首页、详情页、自定义页等页面需要进行切片，生成适合网页展示的图片和代码，上传到网店。（5）页面上传发布后，关注点击率、转化率等数据，分析效果，为后续优化提供数据支撑。认识电商美工岗位的要求、电商美工岗位职责、电商美工职业发展路径以及工作流程。让学生从多方面充分认识电商美工岗位，为后面的网店装修知识与技能学习做好准备。3.新课讲解1.电商美工岗位的学习计划制定根据上面知识点，分析自己的电商美工能力。让学生清晰认识自身在电商美工岗位中的技能掌握情况。4.学生实训任务名称：岗位晋升路线图任务要求：分组绘制“初级电商美工→资深电商美工→电商美工主管→电商设计师→视觉设计经理/总监→创业者”的发展路径图，标注各阶段需掌握的硬技能（如3D建模、动效设计等）与软技能（如运营思维、客户需求等）通过实训任务，掌握美工岗位晋升路线图。通过实训任务，让学生明确自身的职业目标。5.课后小结本节课要掌握的重点：电商美工岗位的要求、职责及工作流程。明白本节课自己要掌握的知识点学习情境一岗位认识与网店视觉规范PAGE8任务二网店视觉规范（一） 一、教学目标1.知识目标（1）熟悉网店视觉规范的基础理论知识。（2）认识网店风格的定位及其配色方案。2.技能目标（1）能够正确定位网店风格。（2）能够根据网店或商品特点选择合适的配色方案。3.情感目标（1）培养学生团队合作等职业素养。（2）感受中华诗词里的色彩艺术，培养文化自信。二、教学内容分析合适的网店风格能最大限度地提升网店形象，提高网店浏览量、客户停留时间，为网店带来较高的转化率。若网店风格与商品风格不一致，则会给进店的买家带来较差的购物体验，增加客户的跳失率。因此，优秀的网店视觉效果十分重要。教学重点：1.网店风格的定位及其配色方案。教学难点：1.正确定位网店风格。2.能够根据网店或商品特点选择合适的配色方案。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示两张不同的网店首图，思考该网店风格与其销售的产品之间的联系。观察两张不同的网店首图，思考问题。通过展示视频，激发学生的学习兴趣。2.新课讲解一、网店风格定位网店风格是指网店给访客的直观感受。网店风格主要体现在网店主营商品类型、网店装修风格、网店商品价位、网店促销方式、网店顾客服务等方面。目标消费群体对网店风格认同感越强，就越容易被网店吸引，成为网店的潜在顾客。网店风格主要体现在网店装修风格上。定位网店风格时一定要贴近自己的目标消费群体，了解他们的喜好、顾虑，进行综合分析，最后形成网店风格。定位网店风格主要有以下方法，也可以找一个网店模仿学习，然后与之进行差异化处理。（一）行业特性根据行业特有的性质来确定网店风格。例如，户外运动网店的关键词为：动感、大自然、健康、活力，推荐色系为蓝、绿、橙、红。孕婴用品网店的关键词为：温馨、希望、洁净、成长，推荐色系为浅粉、浅玫瑰、浅绿、浅蓝。（二）商品特性根据商品本身的特点来确定网店风格，主要可以从以下几个方面入手。1.价格水平例如，珠宝首饰类需要花费上千元甚至上万元的贵重商品，多数购买者的年龄层为25～40岁。在这类商品的使用者中，女性占绝大多数。那么，就可以从商品的档次上来定位装修风格，要显得精美、有档次。2.消费群体可以从消费者的性别、年龄、职业、文化水平、收入水平等方面找出消费群体的特性和共性。例如，经营数码类商品的网店，其目标消费群一般以成年男性为主，因为成年男性喜欢理性的、专业的设计风格，那么在网店装修上就需要简洁，可以采用以黑灰色为主的色调，以体现出网店的科技感与时尚感。3.文化内涵根据商品不同的特性，可以在装修时选择具有不同文化内涵的主题，如茶具、茶叶、保健品等可以选用具有中国风、水墨复古风的装修风格。（三）时节特性有时候还需要根据季节的不同，选择不同的网店装修风格。春天春回大地，可选择绿色为主色来装修网店；夏天可以以大海、沙滩、贝壳等为元素进行装修；秋冬可以以橙色、红色等暖色进行装修。不同的节日，还可以更换不同的风格。熟悉网店定位风格的方法。让学生学会网店风格定位的方法，掌握如何从不同的方面确定网店的风格。3.小试身手登录淘宝网搜索小家电的网店首页，并保存一张设计效果好的首页作为案例，分析该网店符合哪种网店风格定位方法。搜索小家电网店首页，分析该网店符合的网店风格定位方法。让学生学以致用，学会分析网店风格定位的方法。4.新课讲解二、配色方案确定简单地说，配色方案就是如何将不同的颜色搭配到一起，达到一种和谐的或者有视觉冲击力的效果。网店整体配色一定要给人统一和谐的感觉。配色总的应用原则是“总体协调、局部对比”。也就是说，页面的整体配色效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。（一）色彩属性色彩是人脑识别反射光的强弱和不同波长所产生的差异的感觉，色彩具有色相、明度、饱和度三种性质，也就是HSB模式中的色相（H）、明度（B）、饱和度（S）。（1）色相（H）即色彩可呈现出来的质地与相貌，如红、橙、黄、绿、青、蓝、紫等。色相决定了色别。（2）明度（B）又称为色彩的亮度，它决定了色彩的明暗。（3）饱和度（S）即纯度，是各色彩中包含的单种标准色成分的多少，它决定色彩的深浅。饱和度最高的色彩就是原色，随着饱和度的降低，色彩就会变淡。（二）色彩心理选对颜色对网店装修有着非常重要的作用。要选对颜色，必须了解不同颜色会给人带来什么不一样的感觉。暖色调暖色调包含红、橙、黄及这三种颜色的混合，是让人觉得温暖、愉悦、热情、激动的颜色，适合促销、女性、儿童、家居、食品等主题。2.冷色调冷色调包含绿色、蓝色和紫色，是让人觉得清爽、稳重、舒缓、冷静的颜色，适合男性、户外、电器、数码、夏天、春天等主题。3.暗色色调纯色加黑色得到暗色色调，是让人觉得成熟、高贵、尊贵、气势、高雅的颜色，能够体现能力感和高格调文化，适合汽车、电器、数码、商务、奢侈品等主题。4.明色色调纯色加白色得到明色调，是让人觉得时尚、活泼的颜色，适合时尚、运动、年轻等主题。5.淡色色调明色加白色得到淡色色调，是让人觉得清新、温柔的颜色，适合少女、幼儿等主题。（三）色彩搭配进行色彩搭配前，再来了解一下色环，12色相环由三原色（红、黄、蓝）、二次间色（橙、绿、紫）和三次复色（黄橙、红橙、红紫、蓝紫、蓝绿、黄绿）组合而成。1.同类色配色同类色配色即选择单一色彩，然后调整明度或者饱和度形成层次，单一色彩页面给人协调统一的美感。2.邻近色配色邻近色就是色相环顺序相邻的2个颜色，使用邻近色配色的效果与单一色彩配色相似，能使画面统一协调但不失对比度，是使用频率最高的配色方案之一。3.对比色配色对比色配色是在色相环上相差120°的两种颜色配色，这种配色方式视觉冲击力强，具有鲜明对比，但在色彩搭配上比较难把控4.互补色配色色相环中180°对立的两种色彩，对比是最强烈的。在色相环中，角度越大的两种颜色，对比越强；反之，就越弱。互补色配色就是先选定一种色彩，然后选择它的互补色进行配色。一般来说，对比强的色彩能够集中人的视线，使整个页面色彩丰富但不花哨。在配色过程中，建议画面色彩不宜超过3种，3种指的是3种色相，比如深红和暗红可以视为一种色相。无论用几种颜色来组合，首先要考虑用什么颜色作为主色。网店装修主色的选择可以从品牌、消费人群和产品属性3个方向来考虑。如果网店有品牌，可以使用品牌LOGO颜色作为网店的主色，也可以根据消费人群喜好或易接受的色调来确定网店的主色。确定主色后采用同类色、邻近色来确定辅助色，再使用对比色、互补色配色方法确定点缀色。一般情况下，如果各种颜色面积平均分配，色彩之间互相排斥，就会显得凌乱。建议配色黄金比例为60∶30∶10，其中的60%为大面积使用的主色，30%为辅助色，10%为点缀色。熟悉网店配色方案确定的依据点：色彩属性、色彩心理、色彩搭配。让学生学会如何为网店确定配色方案。5.小试身手请打开学习情境一中小试身手素材，使用主色、辅助色、点缀色的配色顺序给海报配色依据素材，根据所学内容给海报配色。让学生任务尝试，掌握配色方案的确定方法。6.课后小结本节课要掌握的重点：网店风格的定位及其配色方案。明白本节课自己要掌握的知识点

任务二网店视觉规范（二） 一、教学目标1.知识目标（1）熟悉网店视觉规范的基础理论知识。（2）认识网店字体的规范要求。（3）掌握网店视觉规范的确定流程。2.技能目标（1）能依据网店特点正确地选择合适的字体。（2）能完成网店视觉规范的设计。3.情感目标（1）培养学生团队合作等职业素养。（2）感受中华诗词里的色彩艺术，培养文化自信。（3）了解字体的规范使用，避免字体侵权。二、教学内容分析合适的网店风格能最大限度地提升网店形象，提高网店浏览量、客户停留时间，为网店带来较高的转化率。若网店风格与商品风格不一致，则会给进店的买家带来较差的购物体验，增加客户的跳失率。因此，优秀的网店视觉效果十分重要。教学重点：1.网店字体的规范要求。2.网店视觉规范的确定流程。教学难点：1.不同网店特点对应的字体选择。2.网店视觉风格的选择。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示不同类目的网店首页，提出思考问题：这些页面的字体区别在哪里？看展示的网店首页，思考问题？引发学生学习兴趣2.新课讲解一、字体规范不同的字体可以给人不一样的感觉，因此，选对字体对我们的设计有着不可或缺的作用。一般网店中常用字体规范为：中文字体不超过两种，一种用于标题，另一种用于商品描述；数字字体一种，英文字体一种，特殊字体一种（只在特定活动时用于渲染气氛）；同一页面使用不超过三种字体。在选择字体的时候，还要考虑网店产品的受众和品类。（一）适合男性产品使用的字体男性产品就是消费和使用人群主要为男性的产品，如：体育运动类用品、汽车、剃须刀、游戏设备等。基于男性粗犷、硬朗、稳重、力量、大气等特征，男性化文字特征一般为：笔画粗、遒劲有力、棱角分明、有力量感、粗细搭配、有主有次等。推荐使用的字体有思源黑体、阿里巴巴普惠体、站酷酷黑体等。免费商用字体有思源黑体、思源宋体、思源柔黑体、思源真黑体、阿里巴巴普惠体、站酷酷黑体、站酷高端黑、站酷快乐体、站酷文艺体等。（二）适合女性产品使用的字体女性产品就是消费和使用人群主要为女性的产品，如：女装、鲜花、珠宝配饰、护肤品、化妆品等。基于女性飘逸、俊俏、柔软、秀气、苗条、气质、时尚等特征，女性化文字特征一般为：纤细、曲线、秀美、线条流畅、字形有粗细细节变化。推荐使用宋体、思源宋体、装甲明朝体、方正仿宋等字体，这些字体具有端庄、典雅、清正、秀丽等特征。（三）适合中性产品使用的字体中性产品就是消费和使用人群中男性和女性都有的产品，如：数码产品、大家电、小家电、家装、厨卫产品等。基于中性干净、简洁、中性美、精致、平静等特征，中性化文字特征一般为：性别属性不强，并不需要很强烈的情感特征，偏中立，兼具男性字体和女性字体的特征。推荐使用阿里巴巴普惠体、思源黑体等字体，这些字体具有简洁大方、比较中性的特征。（四）适合孩童产品、童趣产品使用的字体孩童产品就是使用人群主要为儿童的产品，如婴幼产品、零食、玩具等；童趣产品就是那些有卡通人物设计、造型可爱的产品。基于孩童可爱、有趣、圆乎乎、肉嘟嘟、活泼、调皮等特征，孩童化文字特征一般为：可爱、笔画圆、柔和、俏皮、不规则。推荐使用的字体有圆体、思源柔黑、锐字云字库圆体、站酷快乐体等，这些字体富有活力和亲切感，且带有圆润的边角给人亲和感。（五）适合促销类产品使用的字体促销类产品通常需要给用户传递非常亢奋而激烈的情绪，而这种情绪恰好与男性特征中激烈、冲动且亢奋的特点相吻合，所以在促销和抢购等活动类设计中，男性化字体被普遍使用。推荐使用思源柔黑、站酷酷黑体、文泉驿等宽微米黑等，这类字体具有粗、大、显眼、倾斜、文字变形等特点。了解网店常用的字体规范要求。熟悉不同的产品类型适配哪种字体。让学生清楚地认识网店的字体规范要求。让学生掌握不同产品类型的适配字体，为后面网店视觉规范中的字体选择做好知识准备。3.小试身手请打开学习情境一中小试身手素材，给海报文案选择合适的字体，并说明理由。根据小试身手素材，给海报文案选择合适的字体并说明理由。通过分析海报情况选择合适的字体，更好地理解字体规范要求。4.新课讲解二、网店视觉规范的设计流程熟悉网店视觉规范的明确流程，要懂得每一步的作用和内容。让学生学会明确网店视觉规范的流程。5.学生实训任务名称：网店视觉规范（风格定位、配色方案确定、字体规范）任务要求：“618大促”快到了，小熊电器店想重新装修网店，以配合“618大促”，请你定位网店装修风格，根据网店的消费群体与系列产品特征设计网店的配色方案、字体搭配。根据上面的知识点，完成网店视觉规范确定。通过此任务的完成，懂得如何明确网店视觉规范。6.课后小结本节课要掌握的重点：1.网店字体的规范要求。2.网店视觉规范的确定流程。明白本节课自己要掌握的知识点。学习情境二设计吸引眼球的海报PAGE8任务一海报策划（一） 一、教学目标1.知识目标（1）了解网店海报的基础理论知识。（2）掌握海报尺寸规范（淘宝/京东/拼多多）。（3）熟悉海报风格分类（实用型/设计型）及设计流程。2.技能目标（1）具备策划网店海报设计框架的思维；（2）能够根据任务单进行需求沟通、风格确定、组成元素规划；（3）能独立完成海报策划表。3.情感目标（1）设计内容诚信经营、不夸大宣传，传达绿色低碳环保意识；（2）保持学习、培养审美能力，培养工匠精神与精益求精的态度。二、教学内容分析网店海报（Banner）是店铺装修的核心视觉模块，用于展示产品、促销活动或品牌形象。本任务从海报含义、意义、不同平台尺寸切入，结合实用型/设计型风格案例（极简、三维、合成等），并深度讲解海报四大组成要素：产品或模特、文案、背景、装饰。教学重点：1、海报规范2.风格分类与组成要素教学难点：1、根据产品特点合理选择风格并提炼卖点转化为视觉元素2、注重诚信与真实宣传三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示两张店铺首页海报（普通vs全屏轮播），提问：哪一张更能吸引点击并快速传递新品信息？引出海报设计的重要性。观察对比，扮演买家，说出感受并讨论。通过对比反差激发兴趣，明确海报引流价值。2.新课讲解讲解海报含义及意义（Banner展示产品信息/促销/品牌）；不同平台尺寸（表2-1，淘宝电脑端1920×自定义，手机端1200×自定义）。海报风格分类：实用型（极简、扁平、写实、复古、摄影）与设计型（合成、三维、酷炫、手绘）；结合图2-2～图2-10演示风格案例。海报组成四要素：产品/模特（精修+放大）、文案（主副标题）、背景（拍摄/自制/合成）、装饰（烘托氛围）。结合图2-11～图2-18讲解。1.观看教师展示的6张不同Banner，快速判断每张主要承担的任务。2.角色扮演。3.

总结分享角色扮演降低认知门槛，同时培养“设计服务于商业目标”的意识3.风格与元素探究组织小组讨论：分析茶花随手杯任务单（尺寸1920×540，大气简约，年轻群体），引导学生确定三维风格，主色蓝色，文案“便携随行”。小组完成策划表：确定风格、产品图、文案、背景、装饰素材。培养需求分析与策划思维。4.小试身手：空气炸锅海报制作提供素材，要求学生完成背景+产品+装饰+文案的简易海报制作，巡回指导。实操Photoshop，完成小作品并上传平台。初步体验海报元素组合，激发创作欲。5.同步实训：小家电海报策划发布小熊蒸煮饭盒促销海报策划任务（产品资料、促销价99元、活动时间），指导学生使用思维导图完成风格及组成元素。独立撰写策划框架，提交风格与元素表格。迁移能力，针对不同类目独立策划。6.素养总结强调诚信经营、遵守平台规则，培养审美与工匠精神，介绍AI精修工具（像素蛋糕等）提升效率。记录素养要点，分享对绿色设计的理解。融入职业素养与数智赋能理念。学习情境四打造高转化的详情页PAGE8任务二海报设计 一、教学目标1.知识目标（1）掌握网店详情页的设计流程。（2）掌握网店详情页的策划。2.技能目标（1）能正确制作出详情页策划思维导图。（2）能根据详情页策划思维导图制作布局图。3.情感目标（1）培养学生分析和处理、使用数据的能力。（2）培养学生积极思考、大胆探索，从数据中挖掘信息的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析二、教学内容分析本任务为海报设计的核心环节，涵盖素材选择（高清产品图、高质量背景）、五种经典构图形式、色彩搭配方案以及文案排版与美化技巧。重点培养学生将策划转化为视觉作品的能力；难点在于根据商品风格灵活运用构图与点缀元素，避免信息过载或点缀喧宾夺主。同时融入AI艺术字、AI精修等数智赋能手段提升效率。教学重点：1、培养学生将策划转化为视觉作品的能力。教学难点：1、根据商品风格灵活运用构图与点缀元素，避免信息过载或点缀喧宾夺主。三、教学过程设计教学步骤教师活动学生活动设计意图1.情景引入展示左右构图与混乱排版对比图，引出构图美感的重要性。对比分析，说说哪种更易阅读。直观感受构图秩序感。2.新课讲解①素材选择：花瓣网、摄图网等；②构图：左右/居中/上下/对角线/几何（结合图2-20~2-24）；③色彩搭配：提取主体色，同类色柔和，互补色强烈，主辅点6:3:1原则（图2-25~2-26及表2-2）；④文案排版：亲密、对齐、重复、对比原则（图2-27~2-32）；⑤文案美化：渐变、描边、底纹；⑥细节点缀：手绘、光效、流体等，强调烘托主体与风格一致（图2-34及表2-3）。1.选择素材2.确定构图3.美化文案增强学生技法，熟悉设计构图的方法。3.小试身手（配色+排版）布置男装海报配色练习（表2-3配色）和童装海报文案排版练习。独立完成配色与排版，互评优化。强化配色与排版实战能力。4.任务实施（茶花随手杯设计）演示PS制作全流程：新建1920×540→左右构图→邻近色搭配（天蓝渐变）→文案居中对齐、渐变描边→添加小球/棕榈叶点缀，展示投影与质感。跟随步骤完成海报初稿，完善细节。串联知识，形成完整设计能力。5.同步实训：小家电海报设计发布小熊蒸煮饭盒促销海报设计任务（1920×540，促销价99元，中秋节氛围），指导学生独立设计。独立完成海报并提交psd文件，阐述设计思路。检验迁移能力与创意表现。6.工匠精神&绿色低碳总结设计细节打磨的重要性，介绍AI工具（堆友AI艺术字、即梦等）减少资源浪费，符合绿色设计。分享使用AI工具提高效率的体会。塑造职业素养与可持续设计观。

任务三海报上传 一、教学目标1.知识目标（1）了解全屏海报、轮播海报、动态海报的特点与尺寸规范；（2）掌握电脑端/手机端海报上传流程；熟悉第三方工具生成全屏代码。2.技能目标（1）能够将设计好的海报通过旺铺智能版或图片轮播模块上传；（2）会使用“一秒钟美工助手”生成全屏代码并应用到店铺；（3）能够设置手机端轮播图跳转链接。3.情感目标（1）诚信经营，确保海报内容真实合规；（2）尊重知识产权，使用正版素材；（3）培养严谨细致的发布习惯，维护店铺形象。二、教学内容分析本任务涵盖三种常见呈现方式：全屏海报（1920×≤540）、轮播海报、动态海报。详细讲解电脑端通过“图片轮播”和“全屏宽图”模块上传，以及利用“一秒钟美工助手”生成代码添加自定义区；手机端则通过手机店铺装修添加轮播图海报模块并设置链接。教学重点为不同端口的实操上传方法，难点在于全屏代码生成与手机端高度适配。教学重点：1、不同端口的实操上传方法。教学难点：1、全屏代码生成与手机端高度适配三、教学过程设计教学步骤教师活动学生活动设计意图1.情境引入展示一个全屏海报首页和普通轮播首页，提问“设计好的海报如何放置到店铺中？”，激发上传学习兴趣。思考并分享自己知道的后台上传方式。明确上传任务的必要性。2.新课讲解①全屏海报与轮播海报特点对比（图2-41~2-42）。②电脑端轮播：千牛卖家中心→PC店铺装修→图片轮播模块→上传图片+链接；全屏宽图模块直接上传。③全屏代码法：图片空间复制链接→一秒钟美工助手生成代码→自定义区源码粘贴发布（图2-48~2-53）。④手机端装修：手机店铺装修→轮播图海报模块→上传宽1200px图片→设置跳转链接（图2-54~2-56）。对比全屏海报与轮屏海报。联系电脑端轮播图练习全屏代码法练习手机端装修引导学生从视觉冲击力、信息承载量、用户视线路径、使用场景四个维度自主归纳两种海报的差异3.小试身手布置两个微任务：①上传两张轮播海报到电脑端；②使用一秒钟美工助手生成全屏代码并成功发布首页全屏海报。分组操作，截图上传效果。实战巩固上传技巧。4.任务实施（茶花随手杯全屏上传）带领学生使用旺铺智能版“全屏宽图”模块上传已完成的茶花随手杯海报，保存发布并查看前台效果。跟随步骤上传，并检查显示完整性。完成从设计到上线的全流程闭环。5.同步实训（小熊电热饭盒全屏上传）要求学生独立将小熊电热饭盒促销海报上传至店铺首页（任选全屏宽图模块或代码方式）。独立操作，分享遇到的常见错误强化解决问题能力6.诚信经营与知识产权结合素质拓展强调：海报内容真实不夸大，使用原创或授权素材，维护健康电商环境。讨论侵权案例，发表看法。树立法律意识与职业道德。任务一主图策划与设计一、教学目标（一）知识目标1.了解主图的制作要求、设计规范及主要类型。

2.掌握主图的设计要点及组成元素。（二）技能目标1.能根据商品特点筛选和美化主图商品图。

2.能够掌握主图的设计流程并完成主图的设计与制作。（三）情感目标1.培养学生分析和处理、使用数据的能力。

2.培养学生积极思考、大胆探索，从数据中挖掘信息的能力。

3.培养学生自主学习、协助学习的能力。二、教学内容分析商品主图的质量对于吸引买家兴趣、促使其点击进入详情页具有决定性作用。一张高质量的主图，能够迅速吸引买家眼球，准确传达商品的核心特点和优势，从而提高点击率和转化率。掌握主图的规范化设计流程与技巧是美工和运营人员的重要技能。（一）教学重点：1.主图的规范与类型。2.主图的设计要点与组成元素。3.主图的设计流程。（二）教学难点：1.图的差异化设计。2.图信息分层的实际操作。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示同一款商品（如随手杯）的两组不同主图对比图，提问：作为消费者，你更容易被哪组图吸引并点击？为什么？观察对比组图，以买家视角进行分析和选择，并简述理由。通过视觉对比，直观感受主图质量对点击欲望的影响，引出主图策划与设计的重要性。2.新课讲解1.主图的规范与类型

（1）主图规范：讲解电商平台常见主图尺寸（1:1，3:4，2:3）的规格要求（尺寸、大小、张数、格式）及应用场景（PC端、移动端）的差异。（2）主图类型：讲解5张主图的不同分工：

第1张（首图）：吸引点击，展示商品全貌与核心吸引力。

第2张：突出核心卖点或功能。

第3张：展示商品细节（材质、做工等）。

第4张：提供证明（销量、质保、买家反馈等）。

第5张：一般为白底图（部分类目为促销信息）。2.主图的设计要点与组成元素（1）设计要点：突出产品、色彩搭配和谐、简洁明了、清晰度高、与品牌一致、具有创新性。（2）组成元素：

商品主体：要求高清、突出、角度合适、无水印。

氛围背景：简洁、营造舒适氛围、突出品牌。卖点文案：提炼产品效用、价格优惠、赠品、服务承诺等关键信息进行分层展示。记录主图规范的具体数值要求。思考不同类型主图应如何布局内容，与详情页模块有何联系。根据设计要点，分析优秀案例。学习商品、背景、文案三大元素的组合与排版技巧。让学生掌握主图设计的“硬性规则”和“内容规划”，为后续制作打下理论基础。系统性地了解构成一张好主图的视觉与信息要素。3.小试身手分析荔枝主图的案例图：登录淘宝网搜索荔枝产品的主并把设计效果好的商品5张主图各保存作为案例图，分析该图片的优点和需要优化的地方。

查找主图并分析其优点和需要优化的地方。通过对各个网店的同类产品的详情页对比，得出优秀的详情页优在哪里。4.新课讲解3.主图的设计思路与流程

（1）设计思路：前期调研：通过市场分析（百度指数等）明确目标人群与消费偏好。

选构图：介绍左右构图、上下构图、对角线构图等常用方式。添加卖点文案：使用简洁明了的文字快速传达产品关键信息。

差异化设计：讲解背景颜色、拍摄角度、使用场景、模特表现等方面的差异化策略。信息分层：明确主图中各信息（商品主体、营销信息、品牌信息）的展示优先级和布局规划。理解从市场分析到视觉呈现的完整策划链条。重点思考并讨论如何为指定商品寻找“差异化”突破口。尝试为一个商品草图进行简单信息分层规划。引导学生从“随意做图”转向“有策略、有流程的设计”，提升设计的针对性和有效性。掌握实现主图脱颖而出的核心方法。5.学生实训布置任务：设计制作小家电的主副图任务要求：1.根据主图制作的要求，从提供的商品素材中选择5张主图并确定主图类型。2.使用Photoshop将主图尺寸调整为800x800px，jpg格式。3.通过调整主图图片的亮度和曝光度进行基础美化，使其清晰明亮。4.第1张主图要有吸引眼球的背景、文案和促销信息，品牌logo。5.第2—4张主图主要展示产品的功能、细节、证明，在左上角要有品牌LOGO。6.第5张为白底图。按照任务要求完成：选图→裁800×800jpg→校光→首图创意合成，2-4图功能/细节/证明+logo，5图白底抠图，一次输出五连图。在“先合规后创意”思路下，让学生经历卖点提炼、平台规范、光影优化、流量抓眼、信任前置、规则保底六环节，完成可直接上架的高点击五连主图。6.课后小结总结本节课重点：主图规范与类型、主图设计要点与流程、差异化设计与信息分层。回顾并复述核心知识点，明确自己已掌握和待加强的部分。巩固记忆，梳理知识体系。任务二主图视频策划与制作一、教学目标（一）知识目标1.了解主图视频的规范、类型及内容要求。2.掌握主图视频的策划方法与脚本撰写。（二）技能目标1.能根据商品特点撰写主图视频的分镜头脚本。

2.能够利用剪映等软件进行主图视频的后期剪辑。（三）情感目标1.培养学生分析和处理、使用数据的能力。

2.培养学生积极思考、大胆探索，从数据中挖掘信息的能力。

3.培养学生自主学习、协助学习的能力。二、教学内容分析主图视频是商品主图的动态延伸，能够更生动、立体地展示商品外观、功能、使用场景等，有效降低信息获取门槛，提升停留时长和转化率。一段高质量的主图视频需要前期精心策划与后期专业剪辑相结合。（一）教学重点：1.主图视频的内容策划与脚本撰写。2.主图视频的后期剪辑流程。（二）教学难点：1.分镜头脚本的撰写。2.视频节奏把控与音画配合。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题播放几段不同风格的同类商品主图视频（如功能演示、场景展示、用户评价）。提问：哪段视频让你对商品印象最深？为什么？它能解决你哪些购物疑虑？观看视频，对比分析不同视频的内容侧重点、节奏、表现手法及其带来的不同感受。通过动态视频的直观冲击，引导学生思考视频相较于静态图片的信息增量，认识主图视频的重要性。2.新课讲解主图视频的规范、类型与策划

（1）规范与类型：规范：讲解视频时长（建议5秒—1分钟）、比例（1:1，3:4，16:9）大小、格式等通用要求。小试身手：分析淘宝主图视频的存在问题登录淘宝网搜索小家电的主图视频，并把这些主图视频按照主图视频具体规范一一对比，找出它们是否规范，并把欠缺的点列出来。

（2）主图视频的类型：介绍商品亮点展示、功能演示、场景化展示、品牌宣传、用户评价等常见类型及应用场景。（3）内容策划与脚本撰写：

内容要求：讲解“三讲”（讲外观、讲名称、讲卖点）和“两用一教”（真人用、场景用、教知识）不同层级的要求。

脚本撰写：重点讲解分镜头脚本的撰写，包含镜号、景别、镜头运动、时长、画面描述、台词/字幕、音效等要素。演示如何从“引发兴趣→展示卖点→解决痛点→促成信任”的消费心理流程来规划视频内容和节奏。记录主图视频制作的基本“铁律”。思考不同类型视频适合何种商品。学习并理解优质内容的标准。学习分镜头脚本的格式，并尝试口头规划一段简单的视频内容。让学生明确主图视频制作的物理边界和内容方向。掌握视频策划的核心工具，使视频制作从“随意拍摄”变为“有目的、有计划的内容创作”。3.小试身手策划并撰写智能手表主图视频分镜头脚本：请打开学习情境三中小试身手素材，为一款智能手表制作一个主图视频，该视频旨在展示手表的多功能性和时尚设计。请选择一个场景（如智能手表的日常佩戴场景），并撰写一个分镜头脚本，脚本中包括镜号、景别、画面描述和台词等关键要素。小组讨论并撰写分镜头脚本。通过小组合作，学会撰写分镜头脚本。4.新课讲解主图视频的后期剪辑

以“剪映”软件为例，讲解主图视频剪辑的核心流程与技巧：

1.导入与裁剪：导入素材，进行分割、删除、排序、变速调整等基础剪辑。

2.转场与节奏：添加合适的转场效果，控制转场类型和时长（建议不超过3种，0.5秒左右），使画面过渡流畅。3.添加文本：添加字幕，强化关键卖点信息。可运用花字、文字模板增加视觉效果。

4.添加音频：添加背景音乐和音效，音乐风格需与产品及视频调性匹配，优先选择无版权风险的纯音乐。

5.特效与滤镜：合理使用特效（光影、模糊等）和滤镜，提升画面质感，但要避免过度使用影响产品真实性。跟随讲解，熟悉剪映软件的基本操作界面。重点关注如何通过剪辑控制视频节奏、如何通过字幕和音乐强化信息传递。学习将前期策划的脚本转化为最终成片的落地工具和步骤，掌握视频剪辑的基本功。5.学生实训任务名称：小家电主图视频策划与剪辑

任务要求：

1.研究竞争对手的主图视频，找出差异化的点。2.分析当前市场趋势，确定主图视频的主题。3.确定主图视频的具体内容，并完成脚本撰写。4.导入原视频素材到剪映软件。5.进行视频剪辑，包括裁剪、调整速度、排序和拼接。6.添加音乐、音效和字幕，调整音量和字幕效果。7.应用特效和滤镜，增强视频的视觉效果。8.预览视频，并以MP4格式导出。分组或个人完成从视频策划（脚本）到后期制作的全流程。可以尝试使用AI工具辅助生成脚本创意或画面提示词。完整实践主图视频的制作全流程，将策划与剪辑技能相结合，产出可用的视频作品。6.课后小结总结本节课重点：主图视频内容策划、分镜头脚本撰写、后期剪辑流程（剪映基础操作）。回顾并复述视频制作的核心步骤，分享在脚本策划或剪辑中遇到的难点和解决方法。巩固知识，分享实践经验，促进共同进步。任务三主图与主图视频上传一、教学目标（一）知识目标1.了解淘宝平台图片空间和视频空间的功能与管理。

2.掌握主图及主图视频上传到商品页面的完整流程。（二）技能目标1.能够将制作好的主图与主图视频文件，规范地上传至图片空间和视频空间。

2.能够完成在商品发布/编辑页面，正确添加主图与主图视频的操作。（三）情感目标1.培养学生分析和处理、使用数据的能力。

2.培养学生积极思考、大胆探索，从数据中挖掘信息的能力。

3.培养学生自主学习、协助学习的能力。二、教学内容分析主图与主图视频设计制作完成后，最终需要上传至电商平台并关联到具体的商品链接，才能真正发挥作用。了解平台的素材管理工具（图片/视频空间）和商品信息发布流程，是网店装修与运营的必备环节。（一）教学重点：1.图片空间与视频空间的使用。2.商品发布页面上传主图与主图视频的操作步骤。（二）教学难点：1.素材的分类管理与规范化命名。2.不同比例视频上传入口的识别与选择。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题提问：如果设计好的10张主图和3段视频，直接杂乱地存放在电脑桌面，当需要为多个商品上架或更新时，会遇到什么问题？如何高效管理这些素材并确保能快速找到？思考并回答，可能遇到的问题包括：文件混乱、难以查找、占用本地空间、与平台无法直接关联等。引出平台官方素材管理工具（空间）的必要性，强调规范化素材管理对提升工作效率的重要性。2.新课讲解1.素材空间管理

（1）图片空间：登录千牛卖家中心，进入路径（素材中心－〉我的图片）。讲解其功能：存储、分类、简单编辑（裁剪、水印）、查看引用情况、跨店授权等。（2）视频空间：登录路径（素材中心-〉我的视频）。讲解其功能：上传、审核状态查看、分组管理、投放公域等。强调视频需要审核通过后才能使用。2.上传流程与操作模拟演示在“商品发布”页面（或编辑现有商品）的操作：

（1）上传主图：在“图文描述”区域，找到“1:1主图”或“3:4主图”上传入口，从“图片空间”按顺序选择已上传的5张主图。

（2）上传主图视频：在“图文描述”区域，找到“商品视频”或“主图视频”上传入口，可选择“上传视频”或从“视频空间”选择已审核通过的视频，并完成视频分类标签的选择（如宝贝展示、使用方法等）。

（3）提交信息：检查无误后，点击“提交宝贝信息”完成发布或更新。跟随演示，理解和记忆进入图片/视频空间的操作路径。重点观看并记录在主图与主图视频上传时的具体点击位置、选择方式和分类标签的填写。让学生直观了解平台后台的具体操作界面和步骤，将本地设计与线上发布无缝衔接。3.学生实训任务名称：将设计好的5张小家电主图以及1个主图视频上传到淘宝店铺中。

任务要求：

1.将任务一设计好的5张小家电主图，规范命名后上传至图片空间的指定文件夹。

2.将任务二制作好的主图视频，上传至视频空间，等待并确认审核通过。

(*注：若无真实店铺，此步可简述为“模拟上传至指定文件夹”）

3.在商品发布页面，正确添加已上传的主图和主图视频，并选择正确的视频分类标签。

4.完成提交前的信息检查。根据任务要求，在教师指导的环境下（真实店铺或模拟系统），完整演练一次素材上传与商品关联的全过程。综合实践，完成网店视觉装修的最后一步，形成“策划－设计－制作－上传”的完整工作闭环，掌握核心职业技能。4.课后小结总结本节课重点：图片/视频空间的功能与操作、商品发布页面上传主图和视频的路径与步骤、素材的规范管理意识。复述上传的核心流程步骤，并讨论素材规范化命名和分类对高效工作的重要性。强化流程记忆，并提升作为准职业人的规范化工作意识。任务一详情页策划（一） 一、教学目标1.知识目标（1）了解网店详情页的基础理论知识。（2）明白网店详情页的模块组成。2.技能目标（1）能正确理解详情页的作用。（2）能熟悉详情页每个模块的制作方法3.情感目标（1）培养学生分析和处理、使用数据的能力。（2）培养学生积极思考、大胆探索，从数据中挖掘信息的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析商品详情页是对商品的详细介绍，使用文字、图片、视频等对商品进行进一步描述，从而让消费者对商品有更全面地了解。详情页的设计是否真实有吸引力，是决定能否买单下单的一个重要因素，所以这是美工的一个重要内容。教学重点：1、详情页规范。2、详情页的主要模块。3、详情页的模块排序。教学难点：1、详情页的组成模块。2、详情页的布局。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示马克杯两个不同详情图，看了这之后，你会买哪个？为什么？看展示的详情图，角色为买家，会买哪个？由对比反差引出详情的重要性2.新课讲解一、在发布宝贝时，淘宝对详情页的规范。二、详情页的主要模块（一）关联营销关联营销是指在一个详情页里放入其他产品的促销信息、搭配推荐或店铺优惠信息等。关联营销可以提升其他商品浏览量和提升客单价，也可降低买家的跳失率。关联营销主要有以下3种类型：（1）网店促销活动（2）热销产品推荐（3）搭配推荐（二）商品焦点图商品焦点图主要以海报形式展示商品的特色意境、热销盛况、产品升级、买家痛点、商品促销信息，能够引发消费者的购买冲动。（三）使用场景图使用场景图就是商品的使用场景、使用效果的展示，让消费者了解商品有什么用处、是否适合自己。（四）商品实拍图商品实拍图以突出商品为主，通过简单的背景对商品多角度进行摆拍展示，通常正面图、反面图、侧面图至少各一张，比较适合家居、数码、鞋、包等小件物品。如果商品有多个颜色时，以主推颜色为主，其他颜色为辅，少量展示，保持整体风格统一。（五）商品基本信息商品基本信息又称宝贝规格参数，主要包含型号、品牌名、产地、颜色、材质、规格、重量等。不同类目的商品，有不同的基本信息，但必须放消费者关注的内容，才能有效地减轻客服工作量的负担。（六）商品细节图商品细节图是放大商品某处细节，展示其卖点，通过细节实拍图和简短的文字，清晰、富有质感地展示商品的材质、图案、做工、功能等各细小部分的图片。好的细节展示能使消费者直观感受到商品，从而提高转化率。（七）同类商品对比图以贬低别人商品来提升自己商品的PK方式属于违规操作，可以以升级商品的方式，与自己店铺的普通商品进行对比，或采用材质及技术的对比，强化商品卖点，证明自己的商品优势。（八）买家反馈信息买家反馈信息包括商品好评的相关截图和买家秀展示。虽然很多时候消费者会更愿意自己去看评价，但如果把买家的评论、买家秀直接放在详情页，就能让消费者更方便能获取重要信息。（九）品牌说明品牌说明是通过一系列的理念、品牌介绍、资质证书等，让消费者觉得品牌质量可靠，烘托出品牌实力，有些网店还会做成视频形式放在详情页顶部展示。品牌说明主要有以下3种类型：（1）品牌介绍（2）媒体推荐（3）资质证书（十一）使用说明使用说明也称温馨提示、注意事项、常见问题等，包括商品的使用方法、安装方法、保养维护等信息。（十二）购物须知购物须知也称物流问题、售后问题等，包括邮费、发货、退换货等信息的说明。这部分内容表述具体可以有效减轻客服的工作量。如果商品存在物流问题，比如易碎或可能液体泄漏等，还需提前在此提醒买家，以免收到货物后给网店带来不好的评分。（十三）商详视频商详视频是展示在商品详情页上的短视频内容，提供差异化、多样化的视频展示渠道，可以让消费者对产品、网店、品牌、营销、使用等方面进行更加深入地了解。了解详情页的规范能熟悉详情页主要由哪些模块构成，每个模块的内容可为哪些？让学生先行了解详情页的基本知识让学生对详情页的整体组成模块有系统的了解，便于后面的策划3.小试身手登录淘宝网搜索小家电的详情页，并把设计效果好的商品焦点图、使用场景图、商品基本信息、商品细节图和品牌说明各保存一张作为案例图，分析该图片的优点和需要优化的地方查找宝贝详情页通过对各个网店的同类产品的详情页对比，得出优秀的详情页优在哪里4.课后小结本节课要掌握的重点：详情页的主要模块明白本节课自己要掌握的知识点学习情境四打造高转化的详情页PAGE8任务一详情页策划（二） 一、教学目标1.知识目标（1）掌握网店详情页的设计流程。（2）掌握网店详情页的策划。2.技能目标（1）能正确制作出详情页策划思维导图。（2）能根据详情页策划思维导图制作布局图。3.情感目标（1）培养学生分析和处理、使用数据的能力。（2）培养学生积极思考、大胆探索，从数据中挖掘信息的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析商品详情页是对商品的详细介绍，使用文字、图片、视频等对商品进行进一步描述，从而让消费者对商品有更全面地了解。详情页的设计是否真实有吸引力，是决定买单下单的一个重要因素，所以这是美工的一个重要内容。教学重点：1、详情页的策划流程。教学难点：1、详情页策划的布局图制作。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题根据《天下网商》做的调查显示，仅有20%的买家会在详情页停留2分钟以上。明白详情页的设计是有流程，不是随意设计强化详情的前期设计很重要2.新课讲解一、详情页调研与框架（一）详情页的调研分析在详情页设计前，我们要根据商品特点和市场需求，开展相关的调研。运用头脑风暴法从市场分析、买家定位和产品定位进行分析，把调研结果与网店运营目标相结合，制作成详情页策划的思维导图，最终确定设计框架和视觉定位。1.市场分析对产品所在的市场进行PEST分析和SWOT分析，然后再选择销量较好的同类产品进行竞品分析。2.买家定位我们可通过生意参谋的“市场洞察”、360趋势、百度指数和宝贝评价等查询数据，分析消费者的性别、年龄、地域、消费能力、职业特征等。3.产品定位要挖掘产品卖点，对产品的档次、风格等方面进行定位。熟悉详情页的调研分析让学生学会设计详细的流程，而不是拿到产品就开始乱做3.小试身手使用在线思维导图工具（亿图脑图MindMaster、博思白板BoardMix、百度脑图等），参考图4-19制作详情页策划思维导图框架。制作思维导图学会使用工具制作思维导图4.新课讲解（二）详情页的逻辑框架详情页就像推销员，能够引导买家达成交易。我们可以根据消费心理的成交五部曲，一步步地引导买家进行购买活动，主次分明地对各个模块进行排序。1.引发兴趣2.激发需求3.产生信任4.信赖到占有5.打消顾虑成交详情页的模块排序建议：（三）详情页策划的流程熟悉详情页的设计流程，要懂得每一步的作用和内容让学生学会设计详细的流程5.学生实训任务名称：小家电详情页的策划任务要求：任务一：小熊电器旗舰店需要上新一款小熊蒸煮饭盒，请你根据商品资料，使用分析工具百度指数、360趋势等，对蒸煮饭盒进行市场分析、买家定位和产品定位，对分析结果进行提炼与归纳，制作成思维导图任务二：根据任务一制作的思维导图，使用Photoshop软件制作小熊蒸煮饭盒详情页的设计框架，宽度为750px根据上面的知识点，完成小家电的详情页策划。（没有弄清楚的地方可参看微课）通过此任务的完成，懂得如何策划详情页6.课后小结本节课要掌握的重点：1.详情页的策划流程2.详情页的设计框架的制作明白本节课自己要掌握的知识点

任务二详情页设计（一） 一、教学目标1.知识目标（1）了解网店详情页的基础理论知识。（2）明白网店详情页的视觉风格。2.技能目标（1）能正确理解详情页不同视觉风格的特点及意义。（2）能够根据不同类目详情页选择合适的视觉风格3.情感目标（1）培养学生分析和处理、使用数据的能力。（2）培养学生积极思考、大胆探索，从数据中挖掘信息的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析商品详情页的视觉设计风格有很多种类型，不同的视觉设计有着不同的视觉营销点，运用得好可以更好地展示商品，大大提高店铺的转化率。教学重点：1、详情页视觉设计特点。2、详情页视觉设计意义。教学难点：1、不同类目详情页的视觉风格。2、详情页视觉风格的选择。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示不同类型宝贝详情页的视觉设计风格，思考什么样的产品适合什么样的视觉设计？看展示的详情图，思考问题？引发学生学习兴趣2.新课讲解一、详情页的视觉风格（一）极致简约风（1）设计特点：简约化、扁平化、轻量化，颜色和字体少，画面大量留白。（2）设计意义：极致简约风可以突出信息和产品重点，避免买家视觉疲劳，加强品牌质感。（3）常用类目：数码产品、电器、家居和服饰等。（二）场景合成风（1）设计特点：通过素材的融合和光影透视的绘制，为产品制造一个创意的场景。（2）设计意义：通过创意又真实的场景吸引买家眼球，使买家有场景代入感。（3）常用类目：食品、家装、家电、母婴和美妆等大品类。（三）三维风（1）设计特点：通过C4D建模或AI工具实现三维视觉效果，三维风视觉表现力强。（2）设计意义：三维的效果增加了画面的质感和深度，使画面更加饱满和更有冲击力，可迅速在买家的脑海中形成商品的立体效果。（3）常用类目：数码产品、家电和美妆等产品。（四）插画风（1）设计特点：手绘插画或AdobeIllustrator设计的插画，新颖有趣，轻松简单。（2）设计意义：插画能渲染气氛，拉近买家距离，给人留下深刻印象，增加品牌感。（3）常用类目：食品、美妆、家居和工艺品等。（五）复古国潮风（1）设计特点：通过低饱和度色调、斑驳的纹理、怀旧的字体、拼音装饰和历史代表性装饰元素等，烘托传统文化的厚重感。（2）设计意义：国潮风和复古风设计既能引起老一辈买家的情感共鸣，也是现今年轻买家追捧的时尚。（3）常用类目：茶和酒等中国传统文化相关商品，国潮美妆和国风服饰等。（六）新视觉混搭风（1）设计特点：使用夸张的高饱和度色彩和线条波点等几何元素，各种风格混搭，比如波普、孟菲斯、蒸汽波、故障艺术、杂志风和拼贴风等风格。（2）设计意义：突破传统，形成反差，视觉感强，具有新奇性、多元性和创造性。（3）常用类目：服饰、运动用品、儿童用品和食品等。了解详情页的视觉风格，能区分不同详情页视觉风格的特点、意义以及常用类目让学生先行了解详情页的视觉风格，让学生对详情页的视觉风格有系统的了解，便于后面的设计4.小试身手在网络上搜索三张不同视觉风格的详情页焦点图，说出这三张焦点图分别是什么视觉风格，并分析该图片的视觉设计特点。分析详情页视觉设计风格通过对各个网店的详情页对比，得出不同设计风格的详情页视觉设计特点5.课后小结本节课要掌握的重点：1.详情页的视觉设计风格明白本节课自己要掌握的知识点学习情境五制作网店形象的首页PAGE8任务二详情页设计（二） 一、教学目标1.知识目标（1）掌握网店详情页的设计技巧。（2）掌握网店详情页的设计流程。2.技能目标（1）能够对详情页合理地排版布局。（2）能够完成详情页的整体设计。3.情感目标（1）培养学生分析和处理、使用数据的能力。（2）培养学生积极思考、大胆探索，从数据中挖掘信息的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析商品详情页的布局排版合理，符合设计要求，可以更好地展示商品，避免买家审美疲劳，大大提高店铺的转化率，减少跳失率。教学重点：1、详情页的设计流程。教学难点：1、制作符合设计要求的详情页。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示对比两张详情页的焦点图的排版，思考其优缺点。看展示的详情图，思考问题？引发学生学习兴趣2.新课讲解一、详情页的排版布局（一）详情页排版结构为符合手机竖屏浏览习惯，详情页每屏布局应使用竖向排版，多用上下排版，少用左右排版。（二）详情页整体排版详情页屏与屏之间的过渡要有节奏，详情页整体排版要遵循一定的原则。二、详情页的设计技巧（一）一屏一个主题，一屏一个卖点画面信息越多，指向性越弱，传播力度越弱，所以每个细节要模块化，突出主题，分屏展示，避免卖点堆砌。（二）文字清晰，字数精简保留重点文字，删减非重点文字。中文文字不小于30号字，字体不超3种，让人一目了然。（三）避免使用过多的点和线元素，造成信息碎片化严重可将零碎的点进行合并，重新组成一个面。（四）卖点可视化通过巧用参照物、量化表达、场景还原和夸张表现等方法，让抽象的文案也能被直观感知。比如：用代表专业元素来体现商品的成分。（五）关联营销很重要热销商品推荐是一个把其他商品推荐给买家的入口，在详情页上方放入优惠券，可以增加买家购买欲。熟悉详情页的排版布局与设计技巧让学生学会排版布局与设计技巧，而不是拿到产品就开始乱做3.小试身手在淘宝等网络购物平台搜索一个小家电的详情页，分析该详情页存在哪些设计问题。分析详情页存在的设计问题通过搜索网店的详情页，更好地理解详情页设计技巧4.新课讲解三、详情页设计的流程熟悉详情页的设计流程，要懂得每一步的作用和内容让学生学会设计详细的流程5.学生实训任务名称：小家电详情页的设计任务要求：小熊电器旗舰店需要上新一款小熊蒸煮饭盒，请你根据产品资料，确定视觉风格，并在设计框架的基础上，使用Photoshop完成详情页设计。根据上面的知识点，完成小家电的详情页设计。通过此任务的完成，懂得如何设计详情页6.课后小结本节课要掌握的重点：1.详情页的排版布局2.详情页的设计技巧明白本节课自己要掌握的知识点

任务三详情页上传 一、教学目标1.知识目标（1）掌握网店详情页的切片技巧。（2）掌握网店详情页的上传流程。2.技能目标（1）能够对详情页进行切片。（2）能够完成详情页的上传。3.情感目标（1）培养学生分析和处理、使用数据的能力。（2）培养学生积极思考、大胆探索，从数据中挖掘信息的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析一般来说，制作好的详情页需要上传到网店，上传之前都要对图片进行切片处理。同时详情页上传方式很多，我们要按需求选择合适的上传方式。教学重点：1、详情页的上传方式。教学难点：1、完成详情页的切片与上传。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题对比两张详情页，思考详情页是不是越长越好。看展示的详情图，思考问题？引发学生学习兴趣2.新课讲解一、详情页切片一般来说，制作好的详情页上传到网店前都要对图片进行切片处理。对详情页切片可以解决图片过长而加载过慢、单张图片大小过大和高度过高而无法上传的问题。淘宝网建议详情页图片不宜超过25张，宽度控制在750px，高度控制在1500px以内，而且单张图片大小不宜超过300KB。另外，要把每个切片切割成一个完整的图片，避免因网速太慢而出现图片被截断的问题。二、详情页的上传方式（一）方法一：手机和电脑使用同一套详情描述（1）进入“商品发布页面”，找到“图文描述”中的“宝贝详情”。（2）单击“图片”添加图片空间中的详情页图片，单击“文字”输入商品信息。（二）方法二：使用文本编辑（1）在“宝贝详情”中找到“返回旧版图文描述”，选择“使用文本编辑”，电脑端和手机端是分开编辑的。（2）电脑端描述单击“图像”，把图片空间中的切片依次添加。手机端描述单击“添加”，可添加“摘要”“图片”“文字”。（三）方法三：使用旺铺详情编辑器（1）在“详情描述”中找到“返回旧版图文描述”，选择“使用旺铺详情编辑器”，电脑端和手机端是分开编辑的。（2）打开“旺铺详情编辑器”编辑，可添加“基础模块”“营销模块”“行业模块”“自定义模块”，其中电脑端只能添加“基础模块”。熟悉详情页如何切片以及如何上传到店铺让学生学会详情页的切片和详情页的上传3.小试身手登录淘宝网，尝试用三种详情页上传方式来上传详情描述图片，分析不同上传方式的优点与缺点。分析详情页三种上传方式的优缺点通过上传详情页，更好地理解详情页的上传方式4.新课讲解三、详情页上传的流程熟悉详情页的上传流程，要懂得每一步的作用和内容让学生学会上传详情页的流程5.学生实训任务名称：小家电详情页上传任务要求：小熊电器旗舰店需要上新一款小熊蒸煮饭盒，请你把已设计好的蒸煮饭盒详情页图片切片并上传到网店。根据上面的知识点，完成小家电的详情页上传。通过此任务的完成，懂得如何上传详情页6.课后小结本节课要掌握的重点：1.详情页切片2.详情页的上传方式明白本节课自己要掌握的知识点任务一首页策划 一、教学目标1.知识目标（1）了解网店首页的基础理论知识。（2）明白网店首页的布局内容。2.技能目标（1）能正确理解首页的作用。（2）能熟悉首页装修模块的布局。3.情感目标（1）培养学生培养设计中的营销策划能力。（2）培养学生在设计制作中能够利用新技术、新理念。（3）培养学生自主学习、协助学习的能力。二、教学内容分析网店首页的美观程度，直接决定进店消费者的主观感受和消费者在店内的停留时间，关系到消费者能否在网店下单购物。美观的网店装修会给客户良好的第一印象，消费者会更愿意多花时间浏览网店的商品，增加下单的概率。教学重点：1.首页布局内容。2.电脑端首页和手机端首页差异。教学难点：1.首页的组成内容。2.首页布局模块的选择。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示马克杯两个不同店铺的首页，看了这之后，你更愿意在哪个店铺停留？为什么？看展示的首页图，角色为买家，会在哪间店铺停留？由对比反差引出首页的重要性2.新课讲解一、设计店铺首页时，首页布局内容有哪些？（一）手机端网店首页内容1.直播视频区直播和短视频作为电商营销的重要渠道，一般在网店首页的最顶端，用于展示网店直播间，若无直播活动，则会循环播放网店视频或展示直播预告。2.海报区手机端可通过首屏海报区和轮播海报区展示网店公告、折扣优惠和商品推荐等。3.促销活动区促销活动区用于放置参与活动的商品或活动介绍。一般位于海报下方，通过展示网店的促销和优惠活动，提升网店的转化率。4.分类导航分类导航形式多样，位置灵活，可以根据网店需要或设计风格制作，放置于页中、页尾和浮窗等多个位置。5.会员专区会员专区是客户管理的重要手段，能更好地进行产品宣传和售后服务，通过维系客户关系，提升网店回购率。6.商品陈列区商品陈列区又叫商品展示区，网店中的商品陈列区一般紧挨着促销活动区，在活动区下方，商品陈列区也可以根据网店风格，以不同的形式展现商品。（二）电脑端网店首页内容1.店招店招一般用于电脑端，位于网店首页的最顶端，是电商网店的招牌，可以标明网店的名称，是买家对网店第一印象的主要来源。2.导航条导航条位于店招下方，用于网店产品的分类引导。在设计导航条时需考虑网店产品共有几大类别，是否需要放品牌文案或重要活动专区等内容。3.首页全屏海报电脑端首页全屏海报多为横图，位于导航条的下方，是首页的第一视觉位置，影响网店的整体风格，起着宣传网店活动和展示商品的作用。二、电脑端网店首页与手机端网店首页的差异（一）尺寸大小差异手机屏幕和电脑屏幕的尺寸差异大，终端不同，图的尺寸不同。若尺寸不合适，容易造成界面混乱或效果不佳的问题。（二）布局复杂程度差异手机端具备触屏功能，操作更加方便，需要更多的互动模块；手机端用户更倾向于利用碎片化时间浏览，所以手机端设计比电脑端可阅读性要更强，布局要简洁明了，不需要过多装饰。（三）分类展示差异手机端一屏内可同时展示的商品数量有限，因此要做好商品分类，体现商品好而精的特点。电脑端首页设计有店招导航条，手机端首页设计中也有专门的分类页功能，好的分类页能提升客单价和销量。（四）设计优先等级差异手机端的访问量远远大于电脑端。许多网店会选择优先设计手机端网店，然后把部分重要区域的设计图进行尺寸修改，并上传至电脑端。三、首页案例展示（一）电脑端网店首页案例展示电脑端首页常用宽度尺寸为1920px，由于在页面显示上较宽，因此需要展现网店舒适大气的风格，网店的装饰和视觉效果较为丰富。（二）手机端网店首页案例展示淘宝手机端网店首页常用宽度为1200px，内容自上而下纵向排列，严格适配屏幕尺寸，大图少字，触控友好。了解手机端首页的布局内容能熟悉电脑端首页主要由哪些内容构成，每个模块的内容可为哪些？让学生先行了解手机端首页的基本知识让学生对电脑端首页的整体内容区域有系统的了解，便于后面的策划3.小试身手分别登录电脑端和手机端淘宝网，搜索生活小家电的网店首页，收集三家同时有电脑端和手机端首页的网店，并截图保存下来作为案例图。分析这些网店手机端和电脑端包含的内容和布局的区别。搜索生活小家电的网店首页通过对三家小家电网店首页对比，分析首页的内容和布局的区别4.课后小结本节课要掌握的重点：1.首页的布局内容。2.电脑端首页和手机端首页差异。明白本节课自己要掌握的知识点学习情境五制作网店形象的首页PAGE8任务二首页设计 一、教学目标1.知识目标（1）了解网店首页的基础理论知识。（2）掌握电脑端和手机端网店首页的设计规范。2.技能目标（1）能正确理解首页不同视觉风格的特点及意义。（2）按照设计规范，制作分类导航、促销活动区、商品陈列区等核心模块。3.情感目标（1）培养视觉审美能力和创新设计能力，树立职业意识。（2）培养学生积极思考、大胆探索，从数据中挖掘信息的能力。（3）养成细致、严谨的设计习惯，注重设计细节。二、教学内容分析商品首页的视觉设计风格有很多种类型，不同的视觉设计有着不同的视觉营销点，运用得好可以更好地展示商品，大大提高店铺的转化率。教学重点：1.电脑端/手机端首页的核心设计规范。2.首页视觉设计意义。教学难点：1.结合“简约大气、商业气息浓”的风格要求，完成首页的配色、字体和装饰元素搭配，保证视觉协调。2.首页视觉风格的选择。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示不同类型宝贝首页的视觉设计风格，思考什么样的产品适合什么样的视觉设计？看展示的详情图，思考问题？引发学生学习兴趣2.新课讲解一、首页设计规范（一）电脑端和手机端首页尺寸。结合教材表5-1，明确电脑端（C店/B店店标、海报、整页）和手机端的尺寸要求。首页的设计要求。讲解手机端设计的特殊要求（模块清晰、重点突出、一屏化海报、字号24-36号、语言精练）。首页设计技巧讲解四大核心区域设计技巧：逐一讲店标（类型、制作要求、AI工具应用）、分类导航（类型、制作步骤）、促销活动区（活动类型、配色/排版要求）、商品陈列区（陈列类型、商品突出技巧），结合教材案例图分析设计细节。设计流程演示“新建画布→添加参考线→制作模块→整页拼接”的基本步骤，强调画布尺寸、参考线定位的核心要点。1.做好课堂笔记，用表格整理设计规范和四大区域的制作要求；2.记录AI设计工具的使用场景，标注Photoshop设计的关键步骤；3.针对设计技巧中的疑问向教师提问。让学生掌握首页设计的硬性规范和核心技巧，为Photoshop实操打下理论基础，同时树立“营销型设计”和“原创设计”的理念。3.小试身手布置任务：打开学习情境五中小试身手素材，根据茶具网店的产品特点，收集同行案例和首页呈现图，确定茶具网店的首页设计风格、内容布局和选用模块独立完成茶具网店的风格定位，结合产品特性选择适配的字体、配色和装饰元素培养学生结合产品特性进行风格定位的能力，巩固配色、字体设计的知识，为整站首页设计铺垫审美基础。4.同步实训1.布置教材同步实训任务：结合上节课的策划方案，为“一家电器店”完成电脑端（1920px宽）+手机端（1200px宽）首页设计；2.讲解实训要求：符合尺寸规范、风格简约大气、模块衔接自然、商品信息突出；3.分步指导Photoshop操作：新建画布/添加参考线→设计店标/分类导航→制作促销区/商品陈列区→整页拼接优化，及时解决学生操作中的抠图、配色、排版问题。1.以小组为单位，基于前期策划方案进行设计实操；2.按照Photoshop设计流程，完成核心模块制作和整页拼接；3.对设计作品进行细节优化（字号、配色、模块间距），最终输出JPG格式的设计作品。将设计理论和技巧转化为实操能力，让学生熟练掌握Photoshop制作网