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

PAGE2

PAGE2

PAGE3

PAGE3

课题

移动端店铺视觉营销设计（二）

课时

2课时（90min）

教学目标

知识技能目标：

（1）理解移动端女装店铺首页的设计思路

（2）掌握移动端女装店铺首页的制作方法

素质目标：

（1）通过学习移动端的知识、做出更好的设计

（2）认真完成课堂练习，提高独立思考能力

教学重难点

教学重点：移动端女装店铺首页的设计思路和制作过程

教学难点：能够对具体店铺的移动端页面进行视觉营销设计

教学方法

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

教学用具

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

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，预习本节课要讲的知识

【学生】完成课前任务

考勤

【教师】使用APP进行签到

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

问题导入

【教师】提出问题

移动端店铺首页与PC端有何区别？

【学生】聆听、思考、讨论、举手回答

传授新知

【教师】通过学生的发言，引入新的知识点，讲解移动端女装店铺首页的设计思路，并演示制作过程

一、设计并制作移动端女装店铺首页

【教师】通过多媒体展示“移动端女装店铺首页效果”图片（详见教材），并讲解其设计思路

本节将以移动端女装店铺首页的设计与制作为例，介绍移动端店铺首页的设计技巧与制作方法。

（一）设计思路

与PC端首页一样，该女装店铺的移动端首页同样主推春夏上市新品，目标消费者定位为25～40岁职业女性，因此将移动端店铺风格设定为相同的简约风。接下来就对该女装店铺的移动端首页进行视觉营销设计。

1．内容规划

鉴于该店铺商品品类较少且有一定流量，因此选择聚流型布局，将移动端首页从上到下依次设置为海报、优惠券、主推商品区、热销品类区。下面对这些区域进行规划和说明。

（1）海报：与PC端相同，移动端店铺首页海报的主题文案也为“春夏上新”，并加入引导消费者购买的活动信息，以及引起消费者注意的新品图片。不同的是，考虑到移动设备显示内容有限，删除一些次要信息，并将重要信息放大处理，以便消费者更加直观地获取关键信息。

（2）优惠券：在海报下方添加竖版优惠券，用于吸引消费者关注，促进商品销售。优惠券中安排了面额、使用条件等内容，方便消费者领取和使用。

（3）主推商品区：展示重点推广的春夏新品，以引导消费者购买，同时利于打造“爆款”。

（4）热销品类区：展示以往销售较好的商品分类，以将消费者按需分流到相关类别，促进流量的转化。此外，在设计商品分类图标时，将重要图标（如“新品推荐”分类图标）放置在右侧，方便消费者点击。

2．配色方案确定

考虑到店铺风格和PC端店铺首页效果，该移动端店铺首页多以白底黑字的方式展示信息，方便消费者查看；海报背景、优惠券领取按钮背景等为蓝色，给消费者以清凉之感；购买按钮为红色，使其突显的同时与其他颜色形成对比，为画面增添视觉冲击力。

3．构图选择

考虑到移动设备多为竖屏，将海报、优惠券等调整为竖幅排版，且商品图片、文案大多居中排列。另外，大多数商品图片采用垂直线构图，能为画面增加延伸感。。

（二）制作过程

【教师】讲解并演示制作“移动端女装店铺首页”的步骤，要求学生边听边做

1．制作页头和海报

步骤1新建一个名为“移动端女装店铺首页”、宽度为1200像素、高度为12198像素、分辨率为72像素/英寸、颜色模式为RGB的文档。

步骤2置入素材“页头.jpg”文件，并使其顶端与页面顶端对齐。

步骤3打开第4章制作的“女装店铺首页.psd”文件，并将海报相关图层复制到“移动端女装店铺首页”文档页头下方，然后删除“时/尚/的/你……”和“/”文本，以及“NEWARRIVAL”底图，并调整保留素材的大小和位置。

2．制作优惠券

步骤1在海报下方添加优惠券标题文本“领券购物更优惠”，并设置其字体为方正大黑_GBK，字体大小为80点，字体颜色为黑色（#000000）。

步骤2使用“钢笔工具”在优惠券标题下方绘制如图所示的图形，并设置其填充为无，描边色为黑色（#000000），描边宽度为2像素。

步骤3在步骤2绘制的图形靠下位置绘制一个宽度为240像素、高度为55像素、半径为50像素的圆角矩形，并设置其填充色为蓝色（#009ee7），描边为无。

步骤4在步骤2绘制的图形中合适位置添加优惠券文本。

……（详见教材）

3．制作主推商品区

步骤1在优惠券下方添加主推商品区标题文本，然后在文本下方绘制一条宽度为1188像素、高度为3像素的矩形，并设置其填充色为浅灰色（#eeeeee），描边为无，接着为其添加图层蒙版，并将其中间部分抹掉，最后置入素材“爱心.png”文件，并将其移至合