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

《电子商务视觉设计（第2版）》教案第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章 店铺首页视觉设计教学内容一、。