电商视觉设计教程 第2章 电商网站视觉配色设计

请分析色彩的联觉现象对数码类产品的影响。
来自百度文库
请分别列举炫酷型、可爱型和特色型的店 铺风 格设计案例。 为男装店铺进行首页整体配色设计，效果 如右图所示。
商业型 店铺
店铺
1
店铺的主要风格
3 2.1 网店页面的配色方案炫酷型
网店风格的形成要素
店铺
简约清爽型 店铺
主要以浅紫色为主， 好像与我想要购买的零食 形象色彩不搭调，这种图 片应该不需要的。 在关注图片中的信息 与内容，放弃点击。
2.1 网店页面的配色方案
3 网店风格的形成要素 特色型店铺
韩式风格 3 2.1 网店页面的配色方案
1 色搭原则七要素
渐进配色
对比配色
色调配色
近似配色
单重点配色
分隔式配色
夜配色
2.1 网店页面的配色方案
2 色彩的联觉聚焦图片
2.1 网店页面的配色方案
2 色彩的联觉聚焦图片
主要以浅紫色为主，好像与 我想要购买的零食形象色彩 不搭调，这种图片应该不是 我需要的。不在关注图片中 的信息与内容，放弃点击
02
制作商品图
2.3 网店的整体配色案例
3. 店铺商品配色
03
创建并填充矩形
2.3 网店的整体配色案例
3. 店铺商品配色
04
导入图像并输入文字
2.3 网店的整体配色案例
3. 店铺商品配色
04
制作其他部分
2.3 网店的整体配色案例
3. 店铺商品配色
05
完成店铺页面制作
课后练习题
请列举几个近似配色和色调配色的设计案例。
VI配色
单色VI 双色VI 多色VI
2.2 网店页面的配色误区
1
色彩过多
2 3
背景和文字对比不强烈
过分强调色彩的刺激度
2.2 网店页面的配色误区
1 色彩过多
2.2 网店页面的配色误区
2 背景和文字对比不强烈
2.2 网店页面的配色误区
3 过分强调色彩的刺激度
选用黄色作为食品 2.3 网店的整体配色案例 店铺的店招背景，
英伦风格
2
产品的情绪
2.1 网店页面的配色方案
3 网店风格的形成要素
时尚休闲 风格
2
产品的情绪
3 网店风格的形成要素 2.1 网店页面的配色方案 国庆节
七夕节
3
活动的主题气氛
2.1 网店页面的配色方案
4
偏粉色系
3 网店风格的形成要素
偏蓝色系
店铺的包装色彩
2.1 网店页面的配色方案
5
3 网店风格的形成要素
可以刺激浏览者的 食欲，引导消费者 购买店铺中的产品
选用黄色的商品图，与导 航栏的颜色相呼应，给人 一种上下统一的视觉感受
选用灰色作为店铺的主色 调，可以更好地凸显产品 的诱人与美味
2.3 网店的整体配色案例
店铺页面主色设计
店铺页面辅色设计
店铺商品配色
2.3 网店的整体配色案例
创建参考线 1. 店铺页面主色设计
学习目标
了解掌握色搭原则七要素 掌握色彩联觉现象的定义 了解网店风格的几大形成要素 了解网店页面常见的配色误区
目 录
2.1 2.2 2.3
网店页面的配色方案
网店页面的配色误区
网店的整体配色案例
2.1 网店页面的配色方案
1 2
色搭原则七要素
色彩的联觉聚焦图片
3
网店风格的形成要素
2.1 网店页面的配色方案
网店风格的形成要素
淑女风格
2
产品的情绪
2.1 网店页面的配色方案
嬉皮风格
3 网店风格的形成要素
波西米亚 风格
田园风格 2.1 网店页面的配色方案
3 网店风格的形成要素
民族风格
2
产品的情绪
中国风格 2.1 网店页面的配色方案
3 网店风格的形成要素
商务休闲 风格
2
产品的情绪
2.1
运动休闲 网店页面的配色方案风格 3 网店风格的形成要素
01
新建空白文件
2.3 网店的整体配色案例
1. 店铺页面主色设计
02
填充矩形 填充颜色
2.3 网店的整体配色案例
2. 店铺页面辅色设计
01
设置导航栏颜色
2. 店铺页面辅色设计
02
设置店招与导航栏
2.3 网店的整体配色案例
3. 店铺商品配色
01
导入主商品图
2.3 网店的整体配色案例
3. 店铺商品配色
主要以橙黄色为主，与我想要 购买的零食形象相匹配，说不 定正是零食相关的图片，我要 继续了解一下。继续关注图片 信息，并可能执行点击操作
2.1 网店页面的配色方案
3 网店风格的形成要素
1
2 3 4 5
店铺的主要风格
产品的情绪
活动的主题气氛
店铺的包装色彩
VI配色
3 网店风格的形成要素 2.1 网店页面的配色方案 简约清爽型