《跨境电商美工实务（第2版）》 教案 项目六 移动端视觉设计制作

学科跨境电商美工实务课题项目六移动端视觉设计制作任务1移动端店招、焦点图及MiniBanner的制作任务2移动端店铺布局及商品详情页制作周次2时数8节授课班级教学目的及要求：通过本次课程学习，应达到以下目的和要求：知识目标1.移动端店招的规格及设计要点。2.移动端焦点图及MiniBanner单图模式、单行多点击模式、图片轮播模式的图片规格、设计要点和链接设置。3.移动端店招、焦点图及MiniBanner的基本设置流程。4.移动端店铺的布局原则。5.移动端商品详情页的布局原则。能力目标1.能够独立完成移动端店招、焦点图及Banner的制作。2.能够独立完成移动端店铺布局及商品详情页的制作。教学重点：独立完成移动端店铺布局及商品详情页的制作教学难点：独立完成移动端店铺布局及商品详情页的制作教学过程备注一、教学导入提问讨论:移动端店铺装修对于一个店铺重不重要？移动端销售已经是电商的一个主流趋势，对于产品转化率的提升以及点击率的提升，就需要依靠良好的移动端店铺装修，店铺装修会让我们的产品展示效果更好，而且也能够让我们的产品卖点更加的突出。二、理论内容项目六移动端视觉设计制作任务1移动端店招、焦点图及MiniBanner的制作任务2移动端店铺布局及商品详情页制作通过讲授、课件演示，告知本章课程内容：移动端店招的规格及设计要点，移动端焦点图及MiniBanner单图模式、单行多点击模式、图片轮播模式的图片规格、设计要点和链接设置，移动端店招、焦点图及MiniBanner的基本设置流程，移动端店铺和商品详情页的布局原则。1.了解不同类型的图片要求移动端店招的图片规格为720px×200px，图片格式为jpg或jpeg。移动端焦点图及MiniBanner的图片规格为720px×200px或720px×360px。焦点图及MiniBanner的图片模板中，单行多点击的图片总宽度必须在720px及以上。2．店招、MiniBanner、焦点图的基本设置流程（1）店招的基本设置流程（2）MiniBanner及焦点图的基本设置流程3.移动端店铺布局及商品详情页制作［步骤1］店铺的布局一定要基于简明清晰的摆放原则。常用的摆放原则为：店招+“焦点图+商品推荐模块”+“MiniBanner设计模块+商品推荐模块”+系统推荐模块。［步骤2］开头使用“店招+焦点图”突出店铺爆款信息和店铺的促销折扣信息。［步骤3］使用“焦点图+商品推荐模板”，把相应的折扣商品与焦点图放到一起，突出店铺活动。［步骤4］最后将系统推荐模块TopSelling放在最下面，与上面的模块形成对应，增加整个店铺的完整性。［步骤5］优化完了店铺的布局，下一步需要制作商品详情页。首先决定采用FAB利益排序法。［步骤6］制作商品详情页第一屏：商品卖点和优势。［步骤7］制作商品详情页第二屏：商品细节展示，让客户更加直观地了解商品。［步骤8］制作商品详情页第三屏：商品属性信息+尺码说明。［步骤9］制作商品详情页第四～六屏：商品模特图片+实物图片。［步骤10］将整理好的图片上传。其中，应该注意的是：图片尺寸没有限制，在保证清晰度的情况下，图片像素小，有助于提升在移动端的打开速度。可以尝试在Photoshop中将图片存成web格式，并且通过调整品质的数值达到这个效果。［步骤11］点击“产品管理”，然后点击“发布产品”，选择适合自己的类目进行发布。［步骤12］移动端商品详情页可独立编辑。点击“商品详情页”下方的“无线描述”，展开后把排好序的图片以及文字添加进去。课堂讨论与总结1.店铺的布局原则以速卖通平台为例，进行移动端店铺首页布局首先要了解移动端店铺包含的基础模块。移动端店铺包含两个页面：第一个是移动端店铺首页装修，涉及以下功能模块：店招、6个商品推荐模块、3个系统模块、6个图片模块；第二个是无线活动页面。一般店铺模板的顺序为：1）店招设计；2）焦点图设计3）MiniBanner设计（图片模板）；4）商品推荐模块展示（系统模板+商品推荐模板）。商品推荐模块的分布和模块摆放原则。（1）商品推荐模块的布局商品主图的布局前提是商品主图要清晰干净，像素要满足平台要求。设置商品标题时，应尽量把主要关键词放在最前面，其他的放在稍微靠后的位置来进行视觉营销。同时，可以根据自己的需求选择不同的商品展现样式。（2）模块摆放原则卖家可以根据自己的要求调整商品的摆放，但是一定要基于简明清晰的摆放原则。这里推荐一种最常见的摆放原则：店招+“焦点图+商品推荐模块”+“MiniBanner设计模块+商品推荐模块”+系统推荐模块。2.商品详情页的布局原则商品详情页是店铺中最容易与顾客产生交集和共鸣的页面，其设计对