创建调色板11个的技巧

文字和插图：Patrick Multani

无论你是新手还是老手，如何在最有争议和难以捉摸的设计中使用颜色。

颜色具有多种文化，社会和情感的意义，设计师的选择实际上是无限的，因此选择调色板的复杂性不会变得更简单。

在本周的文章中，设计师Patrick Multani分享如何构建出色调的技巧。

在开始挑选颜色之前，我总能想到Dustin Senos’ short article about design principles。他在文章中解释了，在“Medium”中，他们如何使用“针对的和选择的”，“恰当的和一致的”和“进化的和完成的”这些原则。我认为形成这种原则的方式也适用于颜色：白色和灰色；和谐和分离；寒冷和热情。我试着保持这些想法在我工作的时候。它们作为一种感觉检查——有点像一个用户角色如何引导UX设计师。

在选择颜色时，我尝试保持在一条直线上，而不是对角线或是从左到右。这给任意调色板间带来了直接的关系和进步。所得到的一组颜色可用于指示活动和非指示活动按钮、边框或背景。我们也可以将点放在颜色选择器上的相同位置，而且可以让色调滑块循环使用颜色。这将会产生令人兴奋且和谐的调色板，如上图所示（中心）。

我经历过一个不断反复且脆弱的调色板：轻微的调整可以对配色方案的整体效果产生巨大的影响。所以我觉得要敏感，重要的是在小步骤中做出改变。例如，选择冷或暖色调的灰色可以大大增加设计的和谐。我们可以通过挑选很多颜色，并让它们反复迭代，从而变得更加敏感于色彩的微妙。

我用混合模式来帮助创建令人兴奋的调色板。通过简单地创建两个重叠的形状，并选择“乘法”混合模式，我们得到第三个匹配的颜色。在白色背景下，我们还可以尝试透明度设置，以快速调整亮度。我觉得对立面是值得尝试的：黑色背景，结合“屏幕”的混合模式。混合模式提供了一种与颜色进行交互的新方法，经验丰富的设计师都在一直广泛使用。

最近在Framer website上，我发现了四个旋转正方形的示例原型，它们具有不同的色调和模糊度。这是非常棒的，所以我立即启动了Framer，使用一个简单的循环来创建一些调色板。设置起始背景颜色，并使用色调与模糊度一起旋转以生成颜色。色调的旋转范围在0到360之间，模糊度的范围从0到1（小数也可以工作），根据这些数字，我们得到不同的调色板。我发现这非常有价值，所以我现在把Sketch与Framer结合使用，以查看循环中的某些颜色。要从Framer中选择将要在设计中使用的颜色，对Framer画布进行屏幕截图，将其粘贴到Sketch中，然后再使用颜色选择器。

使用好的颜色是一回事——在视觉设计中有效地使用它们则是另外一回事。颜色可以看起来很漂亮，但一旦适用于某个特定的设计项目，调色板就会崩溃。尽可能少地使用几种颜色可以使设计冷静下来。例如，对文本，图标和边框使用不同种类的蓝色可以很好地工作。这种方法让我们在使用不同色调突显某些东西时，可以真正让它脱颖而出。

我记得从事一个需要可扩展颜色系统的项目。我选了大量细微的颜色，而且难以区分它们。所以我做了一个颜色的副本，并添加了一个暗的背景来以此找到另一个视角。这有助于我做出更好的决定。

从颜色选择器的右上角选择可以安全地找到适合视觉设计的颜色组合。在自然界中，灰尘的添加形成了灰色和黑色。虽然添加灰色或黑色的颜色可以增加设计的比重，但使用太多的重色调能潜意识地传达污秽。所以我尝试着用清晰明亮的配色方案制作设计。

想像一张白色的半透明纸。想想如何“提亮”任何颜色。可以通过创建所想到的“过滤器”形状来在Sketch中进行模仿。使用模糊度，混合模式或两者的组合，我们可以使用亮色和暗色过滤器形状来提亮或变暗颜色。有时候，在一些UI项目中，我会使用这种技术来暂时提亮或变暗界面的整个区域。这比单独更改颜色更快且更容易，它保持了色彩之间的和谐关系。

上图显示：

·黑色层，叠加混合模式，模糊度50％（增加饱和度）

·白色层，普通混合模式，模糊度50％（变亮）

·黑色层，正常混合模式，模糊度50％（变暗）

当决定背景颜色时，作为第一步我喜欢前景，变亮或变暗。而不是选择中性的灰色（即位于白色和黑色之间），选择稍微暖色调或冷色调的灰色，这会给人很机械的感觉。

最后，记住光和暗对我们对视觉深度的看法的影响。在黑暗的背景下，较浅的颜色会出现在前面；而在较浅的背景下，它的颜色较深，呈现出前景化。我经常在阳光下想到这一点：在上图中，我们可以想象太阳直接照亮左上角的圆圈，右下角的圆圈被太阳背光，形成一个轮廓。

更多Sketch的提示：

lSketch Tips Part 1: Objects, Layers, and Artboards（对象，图层和画板）

lSketch Tips Part 2: Editing and Exporting（编辑和导出）

lSketch Tips Part 3: Composition, Light and Shadow（构图，光和阴影）

lSketch Tips Part 4: Symbols（符号）

原文地址：https://blog.prototypr.io/11-tips-for-building-great-color-palettes-2d3201d4c920

原文作者：Designlab

译者：SKYUI

欢迎关注SKYUI官方微博“SKYUIHOME”

官方微信公众账号“SKYUIUX”