ui设计配色基础描述(ui配色的种类和技巧有哪些)

颜色丰富多彩，每种颜色代表不同的心理和情绪。不同颜色所体现的情感，使人具有不同的视觉和心理功能。不同的色彩碰撞也会给人不同的心理感受，这是色彩心理学教给我们的。色彩对比在生活中起着重要的作用，所以我们需要了解更多关于色彩对比的知识。包括哪些颜色？什么样的配色让人心动？禁忌什么颜色组合对比？……了解了这些知识，你就能明白什么样的色彩组合能让顾客或受众满意。
一、色彩对比的基本知识
不同的颜色可以表达不同的感情，颜色的对比也很多，这和色彩构成有很大关系。色彩对比基础知识主要告诉你几种重要的对比方法：色相对比、明度对比、纯度对比。
1、色调对比
即各种颜色的外观称谓，黑白灰以外的任何颜色都具有色相的属性。如朱红、蓝色、柠檬黄等。它是颜色的首要特征，也是区分不同颜色最准确的标准。
色环是原色、二次色和三色的组合(见标准24色环)。色环中的三原色是红、黄、蓝，在环中形成一个等边三角形。二次色是橙、紫、绿，它们位于三原色之间，形成另一个等边三角形。
红色、黄橙色、黄绿色、蓝绿色、蓝紫色、红紫色是三种颜色，三种颜色是原色和二次色的混合。
根据上面的色环，我们可以看到色环上的颜色有多丰富多彩。随意选择两种颜色，可以形成不同的对比。所以色相对比有很多，比如补色对比，对比色对比，相邻色对比等等。
(1)互补色对比
在色环的构成中，相隔180度的颜色称为互补色：红色和绿色是互补色，黄色和紫色是互补色，蓝色和橙色是互补色。互补色的对比效果强烈、耀眼、响亮、有力，但也需要慎用，因为使用不当容易产生幼稚、原始、庸俗、不稳定、不协调等不良情绪。
一般来说，在设计作品中，很少有设计师会用互补色来搭配作品的色彩，因为在实际应用中如果没有很好的把握互补色，就会很危险，很容易导致不舒服，不协调的不适感。也有很多优秀的设计师很好的运用了互补色。以下众所周知的标志设计由互补色搭配：
(2)相邻颜色的对比
相邻色比较好理解，比如黄色和橙色可以称为相邻色，草绿色和果绿也可以称为相邻色。色环上相邻的二至三色对比，色相距离约为30度，为弱对比型。相邻色调的对比效果感觉柔和、和谐、淡雅、宁静，但也让人感觉单调、模糊、乏味、无力，需要调整明度差来加强效果。
相邻色往往是你中有我，我中有你。比如：朱红色和橘红色，朱红色以红色为主，里面带一点黄色；橙色主要是黄色，带一点红色。虽然色调差别很大，但视觉上却很相似。在色轮中，90度以内的所有颜色都属于相邻颜色的范围。
(3)对比色。
色相的对比距离在120度左右，属于强对比型，比相邻色相更亮、更强、更饱满。丰富，容易使人兴奋并引起视觉和精神疲劳。比如黄色和绿色以及红色和紫色的对比等等。但也很难协调和统一颜色。这种对比不容易单调，但一般需要采用多种调和方法来提高对比效果，否则容易产生杂乱和过度刺激的效果。
(4)零度对比
其实零度对比有四种，无彩色对比，有彩色的无彩色对比，同色相对比，同色的无彩色对比。只需要理解无彩色的概念。
无彩色是指没有色相的颜色。前面小编提到的颜色都是有色相的，但是黑、白、灰三种是没有色相的，所以也叫无色相
非彩色颜色对比：如黑白、黑灰、中灰、浅灰，或黑白灰、黑深灰、浅灰等。
相对于无彩色，有颜色：黑黄、白蓝等。
同一物种的颜色对比：例如蓝色和浅蓝色(蓝色和白色)、橙色和咖啡色(橙灰色)或绿色和粉绿色(绿色和白色)和深绿色(绿色和黑色)的对比。
与非彩色中的同一颜色相比，如白色和深蓝色和浅蓝色，黑色和橙色和棕色。
2.明暗对比
明度是指颜色的亮度。比如：深黄、中黄、浅黄、柠檬黄等。这些黄色的明度不同。颜色有浓淡之分，这些颜色有浓淡之分，也就是颜色的明度变化。
两种或两种以上的色相组合后，明度不同而产生的色彩对比效果称为明度对比。是色彩对比的一个重要方面，是决定配色是否感觉明亮、清晰、暗沉、柔和、强烈、朦胧的关键。
可以看到，在亮度变化上也有低、中、高亮度之分。
数字资产数据产品网站和POCARI SWEAT网站都是通过明暗对比来设计的。
在POCARI SWEAT网站的界面中，右边的深蓝色显得稳重，左边的导航部分使用了亮蓝，左右形成了鲜明的对比。这个界面稳定轻快，视觉效果也不错。
3.纯度比较
纯度是指颜色的亮度和深度。纯度是判断色彩鲜艳度的标准。纯度最高的颜色是原色。随着纯度的降低，颜色变深变浅。
纯度是指饱和度。柠檬黄的纯度比较高。加入一点红色就变成橙色，所以柠檬黄和橙色在纯度上形成对比。经过两种以上的调色后，因纯度不同而产生的色彩对比效果称为纯度对比。它是色彩对比的另一个重要方面，但由于它的隐蔽性和内在性，很容易被忽视。在色彩设计中，纯度对比是决定色调给人的感觉是否华丽、典雅、简约、低俗、含蓄的关键。
低、中、高纯度之间也有纯度差异。
很难找到纯纯度变化的案例，因为颜色达到低纯度后颜色本身就变脏了，颜色本身也不好看。所以很少有设计师会做纯粹的纯度变化，一般是结合亮度变化和纯度变化。
詹姆斯吉伦(James Gillen)——詹姆斯吉伦设计师的个人网站，从界面上叠加的玫瑰红可以看到中等纯度的玫瑰红和一些纯度相对较低的，界面的整体冲击力还是比较强的。
后者的纯净和轻盈可能容易混淆。纯度是指一种颜色的饱和度，明度是指一种颜色的明暗程度，所以可能更容易区分。
二、如何选择最佳配色
至于色彩对比的重要性，不言而喻，大部分设计师应该都知道。色彩对比为观众提供了视觉享受。我们可以想象如果整个设计作品都是一个颜色，或者都是一个颜色，这个作品会有多无聊。
强烈的色彩对比能抓住人们的眼球，尤其是在超市的货架上。我们常常会被一个色彩对比明显的包装所吸引。网页的界面设计也是如此。我们更容易被色彩鲜艳、对比鲜明、美观的界面所吸引。
在列出的三个网页界面截图中，第一个注意到的其实是最后一个，相当醒目。这样的色彩对比让观众产生了期待，也给产品或网站留下了深刻印象。
我们在给一件作品上色的时候，会选择多种配色方案。根据上面介绍的色彩基础知识，我们可以把它们分为：
1、单色配色
单色配色很简单，这样的界面通常比较单调。举个简单的例子，我把色环上的颜色排成一排，方便比较：
单色设计的网站Nineswiss，界面效果单调。所以一般情况下，我们建议在使用单色时，可以使用同一色系的几种颜色进行协调，这种颜色可以配合相关的纯度和明度变化使用。例如：
虽然LOHBS的这个网站使用橙色作为主色调，但它也使用纯度和亮度不同的其他颜色来丰富界面。当然也用一些相邻的颜色，比如黄色。但这种配色可以增加视觉冲击力和画面的丰富度。
2.补色匹配
互补色的使用，前面说过，会比较冲突，所以使用时需要谨慎。
用法：补色，75% 25% 5%。
由于互补色之间的强烈对比，在实际应用中配色的比例非常重要。详情见下图：
当画面中两种互补色的比例各为50%时，画面的冲突就比较大，这种比例对比是极其难受的。橙色占三分之一和四分之一的时候，视觉效果比前一半好很多。最后一张图，在补色中间加了一个白色进行协调，让整体过渡更加柔和。这样的搭配最舒服。
在实际应用过程中，我们可以选择其中一种颜色作为大面积形成主色，而另一种颜色是小面积作为对比色。日本设计师看看作品中的实际应用：
奥塞梯派的官网是用红色和绿色的互补色对比设计的。绿色的比例比较小，中间时期大量使用黄色进行协调，所以整个网页界面很优秀。
3.相邻颜色匹配
相邻配色的方案被广泛使用，因为相邻的颜色具有相似的颜色特征，但又各有特点，所以这种配色方法更受欢迎。比如黄、橙、红的组合，绿、蓝的组合。以下是一些常见的相邻配色方案：
以上都是相邻的三种颜色组合，实际应用中不要平均比例应用，那样界面效果会不好看。具体比例建议可以是一个大色为主色，另外两个色为辅色。
紫色不在此列，不是说紫色不常用。紫色以一种特殊的方式出现在大多数网页中，相邻的颜色是蓝色和红色。不过紫色一般占面积大，蓝色和红色一般占面积小，这个我就不单独解释了。
Kro food网站使用相邻颜色的对比。橙色和红色添加到黄色界面。相邻颜色的运用会让整个页面更加和谐舒适。
4、零对比配色
从上面的解释来看，零度的分数有很多种，常见的有无彩色对比、无彩色与彩色对比、同色相对比、同色无彩色对比。常用的基本是无彩色和彩色的对比。
零度撞色配色更有个性，给人一种冰冷的视觉感受。虽然非彩色是无色的，但它们的组合在实践中是有价值的。其中非彩色和彩色搭配会更好。如果用非彩色，建议搭配彩色搭配比较好。
迷你5门舱口，这个网页使用非彩色和彩色对比。整个画面的色彩对比特别明显，容易彰显个性和主题。黑色背景色，白色字体和灰色logo，非彩色中的黑、白、灰都用上了。有的颜色是蓝色，比较鲜艳，和产品的颜色相呼应。在整个画面中，如果没有蓝色，画面会变得沉闷单调。加上蓝色后，整个画面就活了。
Tech设计公司的这个网站采用了非彩色的对比，整个界面都是黑白显示。一般这个界面会比较冷，有个性，但是时间长了就有点单调了。这个界面特别擅长处理黑白灰。通常只用黑白灰很难表达主题，因为很难掌握界面的黑白关系，突出主次关系。不过这个界面确实是边肖推荐的，界面的主次关系很明显。可见设计师在点、线、面的处理上花了不少心思。
5.渐变配色
这两年，相信大家打开网站，看到过很多颜色渐变的界面效果，这种效果也让很多人感到惊讶。渐变给人丰富的视觉体验，同时也表达了丰富的情感体验。
渐变的方式有很多种，如中心渐变、对角线渐变、垂直渐变、水平渐变、双渐变或多色渐变。上面说的四个梯度很好理解。我们在ai和ps中看到的渐变面板主要就是上面提到的那种。详情请参考下图：
网页中渐变的运用表现在很多方面，可以是整体色系的渐变，也可以是某个小元素的渐变。无论哪种方式的渐变，只要用得恰当，对网站来说都是锦上添花。
像官网，即时通讯比较吵，也是采用渐变背景，整体简洁丰富。这种表情挺常见的。
6.其他配色
其他配色也广泛使用。很多设计师可以自由选择相应的配色，而不是之前的色彩设置。
以蝉官网为例，主色调为绿色，但界面中出现红色和黄色的局部元素，整体界面活泼。类似的例子还有很多。这些网站会使用更多的颜色进行对比，活跃整个界面。
配色过程中需要注意的一些常见问题：
1.文字的可读性
在色彩对比的运用上，一定要注意文字的可读性。不要用互补色处理文字，因为看起来会不舒服。
用法：深色背景用浅色字符，浅色背景用深色字符。
可读性是任何设计的基本要素，也是重要的要素。因此，设计师在设计时，要考虑到色彩对文本阅读的影响，重视设计过程。
2.你用的颜色越多越好。
在实际应用过程中，不要使用过多的颜色。如果颜色太多，会给人杂乱感，没有美感。
第三，每个设计师需要知道的
世界上大约有8%的男性患有某种形式的色盲。这种情况在女性中很少见，但是每17个色盲患者中就有一个是女性。总共有4.5%的世界人口看不到世界其他地方的所有颜色。虽然这个比例很小，但是作为设计师也要考虑这种特殊情况。我们希望我们所有的作品都能正常的被访问或呈现。
举个简单的例子，红绿色盲也是常见的一种色盲，弟弟分不清绿色和绿色。这样一类人，意味着世界上任何一个红/绿色的物体都不会正常出现。比如一个红绿色盲的人会把紫色当成蓝色。这是因为他们看不见有助于区分紫色和蓝色的红色。
可以想象，这使得选择完美色彩对比的过程变得更加困难。如果选择绿色作为主要背景色甚至字体颜色，4.5%的预期受众可能无法准确查看所有内容。他们甚至可能无法阅读这些文字，这取决于你选择的音调和色盲有多严格。
所以我们在设计作品的时候，首先要确定自己的受众，在配色的时候，需要重点关注这些特殊群体的存在。
四。建议
设计不可能一蹴而就，是一个循序渐进的过程，需要积累和实践。可能今天给你介绍的这些方法都不能让你满意。如果上面列举的常见配色不能激发你的灵感，那么推荐几个配色网站供你参考。没有想法的时候可以去配色网站找点灵感。以下是国外一些知名的配色相关网站。
Paletton，帮助平面设计师和网页设计师选择理想的配色方案。你可以打开网站选择一种颜色，然后系统会自动生成配色系统供设计师使用。
Adobe color cc，Adobe的官方配色网站，你输入颜色它就配色。
调色板生成器，制作配色方案。输入图像的URL以获取与图像匹配的调色板。这很容易用于根据图片确定网站的颜色。
配色设计器，后更名为Paletton，是边肖经常使用的配色网站。使用时只使用一个窗口，完整实用，定制性强，几乎没有缺点。非要说一件事的话，复制RGB值不方便。
立邦色彩，这个网站没有之前推荐的配色网站好用，实用性也不是很高。但这是边肖不得不推荐的，这绝对充满了文艺风格。
配色网站介绍到此为止。之前小乔也整理过一篇文章：网页设计师常用的一些工具和资料，应该对大家有帮助。更多设计相关内容，请关注小乔的个人博客。