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