电商视觉营销的配色及构图
合集下载
电商视觉营销图文
01
ቤተ መጻሕፍቲ ባይዱ
02
03
色彩心理学
运用色彩心理学原理，选 择与品牌形象、产品特点 相符合的颜色，以激发消 费者的情感共鸣。
色彩对比与调和
通过对比色、邻近色、冷 暖色等搭配，营造出层次 感、立体感和视觉冲击力。
色彩情感表达
利用色彩的情感属性，如 红色代表热情、蓝色代表 冷静，传递品牌价值和产 品卖点。
字体选择与排版
产品展示与差异化
产品展示
利用高质量的图片、视频和3D模型等多媒体手段，全面展示产品的外观、功能 和特点。
差异化
通过创意和个性化的产品呈现，使产品在众多竞争对手中脱颖而出，提高用户关 注度。
用户体验与互动设计
用户体验
优化网站布局、导航和信息架构，提供简单、直观的购物流 程，降低用户操作难度。
互动设计
电商视觉营销的重要性
01
提高品牌知名度和形象
通过视觉设计传达品牌理念和价值观，提升品牌形象和 认知度。
02
提升用户体验
良好的视觉设计可以增强用户对网站的友好感和易用性 ，提高用户满意度。
03
提高转化率
吸引人的视觉元素可以激发消费者的购买欲望，促进转 化率的提升。
电商视觉营销的历史与发展
历史
电商视觉营销起源于互联网的初期， 随着技术的发展和消费者需求的演变 而不断发展。
图片修饰
运用裁剪、滤镜、调色等技巧， 突出产品特点，增强视觉效果。
图文结合
将文字与图片有机结合，形成视 觉冲击力，提高用户转化率。
动画效果与交互设计
动画效果
动态交互
运用动画效果，如渐变、旋转、缩放 等，吸引用户注意力，提高点击率。
利用动态交互元素，如交互动画、3D 效果等，增强用户参与感和沉浸感。
6.网店视觉营销
视觉营销
— 1—
店铺装修
1 走进视觉营销 2 店招视觉营销 3 主图视觉营销 4 广告图视觉营销 5 详情页视觉营销
1 走进视觉营销
1 走进视觉营销
1.1 视觉营销的定义
视觉营销是指利用色彩、图像、文字等造成的冲击力来吸引潜 在客户的关注，由此增加商品和网站的吸引力，从而达到营销制胜 的效果。
步骤3：将抠好
的图片放到主图文件 中。首先按Ctrl+A组 合键全选素材图，然 后按Ctrl+C组合键复 制素材图，再按 Ctrl+Tab组合键切换 到主图文件中，最后 按Ctrl+V组合键将素 材图粘贴到主图文件 中，如下图。
3 4
步骤4：复制一个商品
图片，给商品图片加一个倒 影。首先按Ctrl+A组合键 全选素材，然后按Ctrl+C复 制一个图层，再按Ctrl+V组 合键粘贴图层，最后按 Ctrl+T组合键自由变换鼠标， 右击，在弹出的快捷菜单中 选择“垂直翻转”命令，然 后拖动图片到相应的位置， 如下图。
4 广告图视觉营销
（2）钻石展位广告图
钻石展位广告图
4 广告图视觉营销
（3）活动广告图
聚划算活动广告图
4 广告图视觉营销
2.广告图的设计原则
每个广告图都要有一
1 个明确的主题，在主题确
定好后，所有的元素都要
3
围绕这个主题展开。展示
鞋透气这一特点，如图所
在处理广告图的 色彩和构图方式时需
推广主题清晰
图片文案两边分构图法是最便捷也是最不容易犯错的构图方法，即将 图片和文字各放一边，但在文案排版上一定要突出中心点，如图所示。
4 广告图视觉营销
图片文案两边分构图法
— 1—
店铺装修
1 走进视觉营销 2 店招视觉营销 3 主图视觉营销 4 广告图视觉营销 5 详情页视觉营销
1 走进视觉营销
1 走进视觉营销
1.1 视觉营销的定义
视觉营销是指利用色彩、图像、文字等造成的冲击力来吸引潜 在客户的关注，由此增加商品和网站的吸引力，从而达到营销制胜 的效果。
步骤3：将抠好
的图片放到主图文件 中。首先按Ctrl+A组 合键全选素材图，然 后按Ctrl+C组合键复 制素材图，再按 Ctrl+Tab组合键切换 到主图文件中，最后 按Ctrl+V组合键将素 材图粘贴到主图文件 中，如下图。
3 4
步骤4：复制一个商品
图片，给商品图片加一个倒 影。首先按Ctrl+A组合键 全选素材，然后按Ctrl+C复 制一个图层，再按Ctrl+V组 合键粘贴图层，最后按 Ctrl+T组合键自由变换鼠标， 右击，在弹出的快捷菜单中 选择“垂直翻转”命令，然 后拖动图片到相应的位置， 如下图。
4 广告图视觉营销
（2）钻石展位广告图
钻石展位广告图
4 广告图视觉营销
（3）活动广告图
聚划算活动广告图
4 广告图视觉营销
2.广告图的设计原则
每个广告图都要有一
1 个明确的主题，在主题确
定好后，所有的元素都要
3
围绕这个主题展开。展示
鞋透气这一特点，如图所
在处理广告图的 色彩和构图方式时需
推广主题清晰
图片文案两边分构图法是最便捷也是最不容易犯错的构图方法，即将 图片和文字各放一边，但在文案排版上一定要突出中心点，如图所示。
4 广告图视觉营销
图片文案两边分构图法
电商视觉营销 第2版 第6章 商品详情页的视觉营销设计
商品卖点图虽然可以使用户更直观地查看商品，但商品的一些具体参数， 如材质、硬度、品质和厚薄等无法通过肉眼获取准确的信息。此时，就需要 制作商品信息展示图，为商品详情页添加参数说明，让用户对商品有更直观 的了解，从而让商品详情页更具有参考性。
6.4.1 商品信息展示图的设计要点
商品参数是用户非常关注的商品信息之一，清晰、准确和易理解的参数可以给用 户挑选商品提供很大的便利；反之，则不利于用户判断商品信息，从而使用户难以做 出购买决策。
6.1.1 商品详情页的视觉营销重心
商品详情页常见的视觉营销重心包括以下2种。
引起用户关注和兴趣
树立店铺形象
（1） （2）
6.1.2 商品详情页应遵循的设计原则
商品详情页是刺激用户下单的重要页面，从商家的角度看，引导用户下单是商品 详情页的首要任务，而要完成这一任务，应先遵循设计原则，了解商品详情页的页面 规划，避免在设计过程中走入误区，影响成交量。
第6章
商品详情页的视觉营 销设计
电商视觉营销（第2版）
商品详情页营销设计
6.1
焦点图设计
6.2
商品卖点图设计
6.3
商品信息展示图设计
6.4
商品细节图设计
6.5
CONTENTS
目录
本节导读
如果说首页是店铺的脸面，那么商品详情页就是店铺的骨血。商品详情页不仅 能向用户展示商品的规格、颜色、细节和材质等具体信息，还能向用户展示商品的 优势。用户是否喜欢该商品，常取决于店铺的商品详情页。
6.3.4 商品卖点图的设计与制作
除螨仪的卖点包括深层穿透、44 000次/分拍打、轻巧、物理除螨、四重过滤和 清洗方便等。
在设计时先提出没有除螨仪将会出现哪 些问题，然后依次对卖点进行展现，最 后可将检验报告放置于图中，打消用户 对商品品质的顾虑，其具体操作如下。
6.4.1 商品信息展示图的设计要点
商品参数是用户非常关注的商品信息之一，清晰、准确和易理解的参数可以给用 户挑选商品提供很大的便利；反之，则不利于用户判断商品信息，从而使用户难以做 出购买决策。
6.1.1 商品详情页的视觉营销重心
商品详情页常见的视觉营销重心包括以下2种。
引起用户关注和兴趣
树立店铺形象
（1） （2）
6.1.2 商品详情页应遵循的设计原则
商品详情页是刺激用户下单的重要页面，从商家的角度看，引导用户下单是商品 详情页的首要任务，而要完成这一任务，应先遵循设计原则，了解商品详情页的页面 规划，避免在设计过程中走入误区，影响成交量。
第6章
商品详情页的视觉营 销设计
电商视觉营销（第2版）
商品详情页营销设计
6.1
焦点图设计
6.2
商品卖点图设计
6.3
商品信息展示图设计
6.4
商品细节图设计
6.5
CONTENTS
目录
本节导读
如果说首页是店铺的脸面，那么商品详情页就是店铺的骨血。商品详情页不仅 能向用户展示商品的规格、颜色、细节和材质等具体信息，还能向用户展示商品的 优势。用户是否喜欢该商品，常取决于店铺的商品详情页。
6.3.4 商品卖点图的设计与制作
除螨仪的卖点包括深层穿透、44 000次/分拍打、轻巧、物理除螨、四重过滤和 清洗方便等。
在设计时先提出没有除螨仪将会出现哪 些问题，然后依次对卖点进行展现，最 后可将检验报告放置于图中，打消用户 对商品品质的顾虑，其具体操作如下。
《电商视觉营销一本通》教学课件—04商品主图视觉营销
需求的商品，才可能被点击，继
而使商品获得流量。
4.1.2 影响商品主图引流效果的主要因素
4
商品主图的质量决定着商品的流量。从电商视觉营销的角度分析，商家必须了解影响商品 主图质量的主要因素，才能对商品主图的视觉呈现效果进行合理优化，以满足消费者的视觉需 求或购物需求，吸引他们来点击商品。结合消费者对商品主图视觉的需求，可以将影响商品主 图视觉质量的因素总结为以下5点。
4.4.6 节日营销文案
36
节日营销文案是利用节日进行促销的文案形式，主要通过营造节日气氛来开展促销活动， 常见的中国传统节日、西方重要节日，以及现在的“618”“双11”“双12”等电商节日等， 都可用作节日营销。节日营销文案一般基于节日特点进行写作和设计。
有 背 景 的 商 品 主 图
4.3.5 商品图片视觉优化
29
在设计有背景的商品主图时，可灵活运用场景、色彩、角度、模特、搭配、意境等元素突 出视觉卖点，触及消费者内心的感受。无背景商品主图多指白底或纯色背景的商品主图，商品 主图中几乎只有商品，没有其他修饰元素。
无 背 景 的 商 品 主 图
目录
第4章
商品主图视觉营销
电商视觉营销全能一本通
目录
CONTENTS
4.1 商品主图视觉营销数据分析 4.2 拍摄商品主图 4.3 打造商品主图营销视觉 4.4 打造商品主图文案视觉
4.1.1 商品主图与流量的关系
3
1．消费人群的分类
在电商平台上，流量是店铺发展的基石，有了流量，才可能有后续的转化，店铺才会有 收益。商品主图与商品流量是直接相关的，要想获得商品流量，就必须做好商品主图的视觉 设计。决定商品流量的因素主要有两个。
邀请专业拍摄团队需要进行的 工作比较简单，只需将拍摄风格、 拍摄张数等相应拍摄要求告知专业 拍摄团队即可。现在有很多专业的 线上商品拍摄工作室，商家也可在 电商平台的服务市场中寻找模特或 购买拍摄服务。
跨境电子商务视觉营销 3.3 构图
尽量不要用顺光，选择侧光或侧逆光以形成画面层次， 表现空气透视效果。
画面远处的景物线条透视和影调明暗，尽量避免画面的 平板、单调乏味和缺乏层次感。
远景
取景与构图 全景
全景,它给人们带来全新的真实现场感和交互式的感受,一般表现人物全身形象或某一具体场景全貌 的画面,拍摄全景时需要注意的是空间深度的表达，以及主体轮廓线条、形状的特征化反映，而且还需 要着重于环境的渲染和烘托
所谓平衡，并不是指画面中的产品形状、数量、大小、排 列的对称，而是指视觉和重量上的稳定。
比如同样的配饰，如果颜色明度很低，那么就应该适当减 少其在画面中所占的比例；如果颜色明度很高，就可以扩大其 在画面中的比例以达到画面的整体重量平衡。
取景与构图
斜线构图
斜线构图可分为立式斜垂线和平式斜横线两种。 常表现运动、流动、倾斜、动荡、紧张、危险、一泻 千里等场面，也有的画面利用斜线指出特定的物体， 起到一个固定导向的作用。
跨境电商 视觉营销
商品拍摄
CONTENTS
目录
3.1 商品拍摄基础 3.2 布光 3.3 构图
第三节
构图
怎样才能拍摄和设计 出高质量的图片？
本节要点
01 取景与构图 02 商品陈列拍摄构图技巧 03 电商产品常用的展示角度
取景与构图 取景
远景
大远景
大特写
拍摄
中景
近景
纯色背景图片
实景图片
商品陈列拍摄构图技巧
纯色背景图片
纯色背景图片是指图片背景中没有任何的装饰和修饰， 在单一的颜色下展示产品的拍摄风格。
这种风格的图片通常都是居中构图，画面简单明了， 能够直观展示产品信息。纯色背景的优势是不仅可以突出 产品，而且细节明了、清晰，而且产品的材质属性也可以 更好的展示，使整个店铺的风格看起来非常协调统一。
画面远处的景物线条透视和影调明暗，尽量避免画面的 平板、单调乏味和缺乏层次感。
远景
取景与构图 全景
全景,它给人们带来全新的真实现场感和交互式的感受,一般表现人物全身形象或某一具体场景全貌 的画面,拍摄全景时需要注意的是空间深度的表达，以及主体轮廓线条、形状的特征化反映，而且还需 要着重于环境的渲染和烘托
所谓平衡，并不是指画面中的产品形状、数量、大小、排 列的对称，而是指视觉和重量上的稳定。
比如同样的配饰，如果颜色明度很低，那么就应该适当减 少其在画面中所占的比例；如果颜色明度很高，就可以扩大其 在画面中的比例以达到画面的整体重量平衡。
取景与构图
斜线构图
斜线构图可分为立式斜垂线和平式斜横线两种。 常表现运动、流动、倾斜、动荡、紧张、危险、一泻 千里等场面，也有的画面利用斜线指出特定的物体， 起到一个固定导向的作用。
跨境电商 视觉营销
商品拍摄
CONTENTS
目录
3.1 商品拍摄基础 3.2 布光 3.3 构图
第三节
构图
怎样才能拍摄和设计 出高质量的图片？
本节要点
01 取景与构图 02 商品陈列拍摄构图技巧 03 电商产品常用的展示角度
取景与构图 取景
远景
大远景
大特写
拍摄
中景
近景
纯色背景图片
实景图片
商品陈列拍摄构图技巧
纯色背景图片
纯色背景图片是指图片背景中没有任何的装饰和修饰， 在单一的颜色下展示产品的拍摄风格。
这种风格的图片通常都是居中构图，画面简单明了， 能够直观展示产品信息。纯色背景的优势是不仅可以突出 产品，而且细节明了、清晰，而且产品的材质属性也可以 更好的展示，使整个店铺的风格看起来非常协调统一。
电商视觉营销 第2版 第4章 店铺首页的视觉营销设计
• 植入品牌形象 • 抓住商品定位
4.2.2 店招与导航的设计与制作
WISDOM店铺需要制作店招和导航，用于展示店铺品牌形象和商品信息。在制作 店招与导航时，输入店铺的英文名称，并进行变形设计，然后添加热卖商品，最后根 据商品分类制作导航，具体操作如下。
1. 输入文字
2 . 转换为形状
3 . 调整文字
4.1.2 店铺首页结构布局
1．页头
页头位于店铺首页的顶端，包括店招和导航。卫仕官方旗舰店首页页头效果如图所示。
店招也叫店铺招牌，位于店铺页面的最上 方，主要由品牌Logo、品牌名称、少量文 案、商品图片和收藏按钮等部分组成。
店招
导航位于店招的下方，主要用 于展示店铺的商品分类，方便 用户快速寻找店铺内的商品。
构图
全屏海报需要保持色调 的统一，可通过明暗对 比和颜色搭配来确定全 屏海报的整体风格，重 要的文字信息则用突出 醒目的颜色进行强调。
配色
4.3.3 全屏海报的表现手法
全屏海报的表现手法主要包括直接展示法、对比衬托法和突出特征法。
直接展示法
流直接展示法是一 种运用较广泛的表 现手法，它将商品 或主题以突出、引 人注目的方式呈现 出来，并直接展示 在全屏海报上。
4.2.2 店招与导航的设计与制作
WISDOM店铺需要制作店招和导航，用于展示店铺品牌形象和商品信息。在制作 店招与导航时，输入店铺的英文名称，并进行变形设计，然后添加热卖商品，最后根 据商品分类制作导航，具体操作如下。
1. 创建参考线
2. 输入文字
3 . 转换为形状
4 . 调整文字
4.2.2 店招与导航的设计与制作
4.1.1 店铺首页的视觉定位
1．品牌型视觉定位
网店视觉营销13精品PPT课件
天猫——立顿旗舰店
互补色
渐进配色
按色相、明度、纯度三要 素之一的程度高低依次排列 颜色。
色相渐变
写在最后
成功的基础在于好的学习习惯
The foundation of success lies in good hab达到一定目的而努力去干, 是为一个目标去 战胜各种困难的过程,这个过程会充满压力、痛苦和挫折
Learning Is To Achieve A Certain Goal And Work Hard, Is A Process To Overcome Various Difficulties For A Goal
1.3 视觉色彩
淘宝——七格格服饰
Kappa旗舰店
1.3.1 色彩基本属性
三原色：色光三原色、色料三原 色
色光三原色——加色法原理
色料三原色——减色法原理
孟塞尔颜色系统
饱和度
明度
色相
谢谢!
1.3.2 配色与信息传达的关系
伊登色环
类似色
跨境电子商务视觉营销 3.2 布光
常见的布光方法
一是人物两侧加上反光板减小光比， 使光线过渡更加自然；
二是人物应该站立于两灯平面的垂 直交点附近。
鳄鱼光拍摄时需要注意
常见的布光方法
轮廓光
在被摄体上能够勾勒出物体形状的 光线，是对着照相机的方向照射产生的 逆光效果，通常比背景亮，亮度也超过 主光。轮廓光能够达到勾画轮廓的作用， 当主体和背景影调重叠的情况下（比如 主体暗，背景亦暗），轮廓光可以分离 主体和背景。在用人工光照明中，轮廓 光经常和主光副光配合使用，使画面影 调层次富于变化，增加画面形式美感。
布光拍摄准备工作与技巧
✓让背景过曝，以达到抠图后的效果
在电商展示页面中，有些产品是需要纯白 色背景来展示的，但在实际拍摄时，即使 产品的背景是白色，也会由于前后光比的 原因，导致拍摄出来的背景呈现出灰白色。 此时可以在PVC背景板后面布置一盏灯， 并且调到相应的亮度，使得背景完全过曝， 这样就会得到一副纯白色背景的图片了。 但需注意，这样的布光方法不适合透明或 者半透明的产品。
光的分类
硬光适用于一些拥有独特个性和气质、偏男性或者中性的产品的拍摄， 比如：男装、食品、电器、3C产品等。
柔光适合那些让人感觉温柔、恬美、有安全感的产品的拍 摄，比如：母婴、家纺、健康生活方式、甜美女装等。
常见的布光方法
在一个拍摄场景当中，起主要作用的一个光源称为主光，其它若干个辅助补光的光源称为辅光。在 拍摄过程中，布光的原则是叠加，也就是把各种光源一个一个叠加起来构成复杂的灯光系统。布光首先 从单灯开始，布置好主要光源的位置和大小，然后再根据产品的特性和拍摄要求增加辅助光源。
布光拍摄准备工作与技巧
需要设计师后期抠图的产品
拍
摄
注
意
韩国电商BANNER的构图/配色/元素/应用分析总结
画面由一个主要元素撑满，主标题作为次要元素配合画面平衡，根据画面需求添加小标签装饰。
整体视觉冲击力强、张力足，适用于单个产品以及细节较为丰富的产品。
多个物体集中式构图和此方法同理，不再做单独分析。
构图二：杠杆式构图画面由主体物和次主体斜面对称而形成的杠杆关系，与主标题之间形成稳固的三角构造关系，此构图方式画面很饱满、稳固。
适合两种产品或一个产品两面展示时使用。
注：此构图名词参考张子建《气韵设计理论研究》，具体可参见其详细。
构图三：顶视角分散式构图顶视角度，以一个中心点向外发散，适用于产品展示比较多的情况。
对于发散过程中的节奏以及气韵走向的把握很重要，画面出彩但比较难掌控，因此在广告的应用中不常用。
构图四：折线跳跃式产品悬浮在画面中，上下可跨出画面，加以恰当的文字排版和辅助装饰，整体画面效果很活跃，延展性很强，是一种能快速达到视觉表现的展现方式。
此构图方式应用广泛。
二. 配色分析（从配色基础原理出发分析）色彩理论基础色环其实就是将彩色光谱中的长条色彩序列首尾连在一起，通常会看到不同版本的色环（光学色环、物理色环之分），色相之间略有偏差，但掌握好公式原理就不会出现偏差了。
上图为参考示意色环。
我们常见的配色方式有同色系、相似色、互补色、对比色搭配，这里在互补色里面划分出了补色分割（与互补色相邻的两边的颜色）以及单边补色分割，此配色方式的目的是为了让配色在形成鲜明对比的情况下又能有较高的融入度，较互补色而言柔和很多，补色分割在emart广告里面用的很多。
而矩形分割、广场分割则是在多色搭配情况下出现的配色方式，下面我们单独举例说明每个配色方式。
单色/同色系同色系搭配比较适合产品本身颜色比较统一的情况下，通过吸取产品较近的周边颜色而成，再通过添加合适的辅助元素使画面变得统一而丰富。
类似色类似色相对于单色系可变化的范畴会大很多，但也是在主色调明确的情况下辅助添加类似色，这类配色方式在banner应用中还比较常见。
视觉营销三大要素色彩文字版式
接着才会根据色彩的走向，对画面的主次进行逐一的了解，接下来本小节会对色彩的一些基础概 念进行讲解，这些基础知识也是后期网店装修配色中的关键所在。 1 色彩的种类
有彩色 有彩色指的是凡是带有某一种标准色倾向的色，光谱中的全部色都属于有彩色，有彩色以红、橙、 黄、绿、蓝、紫为基本色，其中基本色之间不同量的混合，以与基本色与黑、白、灰之间的不同 量组合，会产生成千上万的有彩色。 有彩色中的任何颜色都具有三大要素，即色相、明度、纯度，因此在图像的制作过程中，根据有 彩色的特性，通过调整其色相、明度以与其纯度间的对比关系，或通过各色彩间面积调和，可搭 配出色彩斑斓、变化无穷的网店装修画面效果。
在同色的彩 灰无的色彩概系色念列中中，的，称黑很为多无色人彩是都色所习系有惯。色把彩黑中、最白黑、暗灰的排色除在彩外，，通认常为能它够们给是人没以有沉颜重色的的，印其象实，在而色白彩色的是秩无序彩中色，中黑最色、白色以与各种深浅不
通常我容们易把受纯到度环分境为不影同响的的9一个个阶颜段色，其，中如1果～设3阶计段的的画饱面和中度白为色低的饱成和度分；越多，画面效果就越单纯。白色和 利用设计元素辅助文字的表现 有彩色黑中色的中任间何的颜色灰都色具具有有三平大凡要、素沉，默即的色特相征、，明度也、是纯很度多，时因候此网在店图装像修的中制作作过为程调中节，画根面据色有彩彩的色一的种特颜性色，通，过调整其色相、明度 以与其可纯以度给间人的留对下比关安系全，感或和通亲过切各感色。彩间面积调和，可搭配出色彩斑斓、变化无穷的网店装修画面效果。 从视觉的角度而言，我们最先感知的便是网店装修画面中的色彩，任何色彩都具备色相、明度和纯度三个基本要素，如何正确的运用 常见的如配左色图方所案示，为是网网店店装装修修设中计设必计备的的商技品能详。情页面，其中通过将无彩色与有彩色进行结合，使其形成 从例色：彩 （强本明烈身度的的一对功致比能的，上调来和突看配显，色出红）商色品是的对特局点兴，奋削作弱用辅的，助同图时像也的是内最容具，热同情时和这温样暖的的颜配色色。也让整个画面更具设计
有彩色 有彩色指的是凡是带有某一种标准色倾向的色，光谱中的全部色都属于有彩色，有彩色以红、橙、 黄、绿、蓝、紫为基本色，其中基本色之间不同量的混合，以与基本色与黑、白、灰之间的不同 量组合，会产生成千上万的有彩色。 有彩色中的任何颜色都具有三大要素，即色相、明度、纯度，因此在图像的制作过程中，根据有 彩色的特性，通过调整其色相、明度以与其纯度间的对比关系，或通过各色彩间面积调和，可搭 配出色彩斑斓、变化无穷的网店装修画面效果。
在同色的彩 灰无的色彩概系色念列中中，的，称黑很为多无色人彩是都色所习系有惯。色把彩黑中、最白黑、暗灰的排色除在彩外，，通认常为能它够们给是人没以有沉颜重色的的，印其象实，在而色白彩色的是秩无序彩中色，中黑最色、白色以与各种深浅不
通常我容们易把受纯到度环分境为不影同响的的9一个个阶颜段色，其，中如1果～设3阶计段的的画饱面和中度白为色低的饱成和度分；越多，画面效果就越单纯。白色和 利用设计元素辅助文字的表现 有彩色黑中色的中任间何的颜色灰都色具具有有三平大凡要、素沉，默即的色特相征、，明度也、是纯很度多，时因候此网在店图装像修的中制作作过为程调中节，画根面据色有彩彩的色一的种特颜性色，通，过调整其色相、明度 以与其可纯以度给间人的留对下比关安系全，感或和通亲过切各感色。彩间面积调和，可搭配出色彩斑斓、变化无穷的网店装修画面效果。 从视觉的角度而言，我们最先感知的便是网店装修画面中的色彩，任何色彩都具备色相、明度和纯度三个基本要素，如何正确的运用 常见的如配左色图方所案示，为是网网店店装装修修设中计设必计备的的商技品能详。情页面，其中通过将无彩色与有彩色进行结合，使其形成 从例色：彩 （强本明烈身度的的一对功致比能的，上调来和突看配显，色出红）商色品是的对特局点兴，奋削作弱用辅的，助同图时像也的是内最容具，热同情时和这温样暖的的颜配色色。也让整个画面更具设计
电商视觉营销设计模板ppt课件
1.1经典形式美法则
u1.1.1对称与均衡 u1.1.2重复与节奏 u1.1.3对比与统一 u课堂作业
5
1平面设计基础
1.2常用色彩配色设计法则及进阶学习
u1.2.1色彩搭配法则 u1.2.2色彩传达 u1.2.3色彩搭配自学进阶 u课堂作业
6
1平面设计基础
1.3字体的构成法则与编排
u1 . 3 . 1 字 体 在 版 面 中 的 构 成 法 则 u1 . 3 . 2 段 落 文 字 的 编 排 法 则 u1 . 3 . 3 追 求 最 优 视 觉 效 果 的 字 体 组 合 法 则 u课 堂 作 业 1 u课 堂 作 业 2 u课 堂 作 业 3
23
0
3
第3篇综合项目实战
24
6商品拍摄实战—— 以电热水壶为例
6.1商品拍摄的基本流程 6.2拍摄流程详解
课堂作业
25
7商品图片精修实战— — 以加湿器为例
7.1图片精修的基本思路 7.2精修流程详解
课堂作业
26
8促销广告设计实战— — 以小家电为例
8.1促销广告设计的基本流程 8.2制作过程详解
9
2常用模块视觉营销设计
2.2店招视觉营销设计
u2 . 2 . 1 与 店 铺 整 体 的 色 彩 和 风 格 统 一 u2 . 2 . 2 简 洁 大 气 ， 以 少 胜 多 u2 . 2 . 3 合 理 且 丰 富 的 营 销 手 段 u课堂作业
10
2常用模块视觉营销设计
2 . 3banner视觉营销设计
21
5图片处理
5.2图片色彩优化
u5.2.1修复图片颜色 u5 . 2 . 2photoshop中的色彩优化命令 u课堂作业 u5 . 2 . 2Photoshop中的色彩优化命令 u课堂作业
u1.1.1对称与均衡 u1.1.2重复与节奏 u1.1.3对比与统一 u课堂作业
5
1平面设计基础
1.2常用色彩配色设计法则及进阶学习
u1.2.1色彩搭配法则 u1.2.2色彩传达 u1.2.3色彩搭配自学进阶 u课堂作业
6
1平面设计基础
1.3字体的构成法则与编排
u1 . 3 . 1 字 体 在 版 面 中 的 构 成 法 则 u1 . 3 . 2 段 落 文 字 的 编 排 法 则 u1 . 3 . 3 追 求 最 优 视 觉 效 果 的 字 体 组 合 法 则 u课 堂 作 业 1 u课 堂 作 业 2 u课 堂 作 业 3
23
0
3
第3篇综合项目实战
24
6商品拍摄实战—— 以电热水壶为例
6.1商品拍摄的基本流程 6.2拍摄流程详解
课堂作业
25
7商品图片精修实战— — 以加湿器为例
7.1图片精修的基本思路 7.2精修流程详解
课堂作业
26
8促销广告设计实战— — 以小家电为例
8.1促销广告设计的基本流程 8.2制作过程详解
9
2常用模块视觉营销设计
2.2店招视觉营销设计
u2 . 2 . 1 与 店 铺 整 体 的 色 彩 和 风 格 统 一 u2 . 2 . 2 简 洁 大 气 ， 以 少 胜 多 u2 . 2 . 3 合 理 且 丰 富 的 营 销 手 段 u课堂作业
10
2常用模块视觉营销设计
2 . 3banner视觉营销设计
21
5图片处理
5.2图片色彩优化
u5.2.1修复图片颜色 u5 . 2 . 2photoshop中的色彩优化命令 u课堂作业 u5 . 2 . 2Photoshop中的色彩优化命令 u课堂作业
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CHAPTER FIVE
电商视觉营销的配色 及构图
学习目标
了解色彩搭配原则七要素的内容。 了解网店风格的形成要素。 掌握网店页面构图的方法。
营销界有个著名的“7秒定律”，即消费者会在7秒内决定是否
有购买商品的意愿，而在这短短的7秒内，色彩的决定因素占 比为67％，可见配色的重要性。除色彩元素外，消费者对图形 元素的感知也极为敏锐，利用一些主次分明的构图法，也能吸 引消费者的眼球。
单色VI 配色
双色VI 配色
多色VI 配色
Contents 目录
1 确定网店页面的配色 2 网店页面的黄金构图法
二、网店页面的黄金构图法
01 02 03 04
简单切割构图法 组合切割构图法 放射构图法 对称切割构图法
05 06 07 08
整体场景构图法 流程构图法 物体轮廓构图法 多重切割构图法
店铺的主题气氛
店铺的主题气氛
一、确定网店页面的配色
4 店铺的包装色彩
3 网店风格的形成要素
在确定网店主题色调时，应该注意与商品特性相符合，
或者与目标消费群体的特性相符合。
一、确定网店页面的配色
如果网店主营18~30 岁的女性时尚服饰， 那么比较适合的主题 色就是偏粉色、红色 的柔和、浪漫的色系。
二、网店页面的黄金构图法
1 简单切割构图法
使用简单的线条或图案整齐地分割 整个页面，能使画面瞬间变得有趣、 生动起来，内容区域也能得到有效 的划分。
二、网店页面的黄金构图法
2 组合切割构图法
组合切割构图法是通过区块集中而 有规律的排列，从整体上抓住人们 的视线，让整个页面设计更具有层 次感的构图法。
二、网店页面的黄金构图法
7 物体轮廓构图法
物体轮廓构图法主要适用于活动、节日或新品创意的专题页面。根据专题 页面的主要内容，从整体上构建一个边界或外形线，形成一个大的轮廓， 将内容巧妙地填充进去。
二、网店页面的黄金构图法
8 多重切割构图法
多重切割构图法的不规则的构图稳 定而锐利，干净的排版易于识别， 能让单一的页面变得生动，复杂的 页面变得时尚，能够避免画面出现 生硬感，不宜产生审美疲劳。
2 色彩的联觉现象
不同的色彩有着不同的寓意与作用，当人们看到色彩时，会给人带来不一样的心理
色彩的联觉现象也可以简单地理解为由色彩引发的联想。
一、确定网店页面的配色
2 色彩的联觉现象
例如，当消费者想要购买零食时，很可能会忽略一些其他色彩的商品页面，而将 注意力集中在寻找橙黄色的商品页面上，因为在他们的经验中，橙黄色是容易引 起食欲的色彩，他们已经习惯于将食物与橙黄色联系在一起。
二、网店页面的黄金构图法
3 放射构图法
放射构图法能展示出由一个中心点向四周扩散的效果，让整体页面呈现出立体 与空间感，画面冲击力强，富有动感。
二、网店页面的黄金构图法
4 对称切割构图法
对称切割构图法的前提一般是能将 内容分为主次两部分，并且这两部 分是对立关系，此时将整个页面一 分为二，内容划分明确，也更加具 有视觉冲击力，可以使画面具有平 衡感。
3 网店风格的形成要素
如果网店主营手机、 相机等数码类产品， 那么蓝色、黑色和灰 色系往往会给消费者 理智、高贵、沉稳的 感觉。
偏粉色系
偏蓝色系
一、确定网店页面的配色
5 VI配色
3 网店风格的形成要素
视觉识别系统（Visual Identity ，VI）配色是指在网店配色中提取VI或 对包装中的主色彩进行设计的配色方法。
炫酷型店铺
可爱型店铺
特色型店铺
一、确定网店页面的配色
2 产品的情绪
3 网店风格的形成要素
产品情绪是指产品本身赋予色彩的情感。
例如，女装按风格可划分为韩式风格、淑女风格、嬉皮风格、
波希米亚风格、田园风格和民族风格等。
一、确定网店页面的配色
3 网店风格的形成要素
韩式风格
淑女风格
嬉皮风格
一、确定网店页面的配色
课后习题
1．如果你要为女装店铺设计配色，简述自己的店铺配色设计 思路。
2．简述什么是色彩搭配原则七要素。
3．请分析色彩的联觉现象对珠宝类商品的影响。
4．请为放射构图法、流程构图法各举出一个实例。
二、网店页面的黄金构图法
5 整体场景构图法
整体场景构图法适用于促销、节日、活动等页面。整体场景构图法可以将 消费者快速地带入到页面氛围中，使宝贝信息传播更加精准。
切记场景不要抢了内容的视觉焦点，在适当的时候可以做些减法。
二、网店页面的黄金构图法
6 流程构图法
如果设计创意需要按照循序渐进 的方式展现商品，不妨采用流程 构图法。页面运用这种构图方式 能够将步骤、关系、各个节点以 及整体流向展示清楚。
一、确定网店页面的配色
3 网店风格的形成要素
1
店铺的主要风格
2
产品的情绪
3
店铺的主题气氛
4
店铺的包装色彩 VI配色
5
一、确定网店页面的配色
1 店铺的主要风格
3 网店风格的形成要素
常见的店铺风格有 简约清爽型、商业 型、炫酷型、可爱
型和特色型等。
简约清爽型店铺
商业型店铺
一、确定网店页面的配色
3 网店风格的形成要素
3 网店风格的形成要素
波希米亚风格
田园风格
民族风格
一、确定网店页面的配色
2 产品的情绪
3 网店风格的形成要素
男装按风格划分可分 为中国风格、商务休 闲风格、运动休闲风
格、英伦风格和时尚
休闲风格等。
中国风格
商务休闲风格
一、确定网店页面的配色
3 网店风格的形成素
运动休闲风格
英伦风格
时尚休闲风格
Contents 目录
1 确定网店页面的配色
2 网店页面的黄金构图法
一、确定网店页面的配色
1
色彩搭配原则七要素
2
3
色彩的联觉现象
网店风格的形成要素
一、确定网店页面的配色
1 色彩搭配原则七要素
1
渐进配色
2
对比配色
3
色调配色
4
近似配色
5
单重点配色
6
分隔式配色
7
夜配色
一、确定网店页面的配色
感受与联想。
一、确定网店页面的配色
3 店铺的主题气氛
3 网店风格的形成要素
店铺的主题气氛主要通过店铺的配色和装饰来烘托。
一、确定网店页面的配色
以国庆节为主题的店 铺配色大多采用红色， 然后通过灯笼和烟花 等元素来体现国庆节 的节日气氛。
3 网店风格的形成要素
以七夕节为主题的店 铺大多采用紫色、粉 色等可以表达出浪漫 和甜蜜的色彩，然后 使用鹊桥等元素来体 现七夕的节日气氛。
电商视觉营销的配色 及构图
学习目标
了解色彩搭配原则七要素的内容。 了解网店风格的形成要素。 掌握网店页面构图的方法。
营销界有个著名的“7秒定律”，即消费者会在7秒内决定是否
有购买商品的意愿，而在这短短的7秒内，色彩的决定因素占 比为67％，可见配色的重要性。除色彩元素外，消费者对图形 元素的感知也极为敏锐，利用一些主次分明的构图法，也能吸 引消费者的眼球。
单色VI 配色
双色VI 配色
多色VI 配色
Contents 目录
1 确定网店页面的配色 2 网店页面的黄金构图法
二、网店页面的黄金构图法
01 02 03 04
简单切割构图法 组合切割构图法 放射构图法 对称切割构图法
05 06 07 08
整体场景构图法 流程构图法 物体轮廓构图法 多重切割构图法
店铺的主题气氛
店铺的主题气氛
一、确定网店页面的配色
4 店铺的包装色彩
3 网店风格的形成要素
在确定网店主题色调时，应该注意与商品特性相符合，
或者与目标消费群体的特性相符合。
一、确定网店页面的配色
如果网店主营18~30 岁的女性时尚服饰， 那么比较适合的主题 色就是偏粉色、红色 的柔和、浪漫的色系。
二、网店页面的黄金构图法
1 简单切割构图法
使用简单的线条或图案整齐地分割 整个页面，能使画面瞬间变得有趣、 生动起来，内容区域也能得到有效 的划分。
二、网店页面的黄金构图法
2 组合切割构图法
组合切割构图法是通过区块集中而 有规律的排列，从整体上抓住人们 的视线，让整个页面设计更具有层 次感的构图法。
二、网店页面的黄金构图法
7 物体轮廓构图法
物体轮廓构图法主要适用于活动、节日或新品创意的专题页面。根据专题 页面的主要内容，从整体上构建一个边界或外形线，形成一个大的轮廓， 将内容巧妙地填充进去。
二、网店页面的黄金构图法
8 多重切割构图法
多重切割构图法的不规则的构图稳 定而锐利，干净的排版易于识别， 能让单一的页面变得生动，复杂的 页面变得时尚，能够避免画面出现 生硬感，不宜产生审美疲劳。
2 色彩的联觉现象
不同的色彩有着不同的寓意与作用，当人们看到色彩时，会给人带来不一样的心理
色彩的联觉现象也可以简单地理解为由色彩引发的联想。
一、确定网店页面的配色
2 色彩的联觉现象
例如，当消费者想要购买零食时，很可能会忽略一些其他色彩的商品页面，而将 注意力集中在寻找橙黄色的商品页面上，因为在他们的经验中，橙黄色是容易引 起食欲的色彩，他们已经习惯于将食物与橙黄色联系在一起。
二、网店页面的黄金构图法
3 放射构图法
放射构图法能展示出由一个中心点向四周扩散的效果，让整体页面呈现出立体 与空间感，画面冲击力强，富有动感。
二、网店页面的黄金构图法
4 对称切割构图法
对称切割构图法的前提一般是能将 内容分为主次两部分，并且这两部 分是对立关系，此时将整个页面一 分为二，内容划分明确，也更加具 有视觉冲击力，可以使画面具有平 衡感。
3 网店风格的形成要素
如果网店主营手机、 相机等数码类产品， 那么蓝色、黑色和灰 色系往往会给消费者 理智、高贵、沉稳的 感觉。
偏粉色系
偏蓝色系
一、确定网店页面的配色
5 VI配色
3 网店风格的形成要素
视觉识别系统（Visual Identity ，VI）配色是指在网店配色中提取VI或 对包装中的主色彩进行设计的配色方法。
炫酷型店铺
可爱型店铺
特色型店铺
一、确定网店页面的配色
2 产品的情绪
3 网店风格的形成要素
产品情绪是指产品本身赋予色彩的情感。
例如，女装按风格可划分为韩式风格、淑女风格、嬉皮风格、
波希米亚风格、田园风格和民族风格等。
一、确定网店页面的配色
3 网店风格的形成要素
韩式风格
淑女风格
嬉皮风格
一、确定网店页面的配色
课后习题
1．如果你要为女装店铺设计配色，简述自己的店铺配色设计 思路。
2．简述什么是色彩搭配原则七要素。
3．请分析色彩的联觉现象对珠宝类商品的影响。
4．请为放射构图法、流程构图法各举出一个实例。
二、网店页面的黄金构图法
5 整体场景构图法
整体场景构图法适用于促销、节日、活动等页面。整体场景构图法可以将 消费者快速地带入到页面氛围中，使宝贝信息传播更加精准。
切记场景不要抢了内容的视觉焦点，在适当的时候可以做些减法。
二、网店页面的黄金构图法
6 流程构图法
如果设计创意需要按照循序渐进 的方式展现商品，不妨采用流程 构图法。页面运用这种构图方式 能够将步骤、关系、各个节点以 及整体流向展示清楚。
一、确定网店页面的配色
3 网店风格的形成要素
1
店铺的主要风格
2
产品的情绪
3
店铺的主题气氛
4
店铺的包装色彩 VI配色
5
一、确定网店页面的配色
1 店铺的主要风格
3 网店风格的形成要素
常见的店铺风格有 简约清爽型、商业 型、炫酷型、可爱
型和特色型等。
简约清爽型店铺
商业型店铺
一、确定网店页面的配色
3 网店风格的形成要素
3 网店风格的形成要素
波希米亚风格
田园风格
民族风格
一、确定网店页面的配色
2 产品的情绪
3 网店风格的形成要素
男装按风格划分可分 为中国风格、商务休 闲风格、运动休闲风
格、英伦风格和时尚
休闲风格等。
中国风格
商务休闲风格
一、确定网店页面的配色
3 网店风格的形成素
运动休闲风格
英伦风格
时尚休闲风格
Contents 目录
1 确定网店页面的配色
2 网店页面的黄金构图法
一、确定网店页面的配色
1
色彩搭配原则七要素
2
3
色彩的联觉现象
网店风格的形成要素
一、确定网店页面的配色
1 色彩搭配原则七要素
1
渐进配色
2
对比配色
3
色调配色
4
近似配色
5
单重点配色
6
分隔式配色
7
夜配色
一、确定网店页面的配色
感受与联想。
一、确定网店页面的配色
3 店铺的主题气氛
3 网店风格的形成要素
店铺的主题气氛主要通过店铺的配色和装饰来烘托。
一、确定网店页面的配色
以国庆节为主题的店 铺配色大多采用红色， 然后通过灯笼和烟花 等元素来体现国庆节 的节日气氛。
3 网店风格的形成要素
以七夕节为主题的店 铺大多采用紫色、粉 色等可以表达出浪漫 和甜蜜的色彩，然后 使用鹊桥等元素来体 现七夕的节日气氛。