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

PAGE2

PAGE2

PAGE3

PAGE3

课题

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

课时

2课时（90min）

教学目标

知识技能目标：

（1）了解移动端店铺与PC端店铺的区别

（2）掌握移动端店铺首页的视觉营销设计技巧

（3）学习移动端商品详情页的视觉营销设计技巧

素质目标：

（1）培养良好的职业素质，增强工作责任意识

（2）解学习本门课程，提高学习能力

教学重难点

教学重点：移动端店铺与PC端店铺的区别、移动端店铺页面的视觉营销设计技巧

教学难点：掌握移动端店铺页面的视觉营销设计技巧

教学方法

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

教学用具

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

教学过程

主要教学内容及步骤

课前任务

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

【学生】完成课前任务

考勤

【教师】使用APP进行签到

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

问题导入

【教师】提出问题：

移动端店铺与PC端店铺有哪些区别？

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

传授新知

【教师】通过学生的发言，引入新的知识点，讲解移动端店铺与PC端店铺的区别，以及移动端店铺页面的视觉营销设计技巧等知识

一、了解移动端店铺与PC端店铺的区别

【教师】通过多媒体展示“PC端店铺首页”和“移动端店铺首页（部分）”图片（详见教材），并进行讲解

与基于电脑的PC端店铺不同，移动端店铺主要基于手机、平板电脑等移动设备显示店铺页面。由于所用设备的不同，两者的页面效果有一定的差异，具体来说有以下几点。

（1）尺寸不同。移动端店铺页面的宽度要小于PC端店铺页面的宽度。PC端店铺首页的显示宽度通常为950像素，而移动端店铺首页的显示宽度通常为640像素；PC端商品详情页的宽度为750像素或790像素，而移动端商品详情页的宽度通常为480像素～620像素。

（2）布局不同。PC端店铺注重画面的整体性，模块相对来说较为丰富，而考虑到移动设备显示内容有限，移动端店铺通常会省略一些模块（如交互区、页尾等），简化图片中的文案，加大文字的字号，使其更适合移动端浏览，以便给消费者带来良好的浏览体验。

（3）分类不同。PC端店铺注重内容的完整性，因此其分类信息通常详细且全面，而移动端店铺受设备大小限制，通常会依据“少而精”的原则选取部分分类信息，以便将重要信息传达给消费者。

二、解析移动端店铺页面的视觉营销设计技巧

移动端店铺的视觉营销设计思路与PC端大同小异，都是为了更好地展示商品和店铺，引导消费者购买商品和识别品牌。从实际应用角度来说，移动端店铺与PC端店铺的专题页、钻展推广图、直通车推广图区别较小，且其视觉营销设计技巧相通，因此不再赘述。下面主要介绍移动端店铺首页和移动端商品详情页的视觉营销设计技巧。

（一）移动端店铺首页的视觉营销设计技巧

本节将从常见布局、设计原则和注意事项三个方面介绍移动端店铺首页的视觉营销设计技巧。

1．常见布局

移动端店铺首页常见的布局方式有以下几种。

1）聚流型布局

聚流型布局通常先将流量集中到某个或某几个商品上，以打造“爆款”，提升店铺的影响力；再推荐热销品类，以将引入的流量进行合理分配。这种布局方式可以在销售主推商品的同时，兼顾品类的按需分流，适用于商品品类较少但有一定流量的店铺。

【教师】通过多媒体展示“采用聚流型布局的店铺首页（部分）”图片（详见教材），并进行讲解

例如，图中为采用聚流型布局的店铺首页，该页面首先展示促销商品海报，渲染活动氛围，唤醒消费者的购买欲望；然后展示优惠信息，促进消费者加购；接着展示六个主推商品，引导消费者购买，进而打造“爆款”；最后展示热销品类，将引来的流量按需分配到不同商品品类中。

2）分流型布局

分流型布局最重要的任务是将流量均匀地分布到各个商品品类中，尽量确保销售均衡，避免出现某类商品销售火爆，而其他商品无人问津的情况。因此，其首屏展示重点为分类入口。分流型布局适用于商品品类丰富且有一定知名度的店铺。

【教师】扫码播放“分流型布局视觉呈现案例”视频，通过多媒体展示“采用分流型布局的店铺首页（部分）”图片（详见教材），并进行讲解

例如，图中为采用分流型布局的店铺首页，该页面首先展示优惠信息、活动海报，激发消费者的购买欲望；然后通过明确的分类指引消费者购物，将流量分配到各个商品品类中，将流量的转化率做到最大化；最后展示新品、“爆款”商品、热销品类商品，进一步引导消费者购买。

3）发散型布局发散型布局通常会尽可能多地展示商品，以给消费者商品多样、品类丰富的感觉。发散型布局适用于商品数量和商品品类均比较少的新店。

【教师】通过多媒体展示“采用发散型布局的店铺首页（部分）”图片（详见教材），并进行讲解

例如，图中