《电商视觉营销设计》教案第10课商品详情页视觉营销设计（二）.docx

课题商品详情页视觉营销设计(二)课时2课时(90min)教学目标知识技能目标：(1)理解气质套装详情页的设计思路(2)掌握气质套装详情页的制作方法素质目标：(1)力口强实践练习,提升专业技能(2)培养朴素认真、爱岗敬业的职业精神教学重难点教学重点：气质套装详情页的设计思路和制作过程教学难点：能够对具体店铺的首页进行视觉营销设计教学方法案例分析法、问答法、讨论法、讲授法教学用具电脑、投影仪、多媒体课件、教材教学过程主要教学内容及步骤课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，预习本节课要讲的知识【学生】完成课前任务考勤【教师】使用APP进行签到【学生】按照老师要求签到问题导入【教师】提出问题：你见过哪些优秀的商品详情页？它们有何共同之处？【学生】聆听、思考、讨论、举手回答传授新知【教师】通过学生的发言，引入新的知识点，讲解气质套装详情页的设计思路，并演示制作过程一、设计并制作气质套装详情页【教师】通过多媒体展示“气质套装主图效果”和“气质套装详情图效果”图片(详见教材)，并讲解“气质套装详情页”的设计思路本节将以气质套装详情页的设计与制作为例，介绍商品详情页的设计技巧与制作方法。(一)设计思路本款套装的目标消费者为2540岁职业女性，这类女性优雅、时尚与干练并存，购买服装时注重品质感与时尚感。接下来根据目标消费者的特点，对气质套装详情页进行视觉营销设计。1.丽娘气质套装详情页从上到下依次为商品主图区、焦点图、卖点展示区、商品展示区、售后保障区。下面对这些区域进行规划和说明。(1)商品主图区：考虑到目标消费者的特点，在主图中加入新品相关信息"NEW""夏季新品"，以吸引消费者注意，并用"职场女性首选"文案指定目标消费者，以引起职场女性对商品的兴趣。为了激发消费者的购买欲望，加入优惠信息"限量限时特惠购""新品抢先价：¥199"。另外，同类商品主图大多只放置商品图片和店铺标志，而该商品主图选择不同的呈现方式，除了添加商品正面图片外，还添加背景、夏季元素等，这种差异化可以使该商品主图在众多商品主图中脱颖而出，吸引消费者注意。(2)焦点图：考虑到目标消费者注重时尚的特点，焦点图主题文案设计成"夏季新时尚"；为了拉进与消费者的距离，除了指定目标消费者外，还在文案中加入人称代词"你"，如文案"你就是职场女王"；为了刺激消费者购买商品，添加"限时特惠”等文案。另外，利用与目标消费者年龄、气质相似的模特进行商品展示，可以让消费者更有代入感，对商品产生具体、真实的印象，以引发消费者对商品的兴趣。(3)卖点展示区：包括两个部分，展示商品最核心的两个卖点。首先，目标消费者最关注商品的品质感，因此卖点展示区的第一部分添加文案"舒适随性&气质出尘”说明商品既能给消费者以舒适感，又能让消费者气质出众。其次，考虑到消费者体型各异，因此第二部分添加说明商品适用多种体型的文案，让消费者放心购买。另外，每个卖点都搭配相关展示图片，可以更好地说明卖点。(4)商品展示区：包括三个部分，商品信息展示、模特展示和细节展示.第一部分为商品信息展示，以图文结合的形式详细说明商品信息，让消费者全面、透彻地了解商品。第二部分为模特展示，同样利用与目标消费者年龄、气质相似的模特进行商品多角度展示，包括商品的正面、侧面和背面，让消费者对商品有一个全面、立体的认识，在展示商品的同时加入一些文案，既可以丰富画面效果，又可以补充说明商品优势，以加深消费者对商品的记忆。第三部分为细节展示，通过领口、腰部等设计细节表现商品的品质，以激发消费者的购买欲望。(5)售后保障区：包括两个部分，分别为用于提升消费者对店铺和商品好感度的贴心提示，以及使消费者无后顾之忧的购买须知。2 .配色方案确定考虑到商品的穿着季节为夏季，将主图背景、焦点图背景等设置为蓝色，以给消费者带来清凉之感。大部分文案采用黑色和灰色，可以方便消费者查看商品信息，同时使画面效果简洁大气。另外，这样的配色既符合目标消费者优雅、干练的特点，又能与店铺首页的配色统一，可以起到强化品牌形象的作用，让消费者对品牌有统一、完整的认识。3 .构图和布局选择商品主图T则展示商品，另一侧展示说明文案，这种平衡式构图方式可以使画面具有稳定感。而商品详情图的部分内容采用层叠、错位等布局方式，既能丰富画面效果，又能增加画面的空间感、层次感和设计感。另外，焦点图采用时尚杂志封面的布局方式，可以为商品增添时尚感；细节展示部分利用数字错位布局内容，可以在引导消费者视线的同时丰富画面效果。(二)制作过程【教师】讲解并演示制作“气质套装详情页”的步骤，要求学生边听边做1.制作商品主图步骤1新建一个名为“气质套装主图”、宽度为800像素、高度为80()像素、分辨率为72像素/英寸、颜色模式为RGB的文档。步骤2将前景色设置为蓝色(#76c4e9),然后按"Ah+Delete"组合键为"背景"图层填充前景色。使用"矩形工具"在画面左上方绘制一个宽度为270像素、高度为647像素的矩形，并设置其填充色为浅蓝色(#c7dde8),描边为无，然后在画面右上方绘制一个宽度为530像素、高度为647像素的矩形，并设置其填充色为浅绿色(#b9e7d7),描边为无.步骤3在画面靠左位置绘制一个宽度为578像素、高度为515像素的矩形，并设置其填充为无，描边课堂实践色为白色（）,描边宽度为15像素，然后将其底边与浅绿色矩形背景底边对齐。（详见教材）2.制作焦点图步骤I新建一个名为“气质套装详情图”、宽度为750像素、高度为11580像素、分辨率为72像素，英寸、颜色模式为RGB的文档。步骤2使用"矩形工具"在画面顶部绘制一个宽度为750像素、高度为1422像素的矩形，并设置其填充色为蓝色（#c4d9e4）,描边为无。步骤3置入素材"服装2.jpgw文件，并采用抠取服装1素材的方法将其抠出，然后调整其大小和位置。步骤4在服装2素材模特左侧合适位置添加文本，并参照效果图调整图层顺序。3 .制作卖点展示区步骤1使用"直线工具"在焦点图下方绘制一条斜线并设置其属性,如图所示。复制直线并将其垂直下移（移动的同时按住"Shift"键）至合适位置步骤2置入素材"服装3.jpg"文件，然后使用"矩形选框工具"框选模特，接着单击"图层"面板底部的"添加图层蒙版”按钮，为素材添加图层蒙版，以遮挡多余部分，最后调整三装3素材的大4坏口位置。步骤3在画面中合适位置添加文本。（详见教材）4 .制作商品展示区步骤1使用"矩形工具"在卖点展示区下方绘制大4环同的矩形，并利用变换工具调整它们的形状，然后设置它们的填充或描边（填充色和描边色均为黑色#0（X）000,描边宽度为1像素），作为标题的装饰图形。步骤2在装饰图形内添力嘛题文本，其中中文字体为Adobe黑体Std,字体大小为44点，字体颜色为黑色（#000000）,字距为120,英文字体为Adobe黑体Sld,字体大小为20点，字体颜色为黑色（#000000）,字距为240步骤3置入服装6素材，并调整其大小和位置，然后采用处理服装4素材背景的方法拉伸服装6素材右侧背景。（详见教材）5 .制作售后保障区步骤1复制商品展示标题并通过修改内容、调整位置制作贴心提示标题。步骤2添加贴心提示文本、装饰图形及图标素材。其中，标题文本的字体为Adobe黑体Std,字体大小为18点，字体颜色为深灰色（#353535）；正文文本的字体为Adobe黑体Std,字体大小为14点，字体颜色为深灰色（#353535）,行距为30点；装饰图形填充为无，描边色为灰色（#808080）,描边宽度为1像素。步骤3复制贴心提示标题并通过修改内容、调整位置制作购买须知标题，效果如图所示。（详见教材）学生婚、聆听、m博球曲褥作【教师】通过多媒体展示“巴旦木主图效果”和“巴旦木详情图效果”图片，介绍其设计思路，然后简单介绍制作步骤，并组织学生设计、制作“巴旦木主图"和“巴旦木详情页”效果图【设计思路】页面规划、配色方案确定、构图与布局选择【制作步骤】制作主图、制作焦点图、制作商品信息区、制作卖点展示区第一部分制作卖点展示区第二部分、）制作卖点展示区第三部分、制作商品展示区第一部分、制作商品展示区第二、三部分、制作售后保障区、制作关联销售区学生】观看、聆听、设计、制作，将制作好的“巴旦木主圄和“巴旦木详情页“效果图效果鄙瑙嫄【教师】对学生的作品进行评价，并展示两套制作得最好的效果图课堂小结【教师】简要总结本节课的要点气质套装详情页的设计思路气质套装详情页的制作方法设计并制作"巴旦木主图"和"巴旦木详情页”效果图【学生】总结回顾知识点作业布置【教师】布置课后作业(1)总结本节课课堂内容,形成思维导图(2)利用所学知识设计、制作更多的商品详情页【学生】完成课后任务教学反思