六种配色方法让你的设计方案666

很多人会认为UI设计中的颜色大多取决于设计师的品味和美感。然而,设计师选择颜色的过程比表面上看起来复杂多了,并且这个过程在设计中有非常重要的地位。很多研究表明,色彩对我们的情绪和行为有很大的影响。这就是为什么产品的成功很大程度上取决于设计时所选择的颜色。由Colorcom进行的研究表明:人们对某个产品进行潜意识判断只需要90秒,而这其中62%-90%的判断仅仅是通过颜色。因此,选择适当的颜色可以有效提高你的产品的转化率,同时提升产品的可用性。

为了创造好设计和更有效地运用色彩,你需要理解颜色的形成以及它们之间的相互关系。这就是为什么艺术学院和高等院校的学生需要学习有关颜色本质的色彩理论科学。

在说配色方法的时候,我们先来说说颜色的基础理论知识。

色轮 Color Wheel

如果你上过任何与绘画有关的课程,你一定看见过这个由不同颜色组成的圆圈,这就是“色轮(color wheel)”。它有助于我们了解不同的颜色之间是如何相互关联的,以及它们能进行什么样的组合。色轮通常由原色(primary color)、二次色(secondary color)、三次色(tertiary color)组成。原色是指三种不能由其他颜色组合而成的颜色。混合原色,我们就会得到二次色,而原色和二次色混合又诞生了三次色,我们通常会用两个形容颜色的词来描述三次色,比如“红紫色”。

1666年,色轮由Isaac Newton以简图的形式创造出来。从那以后,色轮经历了许多的变化,但它仍然是色彩组合的主要工具。色轮的主要思想是使颜色能够被恰当地混合在一起。

色彩模式 Color Models

在你开始组合颜色之前,你需要理解有两种不同的性质的颜色:一种是物体的表面上可以触摸的颜色,另一种颜色是由光产生的,比如电视机的光束。这两种不同的性质的颜色构建了两种不同的色彩模式:加和减。色轮相应地基于这两种色彩模式构建起来。

加色模式(additive color model)将红色(red)、绿色(green)、蓝色(blue)作为三原色,因此也被称为RGB色彩模式。这个模式是在屏幕上使用的所有颜色的基础。在这种模式中,三原色占同样的比例后混合出二次色也就是青色,品红色,黄色。但是,你需要记住,你添加的色光越多,颜色就会变得越明亮越浅。这和人们所习惯的减色模式是相反的,减色模式常见于有形的物体,比如油漆、染料、油墨等。

减色模式(subtractive color model)是通过光的减法得到颜色。(当光线照到某个物体上,这个物体将吸收一部分光线,并将剩下的光线进行反射,我们人眼看见的颜色就是这个反射出来的光线。这就是所说的光的减法。)它有两种颜色模式组成。第一种是为艺术体系所熟知的RYB(red, blue, yellow),它经常用在艺术教育中,特别是绘画。RYB是现代色彩理论科学的基础,它确定了青色、品红、黄色是最有效的三种用于组合的颜色。因此,第二种颜色模式—CMYK色彩模式就形成了。它在印刷行业中被广泛应用,因为照相印刷技术需要一种关键的油墨—黑色,该系统就被称为CMYK(cyan,magenta,yellow,black)。如果没有这个额外的颜料,那接近于黑色的阴影部分会变成一团脏脏的棕色。

加色vs减色

你应该记住这两种模式的主要区别:加色模式是用于数字屏幕的,减色模式是用于印刷物的。如果你手头的设计项目是准备印刷的,不要忘记一个简单但重要的原则:在屏幕上看到的颜色和印刷出来的颜色看起来是完全不一样的。加色模式的光谱比CMYK更宽,这就是为什么我们建议设计师,在进行印刷之前要将他们的项目切换到减色模式,这样设计师才能看到比较接近真实结果的东西。然而,如果你在设计数字产品,RGB色彩模式是明智的选择,因为它广泛的色彩范围支持设计师去创造令人惊奇的东西。

色彩调和

“和谐”通常与有序的和令人愉快的事物联系在一起。“色彩调和”是指合理组合设计中的颜色,使颜色以最吸引人和最有效的方式让用户感知到和谐。当颜色被合理搭配后,用户会感到愉悦和平静,而设计中的不和谐会使用户感到混乱和厌恶。用户会根据自己的第一印象形成对网站或者APP的看法,因此,色彩平衡在设计中至关重要,颜色对于用户有很大的影响。设计师们必须有能力设计能产生预期效果的基础颜色方案。

接下来就是让我们的设计方案更有技巧、更有依据的六种配色方法。

● 方法一:单色

单色基于一种颜色的不同色调和色度。和谐的单色通常会打败其他选项,因为它不太会出错,或者搭配出令人讨厌的配色方案。

● 方法二:相似色

要创造相似的和谐,你需要使用在色轮上相邻位置的颜色。这种配色方案被用于不需要对比度的设计中,包括网页或banner的背景。

● 方法三:互补色

互补配色方案是将色轮上对应位置的颜色进行混合。这种方案和相似色和单色相反,因为它旨在产生高对比度。例如,在蓝色背景上使用橙色按钮在任何界面中都很难被错过。

● 方法四:分割互补色

这个配色方案和上一个方案类似,但是它会采用更多的颜色。例如,如果你选择蓝色,你需要选择蓝色对面位置的两个相邻的颜色,也就是黄色和红色。这里的对比和互补色方案比起来没有那么明显,它可以使用更多的颜色。

● 方法五:三色

当设计需要更多的颜色的时候,你可以尝试三色方案。它是基于在色轮上等距的三个独立的颜色。为了保证这种方案的色彩平衡,建议使用一种颜色作为主导,另外的颜色作为辅助。

● 方法六:四色/双色互补

四色色彩方案适合丰富的设计师,因为它最难达到平衡。它使用的是色轮上两组互补的颜色。如果你在色轮上把所选的颜色连起来,它们会形成一个矩形。这个方案很难达到平衡,不过如果你做对了每件事情,结果会好得令人惊叹。

总结

色彩理论是一门复杂的科学,一天肯定是学不完的。然而,了解基础知识至关重要,它能帮助你创造能达到预期效果的设计。

uxplanet

译文地址:紫豆子设计站(公众号)

作者:Tubik Studio

(0)

相关推荐

  • 如何彻底优化IE浏览器 六种设置方法轻松优化你的IE浏览器

    IE是计算机网络使用时必备的重要工具软件之一,在互联网应用领域甚至是必不可少的。那么如何彻底优化IE浏览器,六种设置方法就可轻松优化你的IE浏览器,详细请大家仔细阅读本篇文章 临时文件: IE在上网的 ...

  • 10种你必须懂的PPT配色方法

    想完成一个让人眼前一亮的PPT,PPT的配色是少不了的,对于设计中的配色很多同学都是按自己的感觉来配,出来的PPT作品往往是让人觉得怪,觉得不入流。想配出专业的颜色,那就从这篇文章来始吧,但开始讲10 ...

  • 教大家一种好用的PPT配色方法

    介绍一种很简单的PPT配色方法,效果也很好,操作简单,还可以拓展。先看一张原图: 操作步骤 这张图片给人很清爽的感觉,就用它吧。先粗略看一下,女主角的颜色基本由三大块组成,皮肤,头发和衣服,OK,将图 ...

  • PPT必须懂的10种配色方法

    想完成一个让人眼前一亮的PPT,PPT的配色是少不了的,对于设计中的配色很多同学都是按自己的感觉来配,出来的PPT作品往往是让人觉得怪,觉得不入流.想配出专业的颜色,那就从这篇文章来始吧,但开始讲PP ...

  • 已安装win10的多系统总会出现Win10推送提示的六种解决方法

    已安装win10的多系统总会出现Win10推送提示的六种解决方法.win10正式版发布了一年不到,但是升级安装win10的用户已经非常多了,这离不开微软强大的推送力度.不过,很多用户也会被微软的推送力 ...

  • Win7系统英雄联盟fps不稳定怎么办 Win7系统lol英雄联盟fps一高一低的六种解决方法

    英雄联盟是目前很多用户都喜欢玩的一款对战游戏,能够流畅的玩游戏是大家追求的.在Ghost Win7系统中玩英雄联盟LOLFPS每秒帧数同衡量游戏是否顺畅的一个参数,有的用户反馈英雄联盟fps不稳定,一 ...

  • 华为手机定位不准,试试这六种解决方法

    华为手机使用高德地图地图时定位不准确,GPS信号弱,今天跟大家分享六种解决方法! 操作方法 01 下拉通知栏,确认是否打开手机的位置服务,长按位置服务图标,选择"定位最准确"的GP ...

  • PPT设计制作美化之道:配色方法秘籍

    操作方法 01 PPT设计制作美化之道:配色方法秘籍 配色是设计的核心,是美化的关键.本文总结出以下PPT配色技巧,分享给大家.Powerpoint2007对颜色的调整主要通过三个调色板来实现的,它们 ...

  • word2010怎么输入破折号?word中破折号的六种输入方法

    在word文档编辑中我们经常要输入标点符号,如破折号,那么在word2007中如何输入破折号呢,下面介绍破折号输入的六种方法 方法一.连续输入“-” 最简捷的方法,连续输入“-”,字体为楷体, 方法二 ...