《网店视觉营销设计》教案 模块4 商品详情页视觉设计

《网店视觉营销设计》教案4-1教师姓名授课形式授课课时2教案编号授课班级授课日期 年 月 日 周 授课章节名 称4.1分析商品详情页设计使用教具网店运营推广实训室标准机房一个教学目标（含思政目标）知识目标：学习运用商品详情页的主体风格、色彩搭配、字体选用、文案内容、版块组成。能力目标：能利用图形图像处理软件，综合各种视觉元素，经过精心的图文搭配、文案构思，设计出定位准确、素材元素运用合理、具有美感和创意的商品详情页面。思政目标：随着世界经济一体化的发展，国外品牌大举进入国内市场，国产品牌崛起困难，消费者应树立民族品牌自信心，支持国产，为中国经济发展献力。教学重点商品详情页设计的排版布局、图文搭配、色彩运用教学难点商品详情页设计的完整性、规范性、标准性和创意性更新、补充、删节内 容无课外作业补充练习教学后记工作任务的完成情况检查反馈授课主要内容或板书设计理论一体化教学，无板书。《网店视觉营销设计》备课笔记教学过程主要教学内容及步骤(包括教学方法与教学手段)学生活动课程思导入理实一体教学任务导入：教学实施：一、任务解析可以先学习同类目产品中销量较好产品的商品详情页设计，再做模仿，这样能有效得降低试错成本。根据提供的某款登山鞋商品详情页，分析商品详情页设计应包含的内容版块及考虑要素。二、知识准备（一）商品详情页的价值是提高转化率的入口，能激发顾客的消费欲望，树立信任（二）商品详情页的组成部分如下图所示，一般包含三大组成部分：1.分析任务分析任务目标概念理解支持国货、助力国朝崛起的爱国情怀2.商品辅图：主图后的其余四张图片。3.（三）商品详情页设计前的准备工作要足够了解以下内容：1.商品的目标客户：产品卖给谁及目标客户的所属地域、年龄、性别、职业属性等。2.商品的品牌标识：品牌定位是什么？是什么让其与竞争对手不同？3.商品的基本属性：商品具有哪些特点和卖点？这款商品适合怎样的页面风格？4.客户的购买心理：客户对商品的第一印象如何？商品质量如何？是否适合客户？实际情况与卖家介绍是否相符？（四）商品详情页的设计制作要点1.全面贯彻FBAE原则。商品的“F” 商品“A” 商品“B” 品“E”2.简洁明快，逻辑清晰。3.真实客观，角度全面。4.亲切贴近，便于理解。（如下图所示）图片分析归纳思考回答举例理解感受中华汉字的形体之美换位思考，理解客户的服务理念5.保持更新优化。三、任务实施以极步牌登山鞋为例，分析该商品详情页的设计思路。（一）根据目标人群和产品特征确认主体风格极步牌登山鞋的主要市场人群为一二线核心城市中热爱户外运动的年轻人，其核心竞争力是具备自然舒适的穿着体验，可轻松驰骋于各种户外场景，并参考学习网络上如下图的同类优质产品，可以将页面风格统一确定为户外风。（二）确认详情页的配色设计和字体类型根据店铺配色和文字选用要求，并结合产品属性，可以将详情页配色确定为黑灰色为主、白色为辅的搭配，并采用华康黑体和微软雅黑这样无装饰风格的字体。（三）进行商品图片和视频的全方位收集利用网络平台收集或自行拍摄产品各个角度的图片和视频，还要根据页面风格，收集相关的背景装饰图片以突出产品属性，如山地、草原、湖边、石头等户外场景图。（四）构思商品主图和辅图的布局设计通过分析目标客户的心理进行设计布局，商品主图可以选择正面整体图，并以文字清晰突出性能卖点和价格优惠。商品辅图可以选用侧面图、细节图等来体现属性信息。（五）构思宝贝详情页的框架设计根据详情页框架设计的基本规律和创意构思，并参考优质竞品的商品详情页，可以依次设计首屏海报、活动优惠、套餐搭配、细节卖点展示、商品信息展示、售后服务和实力展示等版块内容。网络搜索同类优质竞品观察常用字体特征思考选用图片特征学习迁移模仿切片操作练习小结（六）修正完善定稿并切片保存上传商品详情页的各部分制作完成后，美工团队应阅稿审阅、四、任务拓展某牛乳奶茶品牌积极利用淘宝线上平台进行营销推广，请利用提供的素材设计该产品商品详情页的主体风格、色彩搭配、字体选用、文案内容、版块组成等，可以用画笔在Photoshop课堂小结：12课后作业练习回顾小结《网店视觉营销设计》教案4-2教师姓名授课形式授课课时2教案编号授课班级授课日期 年 月 日 周 授课章节名 称4.2设计与制作商品主图视频使用教具网店运营推广实训室标准机房一个教学目标（含思政目标）知识目标：理解商品主图对商品营销和推广的意义；掌握商品主图视频的设计制作要点。能力目标：能利用图形图像处理软件，综合运用Photoshop软件和剪映软件设计出吸引买家的商品主图视频。思政目标：淘宝和剪映软件等可以免费使用的素材有限，如随意进行商教学重点商品主图设计的设计制作规范教学难点主图视频制作中，Photoshop和剪映软件的有效结合运用更新、补充、删节内 容无课外作业补充练习教学后记工作任务的完成情况检查反馈授课主要内容或板书设计理论一体化教学，无板书。《网店视觉营销设计》备课笔记教学过程主要教学内容及步骤(包括教学方法与教学手段)学生活动课程思导入理实一体教学任务导入：爱尚服饰网店美工人员初步拟定了商品详情页的主体风格、色彩搭配、字体选用、文案内容、版块组成的设计思路，明确了要点，首先需要制作的就是商品主图。教学实施：一、任务解析根据提供的素材，制作淘宝商品主图，添加契合产品的文案、创意设计的视频，突出该款产品的最大卖点，抓住客户眼球。最终制作完成的商品主图视频的封面如图所示。二、知识准备（一）商品主图的含义和作用含义：在淘宝或天猫的搜索框中输入产品关键词后，出现的每个店铺的商品图片就是商品主图。淘宝PC端品图 淘宝动商主图作用：①抓住眼球。让店铺的产品与竞品区分明显，既醒目又美观，吸引消费者的关注。②激发兴趣。以创意的配色或突出产品卖点的文字信息激发顾客浏览详情的兴趣。③促成点击。增加店铺的点击率，促成转化率的提高，有分析任务分析任务目标观看示例图片并做思考归纳思考举例分析效提升商品的销售额。（二）商品主图的尺寸要求淘宝和天猫的商品主图尺寸建议为长和宽比例是1:1的正3:4形。每张图片的大小不能超过3M，建议不超过500K。主700×700（三）商品主图的设计制作要点1.尺寸大小合理：如果图片太小会导致商品失真，如果图3品的相近色或对比色。如图1选择相近色的冷色调蓝色烘2的儿童玩具选择暖色调红色表达活泼快乐。 3.123。此外，选用的图片必须清晰，且能较好地反映商品的功能4.文案设计合理：①文案简洁有力，力求做出差异化的表达。②文案排版不应影响图片的整体美观，不遮挡主商品，要以文案辅助产品。③文案的字体、颜色和大小，方便用户理解。颜色建议与产品主体颜色搭配，尽量不超过3种。网络搜索图片进行思考回答网络查阅总结归纳举例学习5.720P120Mmp4、movflvf4v。②视频时长必须小于一分钟，建议时长为30秒左右。③视频要突出产品少而精的核心卖点，同时可以进行模特展示、品牌文化介绍。④视频画质高清，无水印，镜头角度多，内容不抖动，不建议采用电子相册的形式。三、任务实施（一）制作主图背景效果①在Photoshop中新建相应规格参数的空白文件。②使用“圆角矩形工具”绘制填充黑色、无描边、参数如1③新建空白图层，添加炸裂脚印图案，并添加图层样式的观看视频总结归纳实践操作观察制作要点尊重知识产权，争做守法④绘制三个形状。（二）添加图片和文字②添加“爱尚服饰店标.psd”店铺logo，为配合商品主体风格，可以适当修改logo字体和配色。④添加其它文字，修改颜色、字体、加粗放大。（三）制作视频内容①在剪映软件左侧的“素材库”中选择开场视频，点击视频右下方“＋”添加到轨道，将比例调整为1:1。掌握各项参数含义学习熟悉操作技能细节调整小结②新建“花字”文本内容，修改文本字体，将视频时长调2③按照序号依次添加视频素材，使用轨道上方的裁剪工具将原视频裁剪至上下贴边。并导入步骤二中制作好的商品主图。④为每段视频添加较为时尚潮流的转场效果，并为最后一张主图添加“轻微放大”出场动画。微调相关参数。⑤为整段视频添加运动风格的背景音乐，设置淡入淡出，完成效果如图。800*800课堂小结：1、主要学习内容：商品细节点的提炼和设计制作规范。2、任务完成情况：总体情况，存在的问题点评。完成任务理解任务内容回顾小结《网店视觉营销设计》教案4-3教师姓名授课形式授课课时2教案编号授课班级授课日期 年 月 日 周 授课章节名 称4.3设计与制作商品辅图使用教具网店运营推广实训室标准机房一个教学目标（含思政目标）知识目标：理解商品辅图对商品营销和推广的作用；掌握商品辅图的设计和制作规范。能力目标：能利用图形图像处理软件，设计制作出色彩运用合理、商品角度全面、文案设计准确、排序严谨有效的商品辅图。思政目标：商品主图和辅图的设计需保持风格、配色、字体、内容等的一致性，它们相互配合，才能共同提高商品销量，正如人与人的相互协作，团结才有力量。教学重点辅图设计制作的要点规范教学难点辅图制作与主图制作的差异性设计和相似性保持更新、补充、删节内 容无课外作业补充练习教学后记工作任务的完成情况检查反馈授课主要内容或板书设计理论一体化教学，无板书。《网店视觉营销设计》备课笔记教学过程主要教学内容及步骤(包括教学方法与教学手段)学生活动课程思导入理实一体教学任务导入：爱尚服饰网店的美工人员制作完商品主图后，便要继续下一步工作任务，着手制作商品的一系列辅图，辅图有什么作用？又该如何制作呢？教学实施：一、任务解析根据提供的4张商品素材图，制作淘宝商品辅图，要求辅2二、知识准备（一）商品辅图的含义和作用含义：商品主图后的图片就是商品辅图。作用：①展示商品的侧面细节属性信息，在不同情况下的使用效果。②展现商品的应用场景图，让客户更有代入感。③展示商品的活动优惠信息，进一步争取客户下单。分析任务分析任务目标观看示例图片并做思考归纳思考 （二）商品主图和辅图的相同点及区别相同点：如尺寸大小要都相同、图文搭配都要合理、文案内容都要准确简洁有力、风格色调要都保持一致等。不同点：①主图一般展示商品的整体图，辅图则更多展示商品的细节图，如侧面、背面、细节放大图。②主图要列出商品最大的核心卖点，而辅图则是将产品的其它卖点依次做补充说明，让买家可以了解得更透彻，每一个卖点都可以成为一张辅图。（三）商品辅图的设计制作要点①每张辅图的主要内容有所区分，体现产品不同角度的特质，在和主图风格与形式的统一中寻求变化。②要突出主次，切忌将各种图片、文字、颜色随意结合，弱化商品存在。③第一张辅图的标品可以描述产品功能、核心卖点，非标品可以是场景展示、买家向往的画面。④第二张辅图的标品可以站在竞品的角度找不同点，或者⑤第三张辅图的标品可以展示服务保障、售后、鉴定证书等，非标品可以是买家秀、搭配等。⑥第五张辅图一般为无边框、无水印、补充商品其它卖点网络搜索思考比较树立集培养合抓住重点，分清主次，合的白底图。 设计较好的商品辅图设计欠佳的上辅图三、任务实施（一）制作第一张辅图①新建空白文件，新建空白图层，将该图层填充黑色，并叠加图案。2搜索网络确认内容强化细小结③在右上角添加店铺logo，加入抠图后的商品图片。④添加文字，根据参数修改文字格式和效果。⑤利用参考线，调整各图层的位置，保证用户视觉效果。（二）制作第二张辅图12“#576b#656f（三）制作第三张和第四张辅图在完成制作的前两张辅图基础上进行修改完善。四、任务拓展某美妆店铺新到一款水润保湿、洁净护肤的卸妆水，店铺美工决定为该款产品制作商品辅图，以清新的水蓝色为主色，突出商品卖点。请利用提供的素材设计该产品的两张辅图，要求尺寸为800*800像素，效果可以参考下图。 课堂小结：12、任务完成情况：总体情况，存在的问题点评。实践操作观察制作要点进行细节调整分析图文布局完成任务回顾小结《网店视觉营销设计》教案4-4教师姓名授课形式授课课时2教案编号授课班级授课日期 年 月 日 周 授课章节名 称4.4设计与制作商品细节图使用教具网店运营推广实训室标准机房一个教学目标（含思政目标）思政目标：在篇幅较长的商品细节图中适当留白可以给买家带来更舒适的阅读体验，在生活中适当留有余地也是获得良好人际关系和个人心态的好方法。教学重点商品细节图设计制作的要点规范教学难点商品细节卖点的提炼更新、补充、删节内 容无课外作业补充练习教学后记工作任务的完成情况检查反馈授课主要内容或板书设计理论一体化教学，无板书。《网店视觉营销设计》备课笔记教学过程主要教学内容及步骤(包括教学方法与教学手段)学生活动课程思导入理实一体教学任务导入：爱尚服饰网店的美工人员制作完商品辅图后，便要进入宝贝详情的制作。在宝贝详情页中，除了首屏海报外，其中最重要的、最受消费者关注的图文详情版块就是商品细节展示部分。那么商品细节图要怎么做？教学实施：一、任务解析23二、知识准备（一）商品细节图的含义和作用含义：在宝贝详情页的首屏海报下，针对商品的卖点和特点做更加深入解释说明的图文详情板块就是商品细节图。作用：展示商品的细节属性和场景应用信息，解决买家最关心的问题，提高买家的购物体验。分析任务分析任务目标观看示例图片并做思考归纳思考（二）商品细节图的尺寸要求PC750PC790像素，总高度不限，但高度也要适宜，因太高会导致页面4801242750（三）商品细节点的提炼商品的细节点就是商品的特点、卖点，也就是消费者的购买理由。细节点提炼的关键，就是寻找产品和消费者痛点的交集。可以提炼的细节点有价格、功能、外观、技术、材料、生产、情感、产地、品牌、包装、参数等。（四）商品细节图的制作要点1.条理清晰、逻辑分明。采用相同的图文排版布局、相同颜色大小的文字、标注序号等方式形成清晰的逻辑。下载平台图片查看尺寸进行确认举例分析思考网络查阅对照学习加深印象做人做事学会把握分寸，留有余地强化细 2.图文混排，遵循黄金分割原理。文字和图形以黄金分割比例组合，图片占比相对多，文字占比相对少。3.画面虚实结合或虚实对比。画面视觉元素多且相近时，可以利用色彩对比将产品部分和背景结合在一起成为“底”，或部分背景处理为产品的一个“零件”。4.画面适当留白。使买家阅读时感到舒适，同时也给画面增加了空间感和品质感。5.356.三、任务实施（一）制作标题文字及背景①新建相应尺寸和标题名的空白文件。②将图层填充为黑色，并叠加“砾石”图案效果，设置不透明度为20%，角度为0度，缩放67%。“OUDO④添加文字“ProductDetails”和“-商品细节-”，按照参数修改其格式。（二）制作商品细节1①新建空白图层，添加矩形，修改矩形格式。④添加文字“营造舒适回弹脚感，立体按摩颗粒，脚感软弹解压。”修改其颜色、文字格式，并右对齐文本。实践操作观察制作要点掌握各项参数含义进行细节调整⑤添加抠图后的登山鞋商品图。（三）制作商品细节2、3、4①与第一个商品细节的制作过程基本相似。②制作细节2时，用“模糊工具”轻微模糊描述文字下方的水花图案。③制作细节3时，给商品图叠加投影效果。④利用素材在灰色背景图层上添加如图的“光影”效果。⑤全部制作完成后，进行完整的阅览，运用参考线、对齐效果等将文字和图片位置摆放适合、美观。四、任务拓展天猫某五金旗舰店新到一款电钻产品，利用提供的电钻素材设计该产品的细节图，要求尺寸宽度为790像素，高度适宜，页面风格为工业机械风，制作效果可以参考下图。分析图文布局完成任务理解任务内容小结 课堂小结：1、主要学习内容：商品细节点的提炼和设计制作规范。2、任务完成情况：总体情况，存在的问题点评。回顾小结《网店视觉营销设计》教案4-5教师姓名授课形式授课课时2教案编号授课班级授课日期 年 月 日 周 授课章节名 称4.5设计与制作商品信息展示图使用教具网店运营推广实训室标准机房一个教学目标（含思政目标）思政目标：越来越多的中国品牌从传统文化中汲取灵感，以中国美学为基础教学重点商品信息展示图设计制作的要点规范教学难点商品信息展示图的美感设计和创意设计更新、补充、删节内 容无课外作业补充练习教学后记工作任务的完成情况检查反馈授课主要内容或板书设计理论一体化教学，无板书。《网店视觉营销设计》备课笔记教学过程主要教学内容及步骤(包括教学方法与教学手段)学生活动课程思导入理实一体教学任务导入：爱尚服饰网店的美工人员制作完成了宝贝详情中的重要组成部分——商品细节图，接下来，要继续其它版块内容的制作。通过学习同类优质竞品的宝贝详情页，美工人员发教学实施：一、任务解析根据提供的商品素材图和文档，制作商品信息展示图，要求其与完成制作的主辅图、细节图的风格、配色、卖点保持一致，并对商品规格做详细说明，解决客户常见问题。制作完成的商品信息展示图，如图所示。二、知识准备（一）商品信息展示图的含义和作用含义：商品信息展示图是集中为用户答疑解惑的区域，一（二）商品信息展示图的设计制作要点①全面详细：利用碎片时间网购的顾客常直接浏览信息展示图来决定是否购买，只有通过有限的文字尽可能多得表现产品的特征及性能，才能为顾客做选择提供借鉴意义。②真实可靠：规格、参数等应客观公正，和商品吻合，经分析任务分析任务目标观看示例图片并做思考归纳思考举例分析网络搜索图片进行诚实守信意识的培养得起买家检验考证。③美观好看：可以通过插入绘制图形、商品图片、背景图片等方式提升页面美观度，吸引客户。 思考回答创意设计 三、任务实施（一）制作标题文字及背景①新建相应尺寸和标题名的空白文件。②新建空白图层，将该图层填充为黑色，并叠加“砾石”图案效果，不透明度为20%，角度为0度，缩放67%。③添加文字“ProuctInormaton4（二）添加商品图片及制作投影②使用“椭圆工具”绘制一个纯黑色填充、无描边的椭圆形，将该形状图层移至商品图片图层下方。（三）制作信息文字①使用直线工具，按住“Shift”键，绘制填充色为“#cdcc22cdcccc”edf0实践操作观察制作要点掌握各项参数含义对中华文化的强烈自信感和高度认同感④绘制和步骤三①同样的短竖直线。⑥“可选颜色”部分的颜色利用纯色正方形图案来展示，三种颜色可以从素材包中的登山鞋图片上吸取。（三）制作尺码信息①添加纯黑色文字“国际尺码对照表”并修改字符格式。②复制步骤三中绘制的直线，点击直线图层，同时按住“Ctrl3“Shift”1 ③采用同样的方式快速绘制竖条直线。④添加文字并修改字符格式。 ⑤全部制作完成后，进行完整的阅览，适当调整各图层的某美妆店铺需要为一款补水精华液制作商品信息展示图，该款精华液具有强烈的中国元素。利用提供的补水精华液素材设计该产品的商品信息展示图，要求页面符合商品特征，体现国风之美。效果可以参考下图。学习熟悉操作技能进行细节调整分析图文布局小结课堂小结：1、主要学习内容：商品细节点的提炼和设计制作规范。2、任务完成情况：总体情况，存在的问题点评。完成任务回顾小结《网店视觉营销设计》教案4-6教师姓名授课形式授课课时2教案编号授课班级授课日期 年 月 日 周 授课章节名 称4.6设计与制作商品售后服务图使用教具网店运营推广实训室标准机房一个教学目标（含思政目标）思政目标：靡不有初，鲜克有终。当今企业不仅注重产品质量，更重视售后教学重点商品售后服务图设计制作的要点规范、必备内容教学难点商品售后服务图的美感设计和创意设计更新、补充、删节内 容无课外作业补充练习教学后记工作任务的完成情况检查反馈授课主要内容或板书设计理论一体化教学，无板书。《网店视觉营销设计》备课笔记教学过程主要教学内容及步骤(包括教学方法与教学手段)学生活动课程思导入理实一体教学任务导入：5教学实施：一、任务解析25二、知识准备（一）商品售后服务图的含义和作用含义：优质的店铺会为消费者提供整套完善的售前、售中②解答客户对于商品发货时间、质量保障、支付方式、物流运输、退换货物等存在的疑惑，定下双边协议，有效降低售后纠纷的频率。③给与顾客更多的安全感和信任感，减轻买家在购物过程中的顾虑，让买家真正做到无后顾之忧，放心下单购买。（二）商品售后服务图的制作内容如图，商品售后服务图可以为买家清晰地梳理以下内容：①退货换货政策：如是否支持七天无理由退换货、是否含运费险等退换货适用情况。②物流配送政策：如支持的物流方式、不同物流的收费标准、商品到货周期等。分析任务分析任务目标观看示例图片并做思考归纳思考举例分析网络搜索图片进行思考回答善始善终、精益求精的做人做事理念③交易支付政策：如是否支持银行卡、信用卡、花呗、支付宝等不同的支付方式。④质量保障政策：如商品质量承诺、售后维修服务、商品保修期限等。（三）商品信息展示图的设计制作要点三、任务实施（一）制作标题文字及背景①新建相应尺寸和标题名的空白文件。②新建空白图层，如任务4，将该图层填充成色号为“#e0e0e0”的灰色，并叠加“砾石”图案效果，不透明度为10%，角度为0度，缩放70%。5（二）添加第一条售后服务内容①新建空白图层，绘制填充颜色为“#7a7c7c”、无描边、粗细2像素的圆角矩形。“0网络查阅总结归纳实践操作观察制作要点掌握各项参数含义小结③绘制填充颜色为纯白色、无描边、粗细2像素的圆角矩形，叠加如图2所示的投影效果，将该圆角矩形置于步骤二①的灰色圆角矩形下。④添加邮费相关的详细描述性文字，修改字符格式。（三）添加其它售后服务内容①其它商品售后服务内容的制作与第一个内容的制作过程基本相似。②全部制作完成后，进行完整的阅览，利用参考线、对齐工具等适当调整各图层的位置、大小，做到页面既适度留白，又饱满完整、工整对