《电子商务视觉设计》-教学教案

《电子商务视觉设计（第2版）》教案PAGEPAGE34第1章初识电商视觉设计教学内容一、什么是视觉设计二、电商视觉设计前的准备三、电商视觉设计的黄金构图法教学要求【知识目标】1．了解视觉设计的定义。2．了解电商视觉设计前的准备工作。3．掌握电商视觉设计黄金构图法。【技能目标】学会电商视觉设计的常用构图方法。教学重点1．网店的视觉定位2．电商视觉设计黄金构图法教学难点1．网店的视觉定位2．电商视觉设计黄金构图法教学方法讲授法、案例法课时数2课时教学内容第一节什么是视觉设计视觉设计是针对眼睛功能的表现手段，通俗地说就是通过一些设计让产品的视觉效果更加出彩。一、视觉识别设计视觉识别设计来源于企业形象识别系统。企业形象识别系统一般分为三个方面，即企业的理念识别（MI）、行为识别（BI）和视觉识别（VI）。企业视觉识别系统是企业理念的视觉化，通过企业形象广告、标识、商标、品牌、产品包装、企业内部环境布局和厂容厂貌等媒体及其他方式向大众表现、传达企业理念，使消费者对企业产生一致的认同感与价值观。企业视觉识别系统既可以形成独特的企业形象，又是企业无形资产的重要组成部分。二、视觉传达设计视觉传达设计是以视觉媒介为载体，以文字、图形和色彩作为创作要素，利用视觉形象传达特定的信息给受众，从而对被传达对象产生影响的过程。视觉传达的作用是让人与人之间利用“看”的形式进行交流。第二节电商视觉设计前的准备一、网店的视觉定位不同的消费群体有着不同的视觉偏好，关键是要将产品的定位和消费群体的视觉偏好进行整合，使店铺在风格上能够呈现出一种整体效果。营销型网店的视觉定位原则在于营造促销氛围，主要体现在通过对比强烈的颜色突出显示打折、包邮、半价等优惠活动的字眼。品牌型网店的视觉定位原则是突出品牌优势，整体设计风格偏向于简洁、干净，重点突出品牌Logo等形象代言等元素。服务关系型网店的视觉定位原则是包装服务形象。二、明确视觉规范的作用（1）统一识别视觉规范可以确保网店在整体风格、售前售后服务和产品包装形象等方面都保持整体风格的一贯性，既有利于消费者识别和区分店铺，也可以避免消费者在浏览时出现理解困难，甚至是理解错误的现象。（2）节约资源除了活动海报等个性模块之外，其他的页面和模块也参照规范进行设计可以极大地减少设计时间，从而达到节约资源的目的（3）重复利用设计相同属性的模块或页面时，执行视觉规范有利于减少无关的信息，方便消费者的阅读和信息传递。同时，视觉规范也有利于美工人员之间的协调工作。标准化的视觉规范不仅可以节约设计时间，还可以避免出错。第三节电商视觉设计的黄金构图法一、对称切割构图法对称切割构图法的前提一般是将内容分为对立的两部分，（将整个页面一分为二），划分明确。这种设计具有视觉冲击力，可以使画面具有平衡不失重的效果。二、组合切割构图法组合切割构图法是通过集中而有规律的排列从整体上抓住人们的视觉，让整个页面设计更具有立体感。这种构图方式适合每个区块中的内容属于平级关系产品的展示，能够保持各种内容的并列关系，让布局更具创意。三、整体场景构图法整体场景构图法专题内容不多，适用于促销、节日、活动等页面。整体场景构图法可以将目标客户快速带入页面氛围中，使商品信息更加精准、流畅。四、多重切割构图法多重切割构图法的构图不规则，稳定而锐利，可以让单一的页面变得生动、复杂的页面变得时尚，避免画面出现生硬感，不宜产生审美疲劳。五、简单切割构图法简单切割构图法使用简单的线条或图案整齐地分割整个页面，使页面变得有趣、生动，使内容区域得到有效划分。六、流程构图法如果设计创意需要按照循序渐进的方式展现产品，那么不妨采用流程构图法。流程构图法能够将步骤、关系、各个节点及整体流向展示清楚，让枯燥的流程瞬间变得简洁明了、个性十足，并充满趣味性。七、放射构图法放射构图法能展示出由一个中心点向四周扩散的效果，起到导向的作用，让整体页面呈现出立体与空间感，画面冲击力强，富有动感。八、物体轮廓构图法物体轮廓构图法主要适用于活动、节日或新品创意等专题。我们可以根据专题的主要内容从整体上构建一个边界或外形线，形成一个大的轮廓，将内容巧妙地填充进去。物体轮廓构图法能让整体页面更加生动、形象、有趣。归纳与提高通过本章的学习，我们了解了视觉设计的定义，电商视觉设计前的准备工作，并掌握了电商视觉设计黄金构图法。电商平台上的商品数以亿计，消费者在浏览商品时只会注重第一眼的感觉。说到如何让消费者第一眼就感兴趣，就不得不提电商视觉设计。电商视觉设计近年来受到了国内各大企业和知名品牌的高度重视，特别是在以淘宝天猫为代表的电商平台中，电商视觉设计理念运用得非常广泛，效果也很明显。第2章电商网站视觉配色设计教学内容一、网店页面的配色方案二、网店页面的配色误区三、网店的整体配色案例教学要求【知识目标】1．了解色搭原则七要素。2．掌握色彩联觉现象的定义。3．了解网店风格的几大形成要素。4．了解网店页面常见的配色误区。【技能目标】学会网店的整体配色方法。教学重点1．网店页面的配色方案2．网店页面的配色误区3．网店的整体配色案例教学难点1．网店页面的配色方案2．网店的整体配色案例教学方法讲授法、案例法课时数4课时教学内容第一节网店页面的配色方案一、色搭原则七要素1．渐进配色2．对比配色3．色调配色4．近似配色5．单重点配色6．分隔式配色7．夜配色二、色彩的联觉聚焦图片色彩的联觉现象是人们感知色彩的一种经验，在消费过程中人们也会自觉或不自觉地运用这种感知习惯。同时，由于人们的视觉对于色彩的感知最为敏感，因此当他们在浏览购物网站时很可能会首先通过色彩去识别商品。要想聚焦消费者的目光，就需要根据消费者的认知习惯寻找出通常情况下能够表现商品的最具代表性的色彩，并将其运用到与商品相关的视觉设计之中，这样才能避免消费者因为色彩而造成误会，从而放弃对商品的进一步关注。三、网店风格的形成要素店铺风格的形成要素主要包括店铺的主要风格、产品的情绪、活动的主题气氛、店铺的包装色彩和VI配色。1．店铺的主要风格（1）简约清爽型（2）商业型（3）炫酷型（4）可爱型（5）特色型2．产品的情绪（1）女装风格●韩式风格●淑女风格●嬉皮风格●波西米亚风格●田园风格●民族风格（2）男装风格●传统风格●商务休闲风格●运动风格●英伦风格●时尚休闲风格3．活动的主题气氛4．店铺的包装色彩5．VI配色（1）单色VI（2）双色VI（3）多色VI第二节网店页面的配色误区一、色彩过多合理地运用色彩会使店铺页面变得鲜艳、生动且富有活力，但色彩数量的增加并不能与页面的表现力成正比。在设计配色时，要有一种主色贯穿其中。主色不一定是面积最大的颜色，也可以是最重要、最能揭示和反映主题的颜色。二、背景和文字对比不强烈背景与文字对比不强烈，则文字内容没法突出，且昏暗的背景令人沮丧，用花纹繁复的图案作背景更容易让人眼花缭乱。有的背景和文字颜色对比不强烈，容易让人看不清楚，使商品的辨识度降低。三、过分强调色彩的刺激度在页面配色时要尽量少用容易引起视觉疲劳的色调。一般来说，高明度、高纯度的颜色刺激度高，疲劳度也高。在无彩色系中，白色的明度最高，黑色的明度最低；在有彩色系中，最明亮的是黄色，最暗的是紫色。第三节网店的整体配色案例一、店铺页面主色设计二、店铺页面文案配色设计三、店铺页面辅色设计归纳与提高通过本章的学习，我们了解了色搭原则七要素，掌握了色彩联觉现象的定义，还了解了网店风格的几大形成要素，以及网店页面常见的配色误区。在电商广告作品中，和谐、对比鲜明的色彩搭配更能吸引消费者注意。因此，广告能否抓住消费者的眼球，关键的一步是色彩的运用。大多数人对色彩画面的敏感度强于文字，同时色彩是通过人的印象或者联想来产生心理上的影响的，而配色设计的作用就是通过改变空间的舒适程度和环境气氛来满足人们各方面的要求。如何正确地进行视觉配色设计是电商视觉设计者必备的技能。第3章店铺标志视觉设计教学内容一、徽标的设计二、店标的设计教学要求【知识目标】1．了解店标的几种设计形态。2．掌握店标设计的七大技巧。3．熟练掌握店标的设计流程。【技能目标】能够熟练设计店标。教学重点1．店标设计的七大技巧2．店标的设计流程教学难点1．店标设计的七大技巧2．店标的设计流程教学方法讲授法、案例法课时数2课时教学内容第一节店标的设计形态从设计的表达形态来看，店标可以分为以下几种。1．中文文字型店标中文文字型店标主要以文字单独构成，适用于多种传播方式，最大的优点是一目了然，消费者对中文文字的接受度最高，好辨识也好记忆。2．非中文型店标3．组合型店标组合型店标让消费者有一种中西结合、和国际接轨的大牌感觉。在表达形式上，非中文的部分设计感比较强，视觉冲击力比较大，所以形式多种多样，给人的视觉感受不错。4．图形型店标图形型店标就是直接用图形作为店标。这类店标上没有什么字符，所以给人的印象不是很深刻，不配合店名一起来看就不会记得是什么店铺。因此，不建议使用单纯的图形型店标。5．图文结合型店标图文结合型店标就是图形与文字相结合的店标形式。这种店标既具有图形化的视觉冲击力，又能清楚地表达店铺品牌信息。第二节店标的设计技巧1．设计要有造型2．设计要有领导性3．标志设计的统一性4．标志的识别性5．标志的时代性6．标志的系统性7．标志的延伸性第三节不同行业的店标设计1．表现柔美型针对女性的行业和类目，多数要表现出女性的柔美与娇媚。2．表现阳刚型针对男性的行业和类目，要重点表现男性的阳刚之美。3．表现可爱型针对年轻女孩和婴幼儿的行业和类目，要突出可爱、萌萌的感觉第四节店标的设计流程在设计店标前，首先要和客户或领导进行沟通，对店标设计来说沟通是极为重要的，因为这样可以大大提高工作效率。本案例中的店铺名称是“鲜果”，主营项目是水果，所以在店标设计上要体现出水果店铺的风格。经过分析和构思，首先想到的是用水果的图形来表现，所以第一步就是去素材库找一些卡通水果的素材图形，然后抠出水果图像，添加文字，并对店铺名称做一些变形处理，最后添加修饰图形、修饰图案和修饰文字等。归纳与提高通过本章的学习，我们了解了店标的几种设计形态，掌握了店标设计的七大技巧，以及店标的设计流程。大到国际连锁品牌，小到零售网店都需要属于自己的独特店铺标志。店铺标志包括徽标和店标。企业与品牌的视觉符号称为徽标，网店的标志称为店标。这两种标志都是店铺的形象代表，主要起到识别和推广的作用。优秀的店铺标志设计不仅能对网店起到美化作用，还可以强化消费者对网店的记忆。同时，高大上的徽标和店标也是网店品牌和实力的一种体现。第4章店铺首页视觉设计教学内容一、首页视觉水平的四大指标二、店招视觉设计三、首焦轮播区视觉设计四、商品陈列区视觉设计五、茶叶店铺首页视觉设计案例教学要求【知识目标】1．了解首页视觉水平的四大指标。2．掌握店招视觉设计规范及技巧。3．掌握首焦轮播区视觉设计技巧。4．了解商品陈列区的布局设计。【技能目标】能够熟练设计店铺首页。教学重点1．店招视觉设计2．首焦轮播区视觉设计3．商品陈列区的布局设计教学难点1．店招视觉设计2．首焦轮播区视觉设计3．商品陈列区的布局设计教学方法讲授法、案例法课时数4课时教学内容第一节首页视觉水平的四大指标一、首页跳失率首页跳失率是指消费者通过某种渠道进入店铺，只访问了一个首页就离开的访问次数占该入口总访问次数的比例。电商运营者需要随时观测店铺的各项数据，并根据数据变化情况对页面进行优化与调整。二、首页点击率首页点击率是商品在首页展现后的被点击比率，即首页点击率=首页点击量÷首页展现量。通过首页点击率可以看出店铺推广的商品是否吸引人。首页点击率越高，说明商品越吸引消费者；首页点击率越低，表示商品对于消费者的吸引力越低，这时就需要优化店铺中的商品、优化商品图片和推广标题或者优化商品详情页面中的信息，让商品的展现尽可能多地带来点击量。三、首页人均点击次数首页人均点击次数是指在一段时间内人均点击了多少次。首页人均点击次数可以用来测试访客黏度，如果首页的客户体验做得很差，让访客进入首页后不知所措，找不到自己想要的产品，那么访客自然会离开。运营者要根据首页人均点击次数来优化整体的导航，美化产品图片，这对访客的引导非常重要。四、首页平均停留时间首页平均停留时间为访问店铺首页的所有访客总的停留时长除以访客数（单位：秒），多天的平均停留时间为各天人均停留时长的日均值。和首页人均点击次数一样，首页平均停留时间也可以用来判断一个店铺首页是否能留住访客。第二节店招视觉设计一、店招视觉设计规范不同的电商平台对店招的图片尺寸有不同的要求，下面以淘宝网为例来介绍店招的视觉设计规范。淘宝后台的店招高度为120像素，建议设计时设定店招尺寸为950像素×120像素，加上导航条高度30像素，共150像素，可避免发布后导航不显示的问题。在店招上可以添加品牌宣传语、近期的打折促销信息、收藏按钮、移动端二维码等元素，但这些元素最好不要超过3个，因为足够的留白空间有利于打造视觉重点，让设计元素发挥出最大的效能。在设计店招时要注意和导航条的风格进行统一，利用色彩、修饰元素与风格的相似性来营造视觉上的一致性，打造出独特的店铺装修风格。二、店铺名称的艺术化处理1．用不同字体和字号的组合营造艺术感2．添加特效，突出特殊性和醒目度3．使用修饰元素提升观赏性三、图层样式的应用图层样式是图像处理与网页制作中的常用功能之一，其作用就是对设计元素进行修饰和美化，实现色彩、质感与光泽上的变化。添加图层样式不仅可以将原本单一的色彩变得绚丽，为设计元素添加内阴影、外发光等特殊的光泽效果，还可以营造立体浮雕、图案纹理等特殊效果。需要注意的是，导航条的设计风格应当和店招乃至整个店铺首页的装修风格一致，不能一味地追求华丽而让导航条显得突兀、不协调。第三节首焦轮播区视觉设计一、设计聚焦消费者视线首焦位置是消费者进入店铺后第一时间看到的内容，如果这部分内容能够首先抓住消费者的眼球，就会大大提高其继续浏览店铺页面的可能性。相较于在首焦位置使用大量文字说明的布局安排，图片结合文案的设计形式更符合消费者追求轻阅读与轻松购物体验的心理。同时，放置消费者最渴望看到的信息内容也是这个板块设计的重点。二、构建设计图三要素店铺首页中的首焦轮播区基本上都是由三个要素组成的，即完整、精致的商品形象，唯美、绚丽的背景，以及精心编排的广告文字。首焦轮播图的背景图形要与商品的形象保持一致的风格或者能够烘托出某种特定的气氛。首焦轮播图中的商品图要经过色调和光影处理，能够真实再现商品的色彩和品质，或者根据背景和文字的风格和影调做过适当修饰。艺术化的文字编排在首焦轮播区中显得尤为重要，文字的字体与字号、色彩的变化等都是设计中较为关键的环节。三、溶图的应用规范溶图是用两张或两张以上的图片拼合起来的一张图片，构图严谨，细节处理得当。在选择溶图时要注意，要么溶图的色调与商品相似，要么溶图的影调与商品和谐搭配，只有满足了其中的一个要求，才能保证首焦轮播图具备较理想的视觉冲击力和浑然天成的视觉效果。第四节商品陈列区视觉设计一、营造视觉动线在进行商品展示图片的排列设计时，要首先使用整洁的排列让消费者获得轻松感，并且还要注意图片不宜过多，横排图片最好不超过五张，因为过多的图片容易让消费者感到浏览压力并产生疲倦感。除此之外，通过灵活多变的排列方式形成图片组合的视觉动线，也能减少过于死板的排列组合带来的枯燥与乏味感。二、商品布局艺术化商品照片的布局是影响商品陈列区整个版式的关键，也是确立整个首页风格的关键。为了吸引消费者的眼球，可以根据商品的功能、外形特点、设计风格来对商品陈列区布局进行精心的规划与设计，将店铺中的商品艺术化地展现出来。常见的商品陈列区布局方式有以下三种。1．方块式布局2．折线型布局3．随意型布局第五节茶叶店铺首页视觉设计案例本案例为某茶叶店铺设计首页装修图，具体操作步骤略。归纳与提高通过本章的学习，我们了解了首页视觉水平的四大指标，店招视觉设计规范及技巧，掌握了首焦轮播区视觉设计技巧，还了解了商品陈列区的布局设计方法。第5章商品详情页视觉设计教学内容一、商品主图设计二、商品细节展示区设计三、商品功效简介区设计四、女鞋商品详情页视觉设计案例教学要求【知识目标】1．了解商品主图的设计规范。2．掌握商品主图的设计形式。3．掌握商品细节展示区的设计技巧。4．了解修饰元素在设计中的重要性。5．熟练掌握商品详情页各元素的设计方法。【技能目标】能够熟练设计商品详情页。教学重点1．商品主图设计2．商品细节展示区设计3．商品功效简介区设计教学难点1．商品主图设计2．商品细节展示区设计教学方法讲授法、案例法课时数4课时教学内容第一节商品主图设计一、商品主图的设计规范淘宝网对商品主图的尺寸和设计都提出了具体的要求和规范：显示在搜索结果页面中的商品主图尺寸为220像素×220像素，而显示在商品详情页左上角的商品主图尺寸为400像素×400像素。商品主图的文件大小要小于3MB，图片格式可以为JPG、PNG格式。当上传的商品主图尺寸大于700像素×700像素时，商品详情页会自动提供放大镜功能。天猫商城的商品主图设计规范与淘宝网不同，其规定商品主图尺寸为800像素×800像素以上，自动拥有放大镜功能。主图不许出现图片留白、拼接、水印，不得包含促销、夸大描述等文字说明，该文字说明包括但不限于“秒杀”“限时折扣”“包邮”等，而且不同行业店铺的商品主图要求也有所不同。二、商品主图的设计形式商品主图的基本要求是能够展示商品的全貌，图片清晰，并且不能有杂乱的背景。商品主图的设计形式主要有以下几种类型。1．展示商品的全貌2．场景化的设计3．拼接式设计4．突出商品卖点三、添加文案提高主图点击率添加了文案的商品主图可以传递更多的商品信息，让消费者通过一张图片就能对商品有更多的了解，更容易激发消费者的点击兴趣和购买欲望。在添加主图文案时，需要注意以下两点。（1）文案说明信息的表达形式要简洁明了，要有引发消费者产生点击冲动的诱惑力。（2）文案说明信息不能遮挡商品主体。第二节商品细节展示区设计一、商品细节展示区的表现形式考虑到不同商品在材质、功能和外观等方面的差异，在设计商品细节展示区时可以采用不同的表现形式。常见的表现形式有以下两种。1．指示型表现形式2．局部图解型表现形式二、商品细节展示区的通用设计方式商品细节展示区通用的一种设计方式就是添加必要的文字和素材。1．利用文字对细节进行说明2．素材让细节展示更直观第三节商品功效简介区设计一、商品功效简介区的设计规范商品功效简介区是商品详情页的一部分，其设计宽度受到商品详情页宽度的限制，高度上则不受限制。表1所示为淘宝、天猫和京东的商品详情页设计尺寸规范。表1淘宝、天猫和京东的商品详情页设计尺寸规范电商平台商品详情页设计尺寸规范淘宝网详情页左侧边栏宽190像素，中间空10像素，右侧宽750像素，加起来总宽度为950像素。如果关闭左侧边栏，就可以显示950像素宽，否则只显示750像素宽天猫商城详情页布局与淘宝类似，不同之处在于天猫商城新版页面的宽度由750像素变为790像素京东京东对详情页布局有统一要求，整体宽度不超过740像素商品功效简介区的设计重点就是对商品的功效进行总结与归纳，通过文字、色彩和修饰元素的完美搭配来提升文字的可读性。二、修饰元素在设计中的重要性在设计商品功效简介区时，为了将商品功效表述得更加直观、形象，店主可以使用多种修饰元素来丰富画面的内容，例如用图片来代替某些文字或者使用素材来突出某些文字。修饰元素的巧妙应用能够提升商品信息的可读性，让枯燥的文字变得更具象化，在给消费者带来美好的视觉享受的同时有助于消费者深入了解商品的功效。第四节女鞋商品详情页视觉设计案例本节将结合前面所讲的内容为一款女鞋设计商品详情页，设计内容包括商品主图、商品介绍等，要求设计的页面要能清晰、准确地展示与说明女鞋的特点，具体操作过程略。归纳与提高通过本章的学习，我们了解了商品主图的设计规范和设计形式，掌握了商品细节展示区的设计技巧，以及商品详情页各元素的设计方法。商品详情页是所有营销的落地点。消费者通过搜索进入店铺后，首先进入的便是详情页；所有页面上有且仅有详情页承担着下单购买的职责；消费者在购买前要对详情页仔细看、反复看，甚至对比看，才能决定是否咨询卖家、是否下单。如果详情页不能满足消费者的需求，不能解决消费者的实际问题，那么前面的工作做得再好，都会功亏一篑。所以，无论是什么店铺，都要对商品详情页进行重点设计。第6章高点击率推广图片视觉设计教学内容一、推广图片构图法则二、直通车图片设计三、钻展图设计四、直播封面图设计五、聚划算主图设计教学要求【知识目标】1．掌握推广图片的构图法则。2．掌握直通车图片设计的要点。3．掌握钻展图设计的关键点。4．掌握直播封面图的设计原则。5．掌握聚划算主图的设计思路与方法。【技能目标】能够熟练设计直通车图片、钻展图、聚划算主图、直播封面图和聚划算主图。教学重点1．推广图片构图法则2．直通车图片设计3．钻展图设计4．直播封面图设计5．聚划算主图设计教学难点1．直通车图片设计2．钻展图设计3．直播封面图设计4．聚划算主图设计教学方法讲授法、案例法课时数6课时教学内容第一节推广图片构图法则一、变化式构图变化式构图又称留白式构图。设计者将商品图安排在某一角落或某一边，同时留出大部分空白。留白在画面上的作用是帮助设计者展示感情色彩，给消费者以思考和想象的空间。二、对角线构图对角线构图就是把商品图安排在对角线上，利用画面对角线来整体统一画面元素，同时也能使陪体与主体区分明显。这种构图的特点是富有动感，活泼生动，容易产生线条的汇聚趋势，吸引消费者的视线，从而达到突出商品图的效果。三、对称式构图对称式构图给人一种画面平衡、稳定、商品突出的感觉，缺点是画面比较呆板、缺少变化。四、平衡式构图平衡式构图给人一种祥和、平静的感觉，缺点是缺乏创新，没有新意。平衡式构图不像对称式构图那样老气、呆板，所以很多电商设计者都会选择这种构图方法。五、紧凑式构图紧凑式构图就是将商品以特写的形式加以放大，布满画面，具有紧凑、细腻、微观等特点。六、X形构图X形构图是对角线构图的升级版，也称放射式构图。它是将视觉焦点放置在画面的中央位置，让每一条放射线的中点都位于视觉焦点之上。采用X形构图能够获得严谨的美感，尽情释放商品拥有的自然、纯美，在安静的氛围中就能让消费者感受到活力与激情。第二节直通车图片设计一、图片整体风格设计在制作促销图片之前，第一步要做的就是根据文案或商品等因素来进行风格定位。设计时，要确定推广的商品所针对的消费群体，同时分析他们的喜好，以确定设计风格及颜色；分析他们的消费能力，以确定什么样的促销方式是其最容易接受的；分析他们的生活习惯，合理调整投放时间和策略，与竞争对手形成差异，以提高投放效率。在制作直通车图时，可以参考以下技巧。1．运用适当的背景2．保证图片清晰度3．精简文字，去除“牛皮癣”4．巧用素材搭配二、突出商品卖点的设计在店铺推广直通车主图中添加店铺品牌更多的说明信息，能让消费者从更多方面认识品牌，进一步增强消费者对品牌的认同感、提升图片的可信度。同时，店铺利益点信息的添加也能促使消费者进行点击。第三节钻展图设计一、博取眼球的创意设计创意需要灵感和积累，并不是在短期内就能随随便便产生的，但其有针对的对象，所以也不难抓住。例如，拍摄商品时转换相机的位置，用不同的角度进行表现，便可以为钻展图带来不一样的表现形式与视觉冲击力。除了改变商品的拍摄角度外，对商品进行富有造型感的摆设也能体现创意与吸引力。二、统一图片设计风格主题是图片的重点，对于钻展图而言，主题是激发消费者潜在需求的重要武器，明确的主题能够促使消费者点击图片。同时，图片的设计也需要拥有统一的风格。通过图片背景的设计可以烘托出图片的整体氛围与设计风格。钻展图背景的设计主要有两种方式：一种是通过拍摄道具构建出背景，从而营造图片的气氛；另一种是合成背景。三、确定重点表现元素只有统一的图片风格是不够的，钻展图更重要的意义在于通过图片的设计对店铺或商品进行推广，从而带来流量。搭配适当的色彩、控制好相关元素的尺寸也是让钻展图具有足够吸引力的关键。在设计钻展图时，需要确定图片的重点表现元素。第四节直播封面图设计一、直播封面图尺寸要求直播封面图不宜过大也不能太小，做到清晰、美观很重要。以淘宝直播封面图为例，它没有固定的尺寸，只要是正方形即可，一般为750像素×750像素，最小不能低于500像素×500像素。二、直播封面图设计原则要想打造优质的直播封面图，主播在设计封面图时要遵循以下原则。1．符合直播主题2．封面图要美观、清晰3．色彩要适当4．不要妨碍重要内容的展现5．禁用合成图6．拒绝不当信息7．封面图不要雷同第五节聚划算主图设计一、聚划算主图设计思路聚划算主图的设计主要包括商品拍摄、商品背景、商品构图和详情页主图四部分。1．商品拍摄拍摄角度不限，建议选用商品最大展示面积的角度进行拍摄，以保证主题商品明确，商品在画面中能够完整显示。2．商品背景建议图片背景只选择真实拍摄的实景，或者单色背景中的一种（包括同一色调的渐变）。不建议使用多色或者多个实拍背景，也不建议出现水印。背景的选择应该是为了衬托主题商品，建议运用虚化背景、突出主题的方式，或者使用同一色系或渐变色背景。3．商品构图多色商品展示尽量使用实拍图，没有实拍图时也可以使用色卡。尽量在主图展示上不出现细节图，否则只会喧宾夺主。如果选用模特，那么同一画面中的模特不要多于两位，要把商品和模特放在统一场景中进行拍摄，尽量不出现拼图现象。二、聚划算主图设计案例本案例结合前面所讲的内容为一款化妆品设计聚划算主图。在制作过程中使用渐变的背景进行修饰，添加“全国包邮”“送”促销方案，以及简单的广告词来突出产品优势，具体操作过程略。归纳与提高通过本章的学习，我们掌握了推广图片的构图法则，直通车图片设计的要点，钻展图设计的关键点，直播封面图的设计原则，以及聚划算主图的设计思路与方法。图片是电商营销的基础与灵魂，尤其是推广图片，其设计的重要性不言而喻。可以说优质的推广图片是吸引流量、促进点击、提高转化率的必需品，也是视觉设计的关键点。第7章网店促销活动页视觉设计教学内容一、促销广告的黄金设计要素二、不同发展阶段的促销广告设计教学要求【知识目标】1．掌握如何营造促销广告的氛围。2．掌握促销广告的三大设计总则。3．掌握不同发展阶段的促销广告设计方法。【技能目标】能够熟练设计网店促销广告。教学重点1．保证设计的基本美感2．营造促销氛围3．促销广告图片的设计原则4．不同发展阶段的促销广告设计教学难点1．保证设计的基本美感2．不同发展阶段的促销广告设计教学方法讲授法、案例法课时数3课时教学内容第一节促销广告的黄金设计要素一、保证设计的基本美感具有视觉营销力的促销广告需要具备基本的设计美感与清晰度。如果想使促销广告图片更富吸引力与协调感，就要特别注意以下四个方面。1．平衡2．势能3．集群4．标签分割二、营造促销氛围在设计促销广告时，除了促销活动的本身内容以外，还可以添加引导标签、限制提示等元素，营造出更为浓郁的促销氛围，进一步引导与促使消费者点击促销广告图片。1．添加引导标签2．添加限制提示三、促销广告图片的设计原则除了具有基本的设计美感和促销氛围之外，促销广告图片的设计还要遵循主题突出、风格统一与目标明确的设计原则。1．主题突出2．风格统一3．目标明确第二节不同发展阶段的促销广告设计一、发展初期——为打造爆款而促销对于刚起步的小店而言，店铺几乎没有自然流量，此时便需要通过推广来进行流量的引入，而促销就是引流最为见效的手段。新店或许并没有足够的经济实力去开展大规模的促销活动，此时可以选择单品进行促销，并投放一定比例的单品促销广告，打造爆款成为为店铺引流的法宝。为打造爆款而设计的促销广告主要需要表现单品的卖点以及单品优惠的幅度，以此来吸引消费者对促销图片的点击，同时也可以添加“掌柜热推”等说明文案，告知消费者这件单品为重点推荐商品，以此来营造更为浓厚的单品促销氛围。二、发展中期——为品牌而促销在店铺发展的中期阶段，品牌的树立起到了稳固店铺发展的作用。在这一基础上，促销活动应更具品牌宣传的效应，相应地促销广告也可以为品牌服务。在为打造品牌店铺设计促销广告图片时，图片展示标准的建立能够很好地展示店铺中不同的商品，而且统一的表现形式也能让消费者形成对品牌的联想。展示标准包括商品摄影、构图与字体使用等。三、发展成熟期——为客户而促销当店铺发展到成熟阶段以后，维系客户已经成为这个阶段的首要任务，此时卖家可以增加更倾向于为老客户而展开的促销活动。老客户对品牌已经有了一定的认知与信任度，抓住他们其实也相当于在树立口碑，能让营销活动变得更为轻松。在设计促销活动页时，可以专门设计一个促销页面，说明会员享有的一系列优惠政策，增强会员的归属感，帮助卖家维系老客户，增强消费者的凝聚力。需要注意的是，促销页面的设计需要顾及消费者的感官体验，否则也是无法获取消费者好感的。归纳与提高通过本章的学习，我们掌握了如何营造促销广告的氛围，促销广告的三大设计总则，以及不同发展阶段的促销广告设计方法。促销活动几乎是网店运营中最常见、最重要的内容，可以说一个成功的店铺是离不开各种各样的促销活动的。能让促销活动得到直接体现的手段就是视觉，促销活动的内容也只有通过视觉的表现才能更好地传递给消费者。第8章移动端网店用户体验设计教学内容一、移动端网店的设计标准二、移动端网店视觉设计教学要求【知识目标】1．了解移动端网店的店标设计方法。2．掌握移动端网店的图片尺寸标准和框架结构安排。3．掌握移动端网店进行视觉设计的方法与技巧。【技能目标】1．学会设计移动端网店店标和图片。2．学会手机移动端店铺装修的视觉设计。教学重点1．移动端网店的设计标准2．移动端网店视觉设计教学难点1．移动端网店的设计标准2．移动端网店视觉设计教学方法讲授法、案例法课时数3课时教学内容第一节移动端网店的设计标准一、移动端网店店标设计手机淘宝的店标适合采用图形或字母组合的形式，一方面是因为符号化的店标更容易加深消费者对店铺的印象，另一方面是店铺头上已经明确地标注了店铺名称，图文结合和中英文混合形式的店标不仅让店标的构图变得拥挤，还会让人产生画蛇添足的感觉。利用朋友圈进行小范围营销的店铺或销售母婴用品等特定商品的店铺，也可以使用头像作为店标，这样有助于拉近店铺与特定类型消费者的心理距离，但是不要使用公众人物的头像。移动端网店还可以使用商品的实物照片作为店标，让人一眼就能明白店铺销售的主营商品。二、移动端网店图片尺寸标准为了规范设计，手机淘宝对图片的发布尺寸做出了要求：需在图片上添加文字时，中文字号≥30磅，英文和阿拉伯数字字号≥20磅；图片高度≤960像素（建议高度不超过600像素），图片格式支持JPG、GIF、PNG；首页和详情页图片宽度为480像素~620像素（建议不超过608像素）；每个详情页可以增加一个音频，时长不超过30秒，大小不超过200KB，格式为MP3。每个图片、音频的大小不得超过1.5MB。三、移动端网店框架结构安排移动端网店和PC端网店一样，也存在着页面间的跳转以及页面结构层级关系的安排与布置。这里所说的页面不再是指店铺的各级网页页面，而是指存在于淘宝App客户端中的店铺各级界面。卖家虽然可以不考虑图标、按钮等用户界面（UI）设计，也不必过多地考虑店铺的结构组成，但需要注意在已有的框架结构中添加能够促进消费者购买的内容。此外，根据框架结构层面给所添加的内容设置相应的商品或活动链接也尤为重要，否则混乱的链接会导致店铺框架结构变得很混乱，不被消费者所理解，阻碍消费者的购买进程。第二节移动端网店视觉设计一、信息内容简洁，便于快速传播手机移动端受手机载体的限制，其显示尺寸有限，店铺信息的呈现也会受限，如果信息量过多且不做取舍，只会导致信息无法清晰、明确地加载与显示，消费者也很难读懂精华信息，不能快速找到自己想要看到的界面，就很有可能会选择离开。因此，对信息进行必要的精简化处理是让消费者快速浏览与接收信息的关键。此外，控制文字信息的篇幅及文字尺寸的大小也是让信息在手机移动端清晰展示的方法之一。二、简单方便的操作与交互无须进行缩放操作，只需伸出手指执行单一操作便可以进行信息的浏览，简单且易于操作的方式更容易被消费者所接受。因此，在进行手机移动端的店铺视觉设计时，要简化一切不必要的设计，让消费者不必因为多余的操作而忘记了购买的初衷，这也是促进手机移动端店铺销量增加的有效手段之一。三、整体设计风格首尾呼应店铺整体的装修与设计风格需要做到首尾呼应，否则就不利于店铺完整设计风格的塑造。不同于PC端店铺，手机移动端店铺属于狭窄视觉展示，如果不依据店铺品牌基调保持设计风格的一致性，店铺形象的不鲜明感就会带来视觉的混乱体验，也无法让消费者对店铺形成视觉记忆。四、保持色彩与文字的鲜明感在进行手机移动端店铺的视觉设计时，最好采用较为鲜亮的色彩，因为这样既能给消费者带来较好的浏览体验，同时也能与淘宝平台所提供的背景相融合，让店铺的整体设计风格更加统一与完整。对于利用碎片化时间来进行商品购买的手机移动端消费者而言，他们希望从中获取轻松与自在感，而深色系容易带来一种沉重感；相反，较为鲜明与惹眼的色彩则能让消费者获得轻阅读的感受与体验。五、保持常换常新手机移动端的视觉设计保持常换常新的状态，不仅能够满足这部分消费群体对新奇事物的追求，也不会让店铺看起来像是一个无人看管的空店。当然，这一切也是需要建立在店铺品牌设计风格不变的基础之上的。归纳与提高通过本章的学习，我们掌握了移动端网店的店标设计方法，了解了移动端网店的图片尺寸标准和框架结构安排，还掌握了移动端网店进行视觉设计的方法与技巧。移动端网店可以看作PC端的延续，在设计时更需要把握“用户体验”这一关键点。手机移动端网店是依附于智能手机这一平台的，而智能手机又让人与机器之间有了更加亲密的接触与互动，因此与手机移动端中其他应用软件或App一样，在设计手机移动端店铺页面时要结合智能手机平台的特色设计出更加注重交互体验与友好度的页面，只有这样才能博得消费者的欢心。第9章手机移动端淘宝店铺视觉设计教学内容一、手机移动端淘宝店铺首页优化设计二、电子数码类商品店铺首页案例解析三、手机淘宝店铺详情页优化设计四、家纺视觉设计案例实操教学要求【知识目标】1．掌握店招的优化设计方法。2．掌握轮播图片的优化设计方法。3．掌握优惠券的优化设计方法。4．掌握商品分类导航及商品分类展示的优化方法。5．了解店铺详情页设计的FABE原则。6．熟练掌握手机淘宝店铺详情页的设计方法。【技能目标】能够熟练地对手机移动端淘宝店铺首页和详情页优化设计。教学重点1．手机移动端淘宝店铺首页优化设计2．手机淘宝店铺详情页优化设计教学难点1．手机移动端淘宝店铺首页优化设计2．手机淘宝店铺详情页优化设计教学方法讲授法、案例法课时数4课时教学内容第一节手机移动端淘宝店铺首页优化设计一、轮播图片优化设计通常情况下，轮播图片会包含店铺上新活动通知、促销活动展示等内容。轮播图内容要尽量简洁，文字表现清晰，主次分明且能达到快速传播的目的，这是轮播图片设计的要点。此外，卖家在设计时也要注意控制好轮播图片的数量，以及展示的先后顺序。在设计时卖家可以根据店铺活动的重要程度或先后顺序对轮播图片的位置进行相应的调整。二、优惠券的优化设计在进行视觉设计时，一般都将优惠券放在店招或轮播图片的下方，并留出足够的空间，使用较为鲜明的色彩，让消费者能够注意到优惠券，只有这样才能真正发挥其引流与促进转化的作用。过于花哨的设计有时反而会让优惠券淹没在各种视觉元素的冲击之中。店铺中的某些优惠活动也可以被设计成优惠券的形式。有的优惠活动还设计了优惠券按钮，让消费者更有互动参与感。在优惠券上添加“立即领取”之类的视觉元素，可以在一定程度上左右消费者的点击行为，相对于没有明显按钮引导的优惠券板块而言，有按钮引导更富操作的提示感。三、商品分类导航优化设计通常情况下，在手机移动端店铺首页中，展示完轮播图片或是优惠券板块后便会出现分类导航板块。在设计这个板块时，要注意控制好显示尺寸与比例，使其能够清晰与完整地展示在消费者面前，起到快速导航的作用。四、商品分类展示优化设计与PC端有足够的空间去装饰与美化商品分类展示板块不同，在手机移动端为了迎合目标群体求快、求便的心理，应当尽量简洁，并在第一时间展示商品图片。通常情况下，手机移动端店铺首页商品分类展示会以爆款或促销的商品图片形式呈献，将全店最受欢迎或最优惠的商品放在第一区，以促进手机移动端店铺购买力的转化。手机移动端消费者较为关注店铺新品与应季产品的发布，因此在商品分类展示的第二区中可以对新品与应季产品进行展示。在在第三区、第四区等区域中可以根据店铺需求放置不同的商品。商品分类展示区的分区不宜过多，商品分类展示的每一区中的商品图片也不宜过多，因为手机显示屏幕较窄，图片横向组合时要想让消费者看清商品图片，那么每一行放2张图片最为合适。简洁、整齐的图片排列组合能让手机移动端的消费者获得更好的浏览与购物体验。第二节电子数码类商品店铺首页案例解析在对手机移动端店铺进行视觉设计时，卖家应注意保持色彩与文字的鲜明感，因为消费者在碎片化的时间里利用手机进行购物，更多的是希望获得放松感，而店铺过于沉闷的色彩搭配则无法达到这一目的。这并不意味着手机移动端店铺的视觉设计只能是明亮的色调，其实也可以使用一些较为暗沉的色彩。例如，对于一些经营手机配件类商品的店铺而言，其所销售的商品具有较为浓郁的科技感与炫酷感，而这也很可能成为店铺品牌的定位方向。为了迎合这一特性，店铺可以采用象征深沉与神秘的黑色作为店铺首页的主要色彩，从而突出商品与品牌具备的科技特性。第三节手机淘宝店铺详情页优化设计一、详情页设计的FABE原则FABE是一种通过四个关键环节来解答消费者诉求，且巧妙地处理好消费者关心的问题，从而顺利实现商品销售诉求的销售模式，具体表现为四个方面。F——特征（Features）：介绍商品的特质、特性等基本功能，以及它是如何满足消费者需要的。A——优点（Advantages）：就是商品的卖点与优势，向消费者证明商品的卖点，其实就是给消费者提供了更多购买该商品的理由。B——利益（Benefits）：以消费者利益为中心，告知并强调消费者购买商品后会得到的利益，能够激发消费者的购买欲望。E——证据（Evidence）：指第三方认知、新闻舆论或技术报告等信息，它们需要有足够的权威性、客观性、可靠性与可见证性，这样才能获得消费者的信任。在FABE原则的指引下，还需要做到以下六点具体内容，让商品描述变得更加符合网络的销售环境，从而增加消费者的购买动力。1．真实感2．逻辑感3．亲切感4．对话感5．氛围感6．正规感二、商品详情页的设计误区在设计商品详情页时，要注意避免以下几个误区，把握好描述设计的尺度是促成消费者购买的重要前提。1．切忌密不透风的文字说明2．海报宣传需凸显商品的真实性3．注意控制商品与关联销售商品图片的数量三、根据消费者的页面平均停留时间设计手机浏览的连贯性不如PC端，并且消费者在页面中的平均停留时间很短，所以在设计手机移动端的详情页面时，必须做到简单、直截了当。在PC端商品详情页的开端可能会出现“新品推荐”“搭配套餐”等信息，这些在手机移动端显得不那么实用。手机移动端必须在前三屏中对商品的卖点和重要信息进行清晰的描述，因为过于烦琐的其他关联信息可能需要占用好几屏的空间，每占用一屏的空间便会使消费者多一次滑动操作，并且还有可能看不到与商品相关的信息，让其失去对商品的购买兴趣，造成流量跳失。第四节家纺视觉设计案例实操本案例结合前面所讲的内容为一款空调被设计商品详情页，设计内容包括商品首图、商品介绍等，要求设计的页面要能清晰、准确地展示与说明空调被的特点。具体操作过程略。归纳与提高通过本章的学习，我们掌握了店招、轮播图片、优惠券的优化设计方法，商品分类导航及商品分类展示的优化方法，了解了店铺详情页设计的FABE原则，还掌握了手机淘宝店铺详情页的设计方法等。越来越多的消费者选择通过手机移动端淘宝店铺进行购物，是因为手机移动端店铺所具备的特点给予了他们很好的用户体验，但是这些特点并不足以让消费者决定购买，所以还需要对店铺进行个性化且更为具体的设计，对店铺的各个细节进行优化，营造出良好的销售氛围，让消费者最终被店铺所吸引并产生购买行为。第10章手机移动端微店视觉设计教学内容一、微店首页优化设计二、商品详情页优化设计三、母婴微店视觉设计案例构思四、母婴微店视觉设计案例实操教学要求【知识目标】1．掌握微店首页的优化设计方法。2．掌握商品详情页的优化设计方法。3．根据母婴微店视觉设计案例进行实战练习。【技能目标】能够熟练地进行手机移动端微店视觉设计。教学重点1．微店首页的优化设计2．商品详情页优化设计教学难点1．微店首页的优化设计2．商品详情页优化设计教学方法讲授法、案例法课时数4课时教学内容第一节微店首页优化设计一、首页的框架设计微店首页主要由店铺招牌、微店公告、焦点大图、商品分类与商品展示五部分构成。1．店铺招牌首先，店主需要考虑的是店铺招牌要给消费者传达什么样的信息；其次，店主需要对店铺风格进行定位，并使店铺招牌与其保持一致；再次，设计要简洁明了，字数不要过多；最后，店铺招牌要突出主体，千万不可喧宾夺主。2．微店公告微店公告常以文字来说明店铺优势、商品卖点、促销信息及服务内容等。只要是能增加消费者对店铺的信任度且便于消费者浏览的相关信息，店主就可以将其展示在微店公告中。不过文字必须要简洁、清晰，要让消费者一看就懂，且不会消磨其耐心。3．焦点大图无图不成焦点，焦点必须有图片。可以说，焦点大图也是图片内容的一种展现形式。具体来说，焦点大图设计就是由一张图片或多张图片自动轮流播放展示在首页上。因为轮播图片是动态的，所以具有一定的视觉吸引力，容易引起消费者的注意。4．商品分类在微店首页中，店主可以根据商品的特点将商品划分为几大类，并根据类别对商品进行排列。一般来说，如果消费者有需求，进入微店后他们首先会点开首页中的“商品分类”模块，然后根据商品类型选择符合自己需求的区域，从中寻找所需的商品。商品分类的布局很重要，店主要按照消费者的浏览和购买习惯对商品进行分类，以便消费者能够快速找到所需的商品，提高其购物体验度。5．商品展示商品展示一般可以分为“热卖商品”“店长推荐”和“全部商品”三个模块。（1）热卖商品（2）店长推荐（3）全部商品二、清晰而准确的设计思路消费者在看手机的时候会比较放松，如果微店页面在短时间内不能将其吸引住，那么他们会无情地离开，因此拥有一个清晰而准确的设计思路是非常重要的。微店首页的核心是模块化，官方对页面板块的数量也是有限制的，因此卖家要利用有限的板块创造更多的价值。一般微店首页是由店招、海报、分类入口、优惠券和单品展示等部分组成的。三、遵守设计学的“七秒定律”在设计学中有一条“七秒定律”，据专业机构研究发现，人关注一个商品的时间通常为七秒，而这七秒内影响70%的人购买的第一要素是色彩。首先，同一板块内不要超过3种颜色，这3种颜色可以看作是主色、辅助色与点缀色。另外，卖家在设计首页时可以多使用万能搭配色，如黑、白、灰等颜色。因为这些颜色比较百搭，跟任何颜色搭配起来都会比较和谐，容易表现出高端的感觉。背景色尽量以浅色调为主，因为在移动端上观看，浅色的背景色更能突出商品本身，使消费者的注意力集中在商品上。四、注重细节设计卖家在设计微店首页时，还要注重细节上的设计，比如在首页上可以选取半身图或局部特写图。因为微店首页大多是以“豆腐块”的形式展现的，范围确实有限，所以卖家在选择图片时要尽量使用半身图或局部特写图，以避免视觉上的不清晰。如果全部都使用半身图或特写图，那么微店页面会显得单调、乏味，所以可以适当穿插一些全景图，有意识地调整页面的节奏，使整个页面更加和谐、活泼。此外，在页面面积较小的情况下，图文搭配的巧妙排列能让页面看起来更大，还能避免因为“乱”和“杂”而产生的廉价感。第二节商品详情页优化设计一、商品主图的设计在商品详情页中，商品主图的设计尤为重要。因为消费者在浏览商品时最先看到的图片就是商品主图，其基本尺寸要求是640像素×640像素。在设计商品主图时，图片要清晰，主题与背景要主次分明，图片中的文字大小要适中、简洁明了、突出卖点，这样商品主图才会更加美观、更能吸引消费者。二、商品描述图的设计商品描述图包括商品图片和商品描述。在商品描述图中，适当的文字描述能够起到吸引消费者、提高商品成交率的作用。商品描述图应与商品主图、商品标题相契合，能够真实地介绍商品的属性。在进行商品描述时，文字内容要尽量简短，突出商品的优点、特点和卖点。商品描述页面在重新排列、展示商品细节的过程中只能利用文字和图片这种静态信息类的沟通方式。这就要求店主在整个商品详情页面的布局中要注意一个关键点，那就是阐述逻辑。店主在设计图文详情时，要多图少文。图要美观，文字描述要与图片相契合。文字最好是中文，字体不可过大，也不可过小，可根据目标客户来定。字体颜色尽量不要太亮，以免使人产生一种视觉上的不舒适感。第三节母婴微店视觉设计案例构思一、首页设计布局规划①微店店招：在店招模块中使用母婴图片进行展示，通过渐隐效果来让文字更加突出，让店铺主题更加明确。②首页导航：该区域导航设置清晰，设计简洁明快。③促销广告：该区域通过使用商品图片与文字结合的方式进行展示，能够完整地表现出商品的特点和形象。④特价专区：使用商品图片搭配色调和外形和谐的标题文字，并加入相应的链接按钮，让消费者能够随时进入其页面了解详情。二、主色调：高纯度暖色调1．页面背景及设计元素配色：高纯度色彩2．商品及辅助配色：类似色调三、案例配色扩展1．扩展配色：互补色系2．扩展配色：同类色系四、案例设计流程①制作微店店招和导航②制作微店促销广告③制作微店特价专区第四节母婴微店视觉设计案例实操母婴微店视觉设计主要分为制作微店店招、首页导航、促销广告、特价专区四部分。一、制作微店店招二、制作首页导航三、制作促销广告四、制作特价专区归纳与提高通过本章的学习，我们掌握了微店首页、商品详情页的优化设计方法，并根据母婴微店视觉设计案例进行了实战练习。无论是淘宝还是微店，店铺视觉设计是否能够吸引消费者的眼球、是否能够突出自己商品的特色都是至关重要的。在微店中