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

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

1、课题移动端店铺视觉营销设计(一)课时2课时(90min)教学目标知识技能目标：(1)了解移动端店铺与PC端店铺的区别(2)掌握移动端店铺首页的视觉营销设计技巧(3)学习移动端商品详情页的视觉营销设计技巧素质目标：(1)培养良好的职业素质，增强工作责任意识(2)解学习本门课程，提高学习能力教学重睚点教学重点：移动端店铺与PC端店铺的区别、移动端店铺页面的视觉营销设计技巧教学难点：掌握移动端店铺页面的视觉营销设计技巧教学方法案例分析法、问答法、讨论法、讲授法教学用具电脑、投影仪、多媒体课件、教材教学过程主要教学内容及步骤课前任务【教师】布署课前任务，和学生负责人取得联系，让其提醒同学通过APP或其

2、他学习软件，预习本节课要讲的知识【学生】完成课前任务考勤【教师】使用APP进行签到【学生】按照老师要求签到问题导入【教师】提出问题：移动端店铺与PC端店铺有哪些区别？【学生】聆听、思考、讨论、举手回答传授新知【教师】通过学生的发言，引入新的知识点，讲解移动端店铺与PC端店铺的区别，以及移动端店铺页面的视觉营销设计技巧等知识一、了解移动端店铺与PC端店铺的区别【教师】通过多媒体展示“PC端店铺首页”和“移动端店铺首页(部分)”图片(详见教材)，并进行讲解与基于电脑的PC端店铺不同，移动端店铺主要基于手机、平板电脑等移动设备显示店铺页面。由于所用设备的不同，两者的页面效果有一定的差异，具体来说有以

3、下几点。(1)尺寸不同。移动端店铺页面的宽度要小于PC端店铺页面的宽度。PC端店铺首页的显示宽度通常为950像素而移动端店铺首页的显示宽度通常为640像素;PC端商品详情页的宽度为750像素或790像素,而移动端商品详情页的宽度通常为480像素620像素。(2)布局不同。PC端店铺注重画面的整体性,模块相对来说较为丰富，而考虑到移动设备显示内容有限，移动端店铺通常会省略一些模块(如交互区、页尾等)，简化图片中的文案，加大文字的字号，使其更适合移动端浏览，以便给消费者带来良好的浏览体验。（3）分类不同.PC端店铺注重内容的完整性，因此其分类信息通常详细且全面，而移动端店铺受设备大小限制，通常会依

4、据“少而精”的原则选取部分分类信息，以便将重要信息传达给消费者。二、解析移动端店铺页面的视觉营销设计技巧移动端店铺的视觉营销设计思路与PC端大同/屏，都是为了更好地展示商品和店铺，引导消费者购买商品和识别品牌。从实际应用角度来说，移动端店铺与PC端店铺的专题页、钻展推广图、直通车推广图区别较小，且其视觉营销设计技巧相通，因此不再赘述。下面主要介绍移动端店铺首页和移动端商品详情页的视觉营销设计技巧。（一）移动端店铺首页的视觉营销设计技巧本节将从常见布局、设计原则和注意事项三个方面介绍移动端店铺首页的视觉营销设计技巧。1 .常见布局移动端店铺首页常见的布局方式有以下几种。2 ）聚流型布局聚流型布局

5、通常先将流量集中到某个或某几个商品上，以打造“爆款”，提升店铺的影响力；再推荐热销品类，以将引入的流量进行合理分配。这种布局方式可以在销售主推商品的同时，兼顾品类的按需分流，适用于商品品类较少但有一定流量的店铺。【教师】通过多媒体展示“采用聚流型布局的店铺首页（部分）”图片（详见教材），并进行讲解例如，图中为采用聚流型布局的店铺首页，该页面首先展示促销商品海报，渲染活动氛围，唤醒消费者的购买欲望；然后展示优惠信息，促进消费者加购；接着展示六个主推商品，引导消费者购买，进而打造爆款；最后展示热销品类，将引来的流量按需分配到不同商品品类中。2）分流型布局分流型布局最重要的任务是将流量均匀地分布到各

6、个商品品类中，尽量确保销售均衡，避免出现某类商品销售火爆，而其他商品无人问津的情况。因此，其首屏展示重点为分类入口。分流型布局适用于商品品类丰富且有一定知名度的店铺。【教师】扫码播放“分流型布局视觉呈现案例”视频,通过多媒体展示“采用分流型布局的店铺首页（部分）“图片（详见教材），并进行讲解例如，图中为采用分流型布局的店铺首页，该页面首先展示优惠信息、活动海报，激发消费者的购买欲望；然后通过明确的分类指引消费者购物，将流量分配到各个商品品类中，将流量的转化率做到最大化；最后展示新品、爆款商品、热销品类商品，进一步引导i肖费者购买。3）发散型布局发散型布局通常会尽可能多地展示商品，以给消费者商品

7、多样、品类丰富的感觉。发散型布局适用于商品数量和商品品类均比较少的新店。【教师】通过多媒体展示“采用发散型布局的店铺首页（部分）”图片（详见教材），并进彳捕解例如，图中为采用发散型布局的店铺首页，该页面首先展示店铺中的“爆款商品，渲染购物氛围；然后展示优惠信息，唤醒消费者的购买欲望；接着展示主推商品和热销商品来刺激消费者购买;最后展示商品分类，方便消费者按需查看相关类别。3 .设计原则在对移动端店铺首页进行视觉营销设计时，应遵循以下原则.【教师】通过多媒体展示“移动端电子产品店铺首页海报”图片（详见教材），并进行讲解（1）内容要简明扼要.受设备大小的限制，移动端店铺首页的显示面积有限，导致信息

8、的呈现受限，因此要对展示信息进行取舍与精简，以便消费者快速获取关键信息。例如，图中的海报只添加了商品型号、优惠信息、商品价格等信息，能让消费者快速了解商品信息和店铺活动。(2)排版要简洁明了、突出重点。移动端消费者大多是利用工作或学习之余进行购物的，这些消费者没有太多时间去仔细阅读信息，因此移动端店铺首页的排版要简洁明了，以满足消费者快速浏览时还能准确获取信息的需求。【教师】通过多媒体展示移动端鞋类店铺首页商品展示区”图片(详见教材)，并进彳亍并解例如，图中的商品展示图平铺展示且有序排列，能给消费者简洁明了的视觉效果；而价格信息为红色，并加大字号显示，在画面中十分突显，能够吸引消费者注意，方便

9、消费者获取重要信息。(3)首页整体风格要统一。移动端店铺的页面展示空间较为狭窄,如果整体的风格不统一，容易导致店铺形象不鲜明，也会给消费者带来混乱的视觉体验。因此，移动端店铺首页整体的风格应尽量统一，以使消费者对店铺产生完整的视觉记忆和深刻的视觉印象。【教师】通过多媒体展示“移动端箱包店铺首页(部分)”图片(详见教材)，并迸行讲解例如，图中的海报和商品展示区使用同一种颜色，不同商品展示区采用相同的布局，整个页面色调、风格统一，会给消费者以完整之感。(4)图片不宜过多、过大。一般来说，移动端店铺首页中的图片数量过多、尺寸过大时，会导致信息加载时间过长，这样会使消费者失去耐心和兴趣，从而放弃浏览。

10、所以，应在保证图片清晰的前提下，合理控制移动端店铺首页中的图片数量和大小，以提升消费者打开页面的速度，为消费者创造顺畅的购物体验。3.注意事项在对移动端店铺首页进行视觉营销设计时，要注意以下几点.【教师】通过多媒体展示“某家具店铺首页海报”图片(详见教材)，并进行讲解(1)不能简单把PC端缩小。一般来说，若将PC端店铺首页的图片简单缩小后直接应用到移动端店铺首页,会因尺寸不匹配导致图片显示不全、信息不清晰、页面杂乱等，因此移动端店铺首页应基于移动设备特点重新设计或做相应调整。例如，图中的移动端店铺首页海报就是在PC端的基础上做出了调整，包括将横幅排版改为竖幅排版、优化文案排版等，以使其更方便移

11、动端消费者浏览。(2)与PC端店铺风格一致。移动端店铺的风格应与PC端店铺保持一致，这样有利于增强消费者对店铺的认知，让消费者对店铺产生更加统一、深刻的印象。【教师】通过多媒体展示“移动端茶具店铺首页截屏”图片(详见教材)，并迸行讲解(3)按屏展示内容.为了适应移动设备的显示特点,移动端店铺首页应以竖幅形式显示内容，以便消费者获得良好、舒适的浏览体验。不仅如此，考虑到消费者的信息获取习惯，应按屏展示内容，即一屏显示一个模块内容，一个模块只传达一个主题，以便高效展示店铺信息一例如，图中的每个模块都采用竖幅形式显示内容，每屏只显示一个模块，且每个模块只传达T主题.(4)优化交互体验。相较于PC端店

12、铺的利用鼠标交互，移动端店铺利用手指与屏幕接触的交互体验更加直接。但受移动设备显示尺寸的影响，互动设计要更加明显(如按钮大小适合点击)，才能易于操作。另外，移动端消费者大多使用右手操作手机，因此建议将重要的分类、按钮等放置在页面右侧，以方便消费者点击，这种细微的局部调整可以为消费者提供更好的操作体验，从而提升消费者对店铺的好感度。(二)移动端商品详情页的视觉营销设计技巧移动端商品详情页的尺寸虽然与PC端商品详情页的尺寸有所区别，但是在装修PC端店铺时可设置自动适配，此时移动端商品详情页可正常显示，因此移动端商品详情页一般不需要重新设计。如果想让移动端商品详情页的视觉效果更好，可在PC端商品详情

13、页的基础上进行优化，优化时需注意以下几点。(】)与PC端商品洋情页风格统一.移动端商品详情页的风格应与PC端保持一致，这样才能使商品形象得到强化，以使消费者对商品印象深刻，从而提高消费者的购买欲望。(2)注重页面的简洁性、直观性。移动设备显示的内容有限，因此应精炼商品信息，并将其以直观的方式呈现，以便消费者在最短的时间内了解商品。(3)突出商品。了解商品信息是消费者进入商品详情页的主要目的。因此，在优化移动端商品详情页时应在有限的展示空间内突出商品，以便消费者了解商品。【甦】聆应思考、mi海课堂实践【教师】组织学生以小组为单位完成以下任务：请用简练的语言总结出移动端店铺首页和详情页与PC端的区别，及其设计要点，并制成PPT。【】聆听、思考、“哪怆曲亢总制作PPT,由组氏h台展示PPT,堀行i明【教师】与学生一起评价各组的表现，选出任务完成得最好的一组课堂小结【教师】简要总结本节课的要点了解移动端店铺与PC端店铺的区别解析移动端店铺页面的视觉营销设计技巧【学生】总结回顾知识点作业布置【教师】布置课后作业(1)总结本节课课堂内容，形成思维导图(2)搜集、欣赏优秀移动端店铺首页和详情页，分析、学习其设计技巧【学生】完成课后任务教学反思