header_v1.7.40

色彩基础知识-冷暖色系

16天前发布

原创文章 / 多领域 / 观点
Clien 原创,如需商业用途或转载请与Clien联系,谢谢配合。

以下是个人对冷暖色搭配的小知识分析。

色彩是一种感官元素,所以一般情况下我们都是通过视觉元素获取信息的。设计当中色彩是非常重要的元素,你对页面信息或者元素增加色彩都会有不一样的效果。今天我们来讲讲色系。





上图是一个色环。色环中以红色和黄色为中心的色彩属于暖色系色彩;以蓝色为中心的色彩属于冷色系色彩;位于两者之间的色彩被称为中性色系色彩。


但是色彩所代表的具体含义并不是全世界共通的,会因文化,传统和风土人情而异(比如国际股市红跌绿涨,中国大陆股市红涨绿跌,因为很多欧美人觉得红色代表暴力和禁忌)。但人类遗传基因总会存在一些共通的物质,色彩给人的感觉也不例外。


暖色




红色是彰显热情的色彩,给人留下强烈的印象。


信号灯红色,唇膏红色,广告宣传单价格标题红色以及交通警示灯红色等都是纯度最高,色调鲜明的红色,最能刺激人类情感的色彩。在产品设计统计中,红色的同类商品最受欢迎。


暖色系色彩可以刺激人的食欲。比如我们常见的外卖产品。





上图为美团和饿了么外卖平台的常规促销活动页面,主体色调定的都是暖色系,这样的色彩搭配就会使食物看起来很美味可口,有增进食欲的功能。另外,不知道大家有没有体会就是在外面吃饭很多餐饮店的灯光都是暖色的,主打烘托氛围的。


当然同暖色系色彩当中,色彩的明度和纯度不同,给人的感觉也是不同的。




最下面色相环中接近橙色,黄色的颜色给人“温暖”,“温和”的印象,接近紫色则给人“优雅”,“时尚”的印象。而粉色系则体现“活泼”,“可爱”的感觉,主要用于年轻女性。因此,受众群体年龄越大,所用红色的纯度就会越高。




上图为蘑菇街运营活动页面,左边表达出来的就是一种青春活力,而右边则是传达出一种优雅时尚的感觉,跟页面自身定位相符合。


冷色



蓝色使人感到寒冷和阴暗,同时能体现镇静感和清凉感。


红色系可以刺激人类情感,而蓝色系的色彩和绿色植物一样,具有净化人的心灵、使人镇静的功能。冷色系是属于夏季的的色系。在掺杂有绿色的蓝色和纯度较高的蓝色中加入白色,可以展现日光照射下蓝色的海面。



那么在实际产品应用当中,用的蓝色最多的便是金融类理财产品了,因为蓝色还代表了沉稳和安全,这正是理财产品所需要带给用户的一种情感诠释,只有让用户信任平台,才会有可能购买。如下图所示。




我们来看看明度和纯度。




如上图所示,冷色系纯度越低,清凉感就越强,纯度越高,安静、沉静、冷漠的感觉就越强。另外,明度越高,温和、安逸的印象也越强烈。从下面色相角度看,如果接近绿色,容易使人联想到翡翠绿色的海洋,感受到自然的清凉感和爽快感。相反,如果接近紫色,就会成为充满神秘的,富有内涵深度的艳丽色彩。





上图左边是好好住产品商城的运营活动图,高明度的背景色,给人营造安逸的氛围,符合产品卖点。右边是keep的一个跑步计划预告图,用高纯度紫色打造神秘感,也契合了产品本身的主色调。


中性色



绿色能够使人感到平静,具有抚慰心灵的功能。


绿色是自然界中最常见的颜色,介于青与黄之间,属于一种平和的颜色。搭配冷色可以使人的的情绪趋于平静,搭配暖色,则体现清新飘逸的潇洒感觉。绿色可冷可暖,是一种非常灵活的色彩。



由上图所知,明度越高,越有清爽的感觉,明度越低则体现厚重感;纯度越来越高,则鲜艳感就会越来越强。




上图左边,整体以夏天为主题做的蓝色清凉色系,搭配了明度偏高的绿色作为搭配,一下子就起到了一个点缀作用,在这里绿色就作为了暖色调和蓝色形成对比;右图为理财产品的一个暖色系背景的活动页,两边加上了纯度和明度都比较高的绿色,作为了一个对比,那么在这里绿色就成为了冷色调,传递着欢快的氛围。


可能有的初学者不太明白明度和纯度的关系,那么我们拿PS里的色板来举个例子。




明度是眼睛对光源和物体表面的明暗程度的感觉,主要是由光线强弱决定的一种视觉经验。一般来说,光线越强,看上去越亮,明度越高;光线越弱,看上去越暗,明度越低。同时也指颜色的明暗程度。那么在上图里面就是纵轴方向越靠上的位置明度就越高,越靠下明度越低。


那么我们来说说纯度。纯度通常是指色彩的鲜艳度。那么在上图横轴方向越靠右纯度就越高,越靠左纯度越低。在同一种色相里加白色会提高明度,降低纯度;加黑色会降低明度也会降低纯度。


那么这样解释明白了吧。


总结:色彩丰富多样,不同颜色给人的感觉都是千差万别。做产品的时候,一定要注意很多因素,产品本身的定位、想要传达的情绪,目标人群,还有领导的喜好等等。因为视觉是获取信息的第一个条件,所以做好色彩的搭配能给设计本身带来很好的效果和表现力。以上是个人的经验所得,不喜勿喷。


参考书籍:<<配色设计原理>>








23

    文章信息

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功