1、项目项目4 4任务4.2 店招视觉营销任务4.1 走进视觉营销实训4.1 宝贝主图、广告图和详情页 的设计实训4.2 无线端店铺的装修任务4.3 主图视觉营销任务4.4 广告图视觉营销 张华完成了店铺的创建和选品工作后，就将进入店铺的运营阶段。由于网店与实体店相比，其最大的劣势在于消费者不能现场看到和体验商品的实物，只能看到商品的图片或视频，而图片或视频的制作效果会直接影响消费者的购买欲望和购买行动。因此，张华接下来要重点学习网店的视觉营销。本项目将从店招、主图、广告图及详情页等方面介绍视觉营销的应用。情境导入项目4 网店视觉营销 知识目标（1）了解视觉营销的定义。（2）了解视觉营销的要素。（
2、3）掌握视觉营销的意义。技能目标（1）掌握店招视觉营销。（2）掌握主图视觉营销。（3）掌握广告图视觉营销。（4）掌握详情页视觉营销。学 习 目 标任务4.1走进视觉营销任务4.1 走进视觉营销任务4.1 走进视觉营销 视觉营销是指利用色彩、图像、文字等造成的冲击力来吸引潜在客户的关注，由此增加商品和网站的吸引力，从而达到营销制胜的效果。由于在网上买东西，看不到实物，只能靠色彩、图片、视频和文字来传达信息，所以好的视觉形象能够带来更多的流量和销量。下面来看两家店铺的首页，如图4-1和图4-2所示。图4-1无论是店招设计、分类设置、促销区设计，还是颜色搭配都次于图4-2。从这两家店铺后台的数据来看
3、，图4-1店铺的流量和成交量也远远低于图4-2的店铺。4.1.1 视觉营销的定义任务4.1 走进视觉营销4.1.1 视觉营销的定义图4-1店铺首页1任务4.1 走进视觉营销4.1.1 视觉营销的定义图4-2店铺首页2任务4.1 走进视觉营销4.1.2 视觉营销的要素 1.色彩 我们在看一家店铺时，首先吸引我们的是店铺色彩布局和搭配，其次才是店铺细节和文字。每种颜色有不同的含义，不同时间、不同地点、不同场合的用色要求不一样。还有一些颜色的搭配。色彩搭配还要应季，如春天和夏天用绿色会多一些，冬季用红色或白色会比较多一些，等等。视觉营销重点要处理好色彩、风格及图像的应用，通过巧妙地处理这些要素，吸引
4、买家的关注，最终达到营销制胜的目的。任务4.1 走进视觉营销（1）色彩的基本分类。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。（2）色彩的属性。色彩的属性包括色彩的色相、饱和度和明度。任何一种彩色都具有这三种属性。色相是色彩的相貌，根据波长的不同，产生不同的色彩，如红色、绿色、蓝色等；饱和度指色彩的鲜艳度；明度指色彩的亮度，也就是色彩的深浅。在Photoshop中可以调整色彩的色相、饱和度和明度，如图4-3所示。4.1.2 视觉营销的要素任务4.1 走进视觉营销4.1.2 视觉营销的要素图4-3色相、饱和度和明度的调整任务4.1
5、走进视觉营销 风格是给人的一种整体的形象和感觉，如何把握好店铺的整体风格非常关键。一般店铺在设计风格时可以考虑以下几个方面：4.1.2 视觉营销的要素 2.风格（1）（2）突出店铺的标准色彩。标准色彩代表公司的企业文化、商品特色等，所以在选择标准上一定要慎重，而且主色调不能超过三种。统一的外观，界面友好，易使用。统一的外观是指店铺的每个页面外观都是一样的，如整个店铺只有一个店招、一个导航菜单、主体风格统一等；界面友好是指店铺的配色不要让浏览者看久了就觉得很累；易使用是指店铺的分类一定要方便买家找到他想要的东西。任务4.1 走进视觉营销4.1.2 视觉营销的要素（3）突出Logo。尽可能将店铺L
6、ogo放在每个页面上醒目的位置，一般是页面的左上角。相同类型的图像采用相同的效果。相同类型的图像采用相同的效果非常重要，如导航菜单的效果要统一、每一种宝贝分类的图片效果要统一等。这样会在无形中暗示浏览者，这是同一类型的商品。（4）任务4.1 走进视觉营销 下面来看一个店铺。这个店铺的标准色调突出红、白色，Logo放在页面的左上角，导航菜单效果统一，界面简洁、大方，这些都符合店铺设计风格的要求，如图4-4所示。4.1.2 视觉营销的要素图4-4店铺设计风格任务4.1 走进视觉营销 图像在整个店铺中占有重要的地位，如店招、主图、广告图、详情页等位置的内容都是以图像的形式来展示的。后续任务会对这些内
7、容进行详细介绍。4.1.2 视觉营销的要素 3.图像任务4.2 店招视觉营销任务4.2 店招视觉营销4.2.1 店招的含义与意义 店招是店铺的招牌，店招一般位于网店的最上方，店招的设计对店铺的整体形象和运营有着重要的影响。店招要有明确的品牌定位和商品定位，整个网店只有一个店招，它在每个页面上都会显示，因此，如何设计好店招对于卖家来说非常重要。店招设计需要注意以下三个方面：（1）店招有固定、统一的尺寸（2）店招的设计需要向买家传达自己的卖点（3）店招的设计应新颖、独特任务4.2 店招视觉营销4.2.2 店招的特点与设计好的店招应具有以下特点：（1）店招上的文字和背景对比鲜明。（3）品牌和商品两个
8、信息的传达都要明确，让人容易记住店铺的名称和商品。（2）店铺名称使用粗体字。因为粗体字不仅给人以安全、厚重、可信赖的感觉，而且更加醒目。（4）店招的主体风格与整个店铺的风格统一。1.店招的特点任务4.2 店招视觉营销4.2.2 店招的特点与设计白蓝味中味和百草味的店招，如图4-5所示。图4-5店铺店招 图4-5中的两个店招，无论是在字体设计、品牌信息和商品信息传达方面，还是在整体风格方面，都符合一个好的店招的要求。任务4.2 店招视觉营销4.2.2 店招的特点与设计 根据任务4.1所学的视觉营销的知识，分别设计一个PC端的店招和手机端的店招并上传到店铺中。2.店招的设计任务4.2 店招视觉营销
9、4.2.2 店招的特点与设计 打开Photoshop CS3软件，执行“文件”“新建”命令，在弹出的“新建”对话框中进行设置 如图4-6所示。步骤101（1）PC端店招的设计图4-6新建文件任务4.1 走进视觉营销4.2.2 店招的特点与设计（1）PC端店招的设计执行“编辑”“填充”命令，将白色的背景填充为红色，如图4-7所示。步骤202图4-7填充背景任务4.2 店招视觉营销4.2.2 店招的特点与设计设计店铺名称、Logo及主营商品的图片，如图4-8所示。步骤303（1）PC端店招的设计图4-8店铺名称、Logo及主营商品图片的设计任务4.2 店招视觉营销4.2.2 店招的特点与设计（1）
10、PC端店招的设计上传已经设计好的店招。进入淘宝网卖家中心，单击“店铺管理”下的“店铺装修”，在打开的“招牌内容”选项卡中上传店招，如图4-9所示。步骤404图4-9上传店招任务4.2 店招视觉营销4.2.2 店招的特点与设计手机端店招的设计原理和PC端是一样的，只不过手机端店招的尺寸是750254像素，按照这个像素设计就可以上传了，如图4-10所示。图4-10手机端店招设计（2）手机端店招的设计。任务4.3 主图视觉营销任务4.3 主图视觉营销主图是宝贝展示的首要窗口，它不仅出现在详情页的第一屏、店铺的首页、列表页，而且在淘宝的搜索页中也可以看到。主图传达了宝贝的款式、颜色、质地、品牌等很多重
11、要信息，买家通过这些信息来决定是否浏览该宝贝。因此，主图的好坏直接影响到买家的关注度和点击量。主图是流量来源的基本入口。主图在制作时一般要求背景色单一、画面清晰、品牌突出、主体商品突出、五张主图完整呈现。任务4.3 主图视觉营销 下面以白底主图为例介绍一下主图的设计步骤。白底主图在淘宝网中的应用比较多。步骤1：打开Photoshop软件，执行“文件”“新建”命令，在弹出的“新建”对话框中设置“宽度”为800像素，“高度”为800像素，“分辨率”为72像素/英寸，“颜色模式”为RGB颜色，设置完成后单击“确定”按钮，如图4-11所示。步骤2：打开素材，使用抽出的方法（执行“滤镜”“抽出”命令）圈
12、选素材，然后单击左侧的填充工具，在圈选的图形中单击一下，然后单击“确定”按钮，即可将图形抠出来，如图4-12所示。12任务4.3 主图视觉营销图4-11新建白底主图文件任务4.3 主图视觉营销图4-12抠出图形任务4.3 主图视觉营销步骤3：将抠好的图片放到主图文件中。首先按Ctrl+A组合键全选素材图，然后按Ctrl+C组合键复制素材图，再按Ctrl+Tab组合键切换到主图文件中，最后按Ctrl+V组合键将素材图粘贴到主图文件中，如图4-13所示。43步骤4：复制一个商品图片，给商品图片加一个倒影。首先按Ctrl+A组合键全选素材，然后按Ctrl+C复制一个图层，再按Ctrl+V组合键粘贴图
13、层，最后按Ctrl+T组合键自由变换鼠标，右击，在弹出的快捷菜单中选择“垂直翻转”命令，然后拖动图片到相应的位置，如图4-14所示。任务4.3 主图视觉营销图4-13将抠好的图片放到主图文件中 图4-14给商品图片添加倒影任务4.3 主图视觉营销步骤5：给主图添加Logo。添加Logo一方面可以起到宣传和促销的作用，另一方面可以防止其他人盗用图片。可以事先将设计好的Logo直接拖到主图中，完成Logo的添加，如图4-15所示。步骤6：在主图上添加边框和水印，如图4-16所示。具体操作流程是首先在新的背景图层上双击，弹出“图层样式”对话框，将“大小”设为10，“位置”设为内部，“颜色”设为咖啡色
14、，单击“确定”按钮。最后在主图上打上水印文字，并调整文字的透明度。56任务4.3 主图视觉营销图4-15Logo的添加 图4-16在主图上添加边框和水印任务4.4 广告图视觉营销任务4.4 广告图视觉营销 凡是为了满足某种特定的需求，公开而广泛地向公众传递信息的图片，都可称为广告图。广告图是为商家赢取流量从而转化为交易的媒介，因此非常重要。淘宝网上的广告图主要有直通车广告图、钻石展位广告图和活动广告图等。不同的广告图具有色彩搭配层次分明、主体清晰明确、卖点突出、排版布局适合客户浏览习惯、商品及价格突出等共同点。任务4.4 广告图视觉营销（1）直通车广告图。直通车广告图主要分布在淘宝站内和站外，
15、站内直通车广告图主要分布在搜索页的右侧和下侧，如图4-17所示。直通车广告图的设计水平直接影响店铺的点击率和转化率。（3）活动广告图。活动广告图主要是参加各类活动需要制作的广告图，它对于图片的尺寸、背景和创意都有一定的要求，因此在报名参加活动时要仔细研读活动对于图片的要求，严格按照活动的要求设计图片，这样才能保证活动通过的概率。聚划算活动广告图如图4-19所示。（2）钻石展位广告图。钻石展位广告图主要分布在淘宝网首页的焦点图、右侧的banner图、淘宝垂直频道等位置，如图4-18所示。钻石展位广告图的设计水平会直接影响店铺的流量和转化率。1.广告图的类型任务4.4 广告图视觉营销图4-17直通
16、车广告位图（1）直通车广告图任务4.4 广告图视觉营销图4-18钻石展位广告图（2）钻石展位广告图任务4.4 广告图视觉营销图4-19聚划算活动广告图（3）活动广告图任务4.4 广告图视觉营销132表现形式美观目标人群准确在处理广告图的色彩和构图方式时需要一定的技巧。不同的色彩会产生不同的色彩情感，所以广告图要根据所表达的主题来选择不同的主色调，同时主色调应与产品包装的颜色保持统一，如图4-22所示。每个广告图都要有一个明确的主题，在主题确定好后，所有的元素都要围绕这个主题展开。展示鞋透气这一特点，如图4-20所示。不同目标人群的审美标准和兴趣爱好不同，所以在设计广告图时应清楚地认识到不同商品
17、所针对的不同购买人群。如图4-21所示的商品的目标人群主要针对身材较胖的女性。推广主题清晰2.广告图的设计原则任务4.4 广告图视觉营销图4-20推广主题清晰的广告图（1）推广清晰原则（2）目标人群准确图4-21目标人群准确的广告图任务4.4 广告图视觉营销图4-22淘宝焦点图（3）表现形式美观任务4.4 广告图视觉营销 广告图的构图方式也是衡量广告图质量的一个重要因素。目前，广告图的构图方式主要有图片文案两边分构图法、3/7开构图法、左-右-左构图法、斜切式构图法和极端构图法。图片文案两边分构图法是最便捷也是最不容易犯错的构图方法，即将图片和文字各放一边，但在文案排版上一定要突出中心点，如图
18、4-23所示。任务4.4 广告图视觉营销图4-23图片文案两边分构图法任务4.4 广告图视觉营销3/7开构图法是将图片和文字左右3/7开，这是令人感觉舒服的视觉比例，且画面整体给人以很强的层次感和节奏感，如图4-24所示。图4-24 3/7开构图法任务4.4 广告图视觉营销左-右-左构图法是将图片以不同大小和位置进行摆放，形成空间感、层次感和节奏感，如图4-25所示。图4-25 左-右-左构图法任务4.4 广告图视觉营销 斜切式构图法能让整个画面充满非常强的张力，让主体和需要表达的核心内容得到更加突出的展示，如图4-26所示。图4-26斜切式构图法任务4.4 广告图视觉营销极端构图法是将文字或
19、图形中的某一个元素极端放大，使整个画面的走向围绕此元素展开，如图4-27所示。图4-27极端构图法任务4.5 详情页视觉营销任务4.5 详情页视觉营销4.5.1 宝贝详情页的定义与作用宝贝详情页是一个向客户详细展示宝贝细节与优势的地方。客户是否喜欢宝贝、是否愿意购买宝贝都必须要仔细查看宝贝详情页，99%的订单也都是在查看过宝贝详情页后生成的。宝贝详情页就像一页详细的产品说明书，客户通过浏览详情页就可以了解产品的相关信息。除此之外，宝贝详情页还可以说是产品的形象展示，通过宝贝详情页能够直观看到产品的整体形象、细节、构造等。一个好的宝贝描述胜过一位优秀的销售专员，因此，宝贝详情页要能够引起客户的兴
20、趣和购买欲望，并能关联展示其他商品；同时，宝贝详情页也是自然流量的入口，是促进客户购买的“圣地”，是提高客单价的“战场”。任务4.5 详情页视觉营销4.5.2 宝贝详情页的尺寸和结构 宝贝详情页的一般宽度是750像素，对高度没有限制，但并不是越长越好。宝贝详情页的结构如图4-28所示。图4-28宝贝详情页的结构任务4.5 详情页视觉营销4.5.3 宝贝详情页的设计流程011.确定色彩和字体022.确定框架结构033.设计模块044.统一页面效果055.审核和上传发布宝贝详情页的设计流程：确定色彩和字体确定框架结构设计模块统一页面效果审核和上传发布。任务4.5 详情页视觉营销4.5.4 宝贝详情
21、页的内容 宝贝详情页的内容没有固定模块，但也不能杂乱无章，通过观察和总结众多店铺的宝贝详情页的设计内容，可以发现大部分店铺的宝贝详情页主要包括基本信息、商品展示、细节展示、卖点提炼、商品对比、核心竞争力、情感营销、卖家承诺、企业文化、实力展示、生产流程、包装展示、QA问答、关联销售等模块。任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容1基本信息基本信息是宝贝详情页常用的模块之一，主要内容包括商品的属性、尺寸等信息，如图4-29所示。图4-29基本信息任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容2商品展示从各个角度展示商品，配合模特来展示商品和商品的使用环境等，如图4-30所示
22、。图4-30商品展示任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容3细节展示展示买家最关注的商品的细节，突出商品的优势，如图4-31所示。图4-31细节展示任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容4卖点提炼深度挖掘商品的卖点，提升商品的价值和买家的购买欲望，如图4-32所示。图4-32 卖点提炼任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容5商品对比与同类商品进行对比，突出商品的优势，加深买家对商品的认同，如图4-33所示。图4-33商品对比 任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容6核心竞争力突出与同类商品的差异化优势，提炼商品的核心竞争力，给买家
23、一个非常好的购买理由，如图4-34所示。图4-34核心竞争力任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容7情感营销通过情感营销博得买家的情感共鸣，加强其购买欲望。情感营销可以以友情、亲情、爱情和关怀为主题，如图4-35所示。图4-35情感营销示例任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容8卖家承诺展示卖家或者品牌做出的承诺，从而打消买家的购买疑虑，促使买家下单，如图4-36所示。图4-36卖家承诺示例任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容9企业文化通过企业文化将企业的服务意识、品牌愿景等信息传达给买家，借此树立品牌的正面形象，让买家认同品牌、认同店铺，如图
24、4-37所示。图4-37企业文化展示任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容实力展示卖家和品牌的实力展示可以进一步提升商品的价值，增强买家的购买欲望，如图4-38所示。图4-38实力展示10任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容11生产流程生产流程展示商品半公开性的生产过程，可以加强买家对商品的信任，如图4-39所示。图4-39生产流程展示任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容12包装展示展示商品的精美外包装、快递包裹的包装过程等信息，如图4-40所示。图4-40包装展示任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容13Q&A问答将商品的常
25、见问题以问答的形式展现，可以减轻客服的压力，并且能打消买家的购物顾虑，如图4-41所示。图4-41 Q&A问答任务4.5 详情页视觉营销4.5.4 宝贝详情页的内容14关联销售通过关联其他商品，让买家有更多的选择，以提升客单价，如图4-42所示。图4-42关联销售实训4.1 宝贝主图、广告图和详情页的设计实训4.1 宝贝主图、广告图和详情页的设计实训目的 通过项目实训，掌握宝贝主图、广告图和详情页的设计方法与技巧。实训内容 按小组选择一件商品，利用所学的Photoshop CS3软件操作的基础知识完成5张主图、2张广告图、1个详情页的制作，并将制作流程和设计技巧填入表中，见表4-1。将设计好的
26、图片保存到相应的文件夹中。实训4.1 宝贝主图、广告图和详情页的设计表4-1 制作流程和设计技巧实训提示 分小组完成宝贝主图、广告图和详情页的设计，按小组选择一种商品，将图片制作流程与设计技巧填入表4-1中，将设计好的图片保存到相应的文件夹中，并在班上进行讨论。实训4.2 无线端店铺的装修实训4.2 无线端店铺的装修实训目的 通过项目实训，掌握无线端店铺装修的流程与操作技巧。实训内容 按小组选择一个店铺，完成无线端店铺的装修（主要包括导航的设计、店招的设计、店铺产品分类的设计及焦点图的设计等），并将装修流程和装修技巧填入表中，见表4-2。实训4.2 无线端店铺的装修表4-2 无线端店铺的装修流程和装修技巧实训提示 分小组完成无线端店铺的装修，按小组选择一个店铺，将店铺的装修流程和装修技巧填入表4-2中，店铺装修好后分小组在班上进行展示和讨论。THANK YOUTHANK YOU
