完整版教学课件完整版教学课件电子商务视觉设计第1章 绪论 第1章绪论 知识目标和技能目标•知识目标了解视觉设计的内容掌握电商网店的视觉定位了解视觉营销的内容•技能目标能够掌握商品文案的策划能够拍摄产品能够处理图片 学习重点和难点•学习重点电商网店视觉图像的色彩调整；电商网店的字体设计•学习难点电商网店视觉设计创意及构图 第一节电商视觉设计概述1.1视觉设计视觉设计是针对眼睛功能的表现手段，通俗地说，就是指通过一些设计让产品的视觉效果更加出彩因为这些设计是针对我们眼睛的特点进行的，所以又被称为视觉设计视觉设计大体上可分为视觉识别设计和视觉传达设计一）视觉识别设计（二）视觉传达设计1.2视觉营销视觉营销是一个外来词，英文为VisualMerchandising，简写为VM或VMD视觉营销也称商品计划视觉化，即在市场销售中管理并展现以商品为主的所有视觉要素的活动，从而达到表现品牌或商品的特性及与其他品牌或商品的差异化的目的 第二节电商视觉设计前的准备2.1电商网店的视觉定位（一）电商网店的视觉定位原则视觉定位就像人的风格定位一样。
不同的产品对应不同的视觉定位，不同的消费群体有着不同的视觉偏好，关键是要将产品的视觉定位和消费群体的视觉偏好进行整合，使电商网店在风格上能够呈现出一种整体的效果1．营销型网店的视觉定位原则2．品牌型网店的视觉定位原则3．服务关系型网店的视觉定位原则 第二节电商视觉设计前的准备2.1电商网店的视觉定位（二）制订视觉规范的意义任何一个优秀的设计作品都会有自己的视觉规范，而准备阶段的工作主要围绕着制订视觉规范和搜索整理素材来展开首先我们要把抽象的风格定位具体化为图形、颜色和字体等元素，然后对这些元素进行视觉规范制订，并以手册的形式落实在纸面上制订视觉规范有以下几个方面的意义1．统一识别2．节约资源3．重复利用 第二节电商视觉设计前的准备2.2文案策划文案是指公司或企业中以文字来表现已经制定的创意策略的方案在网上购物，打动消费者的除了图片就是文案（一）单品推荐类文案（二）品类推荐类文案（三）活动广告类文案 第二节电商视觉设计前的准备2.3产品拍摄产品照片在拍摄前需要做好产品的人群定位，整个拍摄过程可以分为前期准备、中期执行和后期处理三个步骤。
拍摄前需要对产品的卖点进行仔细分析，选择合适的拍摄环境，备好相机、灯光、道具等器材，并且确定拍摄风格在拍摄要点明确、设备准备就绪后，需要确定一下拍摄照片的风格，进行布光及合理的商品陈设取景和构图在照片拍摄完成后，需要对照片进行挑选，通过对照片的抠图、调色、剪裁、加水印等处理，完成照片的后期处理工作 第二节电商视觉设计前的准备2.4图片处理Photoshop软件是应用非常广泛的软件，由它美化的图片可以拥有更好的效果，从而吸引消费者的眼球相机拍摄的照片得到的都是长方形的图，但在电商平台上，产品主图都是以正方形的形式展现的因此，首先需要借助Photoshop软件裁剪照片，获取正方形图片，然后可以通过调整亮度、调整颜色、调整饱和度、调整清晰度等步骤美化照片 第二节电商视觉设计前的准备2.5详情页设计产品详情页的重要性是众所周知的优秀的详情页不仅可以提高店铺的成交转化率，而且可以增加访问深度，降低跳出率，增加产品搜索权重等详情页的主要内容有：店铺促销产品、关联营销模块、限时限量促销信息、卖家对产品的评价，以及产品的描述图、细节图、场景图、对比图等。
详情页还需要对卖家的团队文化、生产工艺、物流介绍、包装介绍、保修说明、退换货处理等方面进行介绍 第三节电商视觉设计色彩应用3.1色彩基础知识（一）色彩原理1．色彩的形成色彩是由光照射到物体上刺激眼睛所产生的一种视觉效应（视觉现象）1666年，牛顿通过三棱镜得知了光谱，从而开启了色彩科学的新纪元色彩是光线产生的，没有光线就没有色彩当光线照射到物体上时，物体本身的材质决定了其对光线中的某些色光吸收、反射或穿透，反射回来的色光作用于人的视觉器官，透过视觉器官传到大脑，便产生了某种色彩感觉2．色彩的分类1）无彩色系2）有彩色系3．色彩的特性色彩具有三个特性（属性）：色调、亮度与饱和度 第三节电商视觉设计色彩应用3.1色彩基础知识1）色调：色调也称色相，是指色彩的名称或类别，是色彩的相貌色相是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素2）亮度：亮度也称明度，是指色彩的明暗程度或能级亮度与光所含的能量有关，由光的振幅决定3）饱和度：饱和度也称纯度或彩度，即色彩所含的单色相饱和的程度。
饱和度是指色相深浅的程度 第三节电商视觉设计色彩应用3.1色彩基础知识（二）色彩视觉心理人们以往的视觉经验和对环境色彩的体验，会不知不觉地融进自己的主观情感人们的主观感受赋予色彩的生命意义，在色彩学的概念中色彩视觉心理只是一种借喻1．白色白色给人的抽象联想是洁净、明朗、清晰、透明、纯真、简洁，使人产生明亮、淡雅、纯洁的心理反应白色的使用能让画面呈现净化、简洁、明块、有透气感的视觉效果在它的衬托下，其他色彩会显得更鲜丽、明朗但有时是白色有时也带给人单调、寒冷、严峻的感觉，有类似空虚、缥缈、平淡无味等象征意义因此，在使用白色时，都会掺入一些其他的色彩进行调和，如象牙白、米白、乳白、苹果白等 第三节电商视觉设计色彩应用3.1色彩基础知识2．黑色色给人的抽象联想是深沉、庄重、严肃、永恒、毅力、刚正忠义，让人联想到夜晚、头发、黑色的礼服，使人产生庄重、肃穆、高贵的心理反应黑色的使用能让画面呈现成熟、永恒、稳定和有空间感的视觉成熟、稳定、坚定、力量等效果黑色的组合适应性极广，无论什么色彩都能与其相配，特别是鲜艳的纯色与其相配，能取得赏心悦目的良好效果。
但是黑色有时也带给人不纯洁、罪恶、黑暗、压抑、悲感的感觉，在情感上给人死亡、阴郁、绝望、恐怖、邪恶、不安、危险的心理反应因此，不能大面积使用黑色，否则不仅其魅力大大减弱，而且会产生压抑、阴沉的恐怖感 第三节电商视觉设计色彩应用3.1色彩基础知识3．灰色灰色是黑色与白色调和后的中间色，灰色给人的抽象联想是沉着、平易、内向、暧昧、消极、失望、抑郁，让人联想到质朴、阴天、烟雾、公路、老鼠等，使人产生高贵、优雅、精致、含蓄、寡断的心理反应灰色与高饱和度和亮度的色彩搭配使用，能起到很好的缓冲作用，灰色的使用能让画面呈现高雅、柔和、寂寞、有科技感的视觉效果但是滥用灰色也易暴露其乏味、寂寞、忧郁、消极、灰心、沉闷、呆板、僵硬、不景气、不开朗、不健康、无激情、无兴趣的一面在色彩心理表现上，灰色属于中间性格，男女皆能接受，所以灰色也是永远流行的主要色彩 第三节电商视觉设计色彩应用3.1色彩基础知识4．红色红色是激动之色，给人的抽象联想是兴奋、热烈、激情、喜庆、高贵、奋进，让人联想到太阳、玫瑰、血液、火焰、火炮等红色具有较好的明度感，使人产生兴奋、恐怖、危险、热闹的心理反应。
但是红色有时也会让人联想到紧张、暴力、恐惧、血腥气味，刺激人的兴奋感促使血液加速，在情感上给人危险、紧迫的心理反应橙色背景上的红色显出缺乏朝气的暗淡；黄绿色背景上的红色感觉比较活跃、莽撞、冲动 第三节电商视觉设计色彩应用3.1色彩基础知识5．黄色黄色是明亮和娇美之色，有很强的光明感，是所有色调中亮度最高的色彩黄色给人的抽象联想是光明、希望、愉悦、纯洁、明朗、动感、欢快、新生、单纯、天真、收获，让人联想到麦田、向日葵、柠檬、香蕉、蛋黄、奶油、阳光、月亮、黄金、财富、权力等，使人产生明朗、欢快、幸福、快乐、轻松、激动、欢悦的心理反应黄色的使用能体现华贵、富丽堂皇、灿烂辉煌、无拘无束但是黄色又与病弱有关，植物的衰败、枯萎也与黄色相关联因此，黄色又会使人感到空虚、贫乏和不健康、任性等黄色过于明亮会显得刺眼，并且与其他色相混用易失去其原貌，故也有轻薄、不稳定、变化无常、冷淡等不良含义 第三节电商视觉设计色彩应用3.1色彩基础知识6．蓝色蓝色是典型（极端）的冷色，给人的抽象联想是清爽、开朗、理智、沉静、深邃、博大、永恒等，使人产生冷静、理智、悲哀、绝望的心理反应。
蓝色的使用能体现平静、冷静、纯净、智慧、开阔、憧憬、幻想、庄严、典雅、高贵、纯正、神圣受西方文化的影响，蓝色也会带给人刻板、保守、冷漠、忧郁、伤感、悲哀、恐惧等心理反应例如，深蓝色会引起低沉、郁闷的感觉，也会产生陌生感、孤独感 第三节电商视觉设计色彩应用3.1色彩基础知识7．橙色橙色与红色同属暖色，兼有红色与黄色之间的色彩性格，具有红色与黄色的优点橙色给人的抽象联想是愉快、激情、活跃、热情、精神、活泼、甜美，让人联想到火焰、霞光、灯光、水果、美食、营养、香甜、夏天等，使人产生热情、严肃、快乐、甜蜜、幸福的心理反应橙色的使用能体现活泼、愉快、有朝气、柔和，使人感到温暖又明快但是橙色也有疑惑、嫉妒等消极倾向，带给人们危险、紧迫等心理反应在特定的国家和地区，橙色又与欺诈有联系 第三节电商视觉设计色彩应用3.1色彩基础知识8．绿色绿色具有蓝色的沉静和黄色的明朗，被称为天然之色、春天之色、生存之色绿色给人的抽象联想是春天、新鲜、青春、和平、希望、温和、舒适、平静、安逸、安宁、安全，让人联想到大自然、生命、植物、树叶、小草、蔬菜、青苹果、青年人等，使人产生健康、酸涩、纯真、放松、清淡、凉爽的心理反应。
但是绿色又与某些尚未成熟的果实的色彩一致，因而会引起酸与苦涩的味觉深绿易带来低沉、消极、冷漠感 第三节电商视觉设计色彩应用3.1色彩基础知识9．紫色紫色既有红色的个性又有蓝色的特征，是一个极易受亮度影响而使情感意味截然相反的色彩紫色给人的抽象联想是高贵、神秘、豪华、温柔、思念、自傲、悲哀，让人联想到紫罗兰、熏衣草、葡萄、藤花、紫水晶等，使人产生浪漫、妩媚、奢华、优雅、魅力、庄重、梦幻、特别、忧郁、忏悔的心理反应紫色的使用能体现优美高雅、雍容华贵、神秘感、女性化红紫色表现神圣的爱和精神统一；含浅灰色的红紫色或蓝紫色，有着类似太空、宇宙色彩的幽雅、神秘之时代感，为现代生活所广泛采用但是紫色有时也会给人孤寂、混乱、消极感蓝紫色表现孤独；暗紫色会引起低沉、烦闷，给人一种压迫威胁、恐怖的感觉，仿佛预示着潜伏的灾难即将到来尤其是较暗或含深灰色的紫色，易给人不祥、腐朽、死亡的印象 第三节电商视觉设计色彩应用3.2电商网店视觉图像的色彩调整（一）网店视觉图像的色彩调整技术1．关于图像的色彩2．色彩模式的转换1）色彩模式转换注意的问题2）各种色彩模式之间的转换3．图像的色调调整1）色阶与自动色阶2）曲线调整3）亮度与对比度4）反相5）色调均化6）阈值7）色调分离8）色彩平衡9）关于直方图4．图像的色彩调整1）色相/饱和度2）替换颜色3）变化4）去色5）渐变映射6）色调分离7）可选颜色 第三节电商视觉设计色彩应用3.2电商网店视觉图像的色彩调整（二）电商网店视觉图像的亮度与对比度调整（三）电商网店视觉图像的偏色调整（1）准备好需要调整的商品图片。
（2）调整的方案是首先进行曲线调整，使图像整体的亮度加大（3）曲线调整后图像已经明显变亮（4）其次进行色相/饱和度调整，控制调整参数（5）调整后的图像已经明显发生变化（6）再次进行色彩平衡调整（7）最后对图像的亮度与对比度进行适当的补充性调整，幅度不能太大，参数可以根据具体情况来定（8）图像最后的调整效果是服装的整体颜色回归本色 第三节电商视觉设计色彩应用3.3电商网店的配色（一）电商网店页面的配色方案1．色彩搭配原则1）渐进配色2）对比配色3）色调配色4）近似配色5）单重点配色6）分隔式配色 第三节电商视觉设计色彩应用3.3电商网店的配色2．电商网店风格的形成要素店铺风格的形成要素主要包括店铺的主要风格、产品的情绪、活动的主题气氛、店铺的包装色彩和VI配色1）店铺的主要风格:经营不同的商品需要不同的店铺风格，否则就会让人觉得不伦不类2）产品的情绪:产品情绪是指产品本身赋予色彩的情感3）活动的主题气氛:店铺活动的主题气氛主要通过店铺的配色和装饰来烘托。
4）店铺的包装色彩：人们对一个店铺色彩的记忆往往倾向于包装，毕竟收到实物的第一感观才是真实的，包装本身也代表了整个店铺的风格定位5）VI配色：VI配色是指在网店配色中的主色彩，主要分为单色VI、双色VI和多色VI 第三节电商视觉设计色彩应用3.3电商网店的配色（二）电商网店页面的配色误区店铺的装修对其销售的帮助非常大，越来越多的卖家已经认识到这一点在店铺装修时，千万要注意颜色的运用及色彩搭配，因为不合理的色彩搭配反而会造成负面影响1．色彩过多2．背景和文字对比不强烈3．过分强调色彩的刺激度 第四节电商视觉设计文字应用4.1电商视觉设计中的字体（一）字体字体（文字）作为一种视觉符号，与色彩、形状共同构成了视觉传达的“铁三角”在企业营销活动中，不可能缺少文字这一视觉符号企业和品牌的标志、产品、包装、广告等涉及视觉传达范围的活动必然离不开文字视觉营销的核心就是通过视觉传达影响消费者的购买行为这也就决定了字体在视觉营销中具有与色彩、形状相同的重要作用（二）字体设计字体设计是视觉传达设计的一个重要的组成部分，按照视觉设计规律，遵循一定的字体塑造规格和设计原则对文字加以整体的精心安排。
创造性地塑造具有清晰、完美的视觉形象的文字，使之既能传情达意，又能表现出使人赏心悦目的美感也就是运用视觉美学规律，配合文字本身的含义和所要传达的目的，对文字的形象、大小、排列、笔画结构乃至色彩等方面加以研究、设计和艺术处理，使其具有适合传达内容的感性或理性表现和优美的造型，能有效地传达文字深层次的意味和内涵，发挥更佳的信息传达效果 第四节电商视觉设计文字应用4.1电商视觉设计中的字体（三）字体的视觉效果及设计风格1．衬线字体与无衬线字体1）衬线字体2）无衬线字体3）衬线字体与无衬线字体的视觉效果2．字体的设计风格1）端庄秀丽的风格2）坚固挺拔的风格3）深沉厚重的风格4）欢快轻盈的风格 第四节电商视觉设计文字应用4.2电商网店的字体设计（一）电商网店字体设计的表现形式字体设计作为一种元素，在电商视觉设计中存在着各种变化形式，起到辅助并完善视觉设计的作用当字体设计与广告画面进行良好的结合时，可以使消费者对产品信息的接收更快速、更深刻，从而记住并购买产品1．笔形创新2．化繁就简3．移花接木4．三维空间5．装饰美化 第四节电商视觉设计文字应用4.2电商网店的字体设计（二）网店字体设计的原则字体设计是视觉传达设计的重要手段，主要任务就是对文字的形象进行符合设计对象特性要求的艺术处理，以增强文字的视觉效果。
同时，信息传播也是字体设计最基本的功能，将正确无误的信息传达给受众，是字体设计的目的，否则将失去了它的基本功能1．实用2．可辨3．统一4．美感5．创意 第五节电商视觉设计创意5.1电商网店视觉设计中的形状（一）视觉中的点点看起来是个简单的图形，可以作为其他所有图形的构成基础人们的注意力很容易被点所吸引，而且点又很容易和周边图形形成明显的对比，如方形、三角形、圆形，甚至不规则图形或是某种平面图形但是，对比其周边的空间来说，该形状在电商视觉设计中即为点（二）视觉中的线线的性质是运动的，代表着一个方向或一种引导点具有聚焦的功能，而线则具有分隔空间、连接物体的功能，同时具有一种韵律的跳跃感线的粗细、疏密的不同组合，都将产生不同的韵律波形的曲线更是让画面具有流动感（三）视觉中的面当点大到一定程度时，其轮廓就可以形成一个面面越大，点的特性越不明显面可以是圆形、方形、三角形等规则形状，也可以是外形不规则的异形轮廓 第五节电商视觉设计创意5.2形状的创意处理（一）形状的分析形状的分析是指在所决定使用的各个形状之间，确定主导、次要、从属、辅助的关系，并找到它们之间的相似性和关联性。
在各个形状之间要有一个是占优势地位的主导形状，它是表达主题的最重要元素主导形状和次要形状一般在一起，留下的空间用一些小的形状完成构图的均衡感（二）形状的打散形状的打散是指遵照形式的组合原理，把一个形状通过分割、剪切、清除和明暗对比等方式，改变其原有的物理形状特征，从而获得形式美感（三）形状的提炼根据物理形状重要性的不同，突出或弱化某一物理形状，从而拉大各物理形状间的差距，增加其差异性，使某些关键形状更加突出，从而形成层次感，在表达上更加明确、有力 第五节电商视觉设计创意5.2形状的创意处理（四）形状的轮廓形状的轮廓在空间内形成的节奏体现的是形状的结构美对不同的形状轮廓所组合成的整体结构边线，进行有序的组织，利用轮廓来打造主导形状的节奏美感，从而营造明晰、起伏回旋的连续律动（五）形状的协调视觉设计的基本要求就是把决定使用的所有物理形状组成一个和谐的整体如果各个物理“形状”互不相干，那么整体将呈现无序和混乱状态当所有的物理形状都和谐一致时，就获得了协调性相同形状的重复通常体现了直观的和谐，相似的形状通过协调也能达到和谐。