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

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

课时2课时（90min）

知识技能目标：

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

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

教学目标

素质目标：

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

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

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

教学重难点

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

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

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

教学过程主要教学内容及步骤

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

课前任务讲的知识

【学生】完成课前任务

考勤【教师】使用APP进行签到

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

【教师】提出问题

问题导入移动端店铺首页与PC端有何区别？

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

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

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

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

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

（一）设计思路

与PC端首页一样，该女装店铺的移动端首页同样主推春夏上市新品，目标消费者定位为25～40岁职业

女性，因此将移动端店铺风格设定为相同的简约风。接下来就对该女装店铺的移动端首页进行视觉营销设计。

传授新知

1．内容规划

鉴于该店铺商品品类较少且有一定流量，因此选择聚流型布局，将移动端首页从上到下依次设置为海报、

优惠券、主推商品区、热销品类区。下面对这些区域进行规划和说明。

（1）海报：与PC端相同，移动端店铺首页海报的主题文案也为“春夏上新”，并加入引导消费者购买的

活动信息，以及引起消费者注意的新品图片。不同的是，考虑到移动设备显示内容有限，删除一些次要信息，

并将重要信息放大处理，以便消费者更加直观地获取关键信息。

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

使用条件等内容，方便消费者领取和使用。

1

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

（4）热销品类区：展示以往销售较好的商品分类，以将消费者按需分流到相关类别，促进流量的转化。

此外，在设计商品分类图标时，将重要图标（如“新品推荐”分类图标）放置在右侧，方便消费者点击。

2．配色方案确定

考虑到店铺风格和PC端店铺首页效果，该移动端店铺首页多以白底黑字的方式展示信息，方便消费者

查看；海报背景、优惠券领取按钮背景等为蓝色，给消费者以清凉之感；购买按钮为红色，使其突显的同时与

其他颜色形成对比，为画面增添视觉冲击力。

3．构图选择

考虑到移动设备多为竖屏，将海报、优惠券等调整为竖幅排版，且商品图片、文案大多居中排列。另外，

大多数商品图片采用垂直线构图，能为画面增加延伸感。。

（二