第1章 了解视觉设计的内容（课件）《电子商务视觉设计》（电子工业出版社）

第1章 了解视觉设计的内容 知识目标和技能目标 知识目标 了解视觉设计的内容 掌握电商网店的视觉定位 了解视觉营销的内容 技能目标 能够掌握商品文案的策划 能够拍摄产品 能够处理图片 学习重点和难点 学习重点 电商网店视觉图像的色彩调整；电商网店的字体设计 学习难点 电商网店视觉设计创意及构图 第一节 电商视觉设计概述 1.1视觉设计 视觉设计是针对眼睛功能的表现手段，通俗地说，就是指通过一些设计让产品的视觉效果更加出彩。因为这些设计是针对我们眼睛的特点进行的，所以又被称为视觉设计。视觉设计大体上可分为视觉识别设计和视觉传达设计。 （一）视觉识别设计 （二）视觉传达设计 1.2视觉营销 视觉营销是一个外来词，英文为Visual Merchandising，简写为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 形状的创意处理 （四）形状的轮廓 形状的轮廓在空间内形成的节奏体现的是形状的结构美。对不同的形状轮廓所组合成的整体结构边线，进行有序的组织，利用轮廓来打造主导形状的节奏美感，从而营造明晰、起伏回旋的连续律动。 （五）形状的协调 视觉设计的基本要求就是把决定使用的所有物理形状组成一个和谐的整体。如果各个物理“形状”互不相干，那么整体将呈现无序和混乱状态。当所有的物理形状都和谐一致时，就获得了协调性。相同形状的重复通常体现了直观的和谐，相似的形状通过协调也能达到和谐。 $$