1 视觉识别设计
宝马标志的变革
1.1 什么是视觉设计
2 视觉传达设计
视觉传达设计是以视觉媒介为载体，以文字、图形和色彩作为创作要素， 利用视觉形象传达特定的信息给受众，从而使被传达对象产生影响的过程。
1.2 电商视觉设计前的准备
1
网店的视觉定位
2
明确视觉规范的作用
1.2 电商视觉设计前的准备
1 网店的视觉定位
2 色彩的联觉聚焦图片
2.1 网店页面的配色方案
2 色彩的联觉聚焦图片
主要以浅紫色为主，好像与 我想要购买的零食形象色彩 不搭调，这种图片应该不是 我需要的。不在关注图片中 的信息与内容，放弃点击
主要以橙黄色为主，与我想要 购买的零食形象相匹配，说不 定正是零食相关的图片，我要 继续了解一下。继续关注图片 信息，并可能执行点击操作
1.2 电商视觉设计前的准备
1 网店的视觉定位
1.2 电商视觉设计前的准备
1 网店的视觉定位
1.2 电商视觉设计前的准备
2 明确视觉规范的作用
1
统一识别
2
节约资源
3
重复利用
1.2 电商视觉设计前的准备
2 明确视觉规范的作用
可以确保网店在整体风格、售前售后服务和产品包 统一识别 装形象等方面都保持整体风格的一贯性，既有利于买家 识别和区分店铺，也可以避免买家在浏览时出现理解困
2.2 网店页面的配色误区
3 过分强调色彩的刺激度
选用黄色作为食品 2.3 网店的整体配色案例 店铺的店招背景，
可以刺激浏览者的 食欲，引导消费者 购买店铺中的产品
选用黄色的商品图，与导 航栏的颜色相呼应，给人 一种上下统一的视觉感受
选用灰色作为店铺的主色 调，可以更好地凸显产品 的诱人与美味
2.3 网店的整体配色案例
店铺页面主色设计
店铺页面辅色设计
店铺商品配色
2.3 网店的整体配色案例
创建参考线 1. 店铺页面主色设计
01
新建空白文件
2.3 网店的整体配色案例
1. 店铺页面主色设计
02
填充矩形 填充颜色
2.3 网店的整体配色案例
2. 店铺页面辅色设计
2.1 网店页面的配色方案
3 网店风格的形成要素
1
2 3 4 5
店铺的主要风格
产品的情绪
活动的主题气氛
店铺的包装色彩
VI配色
3 网店风格的形成要素 2.1 网店页面的配色方案 简约清爽型
商风格
3 2.1 网店页面的配色方案炫酷型
网店风格的形成要素
店铺
简约清爽型 店铺
主要以浅紫色为主， 好像与我想要购买的零食 形象色彩不搭调，这种图 片应该不需要的。 在关注图片中的信息 与内容，放弃点击。
规范不但可以节约设计时间，还可以避免出错。
1.3 电商视觉设计黄金构图法
对称切割 构图法
组合切割 构图法
整体场景 构图法
多重切割 构图法
01 05
简单切割 构图法
02 06
流程 构图法
03 07
放射 构图法
04 08
物体轮廓 构图法
1.3 电商视觉设计黄金构图法
1 对称切割构图法
1.3 电商视觉设计黄金构图法
4
偏粉色系
3 网店风格的形成要素
偏蓝色系
店铺的包装色彩
2.1 网店页面的配色方案
5
3 网店风格的形成要素
VI配色
单色VI 双色VI 多色VI
2.2 网店页面的配色误区
1
色彩过多
2 3
背景和文字对比不强烈
过分强调色彩的刺激度
2.2 网店页面的配色误区
1 色彩过多
2.2 网店页面的配色误区
2 背景和文字对比不强烈
学习目标
了解视觉设计的定义 了解电商视觉设计前的准备工作 掌握电商视觉设计黄金构图法
目 录
1.1 1.2 1.3
什么是视觉设计?
电商视觉设计前的准备
电商视觉设计黄金构图法
1.1 什么是视觉设计
1
视觉识别设计
2
视觉传达设计
1.1 什么是视觉设计
1 视觉识别设计
1.1 什么是视觉设计
目 录
2.1 2.2 2.3
网店页面的配色方案
网店页面的配色误区
网店的整体配色案例
2.1 网店页面的配色方案
1 2
色搭原则七要素
色彩的联觉聚焦图片
3
网店风格的形成要素
2.1 网店页面的配色方案
1 色搭原则七要素
渐进配色
对比配色
色调配色
近似配色
单重点配色
分隔式配色
夜配色
2.1 网店页面的配色方案
难，甚至是理解错误的现象。
1.2 电商视觉设计前的准备
2 明确视觉规范的作用
除了活动海报等个性模块之外，其他的页面和模块 节约资源 参照规范进行设计可以极大地减少设计时间，从而达到 节约资源的目的。
1.2 电商视觉设计前的准备
2 明确视觉规范的作用
设计相同属性的模块或页面时，执行视觉规范有利 重复利用 于减少无关的信息，方便买家的阅读和信息传递。同时， 视觉规范也有利于美工之间的协调工作。标准化的视觉
2 组合切割构图法
1.3 电商视觉设计黄金构图法
3 整体场景构图法
1.3 电商视觉设计黄金构图法
4 多重切割构图法
1.3 电商视觉设计黄金构图法
5 简单切割构图法
1.3 电商视觉设计黄金构图法
6 流程构图法
1.3 电商视觉设计黄金构图法
7 放射构图法
1.3 电商视觉设计黄金构图法
8 物体轮廓构图法
3 网店风格的形成要素
商务休闲 风格
2
产品的情绪
2.1
运动休闲 网店页面的配色方案风格 3 网店风格的形成要素
英伦风格
2
产品的情绪
2.1 网店页面的配色方案
3 网店风格的形成要素
时尚休闲 风格
2
产品的情绪
3 网店风格的形成要素 2.1 网店页面的配色方案 国庆节
七夕节
3
活动的主题气氛
2.1 网店页面的配色方案
课后练习题
请列举几个除宝马公司之外，其他企业导入视觉 识别系统的案例。 请结合本章内容并结合实例说明品牌型网店与营 销型网店在视觉定位上的区别。 请淘宝搜索皇冠店铺，分析此类店铺在视觉设计 上的共性与优势。 请列举几个采用黄金构图法的电商视觉设计案例。
学习目标
了解掌握色搭原则七要素 掌握色彩联觉现象的定义 了解网店风格的几大形成要素 了解网店页面常见的配色误区
2.1 网店页面的配色方案
3 网店风格的形成要素 特色型店铺
韩式风格 3 2.1 网店页面的配色方案
网店风格的形成要素
淑女风格
2
产品的情绪
2.1 网店页面的配色方案
嬉皮风格
3 网店风格的形成要素
波西米亚 风格
田园风格 2.1 网店页面的配色方案
3 网店风格的形成要素
民族风格
2
产品的情绪
中国风格 2.1 网店页面的配色方案