
色彩是设计构建的基础之一。它可以成为影响众多因素的强大工具,对视觉感受至关重要。色彩对我们的头脑有重大影响。它会在几秒钟内改变我们对物体的感受,并让人们做出反应,甚至采取行动。
初看起来,色彩使用似乎并不难掌握,但深入细节,显然有许多特性需要理解。今天,我们收集了一个方便大家记录的词汇表,其中包含色彩理论的基本术语,这将帮助各位UI设计师更好地理解色彩的工作原理。

色彩
首先我们需要先弄清楚色彩本身是什么。Merriam-Webster字典将其定义为光(如红色,棕色,粉红色或灰色)或视觉感知的现象,使人们能够区分其他对象。简单说,色彩就是物体反射或发光而引起的变化。可以通过色彩,饱和度,色度和数值等属性来直观地验证色彩。为了获得正确的色彩含义,我们首先来定义它的特征。
颜色属性
色调
色调是指图像的相对明暗程度,在彩色图像上表现为颜色。

值
值是一个颜色如何光明或黑暗的属性。特征由白度定义。色调越白,值越高。
色度
色调的纯度。该特征是通过白色,灰色或黑色的存在来衡量的。色度高的颜色通常看起来大胆而生动。
饱和度
这个特性与值和色度有许多共同之处,有时他们可能会被误认,所以理解这些差异至关重要。与之前的两个属性不同,饱和度是根据它在光线下的颜色来描述颜色的大胆或苍白。该属性也被称为颜色的强度。

色轮
色圈通常由主色,次色和第三色组成,也称为色调。
色环由Isaac Newton以示意图的方式在1666年创建,从那以后它经历了多次迭代,但仍然是色彩组合的主要工具。色轮必须以这种形式展示,以便颜色混淆。

颜色类型
原色
原色作为整个系统的基础。包括红色,黄色和蓝色。
次要颜色
这些颜色通过两种原色的组合出现。
第三色
原色和次要颜色的混合形成了第三色,例如红紫色或黄橙色。
冷色调是色轮的绿色 - 蓝色一侧的色彩。
黄色,橙色和红色是与暖型相关的色调。

配色方案
色彩平衡在设计中至关重要,因为用户第一眼看到网站或应用时,颜色具有很大的影响力。设计师的色彩方案就显得尤为重要。
单色搭配
基于一种颜色以色调和饱和度区分层次。单色永远是一个经典的选择,因为它很难犯错或做出令人反感的配色方案。

相邻颜色搭配
选择色轮上相邻的颜色。这种类型的配色方案用于不需要对比度的设计,包括web或banner的背景。

高对比搭配
选择色轮上对立面的颜色混合。该方案与相邻色和单色相反,旨在产生高对比度。例如:蓝色背景上的橙色按钮非常吸睛。

协调对比搭配
这个方案与上一个方案类似,但是它采用了更多的颜色。例如:如果选择蓝色,则需要取其对立面中,相邻的2个其他颜色(即黄色和红色)。这里的对比度不如【高对比方案】那么强烈,但它允许使用多种颜色。

三色搭配
当设计需要更多的颜色时,可以尝试三色方案。它基于色轮上等距的三种不同颜色。为了画面的平衡,建议使用一种颜色作为主导,另一种作为辅助。

四分色搭配
四分色配色方案适合有经验的设计师,因为它是最难平衡的。它采用色轮的四种互补颜色。如果将所选颜色上的点连接起来,会形成矩形。这种方案很难平衡色彩。

关于色彩的搭配,我将收集更多的案例与大家一起分享学习。你有任何想要了解的UI知识请留言,我们会尽快反馈有效的方法。
如果你喜欢这篇文章,一定要关注我。
本文翻译来自Medium,原文链接https://uxplanet.org/color-glossary-for-designers-terms-and-definitions-1a65549804bd
更多UI设计技巧,欢迎来简书关注我
网友评论