《跨境电商美工实务（第2版）》课件 项目6、7 移动端视觉设计制作、视频美工设计制作

跨境电商美工实务学习目标能力目标1.能够独立完成移动端店招、焦点图及Banner的制作。

知识目标1.移动端店招的规格及设计要点。2.移动端焦点图及MiniBanner单图模式、单行多点击模式、图片轮播模式的图片规格、设计要点和链接设置。3.移动端店招、焦点图及MiniBanner的基本设置流程。4.移动端店铺的布局原则。5.移动端商品详情页的布局原则。2.能够独立完成移动端店铺布局及商品详情页的制作。

1移动端店招、焦点图及MiniBanner的制作

2移动端店铺布局及商品详情页制作项目六移动端视觉设计制作任务101任务描述02任务实现03

知识技能点移动端店招、焦点图及MiniBanner的制作

任务描述速卖通店铺Curren为了更好地发展公司业务，迎合平台发展的需求，决定制作一套针对自己公司的移动端店铺的店招、焦点图及MiniBanner任务分析移动端销售已经是电商的一个主流趋势，对于产品转化率的提升以及点击率的提升，就需要依靠良好的移动端店铺装修，店铺装修会让我们的产品展示效果更好，而且也能够让我们的产品卖点更加的突出。任务实现1．了解不同类型的图片要求移动端店招的图片规格为720px×200px，图片格式为jpg或jpeg。移动端焦点图及MiniBanner的图片规格为720px×200px或720px×360px。焦点图及MiniBanner的图片模板中，单行多点击的图片总宽度必须在720px及以上。任务实现点击店铺后台，然后点击“店铺装修”，接着点击“进入装修”按钮。2．店招、MiniBanner、焦点图的基本设置流程（1）店招的基本设置流程任务实现点击后台店铺，然后点击店铺装修与管理，进入装修选择适合自己的图片模板风格，注意图片尺寸。2．店招、MiniBanner、焦点图的基本设置流程（1）MiniBanner及焦点图的基本设置流程1.引起买家注意

2.唤起买家兴趣3.激起买家购买欲望促进买家采取购买行为在品牌和消费者之间的衔接中，视觉营销是一种借助视觉辅助手段传达品牌理念的有效策略，无论是店招设计、详情页编排，亦或是店面广告策略，都可以看做是视觉营销的不同形式。采用可视化内容不仅能提高品牌在营销平台上的曝光量，还能令你的目标受众对品牌产生更加深刻的印象。视觉设计对于营销者的总体战略很重要。因为越来越多的消费者对详情图、Banner、广告语等可视化的内容越来越感兴趣，人们更容易被可视化的图片或内容所打动。这意味着可视化的内容能够在繁杂的信息中传达给消费者更强的信号暗示，达到最好的效果。事实上，消费者更易因图片影像而采取实际行动或者做决定。由此可见，视觉是一种影响消费者行为的重要先决因素，其根本目的就在于塑造网络店铺的良好形象并促进销售。

任务实现图片展示（1）图片展示（2）知识技能点视觉营销的作用视觉营销的应用视觉营销的作用提升店铺吸引力，引导消费者点击

1抓住买家的兴趣点，增加买家停留时长2构建真实应用场景，刺激购买3打造具有辨识度的店铺形象，提升品牌认知度4任务实现导航是展示店铺分类的主要工具，显示在店招的下方，好的导航设计可以让浏览者方便而快捷地找到所需要的商品。在首页装修页面中，将鼠标放在店招模块上，右上角就会出现“编辑”“删除”按钮，如图5-9所示。单击“编辑”按钮，进入店招编辑状态，可以看到模板规格参数要求：高度为100px～150px，宽度为1200px，图片大小不能超过2MB2．店招店招是网络店铺展示的窗口，代表了店铺的品牌定位和商品定位。店招显示在店铺首页的顶部，当消费者进入店铺浏览时，首先看到的就是店招，店招的设计应易于传播和便于记忆。任务实现导航是展示店铺分类的主要工具，显示在店招的下方，好的导航设计可以让浏览者方便而快捷地找到所需要的商品。在首页装修页面中，将鼠标放在店招模块上，右上角就会出现“编辑”“删除”按钮，如图5-9所示。单击“编辑”按钮，进入店招编辑状态，可以看到模板规格参数要求：高度为100px～150px，宽度为1200px，图片大小不能超过2MB2．店招店招是网络店铺展示的窗口，代表了店铺的品牌定位和商品定位。店招显示在店铺首页的顶部，当消费者进入店铺浏览时，首先看到的就是店招，店招的设计应易于传播和便于记忆。知识技能点手机端店招的规格及设计要点焦点图及minibanner单图模式的图片规格，设计要点，链接设置手机端店招、焦点图及minibanner的基本设置流程任务201任务描述02任务实现03

知识技能点移动端店铺布局及商品详情页制作任务描述随着速卖通移动端的销量占比越来越大，GIORDANO决定着重发展移动端，入手方向主要体现在优化店铺的布局以及商品详情页的制作上。任务实现［步骤1］店铺的布局一定要基于简明清晰的摆放原则。常用的摆放原则为：店招+“焦点图+商品推荐模块”+“MiniBanner设计模块+商品推荐模块”+系统推荐模块。［步骤2］开头使用“店招+焦点图”突出店铺爆款信息和店铺的促销折扣信息。［步骤3］使用“焦点图+商品推荐模板”，把相应的折扣商品与焦点图放到一起，突出店铺活动。任务实现［［步骤4］最后将系统推荐模块TopSelling放在最下面，与上面的模块形成对应，增加整个店铺的完整性。［步骤5］优化完了店铺的布局，下一步需要制作商品详情页。首先决定采用FAB利益排序法。［步骤6］制作商品详情页第一屏：商品卖点和优势。任务实现［步骤7］制作商品详情页第二屏：商品细节展示，让客户更加直观地了解商品。［步骤8］制作商品详情页第三屏：商品属性信息+尺码说明。［步骤9］制作商品详情页第四～六屏：商品模特图片+实物图片。如图6-19所示。任务实现［步骤10］将整理好的图片上传。其中，应该注意的是：图片尺寸没有限制，在保证清晰度的情况下，图片像素小，有助于提升在移动端的打开速度。可以尝试在Photoshop中将图片存成web格式，并且通过调整品质的数值达到这个效果。［步骤11］点击“产品管理”，然后点击“发布产品”，选择适合自己的类目进行发布。任务实现［步骤12］移动端商品详情页可独立编辑（见图6-21）。点击“商品详情页”下方的“无线描述”，展开后把排好序的图片以及文字添加进去知识技能点店铺的布局原则商品详情页的布局原则模块摆放原则商品推荐模块的布局1.店铺的布局原则以速卖通平台为例，进行移动端店铺首页布局首先要了解移动端店铺包含的基础模块。移动端店铺包含两个页面：第一个是移动端店铺首页装修，涉及以下功能模块：店招、6个商品推荐模块、3个系统模块、6个图片模块；第二个是无线活动页面。2.商品详情页的布局原则商品详情页是店铺中最容易与顾客产生交集和共鸣的页面，其设计对顾客购买行为产生直接影响。在进行商品描述时，文字内容要尽量简短，突出商品的卖点和特点。关联营销品牌信息和退货政策感谢聆听跨境电商美工实务学习目标能力目标1.能够对常用视频处理软件进行熟练操作。2.能够对商品的素材视频进行剪辑等处理。

知识目标1.熟悉并掌握会声会影X8的基础操作。2.掌握剪辑、增加字母、配乐等常用的视频制作方法。3.能够根据素材设计和制作所需要的视频。

商品视频的基础处理

项目七视频美工设计制作任务101任务描述02任务实现03

知识技能点3C商品视觉营销应用任务描述为了能够熟悉并掌握会声会影X8的基础操作，现有一专营玩具品类的速卖通店铺，要求根据所提供素材，制作一个9s的添加转场和背景音乐的主图视频。任务分析在跨境电商平台上，视频的应用越来越受欢迎，它不仅能快速吸引消费者的目光，还能在短时间内展示商品的信息及使用方法等。各个跨境电商平台对主图、商品详情页视频的支持，使得卖家们开始把视频的制作纳入网店装修的范畴。而数码单反相机不仅能拍摄照片，而且能拍摄视频，它方便实用且性价比高，使得卖家们将其作为视频拍摄的基础工具。视频从拍摄到剪辑到输出应用，这一系列过程并不简单。任务实现1.项目设置步骤1 启动会声会影，设置项目属性步骤2 在“项目格式”下拉列表中选择“在线”选项步骤3 单击下方的“新建”按钮步骤4在打开的对话框中配置文件名称，如图7-5所示，单击“确定”按钮关闭对话框。任务实现2.导入素材［步骤1］在会声会影素材库中单击“添加”按钮［步骤2］为新建文件夹命名，然后在右侧的素材库中单击鼠标右键，执行“插入媒体文件”命令。［步骤3］在打开的对话框中选择素材，单击“打开”按钮［步骤4］添加素材后，将素材拖入时间轴中，时间轴最右侧的项目区间显示了项目的总时间为9s（默认添加的单个照片素材区间为3s）任务实现3.编辑素材［步骤1］在时间轴选择第一张素材图片，在预览窗口中预览默认效果。然后右击素材图片，展开选项面板，在选项中选择基本动作，然后单击高级选项的“自定义”按钮，选择自定义动作［步骤2］在打开的对话框中调整左侧原图区域中的显示框［步骤3］在第1帧上单击鼠标右键，复制，在最后一帧上单击鼠标右键，粘贴。［步骤4］选择好自定义动作后单击“确定”按钮，在时间轴中选择第1张素材图片，单击鼠标右键，执行“复制属性”命令，然后选择素材2，单击鼠标右键，执行“粘贴所有属性”命令，接着选择素材3，仍然重复上述操作。［步骤5］在设置中选择“编辑”，然后在图像选项中选定“保持宽高比”并单击“确定”按钮。任务实现4.添加转场与特效［步骤1］单击“转场”按钮，进入转场素材库。［步骤2］在素材库上方单击“对视频轨应用随机效果”并查看。［步骤3］此时的素材之间就插入了随机的转场效果，单击“滤镜”按钮，进入滤镜素材库。［步骤4］选择“气泡”滤镜，将其拖至素材1上步骤5］在预览窗口中预览效果。然后，用同样的方法在素材2和素材3上添加“气泡”滤镜。［步骤6］在添加转场后，项目区间缩短为7s。［步骤7］此时，可以将素材1和素材2的区间均修改为4s。选择素材，在选项面板中单击区间数值进行修改即可任务实现5.添加字幕和音频［步骤1］单击“标题”进入素材库，在素材中选择一个标题［步骤2］将其拖入时间轴的覆叠轨上，并且拖动素材的边缘，将其调整到和视频轨的长度保持一致［步骤3］在预览窗口双击修改文字内容，并通过拖动四周的控制点来调整大小［步骤4］单击时间轴中的“自动音乐”按钮，在展开的面板中选择音乐，然后单击“播放选定歌曲”［步骤5］选好歌曲后，将滑块拖动到第1帧，然后勾选“自动修整”（见图7-23），再单击添