《（高职）第6章 移动端网店视觉营销设计ppt课件.pptx》由会员分享，可在线阅读，更多相关《（高职）第6章 移动端网店视觉营销设计ppt课件.pptx（38页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第6章 移动端网店视觉营销设计ppt课件网店视觉营销新商科“课、岗、赛、训”新形态一体化规划教材高等教育出版社课程组 制作目录目录6.16.26.3移动端网店详情页视觉营销设计移动端网店首页视觉营销设计认识移动端网店视觉营销6.4本章综合实训案例导入2019年天猫“双11”全天交易额达到2684亿元，较2018年天猫“双11”成交额增加了549亿，再破历史纪录。其中，APP移动端交易额逐年成倍增长，成为电商消费的主战场。移动电商无论是在我国整体电商行业，还是在我国数字经济时代，都成了不可分割的重要组成部分。 近年来，随着移动互联网的高速发展，人们的生活越来越离不开智能手机，智能手机快速改变着消
2、费者的生活。人们现在外出可以不带钱包，但是不能不带手机。2020年第45次中国互联网络发展状况统计报告显示，截至2020年3月，我国手机网民规模达8.97亿人，较2018年年底增长7992万，我国网民使用手机上网的比例达99.3%，较2018年年底提升0.7个百分点。移动端技术的发展极大地刺激了移动端购物平台的发展，如手机淘宝网、蘑菇街等，在这种形势下，许多界面视觉设计师转入移动端设计领域，众多电商、品牌广告主也纷纷推出自己的手机移动端网店或商品销售类网站。案例导入移动端网店对卖家来说是重要的流量入口，有的卖家主要依靠手机移动端网店获得流量，所以，移动端网店的视觉营销设计尤为重要。下面两张图是
3、两家手机移动端网店的首页,移动端网店的顶部是店招，其中包含店铺名称、关注、导航菜单等信息；移动端网店底部有全部商品、商品分类、联系客服等信息。案例导入以下两图是手机移动端网店的详情页，其中，左图上端显示的是主图视频，并含有商品的标题、优惠券等信息。在详情页的最下面有店铺、客服、收藏等图标，也有“加入购物车”“立即购买”按钮，点击店铺图标，可以直接进入手机移动端网店的首页。案例导入通过分析移动端网店，发现手机移动端网店与PC电脑端网店存在一定的区别，PC端网店通常以大夺人眼球，突出卖点信息；而移动端网店装修要简单，所需商品图片数量较少，更加注重细节表达。需要注意的是，移动端描述与PC电脑端描述要
4、保持一致，避免产生消费纠纷与违规事件。案例思考：1.移动端网店视觉营销特点与设计原则分别是什么？2.移动端网店与PC端网店主要有哪些区别与联系？3.如何设计移动端网店的首页与详情页？6.1 认识移动端网店视觉营销移动端网店视觉营销设计与PC电脑端的视觉营销设计思路基本是一致的，都是为了展示商品，展示店铺与品牌，促进消费，维持店铺的持续发展。在进行移动端网店视觉营销设计时，一定要考虑到手机移动端的特点与属性，并进行相应的变化与调整。移动端网店营销特点（1）随身携带方便，可以利用碎片化时间随时随地使用手机浏览网店，不受时间、位置的限制。（2）浏览快捷，操作简单，只需用手指执行单一操作，即可进行商品
5、信息的浏览，消费者可以在短时间内完成购物，越来越多的客户通过手机购物。（3）移动端网店属于狭窄视觉展示，整体设计风格首尾呼应，店铺个性化特色突出，容易让消费者对网店产生视觉记忆，形成品牌黏度，增强买家与卖家的黏性。（4）与PC端网店经常使用深色系的色彩来表现品牌的档次感不同，手机移动端网店显示范围相对集中，过于暗沉的用色会让消费者感到不适。因此，手机淘宝平台统一采用白色作为店铺模板背景色，白纸黑字的组合方式更符合消费者的浏览与阅读习惯。移动端网店视觉营销设计原则 1移动端网店图片不宜过多过大 移动端网店商品图片展示效果移动端网店焦点图展示效果6.1.2 移动端网店视觉营销设计原则2移动端网店信
6、息内容简洁 信息简洁的显示效果 将白色作为店铺的背景色3移动端网店色彩保持鲜明感4移动端网店整体设计风格统一移动端网店与PC端网店的区别与联系（1）尺寸不同。 移动端网店首页的显示宽度为640像素，而PC端网店的显示宽度一般为950像素。（2）布局不同。（3）详情不同。（4）分类不同。（5）颜色不同。 大赛直通车移动端网店视觉营销设计对移动端网店来说，店招在网店中非常重要，展示店铺的形象和商品定位是店招的主要作用之一。移动端网店的店招设计能够突出网店的特色，并要与店标搭配协调。在移动端网店中，目前使用最多、最有效的引流和转化是发送优惠券，在设计优惠券的过程中，优惠券的发送方式、营销角度、视觉角
7、度等方面都会与PC端网店有所不同。移动端商品详情页内容可以与PC端详情页基本一致，但是要注意不同终端的图片比例，同时要保证移动端店铺详情页的完整与独立。在内容完整的前提下，移动端网店的图片不能存在模糊失真或者压缩变形的情况。 移动端网店首页布局特点为了方便管理，手机淘宝网移动端首页给卖家划分好了功能模块，卖家只需选定自己需要的功能模块，即可完成首页的布局。 店招轮播海报（焦点图）品牌推广、主打商品、新品上市、促销活动优惠券分类导航合理的分类缩减购物路径按价格、功能、季节、人群、品类等活动海报店铺活动、商品活动、节日大促分类商品可用文字或者商品图片来做分隔引导商品陈列每屏都有主推的商品，商品图重
8、点突出，陈列规范统一移动端网店首页布局特点（1）店招。 店招的位置是固定的，不支持个性化设置。 店招内容和图片可以根据不同的店内促销活动主题、节日主题和淘宝网官方活动主题进行设计制作，店招颜色应与店铺整体色调风格保持一致。（2）轮播海报。 可以在单位空间内放置2-4张海报并设置链接功能，支持动态切换。 轮播海报展现移动端网店的促销活动、新品上市、主推商品的信息，能够给消费者过目不忘的效果。（3）优惠券。 在通常情况下，可把它放在网店首页的上方位置，以尽早引起消费者的关注，优惠券的图片通常以醒目的字体和颜色进行标识，并标明优惠券的金额和使用门槛。 移动端网店首页布局特点（4）分类导航。价格、功能
9、、季节、人群、活动、品类等进行整理归类。（5）活动海报。活动海报可以展示店铺活动，也可以展示商品活动、节日大促活动。通常在海报中标清具体优惠力度的数字，引导客户以搭配套餐的形式一次性购买多件商品，或者成套商品，搭配的产品图片也应适当突出，并配合相应的文字进行说明。（6）分类商品。可以通过放置商品分类的图片或者通过文字标题，链接到相应的商品分类页面，分类商品图片要做到各张分类图片的风格和色调相一致，不要出现色彩的跳跃。（7）商品陈列。商品陈列包含商品图片、简短宝贝标题、宝贝卖点、宝贝价格和“立即购买”等元素。主推商品以单行形式展示，其他商品则以双行形式展示。 移动端网店首页布局特点提示：提示：由
10、于轮播海报区域放置的焦点图数量有限，可以通过自定义模块，根据网店需求设置模块大小、图片尺寸和商品链接。促销信息应该合理分布在商品陈列区域和商品分类区域之间，尽量不要让促销海报出现堆积，容易引起消费者的视觉疲劳，引起消费者的反感和对促销的不信任。 移动端网店首页布局特点 移动端网店首页设计1设计店招移动端店招与PC端店招不同，移动端店招无法展示很全面的信息。 唐狮旗舰店PC端店招唐狮旗舰店移动端端店招移动端店招是由一张背景图片，搭配上简洁的文字描述构成的，在前端展示时还会出现店铺名、粉丝数及关注按钮。移动端网店首页设计店招背景图片尺寸是750像素*254像素，图片可以有以下三种形式：（1）与店铺
11、形象有所关联的纯图片；（2）以图片为主的图文搭配形式；（3） 以文字为主的图文搭配形式，通过文字表明店铺的特点，以此来吸引消费者。在设计时，不要添加过多的文字。在较小的面积里出现过多的文字，会让人感到繁琐，并且影响美观。 移动端网店首页设计【实战】家居移动端网店店招设计具体制作步骤请见微课和教材。 “avigers旗舰店”店招设计效果移动端网店首页设计2设计轮播海报轮播海报一般用于呈现店铺形象、店铺实力、推荐店铺活动及热销款产品。轮播海报一般是JPG或PNG格式，图片大小为608像素*304像素。轮播图海报内容要简洁，文字要清晰，主次分明且能达到快速传播的目的。尤其是在移动端，由于屏幕尺寸所限
12、，海报的文字不需要太多，主题明确很重要。 移动端网店首页设计【实战】家居移动端网店轮播海报设计具体制作步骤请见微课和教材。 avigers旗舰店轮播海报整体设计移动端网店首页设计3. 优惠券在进行网店首页视觉设计时，一般把优惠券放在店招或轮播图片的下方，并留出足够的空间。在通常情况下，设计优惠券使用较为鲜明的色彩，能够吸引消费者的注意，这样才能真正发挥优惠券的引流与促进转化作用。【实战】家居移动端网店优惠券设计具体制作步骤请见微课和教材。 avigers旗舰店优惠券设计移动端网店首页设计4分类导航分类导航模块的主要作用是给顾客提供引导，所以不要设计得太花哨，简洁大方、清晰直接就好。为了让商品分
13、类直观，多采用图片加文字的组合的设计。分类导航图片格式为JPG、PNG、BMP，图片宽度为640像素，高度为336-2500像素。 移动端网店首页设计【实战】家居店铺分类导航设计具体制作步骤请见微课和教材。 avigers旗舰店分类导航设计移动端网店首页设计5分类标题和商品陈列 分类标题是对属于不同板块的商品进行分隔和标识，标题要求简洁，比如新品上市、爆款专区等。在移动端网店首页，分类标题风格应该一致，建议设计出一个分类标题的版式，其他标题都使用一样的版式，只是分类标题的内容不同。商品陈列是首页中占用篇幅最多的一部分，需要划分出多个商品模块。一般情况下，销量高的热卖商品、新品或促销商品放在第一
14、陈列区和第二区陈列。第三陈列区、第四陈列区等根据需要放置其他不同的商品。 移动端网店详情页特点（1）尺寸更小。手机淘宝制定的标准是：商品详情页宽度在480-620像素之间，高度小于或者等于960像素，图片格式为JPG、GIF、PNG。（2）场景丰富。（3）卖点清晰。（4）容量更小。 6.3.2 移动端网店详情页设计原则1图片大小适中，视觉冲击力强2文字不宜太小，图文比例适中3构图主体清晰，背景色彩单一 6.3.3 移动端网店详情页设计【实战】设计“avigers旗舰店”移动端网店详情页 商品主图 商品信息 商品细节展示6.3.3 移动端网店详情页设计【实战】设计“avigers旗舰店”移动端网
15、店详情页 商品卖点展示 关于售后思政点滴 疫情防控期间，淘宝起诉造假口罩不法商家索赔百万元 2020年2月17日，淘宝将一家销售假冒飘安口罩的店铺诉至法院，索赔百万元，并要求被告在淘宝网向消费者、守法商家和平台道歉。杭州互联网法院正式受理此案，并在线公开审理。这是杭州互联网法院防疫期间第一起电商平台起诉售假口罩商家并获得法院立案的案件。2020年2月3日，苏州工业园区市场监督管理局对苏州某生物科技有限公司进行检查。现场发现一次性口罩1万余只，外包装上标注有“河南飘安集团有限公司”字样。在发现该公司售假行为后，淘宝母公司阿里巴巴下架商品链接、关闭店铺，对店铺做永久清退，后将店铺诉至法庭。此前，阿
16、里巴巴曾向全体商家发出最严“口罩令”，并宣布永久清退15家严重违规店铺。截止到2020年3月，阿里已拦截、删除57万条可疑口罩链接，协助全国14个省份30个地市执法机关，侦办、查处制售假冒伪劣口罩等违法案件128起。售假一直以来是一个严肃的问题，也是淘宝平台严厉打击的。一旦被淘宝平台查到了，后果不堪设想。所以，网店经营者应该做到严以律己，做遵纪守法的好公民。 6.4 本章综合实训1. 实训目的（1）掌握移动端网店店招的设计方法。（2）掌握移动端网店首页设计方法。（3）掌握移动端网店详情页设计方法。2. 实训要求（1）设计制作“家纺”移动端网店的店招，要求突出品牌和卖点。（2）设计制作“家纺”移动端网店首页。（3）设计制作“家纺”移动端详情页。（4）对完成的作品进行展示，同学之间进行互评，教师给出综合评价。 高等教育出版社 联系邮箱：网店视觉营销新商科规划教材谢谢!