别以为,色彩的知识你全懂了之基础知识篇——

日期:2019-09-27 16:03作者:北大青鸟西安华清校区

摘要:比如我
关键词: 北大青鸟ui培训

一、学习目的及概述

二、基础知识

(一)色彩的基本特征

  • 1、色系
  • 2、色彩三属性
  • 3、色调
  • 4、色彩混合
  • 5、色环及色彩对比
  • 6、色彩模式

(二)色彩的情感表现

  • 1、色彩的心理
  • (1)色彩的冷暖
  • (2)色彩的轻重
  • (3)色彩的空间变化
  • (4)色彩的软硬
  • 2、色彩的知觉
  • (1)后像
  • (2)恒常性
  • (3)同化与异化现象

三、尾巴

 

一、学习目的及概述

人脑对于色彩的记忆度要高于形态,可以回想一下我们熟悉的品牌,想到小米,你首先想到的是橙色,想到支付宝,你会联想到蓝色,而想到微信,你自然想到的是绿色,以上品牌的 logo 形态你可能会思考一会儿才能想得起来,但品牌色你会脱口而出,这就说明了色彩对于占领用户心智的重要性以及我们学好色彩的必要性。

在正式开始这篇文章之前,我们需要明白我们学习色彩是在学习什么?先从色彩的定义开始,色彩是人眼对不同频率光线(可见光)的不同感受,色彩既是客观存在的,又是主观感知的,地域、文化的不同,会导致不同群体之间产生色彩的认知差异,而我们学习色彩的过程既要掌握人类对色彩认知的共性,也要掌握不同地域文化对不同群体产生的特异性,把复杂的色彩现象还原为基本要素,组合这些不同的基本要素产生目标效果,这里的目标效果分      两部分:

第一部分:在目标用户的情感与色彩审美(目标用户)之间建立桥梁,让二者无缝衔接。例:我们可能都有切身体会,对于室内装修,父母跟我们之间的审美差异很大,像我的装修风格是以黑白灰为主,但我父母就喜欢色彩更丰富一些,不说审美高低,如果室内设计的目标用户是我父母这辈人,或我们这辈人,选色用色上一定是不一样的,对不同类型的用户要达到不同的目标效果,这才是设计;

第二部分:色彩的选择与信息优先级的匹配,例:我们知道了暖色是前进色,冷色是后退色之后,我们会将优先级更高的元素设置为暖色,而将次要元素设置为冷色或无彩色系,让用户先看到更重要的部分。

如果没有扎实的色彩基础知识,想要让色彩在设计上达到目标效果,只靠感觉会很困难,不啰嗦了,开始正文吧。

 

二、基础知识

 (一)色彩的基本特征

1、色系

(1)无彩色系

顾名思义,无彩色系就是没有彩色,是指黑色、白色或由这两种色彩调和形成的各种深浅不同的灰色组成的色系。(见下图 1-1.1.1)

注:在下文讲述的色彩三属性当中,无彩色系色彩只具有明度这一种色彩属性。(对此下文会有详解)

 

(2)有彩色系

有彩色系是指除无彩色系以外的色彩,即红、橙、黄、绿、青、蓝、紫等。(见下图 1-1.2.1)有彩色系色彩具有色彩的三个基本特征——色相、明度及纯度。(下文会有详解)

 

2、色彩的三属性

我们用眼睛和科学观测方法能够看到和辨别清楚的色彩多达750余万种,但他们(不包括无彩色系色彩)之间都有共同的三个属性:色相、明度及纯度(饱和度),这三个属性是我们在选色用色中主要的考量方式之一,它们的结合可以让我们随时随地的记忆和再现色彩。

 

(1)色相:指色彩的相貌,反映了色彩与色彩之间的差别所在。

从光学角度来说,由于光之间波长的(波长(wavelength)是指波在一个振动周期内传播的距离。)不同,在人眼中产生的色彩也就不同,即使是同一色相,也会产生成百上千种色彩。(见下图 1-2.1.1)

为了区分不同的色彩,我们为色彩定出了名称,而每个名称对应一个特定的色彩印象,红橙黄绿青蓝紫,每一种都有特定的色彩印象。

色相会有倾向性,如下图所示,这是从蓝色到红色的渐变过程,中间区域色彩的色相倾向性是不明确的,这种不明确是我们在选色用色中需要避免的,不明确的色相倾向,意味着不明确的情绪,这种“暧昧”意味着你的色彩“什么都不是”,进而无法占领用户心智。

 

(2)明度:指色彩的明暗程度。在无彩色系中最亮的是白色(#ffffff),最暗的是黑色(#000000),在有彩色系之中,也有明度差异,色彩明度从大到小依次是黄色>绿色>青色>橙色>红色>品红色>蓝色。(见下图 1-2.2.1)

明度的高低变化可以理解为在色彩当中加入黑色(降低明度)/白色(提高明度)。

 

(3)纯度(饱和度):指色彩的纯净程度。该色相的纯色(纯色是指一种不混有其他色彩的色彩)在该色彩倾向之上所占的比例既是纯度,例:浅红色是属于红色色相的色彩,但与大红色相比,浅红色中红色的成分相对较低,即纯度较低。(见下图 1-2.3.1)

注解:对纯度的称谓,有艳度、彩度、饱和度等多种叫法,我个人更倾向于纯度这个称谓,因为这个称谓有助于概念的理解,纯度是指色彩够不够纯(纯色所占比例),比较合理,而艳度是指够不够艳?彩度是有彩色的比例够不够多?以上都不够直观,饱和度这个称呼虽然没太大问题,但不如纯度容易理解。

 

(4)困惑过我的疑问:明度和纯度一方的变化,会怎么影响另外一方?

1)明度变化对纯度的影响

如果我们控制色彩三属性中的色相不变(在 HSB 模式中的色相数值不变),那么纯度越高,明度越低。

明度越高的色彩,意味着加入了白色,也就意味着纯度下降(白色的加入导致原色彩纯色比例下降);明度越低的色彩,则是加入了黑色,纯度同样会下降(黑色的加入导致原色彩纯色比例下降);这就意味着明度与纯度的关系是无论明度上升或者下降纯度都会下降。

 

2)纯度变化对明度的影响

如果我们控制色彩三属性中的色相不变(在 HSB 中的色相数值不变),那么纯度越高,明度越低。(见下图 1-2.4.1)

纯度越高的色彩,意味着加入了更多纯色,也就意味着明度下降(白色的比例下降);纯度越低的色彩,意味着减少了纯色,也就意味着明度会提高(纯色比例下降,导致白色占比增加。)。

 

3、色调

色调是整体的色彩倾向。在色彩的色相、明度及纯度三属性当中,只要保持 1 至 2 个属性一致,变化其他属性,整体色调就能保持一致,这可以成为我们把控整体风格一致性的重要实现方式。

通过色相的冷暖变化,我们可以营造暖色调、冷色调及中间色调,从而通过冷暖变化来传递情绪。

同理,固定色相,让明度与纯度变化,可以将色调分为如下 10 种(见下图1-3.0.1),而每种色调对应不同的情感属性,我们可以根据情绪来选择相应的色调,从而在整体上调整色彩,为我们选色提供一个切入角度。

色彩的选择过程中,有理性也有感性,虽然我们可以确定这 10 种色调,但你很难明确它们的分界线,也就是说很难界定明确的数值,只能提供一个大致的范围,在选色用色时,需要结合我们的审美,进一步去判断。

在如下的分析中,我是将色彩的情感属性分为正负两个层面进行分析,但没有不好的色调,我们需要做的是让正确的色调出现在正确的地方。

分析顺序:纯色调→白色调→明色调→浊色调→灰色调→暗色调→黑色调(即 “S” 型曲线)

 

(1)纯色调

纯色调是指画面整体色彩组合纯度较高的情况。

正面关键词:积极、活力、健康、浓厚等

解释:某种程度上,色彩的纯度与明度的高低就如同人的精气神,纯度与明度越高的色彩精神头越足,能够传递出更多活力。如下图西红柿和香蕉所示,很多植物在成熟时的色彩都接近于纯色,使得纯色与积极、健康等相关联,也因此纯色调常常出现在儿童产品上,去传递积极、健康的情绪。(儿童本身可能并不喜欢纯色,只是父母喜欢。)

如下图所示,以纯度较高的蓝色作为背景,通过高饱和度红色圆形将人们的注意力集中到人物之上,这种红蓝的搭配既是冷暖对比,二者又是对比色,让整个海报显得活力十足。

如下图所示,麦当劳的 banner 以纯度较高的红色渐变为背景,西红柿上的水珠,将蔬菜的新鲜表现得恰到好处,刺激着观者的食欲(反正我看了之后就想吃)。

负面关键词:粗俗、肤浅、花哨等。

活力太充足也会传递出肤浅的观感,很多时候纯色调展现的粗俗是由于色彩之间关系不和谐,无主次,搭配生硬等多方面原因造成的。如下图所示,这是大家熟悉的花哨典型案例,你们可以分析下,这个配色显得“土”的原因是什么。

 

(2)白色调

白色调不仅仅是指白色,也包括在白色附近的较浅的色彩,白色调是所有色调当中明度最高,纯度最低的色调,像一杯很淡的清茶。

正面关键词:干净、清新、纯洁

白色调是视觉重量最轻的色调,能够让我联想到婚纱、百合的纯洁、轻盈,如果说品牌,我回联想到无印良品,如下图所示,来感受下白色调的轻盈和纯洁。

负面关键词:平淡、虚无、距离感

有彩色的减少,会使整体色调偏于平淡,更像一个戒掉情绪的成年人,没有了冲动,这也就让人产生了距离感。如下图所示,从衣着来看,显然左侧模特的纯白婚纱装,暗色背景,严肃表情,与观者之间有很强的距离感,而右侧模特接近于浊色调的红绿色搭配,外加模特本身甜美的微笑,显得亲和力十足。

 

(3)淡色调

淡色调是在明色调的基础上,将明度提高,纯度降低。

正面关键词:柔软、淡雅、温柔甜美等

温柔淡雅来自纯度的降低,明度的增加,淡色调相对纯色调的饱满、力量感,也自然会产生柔软的印象。如下图所示,淡色调会让画面更柔和,给人一种幸福甜美的感觉。

负面关键词:消极、个性不足。

明度提高,纯度降低使得色彩的个性主张进一步淡化,当你用淡色调去展现视觉冲击或者力量感时,它显然是不能胜任的,会显示出个性不足的劣势。

如下图所示,两种色调对比,哪一种更能表现小女孩的无助和孤单,答案是很显然的吧。

 

(4)明色调

明色调相对纯色调,色彩明度较高,纯度较低。

正面关键词:明快、清新、干净、朴素、阳光等

明度提高意味着色彩更加清爽明快,相比纯色调而言,整体视觉重量轻了,适用于表达纯洁、干净的情绪,如下图所示,整个海报使用明色调将矿泉水的纯净、干净以及晶莹剔透的感觉表现得很到位,背景的雪山也暗示了水源来自大自然,红色部分(品牌色)立刻吸引了观者眼球,让整幅海报有了落脚点。

负面关键词:浮躁、没有深度、软弱。

明色调相比纯色调而言,纯度下降意味着色彩饱满、充沛感下降,使得整体会有“飘起来”的感觉,这种饱满感的减少,也使整体力量感缺失。

如下图所示,页面色彩纯度高低变化使画面信息传递效果受到影响,右侧的色彩纯度更高,情绪表现更到位。

 

(5)浊色调

顾名思义,浊色调是看起来相对浑浊的色调,原因在于明度降低,看起来像加入了灰色,低沉而浑浊。

正面关键词:高级、沉着、稳重、有格调等

明度的降低让色彩显得更加深沉,体现内敛与克制,进而产生高级感,下图是坚果手机的落粟配色(来自日本传统色卡),相对明色调及淡色调,浊色调会显得更加成熟稳重,更有文艺感。

负面关键词:保守、迟钝。

因为纯度、明度的降低,会让色彩活力下降,不恰当的选色配色,可能会让整体色调显得“脏”,这点是我们需要注意和避免的。

下图是锤子科技的同款坚果手机的不同配色,左侧是标准版,右侧是文青版,大家可以感受下二者的区别,明显左侧标准版更能彰显活力。







转载请保留本文网址https://www.sxbdqn.cn/qqwd/ui/472.html
上一篇:6个步骤,教你落地同理心地图
下一篇: 折叠屏场景设计探讨
北大青鸟
校区简介
青鸟品牌
就业体系
就业学生
在线报名
热门课程
BCVE视频特效课程
BCUI全链路UI设计
BCSP软件开发专业
BCNT网络工程师
JAVA工程师
青鸟问答
男生学什么技术好
女生学什么专业好
北大青鸟师资
北大青鸟就业
北大青鸟学费