电子商务视觉设计教案

《电子商务视觉设计》电子教案第1章初识电商视觉设计教学内容一、视觉设计的定义二、电商视觉设计前的准备三、电商视觉设计黄金构图法教学要求【知识目标】.了解视觉设计的定义及其类型。.了解电商视觉设计前的准备工作。.掌握电商视觉设计黄金构图法。【技能目标】.熟悉电商视觉设计前的准备工作。.掌握并运用电商视觉设计黄金构图法。教学重点熟练掌握并运用电商视觉设计黄金构图法教学难点熟练运用电商视觉设计黄金构图法教学方法讲授法、案例法课时数6课时教学内容第一节什么是视觉设计一、视觉识别设计视觉识别设计来源于企业形象识别系统，简称为CIS。企业形象识别系统一般分为三个万面，即企业的理念识力别 MindIdentity（MI），仃为识别BehaviorIdentity（31）和视觉识别VisualIdentity（VI）。电子商务视觉设计》电子教案视觉识别系统规范手册就是用来规范企业形象的图书，内容主要分为基本设计要素和应用设计要素两个部分。二、视觉传达设计视觉传达设计是以视觉媒介为载体，以文字、图形和色彩作为创作要素，利用视觉形象传达特定的信息给受众，从而使被传达对象产生影响的过程。视觉传达的作用是让人与人之间利用“看”的形式进行交流，是通过视觉语言进行表达传播的方式。第二节电商视觉设计前的准备一、网店的视觉定位视觉定位，就像人的风格定位一样。不同的产品对应不同的视觉定位，不同的消费群体有着不同的视觉偏好，关键是要将产品的定位和卖家的视觉偏好进行整合，使店铺在风格上能够呈现出一种整体的效果。（一）营销型网店的视觉定位原则在于营造促销氛围，主要体现在通过对比强烈的颜色突出显示打折、包邮、半价等优惠活动的字眼。（二）品牌型网店的视觉定位原则是突出品牌优势，整体设计风格偏向于简洁、干净，重点突出品牌Logo的形象代言等元素。（三）服务关系型网店的视觉定位原则是包装服务形象。二、明确视觉规范的作用制定视觉规范有以下几个方面的意义：统一识别：视觉规范可以确保网店在整体风格、售前售后服务和产品包装形象等方面都保持整体风格的一贯性，既有利于买家识别和区分店铺，也可以避免买家在浏览时出现理解困难，甚至是理解错误的现象。节约资源：除了活动海报等个性模块之外，其他的页面和模块参照规范进行设计可以极大地减少设计时间，从而达到节约资源的目的。重复利用：设计相同属性的模块或页面时，执行视觉规范有利于减少无关的信息，方便买家的阅读和信息传递。同时，视觉规范也有利于美工之间的协调工作。标准化的视觉规范不但可以节约设计时间，还可以避免出错。第三节电商视觉设计黄金构图法

《电子商务视觉设计》电子教案一、对称切割构图法对称切割构图法的前提一般是将内容分为主次两部分，并且这两部分是对立关系的情况下，将整个页面一分为二，内容划分明确，也更加具有视觉冲击力，可以使画面具有平衡不失重的效果。二、组合切割构图法组合切割构图法是通过集中而有规律的排列，从整体上抓住人们的视觉，让整个页面设计更具有立体感。这种构图方式适合每个区块中的内容属于平级关系产品的展示，用这种组合的排列能够保持各种内容的关系，也能让布局更具创意三、整体场景构图法整体场景构图法专题内容不多，适用于促销、节日、活动等页面。整体场景构图法可以将目标客户快速地带入到页面氛围中，使宝贝信息更加精准、流畅。四、多重切割构图法多重切割构图法，其不规则的构图稳定而锐利，干净的排版易于识别，让单一的页面变得生动，复杂的页面变得时尚，能够避免画面出现生硬感，不宜产生审美疲劳。五、简单切割构图法使用简单的线条或图案整齐地分割整个页面，使画面瞬间变得有趣、生动起来，内容区域也能得到有效的划分。这类构图方式对内容没有过多的要求，可以随意安排，具体排版可根据内容来处理。六、流程构图法专题运用这种构图方式能够将步骤、关系、各个节点以及整体流向展示清楚，再配合图片进行展示，一个枯燥的流程瞬间变得个性十足，用户浏览起来简单而又明了，并且充满了趣味性。七、放射构图法放射构图法能展示出由一个中心点向四周扩散的效果，起到导向的作用，让整体页面呈现出立体与空间感，画面冲击力强，富有动感。需要注意的是，放射状的排版不太适合文字阅读，要注意文字排版的方式，在文字数量较少的情况下可以选择这种构图。八、物体轮廓构图法物体轮廓构图法主要适用于活动、节日或新品创意的专题，能让整体页面更加生动、形象、有趣。通过本章的学习，我们对电商视觉设计有了一个比较全面的认识，掌握了归纳与

提高什么是视觉设计，视觉设计的类型，电商视觉设计前的准备工作，以及电商视觉设计黄金构图法的种类及适用范围。归纳与

提高建议读者在对电商视觉设计进行准备活动时注意几点：电商视觉设计近年来受到了国内大企业和知名品牌的高度重视，这在以淘宝天猫为代表的电商平台中表现更为明显，因此可以得出一个信息，电商视觉设计在电商平台占有越来越重要的地位。

《电子商务视觉设计》电子教案第2章电商网站视觉配色设计教学内容一、网店页面的配色方案二、网店页面的配色误区三、网店的整体配色案例教学要求【知识目标】.了解色搭原则七要素。.了解色彩联觉现象的定义。.了解网店风格的几大形成要素。.了解网店页面常见的配色误区。【技能目标】.了解掌握网店页面的配色方案。.熟悉网店风格的几大形成要素。.了解网店页面常见的配色误区。教学重点.了解网店风格的几大形成要素。.了解网店页面常见的配色误区。教学难点.掌握网店页面的配色方案.掌握网店风格的几大形成要素。教学方法讲授法、案例法课时数6课时教学内容第一节一、色搭原（一）y-网店页面的配色方案W则七要素所进配色4

电子商务视觉设计》电子教案（二）对比配色（三）色调配色（四）近似配色（五）单重点配色（六）分隔式配色（七）夜配色二、色彩的联觉聚焦图片包船a邑或邑案也圈邑系邑包船a邑或邑案也圈邑系邑，i,"3.L：!-1. ----:小淞进、快乐::H: ■卜n°，打，世廉・噂十产'严诣“一.多.L4*;:.I。秋!==:无邪.疑升科技朴累，龙强11京全里川包的商工之三「，---..：7k,一二:二：¥田帚.「：忤■:L.山；点廿.「「，；.： -i.illJJ一世五：|；.品…JJ7Msi晚礼服■.北仲总•:一二五•''三、s?-：.丁1淳"I；='\-：c三、网店风格的形成要素（一）店铺的主要风格常见的店铺风格有简约清爽型、商业型、炫酷型、可爱型和特色型等。（二）产品的情绪产品情绪是指产品本身赋予色彩的情感。（三）活动的主题气氛店铺的主题气氛主要通过店铺的配色和装饰来烘托。（四）店铺的包装色彩在确定网店主题色调时，应该与商品特性相符合，或者与目标消费群体的特性相符合。（五）VI酉己色VI配色是指在网店配色中提取VI或包装中的主色彩，主要分为单色VI、双色VI和多色VI。第二节网店页面的配色误区一、色彩过多二、背景和文字对比不强烈三、过分强调色彩的刺激度第三节网店的整体配色案例一、店铺页面主色设计二、店铺页面辅色设计三、店铺商品配色

《电子商务视觉设计》电子教案归纳与提高通过本章的学习，我们对电商网站视觉配色设计有了一个比较全面的认识，掌握了色搭原则七要素、色彩联觉现象的定义、网店风格的几大形成要素以及网店页面常见的配色误区。建议读者在对电商网站视觉配色设计进行研究时注意几点：在电商广告作品中，和谐、对比鲜明的色彩搭配更能吸引消费者注意。大多数人对色彩画面的敏感度往往强于文字，同时色彩是通过人的印象或者联想对其心理产生影响的。因此，广告能否抓住受众的眼球，色彩的运用是关键的一步。第3章店铺标志视觉设计教学内容一、徽标的设计二、店标的设计教学要求【知识目标】.了解徽标的设计要领及设计标准。.了解店标的设计形态的类型。.了解店标设计的七大技巧。.熟练掌握店标的设计流程。【技能目标】.熟悉店标设计的七大技巧。.熟练掌握店标的设计流程。教学重点.熟悉店标设计的七大技巧。.熟悉店标的设计流程。教学难点.熟练运用店标设计的七大技巧。.重点掌握店标的设计流程。教学方法讲授法、案例法课时数6课时

《电子商务视觉设计》电子教案教学内容第一节标的设计《电子商务视觉设计》电子教案教学内容第一节标的设计一、徽标的设计要领（一）便于识别，以简为美（二）徽标要与客户或产品有关（三）徽标设计要追求独特，增强记忆（四）徽标设计要便于运用二、徽标的设计标准在规定了徽标设计的标准比例，也就是徽标中图形与文字之间的间距比例、文字与文字之间的间距比例等关系，以及徽标的字体与标准用色后，就不能随意更改。第二节店标的设计一、店标的设计形态（一）中文文字型店标（二）非中文型店标（三）组合型店标（四）图形型店标（五）图文结合型店标二、店标的设计技巧（一）设计要有造型（二）设计要有领导性标志的领导位置是店铺经营理念和经营活动的集中表现，其贯穿了整个店铺的所有相关活动中，不仅具有权威性，还是其他视觉要素构成的核心。（三）标志设计的统一性标志的形象设计需要与该店铺的经营理念、文化特色，以及经营的内容和特点相统一只有这样才能获得顾客的一致认同。（四）标志的识别性通过整体规划和设计的视觉符号必须具有独特的个性和强烈的冲击力，才能具有较高的竞争力。（五）标志的时代性有必要对现有的标志形象进行改进，才能使网店标志更加与时俱进，具有鲜明的时代特征。（六）标志的系统性（七）标志的延伸性三、不同行业的店标设计（一）表现柔美型针对女性的行业和类目，多数要表现出女性的柔美与娇媚，体现出女人千娇百媚的味

《电子商务视觉设计》电子教案道，（二）表现阳刚型针对男性的行业和类目，要重点表现男性的阳刚之美，（三）表现可爱型针对年轻女孩和婴幼儿的行业和类目，要突出可爱、卖萌的感觉四、店标的设计流程略归纳与提高通过本章的学习，我们对店铺标志视觉设计有了一个比较全面的认识，掌握了徽标的设计要领及标准，店标的设计形态、设计技巧以及设计流程。建议读者在对店铺标志视觉设计进行研究时注意几点：企业与品牌的标志称为徽标，网店的标志就是店标。两种标志都是店铺的形象代表，主要起到识别和推广的作用。优秀的店铺标志设计不仅能对网店起到美化作用，还可以强化客户对网店的记忆。同时，高大上的徽标和店标也是网店品牌和实力的一种体现。第4章店铺首页视觉设计教学内容一、首页视觉水平的四大指标二、店招视觉设计三、首焦轮播区视觉设计四、商品陈列区视觉设计五、化妆品店铺首页视觉设计案例教学要求【知识目标】.了解首页视觉水平的四大指标。.熟悉店招视觉设计的规范及技巧。.掌握首焦轮播区视觉设计的技巧。.了解商品陈列区视觉设计。.掌握商品陈列区的布局技巧。【技能目标】1.掌握店招的设计规范及技巧。电子商务视觉设计》电子教案2.熟练掌握首焦轮播区的设计技巧。教学重点.掌握店招的设计规范及技巧。.掌握首焦轮播区的设计技巧。电子商务视觉设计》电子教案2.熟练掌握首焦轮播区的设计技巧。教学重点.掌握店招的设计规范及技巧。.掌握首焦轮播区的设计技巧。1.熟悉店招的设计规范及技巧。教学难点2.熟练运用首焦轮播区的设计技巧。教学方法讲授法、案例法课时数6教学方法讲授法、案例法课时数6课时教学内容第一节首页视觉水平的四大指标一、首页跳失率首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问次数占该人口总访问次数的比例。以淘宝为例，买家进入店铺的店铺首页渠道有很多，大致可以分为以下四种渠道，如下图所示。淘宝首页搜索店铺苜收藏夹中进入店铺苜面口经购买商品中进入店

铺首页

搜索关谖词进入店铺自

页二、首页点击率首页点击率是宝贝在首页展现后的被点击比率，即：首页点击率首页点击量：首页展现量）。通过首页点击率可以看出店铺推广的宝贝是否吸引人，首页点击率越高，说明宝贝越吸引买家。有了展现就会产生点击，有了点击就会有流量。三、首页人均点击次数首页人均点击次数，指在一段时间内人均点击了多少次。首页人均点击次数可以用来测试用户粘度，如果首页的客户体验做得很差，让访客进入首页后不知所措，找不到自己《电子商务视觉设计》电子教案想要的产品，访客自然就会离开。四、首页平均停留时间首页平均停留时间二访店铺首页的所有访客总的停留时长：访客数（单位：秒），多天的平均停留时间为各天人均停留时长的日均值。第二节店招视觉设计一、店招视觉设计规范店招的首要功能就是要清晰地展示店铺名称。在店招上可以添加品牌宣传语、近期的打折促销信息、收藏或移动端二维码等元素，力求利用有限的空间传递出更多的信息，以刺激消费者的购买欲望。二、店铺名称的艺术化处理（一）用不同字体和字号的组合营造艺术感（二）添加特效突出特殊性和醒目度（三）使用修饰元素提升观赏性三、图层样式的应用图层样式是图像处理与网页制作中的常用功能之一。随着店铺装修的个性化、精致化成为一种潮流，导航条的设计也越来越受到电商视觉设计者的关注。第三节首焦轮播区视觉设计一、设计聚焦消费者视线通过添加图层样式，不仅可以将原本单一的色彩变得绚丽，为设计元素添加内阴影、外发光等特殊的光泽效果，还可以营造立体浮雕、图案纹理等特殊效果。首焦位置是消费者进入店铺后第一时间看到的内容，如果这部分内容能够首先抓住消费者的眼球，就会大大提高其继续浏览店铺页面的可能性。二、构建设计图三要素店铺首页中的首焦轮播区基本上都是由三个要素组成的，即完整、精致的商品形象，唯美、绚丽的背景，以及精心编排的广告文字。首焦轮播图的背景图像一定要与商品的形象保持一致的风格，或者能够烘托出某种特定的气氛。首焦轮播图中的商品形象是商品和消费者的“初次见面”，直接关系到转化率的高低。三、溶图的应用规范溶图是用两张或两张以上的图片拼合起来的一张图片，讲究构图严谨，细节处理得当。制作精良的溶图配上文字可以是一幅优美的艺术作品，第四节商品陈列区视觉设计一、营造视觉动线在进行商品展示图片的排列设计时，要首先使用整洁的排列让消费者获得轻松感，在此基础上还要注意图片不宜过多，横排图片最好不要超过五张，因为过多的图片容易让消10

《电子商务视觉设计》电子教案费者感到浏览压力并产生疲倦感。二、商品布局艺术化（一）折线型布局折线型布局就是将商品图片按照错位的方式进行排列。（二）随意型布局随意型布局就是将商品图片随意地放置在页面中，但是，这种随意往往需要营造出一种特定的氛围和感觉，让这些商品之间产生一种联系，否则画面中的商品会由于缺乏联系而显得突儿。第五节化妆品店铺首页视觉设计案例略归纳与提高通过本章的学习，我们对店铺首页视觉设计有了一个比较全面的认识，掌握了首页视觉水平的四大指标、店招视觉设计、首焦轮播区视觉设计以及商品陈列区视觉设计等内容。建议读者在对店铺首页视觉设计进行准备活动时注意几点：店铺首页是电商店铺中的店面，也是品牌的门面，它通过视觉、氛围、商品和服务的综合感受，让消费者对品牌有初步的接触和了解。首页设计得是否有新意，直接关系到商品信息的转化率，因此在进行店铺首页视觉设计时，要尽可能地吸引消费者的注意力，提高商品的转化率。第5章商品详情页视觉设计教学内容一、商品主图设计二、商品细节展示区设计三、商品功效简介区设计四、女鞋商品详情页视觉设计案例教学要求【知识目标】.了解商品主图的设计规范。.熟悉商品主图的设计形式。.掌握商品细节展示区设计。.了解修饰兀素在设计中的重要性。【技能目标】1.熟悉商品主图的设计形式。11

《电子商务视觉设计》电子教案.掌握商品细节展示区设计技巧。.熟练掌握商品详情页各元素的设计方法。教学重点.掌握商品主图的设计形式。.掌握商品细节展示区设计技巧。.熟悉商品详情页各兀素的设计方法。教学难点.掌握并运用商品主图的设计形式。.熟练运用商品细节展示区设计技巧。.熟练运用商品功效简介区各元素的设计方法。教学方法讲授法、案例法课时数6课时教学内容第一节商品主图设计一、商品主图的设计规范显示在搜索结果页面中的商品主图尺寸为220像素*220像素，而显示在商品详情页左上角的商品主图尺寸为400像素*400像素。商品主图的文件大小要小于500KB,图片格式可以为JPG、PNG、GIF格式。当上传的商品主图尺寸大于700像素*700像素时，商品详情页会自动提供放大镜功能，即消费者将鼠标指针移到商品主图上时会显示局部放大效果，以便查看商品名细节。二、商品主图的设计形式（一）展示商品的全貌利用白色背景展示商品的全貌是商品主图最常规的设计形式，特别是天猫商城，大多数行业都要求至少有一张白底主图（二）场景化的设计商品主图另一种常规的设计形式是通过模特展示商品，或者根据商品的特点和用途搭建生活化、场景化的环境，这种设计形式的优点是可以让买家直观地感受商品的实际穿戴或使用效果，间接地向买家传达商品的适用人群和档次。（三）拼接式设计拼接式设计就是将多张商品图片合成一张商品主图，这种设计形式的优点是信息丰富，12电子商务视觉设计》电子教案不但可以同时显示商品的外观和实际效果，还可以让买家对商品的可选颜色一目了然；缺点是众多的商品图片放到一起，商品特征不够突显。（四）突出商品卖点品牌商品都会在商品主图的一角放置品牌的Logo,这种方式可以有效地让买家识别品牌，唤醒老客户的消费记忆，吸引新客户的关注和消费。三、添加文案提高主图点击率商品主图是吸引消费者了解商品和进店浏览的关键，因此要充分利用商品主图的画面空间，在主图上添加一些描述商品特色和卖点，以及刺激消费者购物欲望的文案，进一步吸引消费者点击商品主图。在添加主图文案时，需要注意以下两点：（1）文案说明信息的表达形式要简洁明了，要有引发消费者产生点击冲动的诱惑力；（2）文案说明信息不能遮挡商品主体。第二节商品细节展示区设计一、商品细节展示区的表现形式（一）指示型表现形式指示型表现形式就是先将商品完整地展示出来，再把商品需要突出展示的局部细节图片以类似放大镜的形式排布在完整商品图的四周，并利用线条、箭头等设计元素将细节图片与完整的商品图连接起来，有时还会用简单的说明性语言来对细节进行解说。（二）局部图解型表现形式局部图解型表现形式的设计更简单，只需将商品的局部细节放大即可，不需对细节位置进行指示。但是，局部图解型表现形式可以增加说明性文字内容，比较适用于外观简单、部件少的商品及日常用品的细节展示。二、商品细节展示区通用设计方式想要让消费者全方位了解商品的特点，就只能依靠文字来进行说明。（一）利用文字对细节进行说明。（二）素材让细节展示更直观。第三节商品功效简介区设计一、商品功效简介区的设计规范商品功效简介区是商品详情页的一部分，其设计宽度受到商品详情页宽度的限制，高度上则不受限制。下表为淘宝、天猫和京东的商品详情页设计尺寸规范。电商平台商品详情页设计尺寸规范淘宝网详情页左侧边栏宽190像素，中间空10像素，右侧宽750像素，加起来总宽度为950像素。如果关闭左侧边栏，就可以显示950像素宽，不然只显示750像素宽天猫商城详情页布局与淘宝类似，不同之处在于天猫商城新版页面的宽度由750像素变为790像素13

《电子商务视觉设计》电子教案京东 京东对详情页布局有统一要求，整体宽度不超过740像素商品功效简介区的设计重点就是对商品的功效进行总结与归纳，通过文字、色彩和修饰元素的完美搭配来提升文字的可读性。二、修饰元素在设计中的重要性在设计商品功效简介区时，为了将商品功效表述得更加直观、形象，可以使用多种修饰元素来丰富画面的内容，修饰元素的巧妙应用能够提升商品信息的可读性，让枯燥的文字变得更具象化，在给消费者带来美好的视觉享受的同时，有助于消费者深入了解商品的功效。第四节女鞋商品详情页视觉设计案例略归纳与提高通过本章的学习，我们对商品详情页视觉设计有了一个比较全面的认识，掌握了商品主图的设计规范、商品细节展示区设计以及商品功效简介区设计等内容。建议读者在对商品详情页视觉设计进行研究时注意几点:商品详情页是所有营销的落地点。如果详情页不能满足消费者的需求，不能解决消费者的实际问题，就很难将流量转化为销量。消费者在购买前一定会对详情页仔细看，反复看，甚至对比看，才决定是否购买。第6章高点击率推广图片视觉设计教学内容一、推广图片构图法则二、直通车图片设计三、钻展图设计四、聚划算主图设计教学要求【知识目标】.了解商品主图的设计规范。.熟悉商品主图的设计形式。.掌握商品细节展示区设计。.了解修饰兀素在设计中的重要性。【技能目标】1.熟悉商品主图的设计形式。14

《电子商务视觉设计》电子教案.掌握商品细节展示区设计技巧。.熟练掌握商品详情页各元素的设计方法。教学重点.掌握商品主图的设计形式。.掌握商品细节展示区设计技巧。.熟悉商品详情页各兀素的设计方法。教学难点.掌握并运用商品主图的设计形式。.熟练运用商品细节展示区设计技巧。.熟练运用商品功效简介区各元素的设计方法。教学方法讲授法、案例法课时数6课时教学内容第一节推广图片构图法则一、变化式构图变化式构图，又称作留白式构图。设计者将商品图安排在某一角落或某一边，同时留出大部分空白，留白在画面上的作用是能帮助设计者展示感情色彩，给消费者以思考和想象的空间。二、对角线构图对角线构图就是才把商品图安排在对角线上，利炯面对角线来整体统一画面元素，同时也能使陪体与主体发生直接关系。三、平衡式构图平衡式构图，给人一种祥和、平静的感觉。平衡构图不像对称构图那样老气、呆板，但其缺点就是缺乏创新，没有新意。四、对称式构图对称式构图给人一种画面平衡、稳定、商品突出的感觉，但其缺点是画面比较呆板，缺少变化。五、紧凑式构图15《电子商务视觉设计》电子教案紧凑式构图，就是将商品以特写的形式加以放大，布满画面，具有紧凑、细腻、微观等特点。六、X形构图X形构图就是对角线构图的升级版，也被称为放射式构图。将视觉焦点放置在画面的中央位置，让每一条放射线的中点都位于视觉焦点之上。第二节直通车图片设计一、图片整体风格设计第一步要做的就是根据文案或商品等因素来进行风格定位。确定推广的商品所针对的消费群体，同时分析他们的喜好，以确定设计风格及颜色；分析他们的消费能力，以确定使用什么样的促销方式是其最容易接受的；分析他们的生活习惯，合理调整投放时间和策略，与竞争对手拉开差异，增加投放效率。在制作直通车图时，可以参考以下技巧：（一）运用适当的背景（二）保证图片清晰度（三）精简文字，去除牛皮癣商品不能被任何素材及文字覆盖，保证图片与素材或文字的间距至少10像素。（四）巧用素材搭配在做商品展示和拍摄时可以找一些“配角”进行搭配，主角永远要占2/3的位置，消费者会自动根据图片中的比例关系去区分商品。二、突出商品卖点的设计商品主图中只能放或是只需要放店铺品牌的徽标即可，利益点说明也主要针对单品而言。在店铺推广直通车主图中添加店铺品牌更多的说明信息，能让消费者从更多方面认知品牌，也能进一步增强消费者对品牌的认同感，提升图片的可信度。第三节钻展图设计一、博取眼球的创意设计拍摄商品时转换相机的位置，用不同的角度进行表现，便可以为钻展图带出不一样的表现形式与视觉冲击力。除了改变商品的拍摄角度外，对商品进行富有造型感的摆设也能体现创意与吸引力。二、统一图片设计风格钻展图背景的设计主要有两种方式：一种为通过拍摄道具构建出背景，从而营造图片气氛；另一种则为合成背景。三、确定重点表现元素钻展图更重要的意义在于通过图片的设计对店铺或商品进行推广，从而带来流量，因此搭配适当的色彩、控制好相关元素的尺寸也是让钻展图具有足够吸引力的关键。第四节聚划算主图设计16

《电子商务视觉设计》电子教案一、聚划算主图的设计思路（一）商品拍摄拍摄角度不限，建议选用商品最大展示面积的角度进行拍摄，保证主题商品明确，商品在画面中能够完整显示。商品图片应该像素清晰、色彩准确，白色或浅色商品可以考虑在深色背景下进行拍摄。（二）商品背景图片背景不建议使用多色或者多个实拍背景，不建议出现水印。（三）商品构图多色商品展示尽量使用实拍图，如果没有实拍图可以使用色卡。尽量在主图展示上不出现细节图，否则只会喧宾夺主。（四）详情页主图图片上若需添加文字内容，可在报名系统中填写，后台会自动与商品整合，会在画面右侧出现半透明标签。二、聚划算主图设计案例略归纳与提高通过本章的学习，我们对高点击率推广图片视觉设计之前的准备活动有了一个比较全面的认识，掌握了直通车图、钻展图、聚划算主图等具有吸引力和高点击率的推广图片是如何制作的。建议读者在制作具有吸引力和高点击率的推广图片时注意几点：图片是电商营销的基础，其推广图片设计的重要性是不言而喻的。优质的推广图片能够吸引流量、促进点击、提高转化率，是视觉设计的关键点。第7章网店促销活动页视觉设计教学内容一、促销广告的黄金设计要素二、不同发展阶段的促销广告设计教学要求【知识目标】.了解如何营造促销广告氛围的要点。.了解促销广告的三大设计原则。.了解店铺不同发展阶段促销广告的设计方法。【技能目标】.熟悉促销广告的三大设计原则。.熟悉店铺处在不同发展阶段时促销广告的定位点。17

《电子商务视觉设计》电子教案教学重点.掌握促销广告的三大设计原则。.掌握店铺在不同发展阶段促销广告的设计方法。教学难点.熟练运用促销广告的三大设计原则。.熟练运用店铺在不同发展阶段所使用的促销广告设计定位点。教学方法讲授法、案例法课时数6课时教学内容第一节促销广告的黄金设计要素一、保证设计的基本美感（一）平衡（二）势能（三）集群（四）标签分割二、营造促销氛围（一）添加引导标签（二）添加限制提示三、促销广告图片的设计原则（一）主题突出（二）风格统一（三）目标明确第二节不同发展阶段的促销广告设计一、发展初期一一为打造爆款而促销对于刚起步的小店而言，店铺几乎没有自然流量，此时便需要通过推广来进行流量的引入，而促销就是引流最为见效的手段。此时可以选择单品进行促销，并投放一定比例的单品促销广告，打造爆款成为为店铺引流的法宝。二、发展中期一一为品牌而促销在店铺发展的中期阶段，品牌的树立起到了稳固店铺发展的作用。为品牌而生的促销广告，其目的不仅仅是为了推销店铺中的商品，还会对店铺的品牌起到一定的宣传与推广作用，从而提高消费者对品牌的认知度与识别度。18

《电子商务视觉设计》电子教案三、发展成熟期一一为客户而促销店铺发展到成熟阶段以后，维系客户已经成为这个阶段的首要任务，此时可以增加更倾向于老客户而展开的促销活动。老客户对品牌已经有了一定的认知与信任度，抓住他们其实也相当于在树立口碑，能让营销活动变得更为轻松。归纳与提高通过本章的学习，我们对网店促销活动页视觉设计有了一个比较全面的认识，掌握了什么是促销广告的黄金设计要素、在店铺不同发展阶段所对应的促销广告设计等内容。建议读者在对网店促销活动页进行设计时注意几点:促销活动是网店运营板块中最常见也是最重要的内容之一，可以说一个成功的店铺是离不开各种各样的促销活动。而能让促销活动得到直接体现的手段就是视觉设计，促销活动的内容也只有通过视觉的表现才能更好地传递给消费者。第8章移动端网店的用户体验设计教学内容一、移动端网店的设计标准二、移动端网店视觉设计教学要求【知识目标】.了解移动端网店的店标设计。.掌握移动端网店的图片尺寸标准。.了解移动端网店如何进行视觉设计。【技能目标】.熟悉移动端网店的店标设计、图片尺寸标准以及框架结构安排。.掌握移动端网店如何进行视觉设计。教学重点.掌握移动端网店的设计标准。.熟练掌握移动端网店如何进行视觉设计。教学难点.能够运用移动端网店的设计标准。.掌握移动端网店如何进行视觉设计。19《电子商务视觉设计》电子教案教学方法讲授法、案例法课时数6课时教学内容第一节移动端网店的设计标准一、移动端网店店标设计手机淘宝的店标适合采用图形或字母组合的形式，一方面是因为符号化的店标更容易加深买家对店铺的印象，另一方面是店铺头上已经明确地标注了店铺名称。二、移动端网店图片尺寸标准店铺标志尺寸为80像素X80像素，文件大小为80K以内，首页和详情页图片宽度为480像素〜620像素（建议不超608像素）。三、移动端网店框架结构安排（一）移动端网店首页界面（二）移动端商品详情界面（三）淘宝平台自动生成的版块其中将店铺首页划分成了“店铺首页”“全部商品”“新品上架”“店铺简介”等固定版块。（四）“收藏”“立即购买”等图标板块是不需要自己设计的，并且在详情页的第一屏都会出现商品图片、价格、名称等信息展示。第二节移动端网店视觉设计一、迎合极速打开需求网络速度可能是导致店铺界面长时间无法打开的主要因素，但站在店铺视觉设计的立场看，如果店铺中不堆放过多的图片且图片不要过大，那么也是能够缓解图片缓冲压力的，这样店铺界面就能够较为快速地展示在消费者面前了。二、信息内容简洁，便于快速传播在进行手机移动端网店视觉设计时，设置能够快速传播的信息内容更能迎合手机移动端消费者的需求。对信息进行必要的精简化处理是让消费者快速浏览与接收信息的关键。三、简单方便的操作与交互无须进行缩放操作，只需伸出手指执行单一下滑手势便可以进行信息的浏览与阅读，这种简单且易于操作的方式更容易被消费者所接受和青睐。在进行手机移动端的店铺视觉设计时，要简化一切不必要的设计。四、整体设计风格首尾呼应手机移动端店铺属于狭窄视觉展示，如果不依据店铺品牌基调保持设计风格的一致性，20

《电子商务视觉设计》电子教案店铺形象的不鲜明感就会带来视觉的混乱体验，也无法让消费者对店铺形成视觉记忆。五、保持色彩与文字的鲜明感手机端店铺浏览面积也相对较小，消费者的视觉也会受到限制。在进行手机移动端店铺的视觉设计时，最好采用较为鲜亮的色彩，因为这样不仅能给消费者带来较好的浏览体验，同时也能与淘宝平台所提供的白色背景相融合，让店铺的整体设计风格更加统一与完整。六、保持常换常新手机移动端网店的大部分使用人群具有年轻、时尚的特点，对于这部分人群而言，除了希望能够快速、便捷地达到购物的目的以外，他们也容易接受新事物，追求刺激、新鲜，而且充满好奇心。但是，店铺品牌设计风格必须保证统一。归纳与提高通过本章的学习，我们对移动端网店的用户体验设计有了一个比较全面的认识，掌握了移动端网店的设计标准、移动端网店视觉设计要求等内容。建议读者在对移动端网店的用户体验进行设计时注意几点:移动端网店可以看作是PC端的延续，在设计时需要把握“用户体验”这一关键点。与手机移动端中其他应用软件或APP一样，在设计手机移动端店铺页面时，应该更加注重交互体验与友好度，只有这样才能博得消费者的欢心。第9章手机移动端淘宝店铺视觉设计教学内容一、手机移动端淘宝店铺首页优化设计二、电子数码类商品店铺首页案例解析三、手机淘宝店铺详情页优化设计教学要求【知识目标】.了解店招的优化设计方法。.了解轮播图片的优化设计方法。.了解优惠券的优化设计方法。.了解商品分类导航及分类展示的优化方法。.了解店铺详情页设计的FABE原则及设计误区。【技能目标】1.掌握手机移动端淘宝店铺首页优化设计。21

电子商务视觉设计》电子教案2.掌握手机淘宝店铺详情页的设计方法。教学重点.熟练掌握手机移动端淘宝店铺首页设计的优化技巧。教学重点.熟练掌握手机淘宝店铺详情页的设计方法。.熟练运用优化技巧对手机移动端淘宝店铺首页进行优化。教学难点教学难点.熟练运用手机淘宝店铺详情页的设计方法。教学方法讲授法、案例法课时数6教学方法讲授法、案例法课时数6课时教学内容第一节手机移动端淘宝店铺首页优化设计与PC端店铺首页的设计方法类似，手机移动端店铺首页同样可以根据商品、店铺品牌等定位的不同采用不同的设计风格与设计方式。第二区上新+应季产品笫一区爆软或促销分类导航第二区上新+应季产品笫一区爆软或促销分类导航手机移动端店铺首页一、店招的优化设计手机移动端店铺的店招设计主要包括店铺标识与店招底图的设计。店招底图作为店招的主要装饰元素，可以用其突出店铺的特色与形象二、轮播图片优化设计轮播图片也称为焦点图，它通常被放在店铺的首焦页面，也就是第一屏中能被消费者快速看到的位置。轮播图内容要尽量简洁，文字表现清晰，主次分明且能达到快速传播的22

电子商务视觉设计》电子教案目的，这是轮播图片设计的要点。三、优惠券的优化设计通常情况下会被放在店铺首页的开端位置，这样可以在第一时间引起消费者的关注，并让消费者产生进店购买的欲望。在进行视觉设计时，一般都将优惠券放在店招或轮播图片的下方，并留出足够的空间，使用较为鲜明的色彩，让消费者能够注意到优惠券。四、商品分类导航优化设计在设计这个版块时要注意控制好显示尺寸与比例，使其能够清晰与完整地展示在消费者面前，起到快速导航的作用。五、商品分类展示优化设计在商品分类导航之后，便会出现商品分类展示版块。手机移动端为了迎合目标群体求快、求便的心理，则应尽量简洁，并在第一时间展示商品图片，间展示商品图片。通常情况下，将全店最受欢迎或最优惠的商品放在第一区，以促进手机移动端店铺购买力的转化，在商品分类展示的第二区中可以对新品与应季产品进行展示，在其他区域中可以根据店铺需求放置不同的商品。第二节电子数码类商品店铺首页案例解析略。第三节手机淘宝店铺详情页优化设计一、详情页设计的FABE原则FABE是一种通过四个关键环节来解答消费者诉求，且巧妙地处理好消费者关心的问题，从而顺利实现商品销售诉求的销售模式，具体表现为如图9-20所示的四个方面。A优点.（Advantages■B——利益.（Benefits）■E——证据1（Evidence）1特征（Features特征（Features）优点就是商品的卖点与优势，向消费者证明商品的卖点，其实就是给消A费者提供了更多的购买该商品的理由。以消费者利益为中心，告知并强调消费者购买商品后会得到的利益，能够激发消费者的购买欲望。证据就是指第三方认知、新闻舆论或技术报告等信息，它们需要有足够的权威性、客观性、可靠性与可见证性，这样才能获得消费者的信任。23

《电子商务视觉设计》电子教案FABE原则的指引下，还需要做到以下几点，让商品描述变得更加符合网络的销售环境，从而增加消费者的购买动力。（一）真实感（二）逻辑感（三）亲切感（四）对话感（五）氛围感（六）正规感二、商品详情页的设计误区（一）切忌密不透风的文字说明（二）海报宣传需凸显商品的真实性（三）注意控制商品与关联销售商品图片的数量二、根据消费者的页面平均停留时间设计手机移动端必须在前三屏中便对商品的卖点和重要信息进行清晰的描述，因为过于繁琐的其他关联信息可能，且进行了滑动操作后还有可能看不到」与商品相关的信息，让其失去对商品的购买兴趣，以致造成流量跳失。归纳与提高通过本章的学习，我们对手机移动端淘宝店铺的视觉设计有了一个比较全面的认识，掌握了手机移动端淘宝店铺的首页优化设计、以及手机淘宝店铺详情页优化设计，并以电子数码类商品店铺首页作为案例就行解析。建议读者在对手机移动端淘宝店铺进行视觉设计时注意几点：手机移动端店铺所具备的特点给予了消费者很好的用户体验，使得越来越多的消费者愿意在网上进行购物，但想让消费者决定购买其产品，还需要对店铺进行个性化且更为具体的设计，对店铺的各个细节进行优化，这样才能给店铺营造良好的销售氛围，让消费者最终被店铺所吸引并购买商品。第10章手机移动端微店视觉设计教学内容一、微店首页优化设计二、商品详情页优化设计三、微店底部导航优化设计四、母婴微店视觉设计案例构思五、母婴微店视觉设计案例实操教学要求【知识目标】.掌握微店首页优化设计的方法。.了解商品详情页优化设计的方法。.了解微店底部导航优化设计的方法。24

《电子商务视觉设计》电子教案4.了解母婴微店视觉设计案例的实操过程。【技能目标】.掌握微店首页的优化设计方法。.掌握商品详情页的优化设计方法。教学重点1.掌握微店首页的优化设计方法。2.掌握商品详情页的优化设计方法。教学难点.能够熟练运用微店首页优化设计的技巧。.能够熟练运用商品详情页优化设计的方法。.能够熟练运用微店底部导航优化设计的方法。教学方法讲授法、案例法课时数6课时教学内容第一节微店首页优化设计一、首页的框架设计（一）店铺招牌（二）微店公告（三）焦点大图（四）商品分类（五）商品展示（1）限时折扣：在这个区域内展示给顾客的商品全部都是微店内的促销商品。（2）店长推荐：在这个区域内大多展示的都是微店新上的商品，或是微店的爆款，也或是某段时期内顾客最需要的商品。（3）全部商品：在这个区域中展示的是微店内所有的商品二、清晰而准确的设计思路微店首页的核心是模块化，官方对页面模块的数量也是有限制的，因此要利用有限的板块创造更多的价值。一般微店首