UI设计总监为教你色彩对比指南.docxVIP

UI设计总监为教你色彩对比指南色彩是丰富多彩的，每一种色彩代表着不一样的心理和情感，不一样的色彩体现的情感让人们在视觉上心里上的作用都不一样。不一样的颜色碰撞也会给人们产生不一样的心理感受，这是色彩心理学教会我们的。色彩对比在生活中起着举足轻重的作用，所以我们要去深入的了解色彩对比的更多信息内容。包括色彩是什么？什么样的色彩搭配让人振奋人心？什么颜色组合对比是禁忌的？……了解完这些知识后，你就能明白什么颜色搭配组合能让客户或受众满意。一、色彩对比的基础知识不同的颜色可以表达不同的感受，颜色上的对比也有很多，这个跟色彩构成有很大的关系。色彩对比的基础知识主要给大家讲讲几个重要的对比方式：色相对比、明度对比和纯度对比。1、色相对比色相即各类颜色色彩的相貌称谓，任何黑白灰以外的颜色都有色相的属性。如朱红、普蓝、柠檬黄等。色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。色相环是由原色、二次色和三色色组合而成（可看标准24色相环）。色相环中的三原色是由红、黄、蓝，在环中形成一个等边三角形。二次色是橙、紫、绿，处在三原色之间，形成另一个等边三角形。红橙、黄橙、黄绿、蓝绿、蓝紫和红紫六色为三次色，三次色是由原色和二次色混合而成。根据上面的色相环可以看出色环上的颜色是多丰富多彩，随意抽取两个颜色，都能形成不一样的对比。因此色相对比又分很多，有补色对比、对比色对比、邻近色对比等等。（1）互补色对比在色相环的组成中，相隔 180 度的色彩我们称之为互补色：红与绿互补，黄与紫互补而蓝色与橙色互补。互补色的对比效果强烈、眩目、响亮、极有力，但也需要慎用，因为使用不当易产生幼稚 、原始、粗俗、不安定、不协调等不良感觉。一般在设计作品中，比较少的设计师会采用互补色来做作品的配色，因为互补色在实际应用中把握不好的话比较危险，容易让人产生不舒服、不协调的不舒适感。也有不少优秀的设计师将互补色运用得非常出色。以下这些知名的标志设计就采用了互补色来搭配的：（2）邻近色对比邻近色对比好理解一些，好比黄色跟橙色可以称为邻近色，草绿和果绿也可称为邻近色。色相环上相邻的二至三色对比，色相距离大约30度左右，为弱对比类型。邻近色相对比效果感觉柔和、和谐、雅致、文静，但也会让人感觉单调、模糊、乏味、无力，所以必须调节明度差来加强效果。邻近色之间往往是你中有我，我中有你。比如：朱红与桔黄，朱红以红为主，里面略有少量黄色；桔黄以黄为主，里面有少许红色，虽然它们在色相上有很大差别，但在视觉上却比较接近。在色轮中，凡在90度范围之内的颜色都属邻近色的范围。（3）对比色对比色相对比距离约120度左右，为强对比类型，要比邻近色相对比鲜明、强烈、饱满。丰富，容易使人兴奋激动和造成视觉以及精神的疲劳。如黄绿与红紫色 对比等，但是颜色之间协同统一的工作也比较难做。这种对比不容易单调，但一般需要采用多种调和手段来改善对比效果，不然就容易产生杂乱和过分刺激的效果。（4）零度对比零度对比其实也分了几块，比如无彩色对比、无彩色与有彩色的对比、同种色相对比和无彩色与同种色相比四种，这块只要理解下无彩色的概念即可。无彩色指的就是没有色相的颜色，前面小编说的颜色都有色相，但黑白灰这三种是没有色相的，所以也被称为无彩色。无彩色对比：如黑与白 、黑与灰、中灰与浅灰，或黑与白与灰、黑与深灰与浅灰等。无彩色与有彩色的对比：如黑与黄、白与蓝等。同种色相对：如蓝与浅蓝（蓝+白）色对比，橙与咖啡（橙+灰）或绿与粉绿（绿+白）与墨绿（绿+黑）色等对比。无彩色与同种色相比：如白与深蓝与浅蓝、黑与桔与咖啡色等对比。2、明暗对比明度指的就是色彩的亮度。比如：深黄、中黄、淡黄、柠檬黄等，这些黄颜色在明度上就不一样。颜色有深浅、明暗的变化，这些颜色在明暗、深浅上的不同变化，也就是色彩的明度变化。两种以上色相组合后，由于明度不同而形成的色彩对比效果称为明度对比。它是色彩对比的一个重要方面，是决定色彩方案感觉明快、清晰、沉闷、柔和、强烈、朦胧与否的关键。可以看到，明度变化里面也有低中高明度区分的。Digital Asset 数据产品网站和POCARI SWEAT这两个网站都采用了明暗对比来设计的。在POCARI SWEAT网站的界面当中，右边的深蓝色显得比较稳重，左边导航部分采用一个明亮的蓝色，左右两边形成了鲜明的对比，这样的界面稳重中又带着轻快，视觉效果也比较好。3、纯度对比纯度指的是色彩的鲜艳和深浅程度。纯度是色彩鲜艳度的判断标准，纯度最高的色彩就是原色，随着纯度的降低，色彩就会变暗、变淡。纯度指的就是饱和度，柠檬黄的纯度是比较高的，当加入一点红色之后就变成橙色，因而柠檬黄和橙色就形成了纯度上的对比。两种以上色彩组合后，由于纯度不同而形成的色彩对比效果称为纯度对比。它是色彩对比的另一个重要方面，但因其较为隐蔽、内在，故易被