8.1了解移动端店铺与 PC 端店铺的区别（课件）《电商视觉营销设计》（上海交通大学出版社）

第8章 移动端店铺视觉营销设计 电商视觉营销设计 1 了解移动端店铺与 PC 端店铺的区别 01 2 8.1 了解移动端店铺与 PC 端店铺的区别 与基于电脑的 PC 端店铺不同，移动端店铺主要基于手机、平板电脑等移动设备显示店铺页面。 由于所用设备的不同，两者的页面效果有一定的差异，具体来说有以下几点。 PC 端店铺首页 移动端店铺首页（部分） 3 8.1 了解移动端店铺与 PC 端店铺的区别 1. 尺寸不同 （1）尺寸不同。移动端店铺页面的宽度要小于 PC 端店铺页面的宽度。 PC 端店铺首页的显示宽度通常为 950 像素，而移动端店铺首页的显示宽度通常为 640 像素； PC 端商品详情页的宽度为 750 像素或 790 像素，而移动端商品详情页的宽度通常为 480 像素～ 620 像素。 4 8.1 了解移动端店铺与 PC 端店铺的区别 2. 布局不同 （2）布局不同。PC 端店铺注重画面的整体性，模块相对来说较为丰富，而考虑到移动设备显示内容有限，移动端店铺通常会省略一些模块（如交互区、页尾等），简化图片中的文案，加大文字的字号，使其更适合移动端浏览，以便给消费者带来良好的浏览体验。 5 8.1 了解移动端店铺与 PC 端店铺的区别 3. 分类不同 （3）分类不同。PC 端店铺注重内容的完整性，因此其分类信息通常详细且全面，而移动端店铺受设备大小限制，通常会依据“少而精”的原则选取部分分类信息，以便将重要信息传达给消费者。 6 解析移动端店铺页面的视觉营销设计技巧 02 移动端店铺的视觉营销设计思路与 PC 端大同小异，都是为了更好地展示商品和店铺，引导消费者购买商品和识别品牌。 从实际应用角度来说，移动端店铺与 PC 端店铺的专题页、钻展推广图、直通车推广图区别较小，且其视觉营销设计技巧相通，因此不再赘述。 7 8.2.1 移动端店铺首页的视觉营销设计技巧 本节将从三个方面介绍移动端店铺首页的视觉营销设计技巧。 8 常见布局 设计原则 注意事项 8.2.1 移动端店铺首页的视觉营销设计技巧 1. 常见布局 移动端店铺首页常见的布局方式有以下几种。 9 聚流型布局 分流型布局 发散型布局 8.2.1 移动端店铺首页的视觉营销设计技巧 1. 常见布局 (1）聚流型布局。聚流型布局通常先将流量集中到某个或某几个商品上，以打造“爆款”，提升店铺的影响力；再推荐热销品类，以将引入的流量进行合理分配。 这种布局方式可以在销售主推商品的同时，兼顾品类的按需分流，适用于商品品类较少但有一定流量的店铺。 10 8.2.1 移动端店铺首页的视觉营销设计技巧 1. 常见布局 例如采用聚流型布局的店铺首页，该页面首先展示促销商品海报，渲染活动氛围，唤醒消费者的购买欲望； 然后展示优惠信息，促进消费者加购； 接着展示六个主推商品，引导消费者购买，进而打造“爆款”； 最后展示热销品类，将引来的流量按需分配到不同商品品类中。 11 由于移动端店铺招牌、通栏导航等通常不支持个性化设置，因此本章不再对其进行介绍。 8.2.1 移动端店铺首页的视觉营销设计技巧 1. 常见布局 小提示 8.2.1 移动端店铺首页的视觉营销设计技巧 1. 常见布局 （2）分流型布局。分流型布局最重要的任务是将流量均匀地分布到各个商品品类中，尽量确保销售均衡，避免出现某类商品销售火爆，而其他商品无人问津的情况。 因此，其首屏展示重点为分类入口。分流型布局适用于商品品类丰富且有一定知名度的店铺。 扫一扫 分流型布局视觉 呈现案例 点击此处播放微课 13 8.2.1 移动端店铺首页的视觉营销设计技巧 1. 常见布局 例如采用分流型布局的店铺首页，该页面首先展示优惠信息、活动海报，激发消费者的购买欲望； 然后通过明确的分类指引消费者购物，将流量分配到各个商品品类中，将流量的转化率做到最大化； 最后展示新品、“爆款”商品、热销品类商品，进一步引导消费者购买。 14 8.2.1 移动端店铺首页的视觉营销设计技巧 1. 常见布局 (3）发散型布局。发散型布局通常会尽可能多地展示商品，以给消费者商品多样、品类丰富的感觉。发散型布局适用于商品数量和商品品类均比较少的新店。 15 8.2.1 移动端店铺首页的视觉营销设计技巧 1. 常见布局 例如采用发散型布局的店铺首页，该页面首先展示店铺中的“爆款”商品，渲染购物氛围； 然后展示优惠信息，唤醒消费者的购买欲望； 接着展示主推商品和热销商品来刺激消费者购买； 最后展示商品分类，方便消费者按需查看相关类别。 16 8.2.1 移动端店铺首页的视觉营销设计技巧 1. 常见布局 知识库 除了前面几个店铺首页中出现的模块外，移动端店铺首页还可以包含一些特色模块，如店铺热点、品牌介绍、店铺热搜、热销榜