界面设计中颜色搭配比较重要的环节之一，当然也包括排版，空间等。但今天，想和大家分享下，颜色。
摄影：Tyler Lastovich
对于新手UI设计师，在职场或者面试的时候经常会被问到，你有是如何改善界面的色彩搭配？试图通过类似的问题了解你对色彩的敏感以及如何使用颜色。看完这篇文章也许对刚入行不久UI设计师有一些帮助。
色轮。当我们谈论色彩，对比，协调性; 我们用色轮来比喻：
色轮
关于颜色有三个重要的事项：色调（色相）、饱和度（纯度）和明度。
看完文章的你，想要一些AE、ps学习资料或者有不懂的都可以找我咨询，加我建立的UI学习q群：927910296，进群可以找我领取相应的笔刷素材大礼包，还可以跟群里的其他设计大佬和学习者一起交流学习，获取更多其他软件学习资料。 想学UI设计的小白或者零基础都可以领取到学习资料ps笔刷神器+ps和AE软件
色调
色调是自然状态的颜色。例如蓝色，黄色，黄色，红色等。没有任何明暗的变化。
下图这个例子是将色调定义为您在色轮中看到的每种颜色，不会受光线和阴影改变而产生变化。见下图
色轮与颜色名称
明度
明度是光线和黑暗颜色的数量，在我们的日常生活中一个明显的例子就是看到事物更接近光线，白色调和其他背景更暗的东西。
当我们走路时，我们看到一些元素在早上和晚上都会改变颜色。例如，一座山有一种棕色，早上有较浅的色调（浅色），晚上有深色调（黑暗）。
如果你更接近光线，你会有更多的浅色调（光线），如果你离光线更远，你会有更多的阴影（黑暗）。
在UI（用户界面）中，起着重要作用，因为当我们使用它时，我们可以在界面中获得良好的对比度和不同的层次表现。
Material Design
一个明显的例子是Google的Material Design。使用不同的明度来识别重要元素。
明度是光或黑暗中每种颜色的量。这给了我们一种层次感。当颜色的值为100％时，会产生白色。当颜色的值为0％时，会产生黑色。我希望下面这张图片可以帮助你:)
色轮/明度视图
饱和度
现在让我们谈谈饱和度，饱和度是颜色的强度，当我们调高一个颜色的饱和度高时，我们会得到更强烈和鲜艳的色彩。当我们调低一个颜色的饱和度时，会得到一种灰暗的颜色，当我们完全去掉饱和度时，我们会有一种灰色。
回到配色方法的正题
当我们谈论颜色时，另一个重要的话题是如何搭配颜色。在我们学习色彩理论课时，特别是对比和协调。但对比并不总是意味着协调。
下图。正如所看到的，相反的颜色对比更强烈，而相近距离的颜色则更少，而且它们之间更协调。
配色规律6:3:1
这不是需要精准的比例原则，而是成功搭配颜色的比例。选择一种主色在60％的空间中使用它，辅助色使用30％，点缀色使用10％。只使用3种颜色！我们经常在室内设计中看到这中比例关系。见下图
当我们设计一个界面时，我们可以比喻正在设计我们的房间一样，每种颜色，灯光和位置的色调都必须完美且具有功能性。
正如在图像中看到的那样，使用了3种颜色。白色，粉红色和绿色。
6:3:1
提取自然色
您是否知道人眼可以看到超过1000万种颜色？您总能在自然界和所见之中找到协调与对比！自然，物体，动物，空间。一切都有调色板，我们需要多观察。
阴影不是一定是黑色，高光不一定是白色的
当我们使用高光和阴影时，常见的错误，就是认为如果我们想制作阴影，我们需要使用不透明度的黑色，而对于高光，我们必须使用不透明的白色。
卡片中的阴影
使用灰度来测试颜色的协调和对比度
使用低饱和度或灰度颜色，我们把图中去除颜色，只保留光和阴影。光与影给人以现实感和深度感。
灰色的色调
现在大多数界面更清洁，白底为主，举一个例子。
左边的那个是黑色＃000000而另一个是深蓝色＃15163D。看起来很黑，但不是。为什么这个这么重要？看下面的图片。
相同的不透明度，不同的结果
两者都具有相同的不透明度，但结果不同。一个是灰色，另一个是灰蓝色。当我们使用具有某种颜色色调的文本时，我们提供了更多机会与他们的环境更加协调。上面我们说过，要在颜色之间保持协调，就必须在它们之间存在一定的颜色。
两种组合应用效果
两者都看起来是黑色的，但有一种是紫色，这是黄色的补色。通过这样做实现了对比更协调。
那么使用黑色和灰色是不可以的？并不是！这一切都取决于你想做什么。黑色是中性色，任何颜色总是看起来很好。但有时候，就像例子一样，如果我们添加其他色调，我们会得到另一种色彩感觉。
网友评论