视觉设计与营销

从产品自身颜色中选取
强调色的选择
在重点部分使 用素材的象征
性色彩
强调色选用黄色
是背景色蓝色为对比色
例
一个活动页面中常由以下元素组成 （五角星代表重要性） 标题（★★★ ） 产品（★★★★） 副标题（★★） 活动详情（★） 背景图案
1.用强烈色相对比（互补色或者对比色）+强烈明暗对比
2.用稍弱的色相对比（相近色）+强烈的明暗对比
第二节 色彩心理学的运用
主要内容 ● 如何做到醒目的视觉效果？
● 如何有效的决定好配色？
● 如何用色彩对读者的阅读顺序进行引导？
● 掌握色彩运用的规则
● 网页配色的流行趋势
如何做到醒目的视觉效果？
明暗对 比强
细节 丰富
人眼容 易区别
色相反 差大
饱和度 高
颜色本身
吸引人的注意
辨识度高的文字配色 辨识度高的文字配色 辨识度高的文字配色 辨识度高的文字配色
橙色
表现变化和运动
联想到健康和活力 获取注意力 更友善和诱人
黄色（原色）
最明亮、最具活力的暖色 联想到快乐和阳光
鲜黄色（bright yellow）可以增添快乐和愉悦感觉。 柔和的黄色通常用作婴儿和小孩的中性色（相对蓝 色或者粉红色）。淡黄色（ Light yellows）相对 鲜黄色而言给人是一种更内敛的快乐感受。深黄色 和金黄色有时很有古韵，当需要营造一种永恒的感 觉时，则可使用这种颜色。
color
方法
method
成功的配色方案是理智与情感的化身
多看、多想、多感受、多行动
从现在开始：
1. 文字图像并用、锻炼整个大脑思考
2. 为照片配色文字说明 3. 在博客帖子中加入视觉效果 4. 配有文字、图片和视频的帖子会更有传播量 5. 纯文字信息，72小时后，人们仅能记住10%，但可视化信息能够记住65%。
利用色彩的色调拉
出间隙，引导出自 然的阅读顺序
通过图片的大小与色彩的色调来引导读者的视线
利用图片的大小与亮度落差来引导视线
采用色调高的大 尺寸图片会让版 图片的视觉落差 越大，视觉冲击 力也会越大，也 就越容易让人有
面设计更有张力。
过目不忘的印象。
掌握色彩运用的规则
颜色多寡决定价位高低
暖色（Warm Colors）
● 暖色包含红、橙、黄以及这三种颜色的变种。
● 它们分别是烈焰、秋叶以及日出和日落的颜色，它们通常
象征活力、激情和积极。 ● 设计中使用暖色以体现出激情，快乐，热忱和活力的主 调。
红色（原色）
红色是一种很重的色彩，如果在设计使用过多，会
产生一种压倒性的感官效果，尤其是使用纯红色时。
知识点小结
了解颜色中红色、黄色非常适合做强调色，但不适宜大面积使用。
配色的基本思路：确定背景色，在选择强调色。
背景色尽量从产品特征颜色中确定。
强调色可以选择品牌的象征色、色环中对比强烈的颜色。 如何快速为电商海报配色。
如何顺利引导读者快速找到自己关注的内容？
如何用色彩对读者的阅读顺序进行引导？
体现出信息的先后顺序
黄色
与希望有关 与危险有关 地域不同含义不同
儿童喜欢的颜色
冷色（Cool Colors）
● 冷色系包含绿色、蓝色和紫色，相对暖色，强度要弱。
● 是夜、水和自然的代表颜色，通常给人感觉是舒缓，放松，以及 有一点冷淡。 ● 使用冷色可以营造一种冷静或专业的感觉。
绿色（合成色）
非常务实的颜色 象征新的开始和成长
2.以简单灰作为网页基调
3.低透明度色彩
4.用高亮色体现用户交互
5.不轻易减少亮度点小结
通过颜色的色相、明暗对比来引导读者实现 配色的五大潜规则 感受黑、白、灰，打造高端、奢侈的视觉效果 网页配色的流行趋势
情感
emotion
成功的 色彩方案
• 价位低——颜色多；价位高——颜色少
颜色多寡决定商品风格
规 则
• 颜色多——年轻、活泼；颜色少——高雅、沉稳
颜色的数量控制
• 颜色数量三个为界；强调色只能有一个。
从照片中找配色
• 每一张照片都在告诉你用色的方法。
配合情境搭配颜色
• 配合季节与气氛；不要忽略黑色与白色
网页配色的流行趋势
1.Metro和柔和鲜嫩的色彩
深紫色给人一种富有和奢华的感受。浅 紫色则更多让人想到春天和浪漫。
紫色
与财富和忠诚有关 联想到浪漫 深紫色展现富有与奢华
浅紫色联想春天与浪漫
中性色
黑色
中性色通常用作设计作品的背景色。
白色
通常与亮色混用。 不过也可在设计中单独使用中，制作出老道的布局来。 中性色的含义及其给人的影响容易受到周围暖色和冷色 的影响。
有1个颜色，寻找 搭配
怎么搭配？
颜色都有了，如何 用
错误示范
正确示范
配色的基本思路
产品自身颜色
背景色
品牌象征色
文案
强调色
背景色：浅灰（产品颜色） 强调色：蓝色渐变（蓝色——男性女性都喜欢） 整体表现出生活感和现代感，与当代都市人的状态契合度非常高。
背景色 色彩特性
背景色的选取
有效利用照片主角色彩
辨识度低的文字配色 辨识度低的文字配色 辨识度低的文字配色 辨识度低的文字配色
通过颜色搭配
提高辨识度
常 见 的 色 彩 搭 配 选 择
我们经常看到……
但，还有这样的！
不知道如何为版面配色时怎么办？
如何有效的决定好配色？
寻找色彩的过程
我要的是什么 颜色？
没有颜色
用什么颜色来 搭配？
联想到烈焰，暴力战争
联系到爱与激情 与愤怒有关 与盛大的事件有关 预示着危险
红色是象征繁荣和幸福
如果想在设计中添加进力量和激情的感觉，红色就
是一种非常不错的颜色。
红色
浅红，更能体现活力
深红，更能体现力量和优雅
橙色
充满生气和活力
联想到大地以及秋色
橙色不像红色那样强烈，但也能获取观众的注 意力。通常认为橙色更友善和诱人，不像红色 那样具有挑衅性。
视觉传达的目标
• 形成关注中心——视觉冲击力及容易识别和理解
1
2
• 唤起审美愉悦——愉快的心理体验和好感
3
• 调动求知兴趣——感到无穷的韵味和深刻的内涵
4
• 引导品牌理解——在顾客心中勾画完整和清晰的形象
5
• 激发购买动机——萌发模仿和尝试的需要，产生购买冲动和购买行为
影响心理的视觉元素
颜色 图形 材质
颜色对与人心理
产生的影响 大于图形和材质。
色彩心理学基础
根据人们的心理和视觉判断，色彩有冷暖之分，
暖色系（红、橙、黄）
冷色系（蓝、绿、蓝紫）
● 色相：即各类色彩的相貌称谓。
如：红、绿、蓝 等颜色名称
● 纯度：又叫彩度，它是指色彩饱和的程度，或是指色彩的纯净程度。 ● 明度：色彩明暗深浅的差异程度。白色最高，黑色最低，黄色最高，蓝紫色最低。
视觉心理与色彩运用 (基础)
第一节 第二节
视觉心理 色彩心理学的运用
第一节
视觉心理
主要内容 ● 视觉对消费者的影响 ● 视觉传达的目标 ● 影响心理的视觉元素
● 色彩心理学基础
视觉对消费者的影响
• AIDA效果模式
注意
(Attention)
兴趣(Interest)
愿望 (Desire)
行动 (Action)
绿色继承了蓝色所有具备的平静的属性，但是它也
吸收了一些黄色的活力。在设计中，绿色有一种平
衡和协调的效果，并且很稳定。对于与财富，安定，
绿色
新生与富饶 代表缺乏经验 与自然相关
新生以及自然相关的设计，绿色很合适。
亮绿色更具活力和生机。
象征财富、安定
橄榄绿更多表示自然界。
暗绿色则是富饶的最典型代表。
蓝色（原色）
谢谢观看
3.可以只用明暗对比且无色相差异的颜色
重要文字提取图片中的色彩，提取蓝色或者黄色。（强调文字内容的同时保持了整体配色的稳定）
背景色——深色的背景让整个页面看起来经典、精
益求精、沉稳、正式且足够“企业化”。
文本色——白色的文本与黑 色的底色形成明显的对比， 从整体配色方案上来看也非 常搭调。
按钮色—— 设计师在这个 CTA按钮（行为召唤按钮） 上使用了强对比的红色，醒 目且非常吸引用户去点击。 文字搭配的线条图标采用了同样的白色，在色彩上采用了高度一 致的方案，露头的文本暗示用户需要向下滚动。
中性色
灰色 褐色 米黄色与茶色
奶油色与乳白色
思 考 1.你的产品特征，定位是什么？ 2.你要传达给消费者的感受是什么？
知识点小结
颜色、图形、材质等视觉元素都会影响心理的变化 消费者的心理过程：吸引注意、引起兴趣、激发愿望、产生购买行为
色彩对心理影响最大。
不同颜色对人心理产生的影响不同。
与忧伤有关 象征冷静和责任
蓝色的含义很大程度上取决于纯度和明度的变化。 浅蓝色通常表示放松和平静， 亮蓝色则通常表示活力和清新， 深蓝色则非常适合公司类型的网站，这类场合，感 染力和可靠性是很重要的。
蓝色
与和平有关 文化不同寓意不同 深蓝表示可靠与力度
浅蓝清新而友好
紫色
与高贵有关 与创造力和想象力