互联网企业对于UI设计师的需求量更是不断增加，也推动了很多年轻人往UI设计的道路上发展。但是，对于UI设计初入门的新手来说，光是UI设计里面的颜色搭配都够头疼很久！

本文将详细讲述配色技巧的相关知识，涵盖了大部分UI 配色的知识点，同时附有大量实例。

◆◆

如何选择有效的配色方案

◆◆

在创建配色方案时，需要考虑很多因素，包括品牌色彩及色彩在你所在区域的特殊意义。

◆◆

有多少色彩？

◆◆

保持色彩组合简洁有助于改善用户体验。一个简洁的配色方案不会使人眼花缭乱，并且使你的内容更容易被理解。相反，在太多的地方有太多的色彩很容易搞砸设计。

多伦多大学关于人们如何使用Adobe Color CC的研究显示大多数人更倾向于仅依赖2-3种色彩的简单色彩组合。

◆◆

如何创建方案

◆◆

那么，你如何选择这2-3种色彩？色环可以帮助我们。

△ 十二色环图是创建配色方案的重要工具。

有许多预设的配色方案可以使配色更容易，特别是对于初学者来说。

◆◆

单色配色

◆◆

单色方案是最易于创建的配色方案，因为每种色彩取自相同的基色。单色的色彩可以很好地结合在一起，产生和谐的效果。

单色是单一色系的搭配，它在色彩的深浅、明暗或饱和度上有所调整而形成明暗的层次关系。

单色方案是非常容易被视觉感受到的，特别是蓝色或绿色。

◆◆

相近色

◆◆

相近色的配色方案是选取相互不冲突的的相关色彩。一种色彩用作主色，而其它色彩用于丰富该方案。

这个方案相对容易使用，其诀窍是选择哪种颜色作为主调色来突出。例如，Clear，一款手势操作任务管理APP ，它使用相近的色彩，从视觉上区分任务的优先级。

△ Clear中的默认配色方案让人联想到热点热图，其中较紧迫的项目以明亮的红色显示。

◆◆

补色搭配

◆◆

互补色是色环上两个正对立的颜色。它们对比强烈，可以用来吸引观众的注意力。 当使用互补色方案时，重要的是选择主色并且使用其互补色用于强调。

例如，当人眼看到一块不同色调的绿色物体时，一点红色就会很突出。但是你必须谨慎使用互补色，以防止你的内容在视觉上显得不和谐。

△ 使用互补色是让内容脱颖而出的最简单方法。

但是你必须谨慎使用互补色，以防止你的内容在视觉上显得不和谐。

◆◆

自定义配色

◆◆

创建自己的配色方案不像许多人想象的那么复杂。最简单的方法就是将一个明亮的主色添加到一堆中性色中，这也是一个最能引起视觉冲击的方案。

白底加灰色文本，点缀以蓝色高亮，就是Dropbox的配色方案。

◆◆

掌握60-30-10原则

◆◆

60-30-10 原则最早是源自于室内设计领域，室内设计师借助这一原则，创造出协调的室内设计配色。这一原则很容易理解，为了达到平衡的配色，几种色彩遵循这60%—30%—10%这样的色彩配比。其中占据60% 的是主色，而30%则是次主色，而占据10%的色彩应当为提亮色。

这一的配色比例被认为是颇为令人愉悦的，在视觉感知上，它提供了一个颇为让人舒适的色彩层次，这样的控制让整个UI的色彩以一种可控的比例呈现出来，而不是将整个设计弄得一团糟。

◆◆

定义基本颜色

◆◆

在确定基本色彩时，我们最好不要选择极端的颜色，如纯白色(#FFFFFF)或纯黑等。并且根据对配色系统的需求，我们可能需要一系列的浅色调或深色调，如果选择太多的色彩和色调的话，会让设计师在选择颜色时更加困难。

– 寻找低对比度的中性颜色

虽然低对比度的中性颜色对于需要读取的元素来说不太友好，但对于输入字段这样的元素来说绝对是最佳搭配。因为输入字段并不需要太突出，所以低对比度的中性颜色可以帮助我们创建一个完美的UI容器。

– 限制基本色的数量

理想情况下，我们应该有少数经过认可的基本色(1-3种品牌色)和足够数量的强调色。

◆◆

从自然获取配色

◆◆

大自然是世界上最好的艺术家和设计师，我们在自然环境中看到的色彩组合大多都非常的协调，甚至可以说接近完美。人们所喜欢的日落和黎明，喜欢秋日的落叶和冬天的山野，因为这些色彩组合有着独特的美感。

那么你为何不试图从这些自然风景中获取配色呢？

◆◆

参考色彩心理学

◆◆

我们大脑对于色彩的反应其实是相当敏感和多样的，但是在日常生活中我们很难直观地、迅速地感受到。当人的眼睛感知到一种色彩的时候，会向大脑内的分泌系统发出信号，并且释放刺激产生对应情绪的激素。

每种色彩对于我们的感知和思维都有独特的影响力，了解这些可能的反应最终可以帮助设计师正确地传递信息，并且引导用户按照设计师的预期来执行。下面是一些颜色的基本的特征和含义：

红色，象征爱情，自信，激情和愤怒，它是充满活力和温暖的色彩，给人带来兴奋的感觉。

黄色，能传递出幸福，阳光，喜悦和温暖的情绪。

绿色，则常常能给人自然、清新、富有生命力的感觉。

蓝色，是目前最受欢迎的颜色之一，企业常常会使用蓝色来传递自信和让人信赖的感觉。

紫色，和皇室、财富关联密切，这也是代表神秘和魔力的色彩。

黑色，虽然和死亡、悲剧有关，但是也能营造沉稳大气的高级感。

白色，代表纯洁无暇，传达出高雅，纯粹和清晰的感觉。

除此之外，设计师还需要明白一个事情，就是人和人的视觉感受通常是不同的，对于色彩的认知还受到文化背景的影响，性别的因素对于色彩偏好的影响也不小。因此，了解目标用户的特征是很有必要的。

◆◆

总结

◆◆

懂得了UI设计中的配色小技巧，也有利于后期设计工作的展开。无论是banner设计还是绘图，绝佳的颜色搭配都能更好的勾动用户的心。