网店美工与视觉设计(第七、八章)

网店美工与视觉设计第七章网店营销推广图的制作学习目标知识目标熟悉并掌握直通车图的设计要点；熟悉并掌握聚划算图的设计要点；熟悉并掌握智能钻展图的设计要点。能力目标能够设计制作出钻展图；能够设计制作出直通车图片以及聚划算主图。7.1聚划算主图设计制作聚划算是阿里巴巴集团旗下的团购网站，是淘宝天猫内容优质流量的整合。对于卖家来说，如果聚划算用的好，不仅可以为店铺与商品带来丰富的流量，更能帮助打造爆款，提升店铺销售额。因此，聚划算主图的设计就变得尤为重要，只有设计出有吸引力的聚划算主图，才能吸引消费者点击进入产品详情页。7.1.1聚划算广告图的设计要点商品图片：商家上传的产品图片中不得出现任何形式的自制标签以及产品特点、营销利益点等文字信息。格式规范：LOGO统一放置在画面左上角，不得添加底色，显示大小最宽不超过

180像素，最高不超过120像素。LOGO最左侧及最上侧均离产品图片左侧及上侧20像素。图片背景：图片背景只选择真实拍摄的实景或者单色背景其中一种。商品构图：注意不要使用画中画，商品图片需要展示多个主体（模特、商品）时，建议保持同类主体（模特、商品）之间比例一致且背景统一。7.1.2聚划算广告图设计案例7.2直通车推广图设计制作淘宝直通车是淘宝网为卖家量身定制的一种推广方式，按点击付费的效果营销工具，可以精准推广商品，利用直通车推广，在给宝贝带来曝光量的同时，精准的搜索匹配也

给宝贝带来了精准的潜在买家。对于直通车而言，最最重要的就是点击率这个核心维度。7.2.1直通车推广图的设计要点设计定位，思考为先亮出商品，重点展示构图合理，排版统一7.2.2直通车广告图设计案例7.3智展图设计制作智能钻展图是淘宝为卖家提供的一种全网推广工具，也称为钻石展位图或钻展图、智钻图，主要依靠图片创意吸引买家点击，从而获得巨大流量。一张好的智钻图对店铺尤为重要。钻石展位是按照流量竞价售卖的一种广告形式，其展位图按出价从高到低的顺序进行展现。7.3.1智展图的设计要点主题突出：推广展示的过程就像一次陈述，必须要有一个明确的主题，所有的元素都必须围绕这个主题展开。目标明确：在智钻图的设计制作中，电商美工首先需要明确自己的营销目标，然后针对目标进行素材的选择和设计，这样才能保证广告取得较高的点击率与转

化率。形式美观：美好的东西总是令人无法抗拒的，形式美观主要是指从字体、色彩、构图、标签以及营造的气氛等方面去综合衡量画面质量。7.3.2智钻广告图设计案例本章小结本章介绍了聚划算主图、直通车主图、钻展图的设计与制作，以上三种图片出现的位置不同，制作规范也不同，但在设计与制作的过程中都需要做到图片风格一致、主题突出、形式美观、构图合理。实训活动实训内容：下载本章实训素材，任选其中一张或几张素材，分别设计出聚划算主图、直通车主图和钻石展位图。实训目的：练习聚划算主图、直通车主图和钻石展位图的视觉设计与制作。实训要求：根据给出的素材，进行产品定位，进而确定整体风格和产品特色等内容；提炼不同图片类型的主题，并进行构图；设计并制作聚划算主图、直通车主图和钻石展位图。网店美工与视觉设计第八章移动端网店的视觉设计与装修学习目标知识目标了解移动端店铺页面的框架结构；了解移动端店铺对图片发布的尺寸要求；掌握移动端网店模块的编辑与装修方法。能力目标能够完成移动端模块设计和装修；能够完成移动端页面装修设计。8.1移动端网店装修的基础知识在当今移动互联网时代，随着移动设备的普及和发展，越来越多的网民喜欢用手机上网购物，网络购物向移动端转移的趋势进一步加强。无线端无论是在网店流量还是成交额方面都占据着非常重要的位置，因此，对于电商企业来说，移动端店铺视觉设计成为重点关注对象之一。8.1.1移动端店铺的设计要点对内容整体把控：移动端网店空间有限，这就要求页面内容要精简，并且突出重点。注意图片大小：图片过大，一会浪费顾客流量；另一方面，过大的图片会延长页面加载时间，进而影响到客户体验，导致客户流失。从买家购物习惯出发：图片的清晰度和大小均要适应手机的尺寸及分辨率等特征，使得商品能完美的体现。充分利用模块展现：移动端属于窄屏展示，要充分利用移动端的主图展示位，充分利用主图体现宝贝的细节、特色、品质等。8.1.2移动端与计算机端店铺的区别尺寸不同：移动端显示的宽度为750像素，而电脑端的显示宽度一般为950像素，若尺寸不适合会造成界面混乱。布局不同：相比于电脑端，移动端端更注重浏览体验，省略了边角的活动模块，以及详细的广告文案。内容不同：电脑端会通过较多文字说明产品的卖点、促销信息、优惠信息等，而无线端文字则更为精简。分类不同：无线端的分类模块比较简洁、清晰，使用了分类图标，而电脑端的分类信息更详细。8.2移动端网店首页的视觉设计在设计移动端店铺首页前，需要先设计店铺首页的

整体框架结构，再单独调整各个模块内容。一般地，常

见的店铺页面布局包括店招、导航栏、焦点图、促销区、商品分类、商品展示区、店铺尾部等，布局模板如图所

示。8.2.1店铺店招设计移动端店招与PC端不同，店招背景图片呈现渐变显示，在设计时注意整体效果，不能影响系统默认的店名等信息的显示，一般情况下选择一张符合店铺风格的简单图片即可，店招中不需要包括文字等其他信息。根据店铺整体设计风格，选择一张没有文字的背景图片，店招尺寸为750像素X580像素，如图所示即为蜂蜜网店的店招背景。8.2.2焦点图设计焦点图也称海报图，通常放在移动端的店招下方，一般用于店铺活动宣传、

店铺产品宣传、店铺形象宣传等，具有很好的引流效果。在设计无线端焦点图时，由于手机屏幕尺寸较小，因此在构图方式和文本设计方面都要求简洁。尺寸为750像素，高度200-950像素之间。8.2.3优惠券设计优惠券是用于吸引消费者的一种重要的促销手段，通常会被放在店铺首页的开端位置，可以第一时间引起买家的注意。优惠券的尺寸为248像素X

146像素，要求重点醒目、清晰、互动性强，具有分隔空间、活跃页面的效果，可以直接使用优惠券模块制作，也可以使用多图模块、左文右图等模块进行制作。8.2.4商品分类导航设计通常情况下，在移动端店铺首页中，轮播图片与优惠券板块后面是分类导航板块。在设计这个板块时，注意控制好显示尺寸与比例，使其能够清晰与完整地展示在买家面前，起到快速导航作用。8.2.5商品分类展示设计商品分类展示模块用于对店铺的商品进行展示，在注意布局的同时应尽量将主营的宝贝全部覆盖，展示时，应将主推商品、热销商品进行重点突出，可通过色相对比吸引用户眼球，或添加相应元素引导消费者。8.3移动端网店详情页的视觉设计移动端店铺的详情页与PC端店铺的商品详情页有着同样的设计思路，在设计移动端商品详情页时需要控制好文字的大小、页面长度等，以适应移动端的页面特点。本节将介绍移动端店铺详情页的设计方法与技巧。8.3.1移动端详情页特征尺寸更小：宽度一般为620像素，一屏高度不超过960像素。

卖点更加精炼：无线终端详情页内的商品卖点应该更加精炼。场景更加丰富：无线终端详情页中添加多种场景可以使其更加贴近生活，使买家增加对商品的了解。页面切换不便：无线终端详情页中的图片以及图片上的引导文字一定要清晰并且具有吸引力，能够快速打动买家购买。页面文件的容量更小：无线终端的详情页应单独设计，使页面文件更小。8.3.2移动端详情页设计要点图片设计要点：图片的大小要适中，过大的图片容易出现加载缓慢的问题，影响买家购物体验，应在保证图片清晰度的同时尽量压缩图片；细节图不能太小，尽量保证清晰度，让买家能够看见细节详情，产生购买欲望。文字设计要点：图片中的重点文案信息，如商品信息和商品内容描述文字等都不能太小，否则容易导致诉求不清。商品卖点设计：想要商品卖点突出，就要合理控制页面展示的信息量，省略一些无关紧要的内容，提升买家购物体验。8.3.3移动端详情页设计无线端详情页的设计与电脑端类似，都可分为焦点图、信息展示图、卖点图等内容，但其文字较少，图片展现较多，下面将继续根据详情页的制作方法对无线端详情页进行制作，使效果更加符合无线端的需求。本章小结本章学习了无线端网店装修的设计思路和技巧。随着WiFi、5G网络、智能手机的普及，无线端的店铺流量早已远远超过pc端，因此做好无线端的店铺装修至关重要，无线端网店的首页、商品详情页都会直接影响店铺的转化