《跨境电商美工实务（第2版）》课件 项目4-6 店招及轮播海报的设计制作、商品详情页的设计制作、移动端视觉设计制作

跨境电商美工实务学习目标能力目标1.能够独立设计制作跨境电商平台的店招。知识目标1.熟悉轮播海报的常用尺寸、特点及展现手法。2.了解并掌握轮播海报的设计制作过程。

3.掌握店招的设计要点及制作方法。2.能够独立设计制作跨境电商平台的轮播海报。

2轮播海报的设计制作项目四店招及轮播海报的设计制作

1店招的设计制作任务101任务描述02任务实现03

知识技能点店招的设计制作任务描述任务分析一般情况下，店招的设计是至关重要的，不能忽视。店招就像店铺的招牌，通常担负着比吸引流量的责任，它要经受客户的反复对比和推敲，是决定客户能否对商品产生信任感的关键。在众多的店铺中，不同的店铺类型应该具备不用的店招风格。这与所售卖的商品类别息息相关。为了能够掌握并熟悉店招的常用尺寸、特点及展现手法，独立设计符合要求的店招，现有一专营银饰品类的速卖通店铺，要求根据所提供素材制作店招。任务实现［步骤1］新建一块宽为950px、高为120px的画布，命名为“店招图”（文件名称可以随意定，不过建议选取简单、易记忆、好识别的名称）。［步骤2］在菜单栏中执行“视图——标尺”命令，在编辑区就会出现标尺，按“Ctrl＋R”键利用标尺工具向下拉出一条辅助线，放在导航栏高度的位置，划分开导航部分。［步骤3］单击工具栏的“矩形选框”工具，框选导航栏区域，单击“前景色”设置好颜色，按“Alt+Del”键为店招区域填充颜色。［步骤4］按“Ctrl＋R”键，再次利用标尺工具拉出辅助线，给导航栏文字部分进行区域的划分。［步骤5］单击“文字”工具，分别在每一个直线划分的区域里输入相对应的文案，依次为：StoreHome、ProductsSaleItemsTopSellingFeedback。［步骤6］单击“文字”工具，添加“店铺LOGO”文字图层，置于店招的中间。知识技能点设计尺寸设计策略设计要点设计展示1.店招的设计要点

店招，顾名思义就是店铺的招牌，好比是实体店的招牌，其最大的作用就是为了让消费者看到并且记住它，从而起到宣传和推广的目的。店招一般位于店铺首页的最顶端，是店铺展示的窗口，也是买家对店铺生成第一印象的主要来源。如果店招设计的让人印象深刻，那么顾客在下次光顾店铺的时候就可以根据记忆或者店铺收藏快速的搜索到店铺，并在店铺中进行购买。因此，鲜明并且有特色的店招对于网络店铺来说发挥着不可替代的作用。

在众多的店铺中，不同的店铺类型应该具有不同的店招风格。这与所售卖商品的类别息息相关。比如：可爱型的店招主要针对母婴用品、童装店、玩具店、宠物店以及适合年轻女孩佩戴的饰品店等。在设计的时候就要注意使用轻快明亮的颜色和偏向简单的线条。2.设计策略（1）明确网店策略

（2）明确品类策略定位

（3）明确风格定位

（4）明确元素

（5）明确字体

（6）明确色调

3.设计展示

在店招设计中，一般包含店铺名称、店铺LOGO、店铺广告语以及店铺收藏、店铺促销、宝贝打折等相关信息。其中，店铺名称和店铺LOGO是不可或缺的主要内容。一般来说，各个店铺都会对店铺名称好店铺LOGO进行重点的设计展示，这样可以更直观地呈现给消费者，树立店铺形象。4.设计尺寸

店铺的店招一般有两种尺寸，一是常规店铺，其尺寸设置为950像素×120像素。二是通栏店招，其尺寸设置为950像素×150像素。常规店招和通栏店招的区别在于：常规店招在上传到淘宝店铺首页后，店招两侧显示空白；通栏店招在上传到淘宝店铺首页后，店招会根据设计的结果进行显示。店招的格式一般分为三类，分别是：JPG、PNG和GIF。其中，GIF格式是动态店招。任务201任务描述02任务实现03

知识技能点轮播画报的设计制作任务描述为了能够掌握并熟悉轮播海报的常用尺寸、特点及展现手法，独立设计符合要求的轮播海报，现有一专营女鞋品类的速卖通店铺，要求根据所提供素材制作一幅轮播海报任务分析不管是线下传统的营销方式还是线上网络销售，都需要有漂亮而吸引人眼球的海报来招揽顾客。在网络店铺的运营中，除了利用促销活动或节日活动来吸引顾客外，还可以通过制作精美的海报促销图片来吸引买家的眼球。任务实现［步骤1］新建一块宽为950px、高为300px的画布，命名为“海报图”。文件名称可以随意定，不过建议选取简单、易记忆、好识别的名称。［步骤2］给背景填色后将素材图片移至做好的背景上。［步骤3］添加提前设计好的广告文案，完成后的轮播海报。［步骤4］设置完毕后单击确定按钮。

知识技能点轮播海报的设计流程轮播海报的设计要点轮播海报的设计实施1.轮播海报的设计要点首页海报一般位于导航的下方，占据较大的面积，其常见形式为多张海报循环播放。可以说，它是顾客进入店铺首页看到的最醒目的区域，利用好轮播海报，不仅能给人震撼的感觉，还能使顾客第一时间了解店铺的活动和促销信息。（1）主题海报的制作需要一个主题，无论是新品上市、清仓甩卖，还是节日促销，都要选定主题后方能围绕该方向确定海报的文案和信息等。海报的主题是商品描述的直接体现，主要的表现形式是图文结合。总的来说，一幅海报基本由三部分构成，即商品、背景和文案。1.轮播海报的设计要点（2）构图海报的构图主要讲究的是和谐且主题突出。一般有以下几种分类：●左右构图：比较典型的构图方式通常有左图右文或者左文右图两种模式。这种构图方式比较沉稳，画面不失平衡感。1.轮播海报的设计要点●左中右构图：海报两侧为图片，中间为文字。相较于左右构图，此种构图方式更具层次感。1.轮播海报的设计要点（3）配色海报的配色十分关键，画面的色调会营造一种氛围。在配色时，重要的文字信息要用醒目的颜色加以强调，以对比度来传递画面信息。此外，以不同的配色方案来确定相应的风格，进而展现商品特点。2.轮播海报的设计流程（1）目标人群、商品分析和广告目标定位●

目标人群分析：分析广告投放区域的主要访问人群，进而分析他们的审美观及消费心理。比如：不同年龄层次及不同消费能力的人，对色彩、风格的喜好或者引发注意的点是截然不同的，因而我们一定要针对其审美设计出能吸引他们的轮播海报。●商品分析：分析商品的卖点、价值点，即商品图片应该以什么样的角度或者风格去呈现。比如：分析商品的哪个款式最具代表性或者哪个颜色是主打，最能吸引买家的眼球并体现商品价值，进而将引起买家关注的点用图片表现出来。●广告目标分析：在设计一幅海报时，要确定广告目标，明确是促销广告、活动广告还是品牌形象类广告。促销广告的目标是以降价打折为手段来刺激买家；活动广告是以预告活动给买家带来的利益的形式来吸引买家收藏或者关注；而品牌形象广告则是以加深品牌印象和好感为主要目的。对此，我们要做到有的放矢。2.轮播海报的设计流程（2）沟通策划●主题内容：是指在海报中展现的内容，如模特、折扣信息、商品图片、文案、商标等。应当将所有内容经过梳理后用最简练的方式进行表达。●文案内容：海报中的文案内容不宜过多，应该尽量做到言简意赅，引起买家的兴趣。●素材准备：设计的过程就如同盖房子一样，需要各种材料，如背景素材、标签、字体等。我们既可以提前通过网络搜集各种素材，也可以借鉴其他网站的广告设计。充足且优质的素材可以起到事半功倍的效果。3.轮播海报的设计实施（1）尺寸只有知道了尺寸，我们才能开始设计和规划轮播海报，具体的尺寸要根据平台的要求来确定。（2）背景与色调海报可以选择图片或者渐变色以及简单的纯色作为背景，因为背景占据的面积较大，所以背景的色调几乎决定了广告图的色调。

3.轮播海报的设计实施

（3）字体与排版虽然字体的种类繁多，有上千种，但并不是每一种都可以随便使用，每种字体都各有各的风格，有的时尚，有的可爱，有的沉稳大气，有的个性活泼。在设计时我们要根据商品的风格来选定合适的字体类型。同时，在排版时文字的位置、间距等也都会影响视觉效果。（4）主题层次一般来说，在海报图片中会有多个主题信息，安排好这些信息的主次和视觉顺序也是很重要的一点。

感谢聆听跨境电商美工实务学习目标能力目标知识目标1.掌握商品详情页的设计要点及制作方法。1.能够独立设计制作跨境电商平台的商品详情页。

商品详情页的设计制作项目五商品详情页的设计制作

1任务101任务描述02任务实现03

知识技能点商品详情页的设计制作任务描述现有一专营女鞋品类的速卖通店铺，在收集完商品素材图片、确定页面的布局和配色方案的同时，策划此款鞋的商品详情页，包含商品规格、商品描述、商品细节图以及品牌介绍四个模块。配色方案则以浅色为主。任务分析一般情况下，顾客从搜索页进入店铺时打开的就是商品详情页，它是顾客购买商品时必须打开的页面。可以说，商品详情页的优劣是决定顾客是否购买的关键因素，因而商品详情页的设计是至关重要的，不能忽视。商品详情页通常担负着比首页更大的转化率责任，它要经受客户的反复对比和推敲，是决定客户能否对商品产生信任感的关键。任务实现［步骤1］新建一块宽为950px、高为3000px的画布，命名为“详情页面图”［步骤2］制作具体模块，先制作第一个模块——ItemSpecifics即商品详情页介绍模块。这个模块是关于商品的详细介绍，因此主要以文字为主。［步骤3］制作下一个模块——ProductDescription，这个模块以商品图片为主，通过大量的图片来展现商品的外观和品质。同时，包含商品的细节以及不同颜色的展示。［步骤4］最后加上品牌介绍模块和运输详情模块，以便顾客更多地了解商品品牌以及运输过程中可能涉及的一些细节问题。［步骤5］商品详情页制作完成并保存。知识技能点商品详情页的设计流程引发兴趣替客户做决定激发潜在需求1.引发兴趣当顾客点击进入商品详情页之后，如何引发其兴趣是关键。引起顾客兴趣的可以是商品的热销盛况、商品的升级与更新等。2.激发潜在需求顾客开始对商品产生兴趣还并不能说明什么，需要进一步激发他们的潜在需求。激发顾客的潜在需求可以通过商品功能介绍、商品特点介绍等来实现。3.替客户做决定

对于一些犹豫不决、迟迟不肯下单只差临门一脚的顾客，我们可以发挥主动权，帮助其做决定。可以通过以下办法实现：（1）品牌介绍通过展现品牌实力来增加顾客的信任，提高客单价。（2）购买号召通过营造一些紧张的氛围来促成顾客现在、立刻、马上就购买，如“数量有限”“库存紧张”“欲购从速”等措辞。（3）购物须知告诉顾客一些与购物相关的信息，包括如何发货、如何退换货以及有哪些售后服务等。4.商品详情页的设计流程

（1）确定风格根据店铺活动、商品特色、节假日来确定。（2）收集素材平时养成收集素材的习惯，以免寻找时浪费大量的时间和精力。平时遇到好的图片就保存，作为寻找灵感时的参考。（3）页面布局合理地安排页面布局。（4）确定配色选择合适的配色方案，尽量避免深色系。（5）排版设计用Photoshop进行排版。（6）上传完成在商品发布页面上传。感谢聆听跨境电商美工实务学习目标能力目标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］使用“焦点图+商品推荐模板”，把相应的折扣商品与焦点图放到一