《电商视觉营销设计》教案第16课移动端店铺视觉营销设计（二）.docx

《《电商视觉营销设计》教案第16课移动端店铺视觉营销设计（二）.docx》由会员分享，可在线阅读，更多相关《《电商视觉营销设计》教案第16课移动端店铺视觉营销设计（二）.docx（4页珍藏版）》请在优知文库上搜索。

1、课题移动端店铺视觉营销设计(二)课时2课时(90min)教学目标知识技能目标：(1)理解移动端女装店铺首页的设计思路(2)掌握移动端女装店铺首页的制作方法素质目标：(1)通过学习移动端的知识、做出更好的设计(2)认真完成课堂练习，提高独立思考能力教学重难点教学重点：移动端女装店铺首页的设计思路和制作过程教学难点：能够对具体店铺的移动端页面进行视觉营销设计教学方法案例分析法、问答法、讨论法、讲授法教学用具电脑、投影仪、多媒体课件、教材教学过程主要教学内容及步骤课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，预习本节课要讲的知识【学生】完成课前任务考勤【教

2、师】使用APP进行签到【学生】按照老师要求签到问题导入【教师】提出问题移动端店铺首页与PC端有何区别？【学生】聆听、思考、讨论、举手回答传授新知【教师】通过学生的发言，引入新的知识点，讲解移动端女装店铺首页的设计思路，井演示制作过程一、设计并制作移动端女装店铺首页【教师】通过多媒体展示“移动端女装店铺首页效果”图片(详见教材)，并讲解其设计思路本节将以移动端女装店铺首页的设计与制作为例，介绍移动端店铺首页的设计技巧与制作方法。(一)设计思路与PC端首页一样，该女装店铺的移动端首页同样主推春夏上市新品，目标消费者定位为2540岁职业女性，因此将移动端店铺风格设定为相同的简约风。接下来就对该女装店

3、铺的移动端首页进行视觉营销设计。1 .内容规划鉴于该店铺商品品类较少且有一定流量，因此选择聚流型布局，将移动端首页从上到下依次设置为海报、优惠券、主推商品区、热销品类区。下面对这些区域进行规划和说明。(1)海报：与PC端相同，移动端店铺首页海报的主题文案也为“春夏上新，并加入引导消费者购买的活动信息，以及引起消费者注意的新品图片。不同的是，考虑到移动设备显示内容有限，删除一些次要信息，并将重要信息放大处理，以便消费者更加直观械取关键信息。(2)优惠券：在海报下方添加竖版优惠券，用于吸引消费者关注，促进商品销售。优惠券中安排了面额、使用条件等内容，方便消费者领取和使用。（3）主推商品区：展示重点

4、推广的春夏新品,以引导i肖费者购买，同时利于打造爆款（4）热销品类区：展示以往销售较好的商品分类，以将消费者按需分流到相关类SU,促进流量的转化。此外，在设计商品分类图标时，将重要图标（如“新品推荐”分类图标）放置在右侧，方便消费者点击。2 .配色方案确定考虑到店铺风格和PC端店铺首页效果,该移动端店铺首页多以白底黑字的方式展示信息，方便消费者查看；海报背景、优惠券领取按钮背景等为蓝色，给消费者以清凉之感；购买按钮为红色，使其突显的同时与其他颜色形成对比，为画面增添视觉冲击力。3 .构图选择考虑到移动设备多为竖屏，将海报、优惠券等调整为竖幅排版，且商品图片、文案大多居中排列.另外，大多数商品图

5、片采用垂直线构图，能为画面增加延伸感。（二）制作过程【教师】讲解并演示制作“移动端女装店铺首页”的步骤，要求学生边听边做1 .制作页头和海报步骤1新建一个名为移动端女装店铺首页、宽度为1200像素、高度为12198像素、分辨率为72像素，英寸、颜色模式为RGB的文档。步骤2置入素材页头Jpg文件，并使其顶端与页面顶端对齐.步骤3打开第4章制作的女装店铺首页psd”文件，并将海报相关图层复制到移动端女装店铺首页文档页头下方，然后删除时/尚/的/你和/文本，以及NEWARRIVAL”底图，并调整保留素材的大前位置。2 .制作优惠券步骤I在海报下方添加优惠券标题文本领券购物更优惠”，并设置其字体为方

6、正大黑_GBK,字体大小为80点，字体颜色为黑色（#0（XXX）01步骤2使用钢笔工具在优惠券标题下方绘制如图所示的图形，并设置其填充为无，描边色为黑色（#000000）,描边宽度为2像素。步骤3在步骤2绘制的图形靠下位置绘制一个宽度为240像素、高度为55像素、半径为50像素的圆角矩形，并设置其填充色为蓝色（#009ee7）,描边为无。步骤4在步骤2绘制的图形中合适位置添加优惠券文本。（详见教材）3 .制作主推商品区步骤1在优惠券下方添加主推商品区标题文本然后在文本下方绘制一条宽度为1188像素、高度为3像素的矩形，并设置其填充色为浅灰色（#eeeeee）,描边为无，接着为其添加图层蒙版，并

7、将其中间部分抹掉，最后置入素材爱心png”文件，并将其移至合适位置。步骤2在主推商品区标题下方置入素材服装Ljpg文件，然后在素材下方添加文本和装饰图形.步骤3在首推商品展示图下方绘制一个宽度为570像素、高度为800像素的矩形，并设置其填充色为浅灰色（#fPf9fP）,描边为无，然后置入素材服装2.jpg文件，并调整其大口位置，最后将服装2素材剪贴至矩形中。（详见教材）4 .制作热销品类区步骤1在主推商品区下方绘制一个宽度为1086像素、高度为1636像素、半径为50像素的圆角矩形，并设置其填充色为黑色（#000000）,描边为无。置入素材服装4.jpg文件并调整其大小和位置，接着将其剪贴到

8、圆角矩形中。按住All”键并拖动圆角矩形图层至服装4素材图层上方，以复制一个圆角矩形，最后设置复制的圆角矩形的图层不透明度为30%步骤2在步骤1创建的图像上方合适位置添加文本和装饰图形。步骤3绘制一个宽度为1008像素、高度为752像素的矩形,并设置其填充色为浅灰色(#iadada),描边为无，然后置入素材服装5.jpg和服装6.jpg文件，并调整它们的大坏口位置。(详见教材)【学生】观氐聆听、理臊磔求曲亍操作课堂实践【教师】通过多媒体展示“移动端零食店铺首页效果”图片，介绍其设计思路，然后简单介绍制作步骤，并组织学生设计、制作“移动端零食店铺首页”效果图【设计思路】页面规划、配色案确定、构图选择【制作步骤】制作页头和活动倒计时海报、制作踏青榜单、制作活动海报、制作优惠信息、制作分类入口、制作爆款海报、制作商品分类展示区俘生】观看、聆听、设计、制作，将制作好的移动端零食店脑页“效果图更儆师【教师】对学生的作品进行评价，并展示两套制作得最好的效果图课堂小结【教师】简要总结本节课的要点学习设计并制作移动端女装店铺首页了解设计思路和制作过程设计并制作移动端零食店铺首页【学生】总结回顾知识点作业布置【教师】布置课后作业(1)总结本节课课堂内容,形成思维导图(2)完成本项目学习成果自测”中与本节课相关的习题【学生】完成课后任务教学反思