无论是做UI设计还是画插图，都有很多同学觉得自己因为天赋不够所以对色彩的敏感程度不够，其实不然。一种可能是大家总结的太少，配色总是靠感觉和运气，但是配色都是有讲究的。
这篇文章不会给大家重复解释什么是rgb，什么是hsb，什么是cmyk或者什么是三原色，这些大家都可以直接从网上查到。我们今天要分享的内容是，人们是如何认识色彩的，并将其应用到产品设计中的。
人们感知颜色的原则。
众所周知，对于不同的颜色，我们的感觉是不一样的，有些人觉得暖色在前，冷色在后。温暖的颜色更引人注目，寒冷的颜色不引人注目。那么，原因何在呢？先要知道眼睛里有两种类型的感光细胞：视锥细胞和视杆细胞，它们能感觉到光线的强弱，但不能感觉到颜色，而视锥细胞则相反，在视锥细胞中有3种对不同频率的光敏感细胞。通常应用于视锥细胞，但视杆细胞的应用较少，在黑暗环境下应用较多。
三种类型的视锥细胞分别为低频、中频和高频，它们对光的敏感性分别为红、绿、蓝。另外，三种视锥细胞也分别具有重合部分。低频视锥细胞对整个可见光频谱都很敏感，其波长范围较宽，尤其对光谱中间黄色至红色的部分更为敏感。但就高频而言，几乎只有蓝视锥细胞才能感觉到紫色。
每个人在平时的生活中都可以看到，在道路上、机动车道上以及一些警示牌上都会用到黄色、橙色等标志，因为这些很醒目。红锥体很容易察觉到，但是如果你的标志使用了冷色调，那么交通事故就会频繁发生。
一、人类对颜色边缘的反差比较敏感。
让我们做个实验，如下图，大家觉得中间的灰块是纯色还是渐变色，也许很多同学看起来都会觉得是渐变色，但实际上这是纯色，不信的同学可以自己试着用工具试试。
但是，如果您将色块取出之后，没有在此环境中直接进行边缘对比，则不会发生渐变。简单地讲，我们也要看看在产品设计中需要注意什么，因为在UI界面设计中，我们经常需要将一些图片、卡片叠加放置，这会造成原本不明显的两个元素重叠后变得非常明显的边缘视觉对比，比如一些标签的背景色和页面的整体背景。
若要使两种颜色相近的元素具有识别性，最好将这两种颜色重叠放置，而不要将它们分开放置。此外，如果是卡片风格的设计，背景颜色一定不要太过灰暗或太过浅白，太过深沉就会使卡片轮廓太过显眼，造成整体看起来很脏，对比十分明显，显得不自然和舒适。若太浅，也会造成资讯不集中。
同样，为什么文字被框起来后看起来想要更有冲击力其实也是一个原因，因为由文字和背景叠加而成的轮廓，在我们的第一印象中，只是一个符号而已。在赋予色彩后，我们才意识到，它需要我们的注意或者可以点击，但是仍然不够明显，所以为了增强可以点击的感觉，我们采用了线框法，背景色法，箭头法等等。
UI设计中颜色的作用。
加深品牌印象和品牌意识；
一般而言，产品会有一个品牌的主要颜色。而且该品牌的主色调通常也会应用在外部产品界面上，比如闲鱼、马蜂窝等，主色调都采用了黄色，黄色具有非常活泼，有趣，有趣的特点，不管是线上还是线下，都使用了该品牌的黄色，从线上各元素的主颜色，到线下包装的印刷颜色。
但是必须注意的是，如果品牌的主色调偏灰偏暗，可能不太适合于在线销售。比如以前的严选，云集，711便利店，宜家等产品的主色都是偏深偏暗，所以在界面上使用会很不协调，与整体偏浅偏浅的风格对比起来太强烈，造成不适。
并且色彩线看起来还不错，由于印刷的原理，实物也会更低的饱和和偏暗。
二、引导用户提高视觉凹陷的可读性。
“我们的设计是基于合理的理由，而非凭感觉？”其中提及的是人们如何阅读信息，提到的是视觉凹陷的概念。因此在界面上，什么地方使用色彩都有讲究。因此，通常需要使用颜色的地方就是想要引导用户并引起他们注意的地方，即使用颜色的地方。比如下面的产品，使用了高亮颜色引导用户的视觉。
当然，颜色的运用也会使整个页面的层次突出，而不是简单的用中性色来区分层次。
三、区别信息交流的状况。
上两张图也一样，大家可以清楚地看到，美团中的热卖好点，满减标签，价格，其实只有信息的呈现，而没有交互的特征和状态。但是在淘票票上，“47000”和“展开”是不同的，“展开”使用了辅助蓝色，这里的“展开”具有这篇文章所描述的控件所具有的交互功能──点击后显示隐藏文字。通常我们用的蓝色是在某个可点的链接上，当然还有其他颜色表示可点击。
因此，并非所有元素都要使用颜色，这使得整个页面很乱。
此外，在UI设计中，主色除了引导用户的角色，还可以代表信息当前的状态，被激活。比如爱奇艺应用程序中的播放详细页面、当前版块标签以及正在播放的剧集的激活状态。
四、营造热情洋溢的氛围。
除上面提到的色彩的不同使用外，它对画面和整体氛围的营造也起到了很大的作用，目前很多2c产品都会在界面氛围的营造上采用一些手段。比如导航栏、底部标签栏上的图标，或者主页的行销版块瓷砖区域都会以品牌色彩营造出活动期间的气氛。
界面设计中色彩运用的深浅和技巧。
一、颜色的正反两面。
从色彩心理学的角度来看，每一种颜色都有其特定的性格特征。并且都会有正面和反面，可以看下面各种颜色描述。
不过实际上很多产品使用的颜色与我们的认知有一定的差异，比如咖啡品牌的主色选择，在我们平常的人眼里，咖啡应该是棕色、棕色，但星巴克、瑞幸、漫咖啡实际上都使用的颜色与咖啡的本质没有多大关系。
当瑞幸刚出来的时候，许多人并不太习惯把这种蓝色和咖啡结合在一起，但为了形成品牌差异化，瑞幸一直以“蓝色”作为品牌的主调，“小蓝杯”这样的称谓不仅让消费者感觉亲切，而且在众多的咖啡中都有自己的记忆。该广告片的主调同样采用了蓝色，不仅符合当前消费者的视觉偏好，而且在给用户留下记忆点后，还让用户看到蓝色后自然联想到瑞幸咖啡。
二、忌用颜色。
但只要是用过颜色的人都知道，保证不会有过试用期，相信我。因此，每个人都必须避免。
1、高度饱和的色彩
高度饱和的颜色，会使人产生「错觉」！使人产生视觉疲劳，比如我把饿了么这界面调调了一下大家看，不亮瞎算我输。
2、灰部分使用过多的色彩。
为何许多时候我们都觉得界面脏兮兮的？正是由于我们在界面或配色上用了太多的低饱和度，灰度过大的颜色，所以这也是要避免的。
3、不定期和过多的色彩搭配。
使接口或插画看上去十分混乱。一般说来，色彩的使用也要注意着眼点，所以我们常用的方法是6,3,1的色彩比例。
4、萤光颜色
在UI界面中绝对不能使用荧光色，特别是主色。
5、色彩过于柔和。
这种配色和练习经常出现在许多dribbble的飞机草稿中。不管是在实践中还是实际项目中，这样的界面都完全不能让用户看到想要看到的信息，感觉不够集中和轻盈。
6、目前正在流行的新拟物化设计。
说实在的，这种风格的确令人耳目一新，但个人认为不会成为主流。由于这一点与第五点相同：信息的可识识识性较低。而且不谈颜色弱的人群，就正常使用者而言，白色+低饱和元素的大面积组合，感觉就是得了「白内障」。还有一点是我们经常说的，所有元素强调就等于什么都不强调，这样的风格在每个元素都有阴影的情况下都想让用户感觉到，原则是轻量化但又需要那么多阴影，这样就有点矛盾了。
为营造这种“新拟真”的轻盈气氛，还必须将界面上大部分元素简化，可以不加文字也可以不加文字。我总觉得有一句话影响很大：「设计需要简化，但简化的过程一定不简单」。因此，并非简单地为了这种风格而简化所有元素。
优漫教育专注于IT技术培训、项目承接与研发、信息智能、触控终端等领域。依托多年的技术积累，拥有10年以上教育行业经验，培养万名学员的教育从业人员以提升学员职业竞争力为目标来打造产、学、研三位一体的IT技术及人才服务的综合平台，致力于从根本上解决学员就业不理想的问题；在2000年开始成立教育科技集团，开始发展教育事业，志于帮助更多的人走上紧缺技术的职业道路，也帮助企业解决紧缺技术招人难的问题。
优漫教育
