来源：Medium网站

作者：Christian Vizcarra

翻译：奥创

阅读时长：8min

 摄影：Tyler Lastovich ，来自Unsplash

我在思考色彩问题。存在大量使用的颜色，特别是在界面中，我们有更多机会采用组合颜色，使用高对比度，选择更亮的颜色并吸引更多的注意力。

颜色是这个故事的主要特征之一（界面）以及其他字符，如排版，空间等。但今天，我想告诉你我们的朋友，颜色。

你有没有想过我们如何改善界面的色彩和谐？当我采访一位新的UI设计师（或视觉设计师）时，我总是试图了解他的敏感色以及他们如何使用这种颜色的知识。如果您是UI设计的新手或者非常喜欢做数字产品，这可以帮助您。

让我们开始谈论着名的色轮。当我们谈论色彩，对比，和谐; 我们必须把这个形象放在脑海里：

  色轮

关于颜色有三个重要的事项你应该知道：色调，明度和饱和度。现在我要解释它们：

1.色调

色调是自然状态的颜色。例如蓝色，黄色，黄色，红色等。没有任何光明和黑暗的变化。另一个可以帮助您理解这一点的例子是将色调定义为您在色轮中看到的每种颜色，而不会对光线和阴影进行任何其他更改。

  色轮与颜色名称

2.明度

明度是光明和黑暗颜色的数量，在我们的日常生活中一个明显的例子就是看到事物更接近光线，白色调和其他背景更暗的东西。

当我们走路时，我们看到一些元素在早上和晚上都会改变颜色。例如，一座山有一种棕色，早上有较浅的色调（浅色），晚上有深色调（黑暗）。

  摄影：Alexandre Godreau，  来自Unsplash

如果你更接近光线，你会有更多的浅色调（光线），如果你离光线更远，你会有更多的阴影（黑暗）。

在UI（用户界面）中，值起着重要作用，因为当我们使用它时，我们可以在界面中获得良好的对比度和不同的表面。

 Google Material Design

一个明显的例子是谷歌的材料设计。他们使用不同的表面来识别重要元素。

该值是光或黑暗中每种颜色的量。这给了我们一种表面感。当颜色的值为100％时，会产生白色。当颜色的值为0％时，会产生黑色。我希望下面这张图片可以帮助你:

  色轮/值视图

3.饱和度

现在让我们谈谈饱和度，饱和度是颜色的强度，当我们饱和一种颜色时，我们就会有更强烈和鲜艳的色彩。当我们去饱和颜色时，我们会有一种暗淡的颜色，例如，当我们完全去饱和颜色时，我们会有一种灰色。

饱和度是我们在印刷世界中无法使用的东西，因为在现实世界中，我们可以限制颜色的饱和程度。例如，当我们要制作一本书，海报时。在数字世界中，我们拥有更多的可能性。

真实生活与数字生活

当我们谈论接口饱和时，我们必须触及一个重点。与我们很少看到生动和强烈色彩的现实世界不同，在数字世界中我们可以做到这一点，因为我们使用RGB而不是CMYK。这就是使用责任感非常重要的原因。

回到基本

当我们谈论颜色时，另一个重要的话题是如何组合颜色。我记得很多关于这一点的是我的色彩理论课，特别是对比和和谐课。对比并不总是意味着和谐。

为了使颜色之间有一种和谐，它们之间必然存在着来自另一种颜色的颜色。

见下图。正如你所看到的，相反的颜色有更多的对比，而近距离的颜色则更少，而且它们之间的和谐更加明显。

规则60 30 10

不，这不是超级模特的测量，而是成功组合颜色的比例。您必须选择一种主色并在60％的空间中使用它，另一个使用它以使其在30％中使用它，在剩余的10％中使用最后一种颜色。是的只有3种颜色！它是室内设计中经常使用的东西。

当我们设计一个界面时，我们需要认为我们正在设计我们的起居室，每种颜色，灯光和位置的色调都必须完美且具有功能性。

正如您在图像中看到的那样，使用了3种颜色。白色，粉红色和绿色，绿色带来重音。如果我们将这个比喻带到界面设计中，强调颜色可以定义为我们的CTA（Call To Action）的颜色。

  接口调色板，CTA颜色绿色

受大自然的启发

您是否知道人眼可以看到超过1000万种颜色？您总能在自然界和所见之中找到和谐与对比！自然，物体，动物，空间。一切都有调色板，你需要引起很多关注。

  摄影：Sven Brandsma，来自Unsplash

阴影永远不会是黑色，灯光永远不会是白色的

当我们使用光和阴影时，我们犯了一个非常常见的错误，就是认为如果我们想制作阴影，我们需要使用不透明度的黑色，而对于光，我们必须使用不透明的白色。

  卡片中的阴影

如果你仍然不相信，只要看看现实生活，黑暗总会有一些基调。

  摄影：Duy Hoang，来自 Unsplash

黑暗永远不是黑色，黑暗是用价值色调着色的对象的色调。柠檬的影子是深绿色，几乎是黑色，木板的阴影是一个非常深的棕色，几乎是黑色。但它永远不会是黑色的。黑色只有在完全没有光的时候才会出现。

使用灰度来测试颜色的和谐和对比度

使用不饱和或灰度颜色，我们从等式中去除色调，只保留光和阴影。光与影给人以现实感和深度感。

  Lana Marandina的插图

当我们只留下灰度时，我们可以看到色调（值）之间存在差异，有些暗，有些则更亮。这让我们感受到它们与对比之间的和谐。这是应该发生的事情的一个例子。

灰色的色调

今天界面更清洁，更白，另一个角色曝光，排版。但在另一篇文章中，我们将讨论我们的朋友排版，现在我想谈谈颜色。

  你好，世界！

左边的那个是黑色＃000000而另一个是深蓝色＃15163D。他们都看起来很黑，但他们不是。为什么这个这么重要？看下面的图片。

  相同的不透明度，不同的结果

两者都具有相同的不透明度，但结果不同。一个是灰色，另一个是灰蓝色。当我们使用具有某种颜色色调的文本时，我们提供了更多机会与他们的环境更加和谐。记得我告诉过你，要在颜色之间保持和谐，就必须在它们之间存在一定数量的颜色。

  两种类型的组合

两者都看起来是黑色的，但有一种是紫色，这是黄色的补色。通过这样做，我们实现了对比和和谐。

那么使用黑色和灰色是不好的？没有！这一切都取决于你想做什么。黑色是中性色，任何颜色总是看起来很好。但有时候，就像例子一样，如果我们添加其他色调，我们会得到另一种色彩感觉。

  示例中使用的调色板

锻炼你的眼睛！找到光明！

Pablo Stanley

就像我们去健身房锻炼身体一样，我们应该看到每天锻炼眼睛的灵感。

我们中的许多人看到的颜色不是饱和的或生动的，这是正常的。世界并不完美，颜色也不完美。我们中的许多人来自一个物理世界，我们只使用CMYK，颜色有限制。

当我们处于数字世界时，颜色的可能性很多，我们必须做好准备。我强烈推荐的一项好运动是看日常灵感。

以一种看似不是任务的方式来破解你自己的系统，但这是自然的。

有一件事对我有很大帮助，那就是Instagram。Instagram已经成为我日常生活的一部分，并且是设计师的非独家社交网络。我觉得这不是一项任务。我按照一些鼓舞人心的页面，每天看到很多界面设计以及它们如何应用颜色。

最后的想法

像生活中的一切一样，知道如何组合颜色是实践和实践。如果在开始时很困难和复杂，这是正常的，但是你会注意到它更容易。永远不要停止学习和练习。

---------------------------------

喜欢请点赞推荐并关注哦~~