电商视觉营销的配色及构图
合集下载
电商视觉营销图文
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产品等。
柔光适合那些让人感觉温柔、恬美、有安全感的产品的拍 摄，比如：母婴、家纺、健康生活方式、甜美女装等。
常见的布光方法
在一个拍摄场景当中，起主要作用的一个光源称为主光，其它若干个辅助补光的光源称为辅光。在 拍摄过程中，布光的原则是叠加，也就是把各种光源一个一个叠加起来构成复杂的灯光系统。布光首先 从单灯开始，布置好主要光源的位置和大小，然后再根据产品的特性和拍摄要求增加辅助光源。
布光拍摄准备工作与技巧
需要设计师后期抠图的产品
拍
摄
注
意
- 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 网店风格的形成要素
以七夕节为主题的店 铺大多采用紫色、粉 色等可以表达出浪漫 和甜蜜的色彩，然后 使用鹊桥等元素来体 现七夕的节日气氛。