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

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

课时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端店铺注重内容的完整性，因此其分类信息通常详细且全面，而移动端店铺受设备大

1

小限制，通常会依据“少而精”的原则选取部分分类信息，以便将重要信息传达给消费者。

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

移动端店铺的视觉营销设计思路与PC端大同小异，都是为了更好地展示商品和店铺，引导消费者购买

商品和识别品牌。从实际应用角度来说，移动端店铺与PC端店铺的专题页、钻展推广图、直通车推广图区

别较小，且其视觉营销设计技巧相通，因此不再赘述。下面主要介绍移动端店铺首页和移动端商品详情页的视

觉营销设计技巧。

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

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

1．常见布局

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

1）聚流型布局

聚流型布局通常先将流