资源简介

(共29张PPT)
第二章
浅析电商视觉营销设计基础
电商视觉营销设计
合理运用色彩，让营销更出色
03
色彩是影响视觉效果的重要因素，要想得到满意的色彩搭配效果，就需要了解色彩的基础知识及传递的情感，并掌握色彩搭配的技巧。
2.3.1 色彩三要素
在有彩色系中，任何一种颜色都具有色相、纯度、明度这三个基本属性，它们被称 为色彩三要素。
（1）色相：是指色彩的相貌，它是色彩的首要特征，用于区别不同的颜色，如红色、橙色、黄色、绿色、蓝色、紫色等，如下图所示。
2.3.1 色彩三要素 1. 色相
红色 橙色 黄色 绿色 蓝色 紫色
（2）纯度：是指色彩的纯净程度，也称饱和度。色彩纯度的高低取决于该色彩中主色和杂色的比例，主色比例越大，纯度越高，色彩越鲜艳；反之，纯度越低，色彩越暗淡。
例如，若红色为主色，灰色为杂色，为红色加入不同比例的灰色后，红色的纯度变化如下图所示。
2.3.1 色彩三要素 2. 纯度
红色
（主色）
灰色
（杂色）
纯度高 纯度低 加入的灰色比例逐渐增大
（3）明度：是指色彩的明暗程度。色彩的明度有两种情况，一是同一色相的不同明度，如在同一种颜色中加入不同比例的黑色后产生不同的明暗层次（见下图），二是各种色相之间的明度差别，如在同样的纯度下，黄色的明度最高，紫色的明度最低。
2.3.1 色彩三要素 3. 明度
红色
黑色
明度高 明度低
加入的黑色比例逐渐增大
2.3.2 色彩表达的情感
色彩本没有具体的意象，但人们却能感受到色彩传递的情感，这是因为人们在这个五彩缤纷的世界中积累了许多关于色彩的视觉经验，当这些经验与外来色彩产生一定的呼应时，就会在人们的心理上引发某种情绪，这就是色彩带给人的视觉效应。
因此，在对店铺进行视觉营销设计时，应根据品牌特性和商品属性，恰当地使用色彩。
扫一扫
色彩的感官联想
点击此处播放微课
1.3.1 电商视觉营销在店铺首页中的应用
（1）红色系。红色易使人联想到太阳、节日、火焰等，象征着喜悦、热情、自信、活泼、积极等。
以红色为主的画面视觉冲击力强，能瞬间吸引人们的目光。在我国，红色还是一种具有喜庆色彩的颜色，常用于表现节日促销专题页，以及婚庆类店铺页面等。
红色在节日促销专题页中的应用
2.3.2 色彩表达的情感 1. 红色
（2）黄色系。黄色是有彩色系中明度最高、最活跃的颜色，象征着活力、轻快、开朗、辉煌、希望等（橙色是红色和黄色的中间色，其视觉效应与黄色相似），常用于童装类、食品类等店铺页面中。
黄色在童装海报中的应用
2.3.2 色彩表达的情感 2. 黄色
绿色系。绿色象征着健康、自然、清新、安全，是所有色彩中最能让人放松的颜色，它对人的精神有镇静和恢复作用，常用于化妆品类、药品类等店铺页面中。
2.3.2 色彩表达的情感 3. 绿色
（4）蓝色系。蓝色易让人联想到高远的天空、广阔的海洋、深邃的宇宙等，象征着静谧、深邃、理智、深沉、现代等（青色是蓝色和绿色的中间色，其视觉效应与蓝色相似），常用于数码类、生活电器类（如下图）等店铺页面中。
蓝色在生活电器海报中的应用
2.3.2 色彩表达的情感 4. 蓝色
（5）紫色系。紫色是由温暖的红色和静谧的蓝色混合而成的颜色，其视觉效应比较复杂，明度不同，表现出的情感截然不同。
例如，深紫色给人神秘、忧郁等感觉；浅紫色给人清新、梦幻等感觉；而明度适中的紫色给人高贵、浪漫、优雅等感觉。
在店铺视觉营销设计中，紫色常用于饰品类、化妆品类等店铺页面中。
2.3.2 色彩表达的情感 5. 紫色
2.3.2 色彩表达的情感 6. 无彩色
金属色
也称光泽色，主要指金色和银色，是最华丽的颜色，恰当地使用金属色有利于提升商品和店铺的品质与档次。
无彩色系包括以下4种。
白色
象征着纯洁、神圣、干净、雅致，一些文艺范、高雅范的商品和店铺中，常使用白色作为画面主色，从而突显商品格调。
灰色
象征着沉稳、高雅、温和，任何颜色都可以与其搭配使用，因此其常用作背景颜色。
黑色
象征着深沉、庄重、严肃，属于百搭色，与其他颜色结合使用，能表现出丰富多变的效果。
（6）无彩色。在店铺视觉营销设计中，无彩色系常用于数码类、高档饰品类等店铺页面中。
黑色在耳机详情页中的应用
2.3.2 色彩表达的情感 6. 无彩色
知识库
色彩基调影响着店铺风格。例如，视觉营销设计中大面积使用明度、纯度较高的绿色，就会使店铺呈现小清新风；大面积使用中国传统色彩——鹅黄色，就会使店铺呈现中国风。
2.3.2 色彩表达的情感
小清新风店铺首页（部分）
中国风店铺首页（部分）
2.3.3 三大配色技巧
在进行视觉营销设计时，恰当地采用色彩搭配小技巧，可以使画面效果更加协调、亮眼，从而吸引更多消费者的注意。
下面介绍店铺视觉营销设计中常用的三大配色技巧。
色相对比是指两种以上的颜色因色相差别而形成的对比。色相对比是色彩搭配时最常用的方法。
色相环上颜色间的距离决定了色相对比的强弱，距离愈近，对比愈弱；距离愈远，对比愈强。
2.3.3 三大配色技巧 1. 色相对比配色
（1）同类色对比：色相环上相距 15°以内的色彩称为同类色。同类色对比通常是同一色相中的不同纯度与不同明度的色彩对比，易产生柔和、协调的画面效果。
例如，女士挎包海报中采用不同明度的红色搭配，整个画面十分协调，给人以柔和、舒适的感觉。
同类色对比在女士挎包海报中的应用
　同类色
2.3.3 三大配色技巧 1. 色相对比配色
（2）邻近色对比：色相环上相距 15°～ 30°的色彩称为邻近色。运用邻近色对比的画面色调和谐统一，具有雅致、柔和的特性。
例如，化妆品店铺首页中采用橙色和黄色搭配，整个画面和谐统一，给人以温和、细腻的感觉。
邻近色对比在化妆品专题页中的应用
　 邻近色
2.3.3 三大配色技巧 1. 色相对比配色
（3）类似色对比：色相环上相距 30°～ 60°的色彩称为类似色。类似色对比拥有邻近色对比的特性，又较邻近色对比显得更加丰富、活泼。
例如，家居用品海报中采用红色和黄色搭配，整个画面既和谐又活泼，给人以饱满、热情的感觉。
类似色对比在家居用品海报中的应用
类似色
2.3.3 三大配色技巧 1. 色相对比配色
（4）对比色对比：色相环上相距 120°左右的色彩称为对比色。运用对比色对比的画面具有醒目、饱满、动感等视觉效果。
但对比色在色相环上的跨度较大，容易使人产生视觉及精神上的疲劳，因此适当降低对比色的纯度，可为画面增添和谐之感。
例如，湿巾详情页中采用绿色和黄色搭配，整个画面十分饱满，给人以鲜明、轻快的感觉。
对比色对比在湿巾详情页中的应用
　对比色
2.3.3 三大配色技巧 1. 色相对比配色
（5）互补色对比：色相环上相距 180°左右的色彩称为互补色。互补色对比是色相对比中最强烈的色彩搭配，因此运用互补色对比的画面具有极强的视觉冲击力。
例如，服装海报中采用蓝色和黄色搭配，整个画面十分鲜明、艳丽，给人以强烈、刺激的感觉。
互补色对比在服装海报中的应用
互补色
2.3.3 三大配色技巧 1. 色相对比配色
色彩的冷暖对比是指因色彩感觉的冷暖差异而形成的对比。色相是影响色彩冷暖的主要因素。
从色彩心理学的角度来说，最冷的颜色是蓝色，最暖的颜色是橙色，蓝色与橙色是色彩冷暖的两个极端，同时也是一对互补色。
如果在色相环上将冷暖的两极互相连线，就可以清楚地区分出冷暖两组色彩，即红色、橙色、黄色为暖色，蓝紫色、蓝色、蓝绿色为冷色，如右图所示。另外，绿色、紫色为中性色。
暖色
冷色
冷暖色彩划分
2.3.3 三大配色技巧 2. 冷暖对比配色
2.3.3 三大配色技巧 2. 冷暖对比配色
对比性暖色调：指画面中面积最大、作用最强的色彩属于暖色调，整个画面只辅以小面积的冷色调。
例如，母婴用品详情页中大面积使用橙色、黄色，小面积使用蓝色，整个画面既和谐又富有变化。
2.3.3 三大配色技巧 2. 冷暖对比配色
对比性冷色调：指画面中面积最大、作用最强的色彩属于冷色调，整个画面只辅以小面积的暖色调。
例如，电子产品详情页中大面积使用蓝色，小面积使用黄色，整个画面柔和、统一。
2.3.3 三大配色技巧 2. 冷暖对比配色
2.3.3 三大配色技巧 3. 渐变与分离配色
渐变配色是不同色彩之间过渡和缓的配色方法，采用渐变配色的画面能给人温柔、唯美的感觉。
　采用渐变配色的画面效果
采用分离配色的画面效果
分离配色是不同色彩之间界限分明的配色方法，采用分离配色的画面能给人利落、整齐的感觉。
看到一些配色舒适、惊艳的作品时，可将其中的颜色提取出来并应用到自己的作品中。另外，还可以借助一些专门的配色网站进行配色，如 Adobe Color（https://color.）、WebGradients（https://）。
其中，Adobe Color 是比较权威的色彩搭配网站之一，拥有来自全世界设计师的配色方案，其数量和质量都比较高；WebGradients 提供了大量漂亮的渐变配色方案，以及配色方案下载和 CSS代码复制功能。
小提示
2.3.3 三大配色技巧 3．渐变与分离配色
谢谢观看

展开更多......

收起↑