六种配色方法让你的设计方案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
答:接下来就是让我们的设计方案更有技巧、更有依据的六种配色方法。● 方法一:单色 单色基于一种颜色的不同色调和色度。和谐的单色通常会打败其他选项,因为它不太会出错,或者搭配出令人讨厌的配色方案。● 方法二:相似色 要创造相似的和谐,你需要使用在色轮上相邻位置的颜色。这种配色方案被用于不需要...
答:以下是让设计方案更有技巧、更有依据的六种配色方法。1. 单色方案:基于一种颜色的不同色调和色度。和谐的单色通常会打败其他选项,因为它不太会出错,或者搭配出令人讨厌的配色方案。2. 相似色方案:要创造相似的和谐,你需要使用在色轮上相邻位置的颜色。这种配色方案适用于不需要对比度的设计,如网页...
答:方法:在色彩上叠加一层 纯黑 图层,将纯黑图层颜色 模式调整 为色相 ,通过无彩色系下的明度色值进行对比校正, 以主色明度为标准 ,让不同颜色与主色 达到同频 (优先调整B值,当B值无法满足时调整H值)。 03 . 制定同色系色阶 通过色彩校正后我们就得到我们所需要的同频色板,我们还需要进一步 制定同色系色阶...
答:辅色的建立可以有两条思路:1、找主色的相似色,这样色彩的搭配会比较和谐。在HSB模式下,把色相值H加和减30度,得到了两个辅色;2、找主色的互补色,把色相值减(或加)180度得到了一个补色,为了避免配色对比过于强烈,在补色的基础上加和减15度可以再得到两个辅色(相当于主色加165度和195度...
答:高质量论文配图配色方案,让你的图更加亮眼 论文配色方案多样,可选择符合主题与目标受众的风格。以下是19种不同风格的配色方案,每种方案都包含了十六进制颜色码与RGB颜色值,以便在论文中灵活应用。复古风格:十六进制颜色码:0780cf - 765005 - fa6d1d - 0e2c82 - b6b51f - da1f18 - 701866...
答:充满夏日气息的亮橘色和明快的鹅黄色,大色块拼接出小清新,光看配色就能让人拥有一见你就笑的美好心情~step1:先选择一种颜色涂满整个甲面;step2:待干透后,贴上波浪形美甲贴露出上方1/2甲面;step3:露出上半部分涂抹第二种颜色;(记住,第一遍涂的是下半部分的颜色,上半部分的颜色放第二个涂...
答:第五步:海报上缺不了文字的点缀和描述。可通过“插入”→“文本框”,来绘制文本框进而插入文字。也可以通过“插入”→“艺术字”来插入艺术字体。第六步:加入图形元素及文字等后,海报制作就完成了。最后打印出来即可。666!如何打造极具个性的人物介绍页!?大家好,我是kyle。专注分享幻灯片制作...
答:5)没有标准色号的油漆不适合电脑配色。4.电脑调漆的操作过程首先是确定待修车顶盖漆的漆色品种。一般有以下几种情况: 现代 高级轿车的顶漆有的有漆号标记,有的可以从维修手册中找到顶漆的材质、品种、规格;如果没有记录,最后一种方法是使用色码卡进行测定。色卡是一种专门印制的涂料色卡,是根据...
答:ottd属于是人们发自拍中常用的一个流行语,随着社交网站的增多,很多人都会在上面分享自己的用心穿搭照片,可以用一些名词的缩写,让用户可以更容易搜索到照片。与ootd相似的网络流行语:GTG:got to go,要走了。TTYL:talk to you later,等下再跟你聊。BFF:best friend forever,永远的最好的朋友...
答:车辆内部遵循“第二客厅”的设计理念。极简主义风格搭配皮革、超细纤维、环保面料和聚合物材料等丰富材料,营造出格调高雅的客舱氛围。同时,NIO ET5的内饰还拥有多达6种配色方案,完美满足了年轻人展示个性的需求。中控屏幕不仅尺寸足够大,而且分辨率清晰,甚至可以与一些平板电脑相媲美。操作系统的内置功能也...