色彩基础与界面配色原则

色色彩基础与界面配色原则目录CONTENTS1视觉中的色彩原则2色彩在界面中的应用3界面配色指南视觉中的色彩原则PART01色彩基础、对比、性格、远近、重量PART.1PART.1色彩基础知识（IntercationDesign）三原色绘画色彩中最基本的颜色为三种即红、黄、蓝，称之为原色。这三种颜色纯正、鲜明、强烈，而且这三种原色本身是调不出的，但是他们可以调配出多种色相的色彩。间色由两个原色相混合得出的色彩，如黄调蓝得绿、蓝调红得紫。复色将两个间色（如橙与绿、绿与紫）或一个原色与相对应的间色（如红与绿、黄与紫）相混合得出的色彩。复合色包含了三原色的成分，成为色彩纯度较低的含灰色彩。PART.1PART.1色彩基础知识（IntercationDesign）互补色色相环中相隔180度的颜色，被称为互补色。如：红与绿，蓝与橙，黄与紫互为补色。同类色同一色相中不同倾向的系列颜色被称为同类色。如黄色中可分为柠檬黄、中黄、橘黄、土黄，都称之为同类色。对比色色环中相隔120度至150度的任何三种颜色。PART.1PART.1色彩基础知识（IntercationDesign）互补色色相环中相隔180度的颜色，被称为互补色。如：红与绿，蓝与橙，黄与紫互为补色。同类色同一色相中不同倾向的系列颜色被称为同类色。如黄色中可分为柠檬黄、中黄、橘黄、土黄，都称之为同类色。对比色色环中相隔120度至150度的任何三种颜色。PART.1PART.1色彩基础知识（IntercationDesign）互补色色相环中相隔180度的颜色，被称为互补色。如：红与绿，蓝与橙，黄与紫互为补色。同类色同一色相中不同倾向的系列颜色被称为同类色。如黄色中可分为柠檬黄、中黄、橘黄、土黄，都称之为同类色。对比色色环中相隔120度至150度的任何三种颜色。PART.1PART.1色彩基础知识（IntercationDesign）冷色色环中蓝、绿一边的色相称冷色，它使人们联想到海洋、蓝天、冰雪、月夜等。暖色色环中红、橙一边的色相称暖色，能带给人温馨、和谐、温暖的感觉。这是出于人们的心理和感情联想。它会使人联想到太阳、火焰、热血。黑白灰黑白灰事实上是属于无色系，色环则是根据原色来指定的，没有原色则是白，原色完全混合则是黑，灰是黑白之间的过渡。PART.1PART.1PART.1PART.1色彩基础知识（IntercationDesign）色相色相是指能够比较确切地表示某种颜色色别的名称。如玫瑰红、桔黄、柠檬黄、钴蓝、群青、翠绿……从光学物理上讲，各种色相是由射入人眼的光谱成分决定的。纯度含有色彩成分的比例愈大，则色彩的纯度愈高，含有色成分的比例愈小，则色彩的纯度也愈低。可见光谱的各种单色光是最纯的颜色，为极限纯度。当一种颜色渗入黑、白或其他彩色时，纯度就产生变化。明度同一颜色在强光照射下显得明亮，弱光照射下显得灰暗模糊；同一颜色加黑或加白掺合以后也能产生不同的明暗层次。二是各种颜色的不同明度。每一种纯色都有与其相应的明度。黄色明度最高，蓝紫色明度最低，红、绿色为中间明度。PART.1PART.1色彩的对比（ColorContrast）色相对比（同类色、互补色）同类色对比可以让画面和谐统一，互补色对比可以让画面更具张力。PART.1PART.1色彩的对比（ColorContrast）色相对比（同类色、互补色）同类色对比可以让画面和谐统一，互补色对比可以让画面更具张力。PART.1PART.1色彩的对比（ColorContrast）纯度对比（饱和度）使用纯度可以让主体更突出，人的眼睛更优先注意到纯度高的元素。PART.1PART.1色彩的对比（ColorContrast）明亮对比（颜色深浅）深浅的对比可以让画面更具层次，当然前面也说到色相不同也可以带来明度变化。PART.1PART.1色彩的对比（ColorContrast）冷暖对比冷与暖的情感完全不同，画面过冷或者过暖都会让画面视觉以及情感的失衡，二者在确定色调的情况下进行调和会让画面失衡。PART.1PART.1色彩的对比（ColorContrast）面积对比将两个色彩强弱不同的色彩放在一起，若要得到对比均衡的效果，必须以不同的面积大小来调整，弱色占大面积，强色占小面积，而色彩的强弱是以其明度和彩度来判断，这种现象称为面积对比。PART.1PART.1色彩的性格（ColorCharacter）冷色（蓝色）干净、新鲜、宁静、理性、清凉、权威、科技、医学暖色（红色）激情、肌饿、俏皮、温暖、张扬、亲切、热情PART.1PART.1白色纯洁、神圣、信任、安静。并且是所有颜色中最耐看的颜色，所以APP的背景基本都使用白色。蓝色在APP中主题色应用最多的就是蓝色，象征着诚实、希望与科技。在色彩心理学中测试发现几乎没有人反感蓝色。红色象征热情、性感、权威和自信，是一种充满能量的色彩、在一些需要烘托热烈气氛的APP中常会用到。橙色给人亲切、充满活力和阳光地感觉。一般在社会服务类或者电商类APP用到的居多，橙色可以激发人们的消费欲望。PART.1PART.1黑色象征着高雅、高端、冷漠。黑色缺少亲和力，所以一般产品很少定义黑色为主色。绿色给人安全、自由、新鲜、生命力的感受，所以绿色经常应用于安全管家，或者环保健康类APP中。黄色象征着青春、活力、创意，乐观，并且明度极高，是一种很难把控的颜色，黄色很容易脏，所以要慎用。紫色象征着优雅、浪漫、神秘、高贵。同样缺少亲和力，并且略显不稳重，紫色在APP中应用的较少。PART.1PART.1色彩的远近（ColorDistance）色彩的远近感是指明度，纯度，冷暖，清晰度等多种对比而造成的错觉现象。PART.1PART.1色彩的远近（ColorDistance）明度越高，视觉心理上就越靠前。明度纯度冷暖清晰度PART.1PART.1色彩的远近（ColorDistance）纯度越高视觉感受越靠前。明度纯度冷暖清晰度PART.1PART.1色彩的远近（ColorDistance）暖色视觉上靠前，冷色靠后。明度纯度冷暖清晰度PART.1PART.1色彩的远近（ColorDistance）色彩越清晰越靠前，相反，模糊的颜色靠后。明度纯度冷暖清晰度PART.1PART.1色彩的重量（ColorWeight）颜色是有重量的！当然，这并不是我们生活中所提到的重力。而且心理重量。不同的颜色有不同的“重量”。原因很简单：日常生活中我们看到的颜色在很大程度上受心理因素影响，形成了心理颜色视觉感。色彩的轻重感一般由明度决定，高明度（例如白色）具有轻感，低明度（例如黑色）具有重感。PART.1PART.2色彩的重量（ColorWeight）美国心理学家戴尔教授早就发现了色彩对人有光色度效应影响的“重量”。他经过多重复杂的实验后得出结论：各种颜色在人的大脑中都代表一定的重量。从小到大排列成如下顺序：红、蓝、绿、橙、黄、白。其中白色的心理重量为100克，黄色为113克，绿色为133克，蓝色为152克，紫色为155克，红色为158克，黑色为187克，并且同色系明度越高，给人的重量感越轻。色彩在界面中的应用PART02色彩的应用场景以及注意事项色彩在界面中的应用（Theapplicationofcolorininterface）色彩可以让一个界面的整体架构更清晰一个产品界面总是借助图形化的外观直接作用于客户的视觉系统。用户接触一个产品界面，看到的往往是一个由底色、其他几何色块、图标、按钮等元素构成的图形符号系统。用色彩可以非常直观的凸显出背景、导航栏、状态栏，按钮等构成元素，并显示出产品界面的逻辑架构。PART.1PART.2PART.1PART.2产品设计中不同的内容属于不同的层级关系，如菜单与菜单间的同级关系、内容间的从属关系等等。用同色系色彩、不同色相色彩间的差距可以非常直观地区分内容的层级关系，还可以通过色彩间的强对比突出关键内容。就像我在这篇的排版中一级标题用紫色强调，而次级标题不使用色相，从而明确视觉层级关系。色彩可以明确视觉层级关系PART.1PART.2色彩在界面中的应用（Theapplicationofcolorininterface）色彩可以营造一个产品的风格一个产品中色彩的搭配可以直接反映出这个产品的风格，以及产品的属性，例如电商类的橙红色，工具类的蓝绿色，或者文字阅读类的净白色。PART.1PART.2色彩在界面中的应用（Theapplicationofcolorininterface）60+30+10原则60%的主色，30%的辅助色，10%的点缀色。其实这个用色原则在产品设计时同样适用，当然在产品的设计中可能没有这么一个准确的比例，我习惯性的把主色、辅助色、点缀色分为有色相颜色的与无色相颜色，有色相颜色一般应用在按钮，图标，提示性元素中，而无色相的颜色应用在字体、分割线、背景色等元素中。例如我们说一款产品的主题色是某某颜色，但其实页面中80%的颜色都是无色相颜色，主题色仅仅占据了页面10%不到，所以这里我提到的60+30+10原则是单指有色相的颜色比例。PART.1PART.2色彩在界面中的应用（Theapplicationofcolorininterface）60+30+10原则比如微信的主题色我们都知道是绿色，而页面的设计中真正的主色是深灰色，我们并不能因此说微信的主题色是深灰色，只有当一个产品中真正的不存在色相，例如“one”“字里行间”这种禁欲系产品，我们才可以说他的主色就是黑白灰。PART.1PART.2色彩在界面中的应用（Theapplicationofcolorininterface）注意事项在我们做产品的页面设计时，尽量不要使用过多的颜色。虽然过少的颜色搭配很难第一眼就能吸引住用户。但是产品的设计与平面设计的差距就在此，做产品更多的是偏向于做一个工具，一个让用户连续浏览20分钟甚至更长时间的工具，而平面设计仅仅在做一个传递信息的视觉，需要在一瞬间抓住浏览者的视觉，并且在3-10秒内把信息传递出去。多伦多大学曾经做过一项调查，发现大部分用户都倾向于一个app页面中只有2-3款颜色。PART.1PART.2色彩在界面中的应用（Theapplicationofcolorininterface）主题色主题色是一个产品给予用户的第一个印象，主题色应该是产品内需要特殊处理时的首要用色选择。例如产品的主icon，标题栏，底部导航button，以及产品内标签与标签型文字等等。所有需要色相出现的地方，都会有主题色的出现，主题色至少要占有产品内有色相用色60%或者以上比例。PART.1PART.2色彩在界面中的应用（Theapplicationofcolorininterface）辅助色辅助色出现的场景一般都会伴随着主题色一起，当页面中需要提示的内容不止一种，并且需要作出区分时，辅助色就派上用场了。还有一种情况就是当页面中主题色占比过大，需要小部分的辅助色来让视觉平衡。辅助色与主题色的色相不会差距过大，并且占据产品内有色相用色不超过30%。PART.1PART.2色彩在界面中的应用（Theapplicationofcolorininterface）点缀色点缀色出现的场景分为三种，一种是需要区分信息超过两种时，点缀色会出现来填补辅助色不足。另一种情况是需要特殊的色彩提示时，利用点缀色来提醒。第三种情况是产品内主题色与辅助色同为暖色系或者冷色系，当同一界面内主题色与辅助色出现面积较大，导致页面过暖或者过冷，点缀色起到平衡画面冷暖的作用，所以点缀色与主题色一般色相差距较大，也是因为如此，点缀色出现的频率较低，占据产品内有色相比例一般不会超过10%。PART.1PART.2色彩在界面中的应用（Theapplicationofcolorininterface）单色配色与多色配色的情况上面所说的三种颜色是在常规情况下，而一些体量较小或者特殊属性类的产品也经常使用单色相配色，在这种情况下辅助色与点缀色所起到的功能就统一使用主题色来代替了，并且要尽量避免页面内主题色面积过大而导致视觉不适，单色配色不适用于体量较大的产品。而相