ui设计的色彩

本文旨在向您全面介绍最深的设计兔子洞：颜色。 它将向您介绍最重要的术语和概念，以帮助您入门，从而帮助您在设计中应用颜色时做出更好的决策。

主题

与这些指南一样，我们将涵盖很多内容，包括：

• 颜色？
• 色调
• 色调，阴影和色调
• 值
• 饱和度/色度
• 色轮
• 配色
• 单色
• 颜色种类
• 配色
• 重点
• 颜色一致性
• 颜色含义
• 颜色相关性

颜色？

没有光就没有颜色，对不对？ 好吧，实际上没有“黑暗”也没有颜色。 ?？ 我知道，起初听起来很奇怪，但是没有黑暗，颜色也会消失。 在为网页设计选择颜色时，是否需要了解这样的东西-选择它们的色调，饱和度和价值？ 可能不是！ 色彩理论是否能使您一次又一次地动脑子，使您成为更有效率的网页设计师，从而成为更好的“传播者”？ 绝对！ 在色彩方面，我们都有大量的见解和情感，但通常人们对自己的实际工作缺乏清晰的认识。 有理论基础可以使您作为设计人员更加有效。 艺术学校不是大多数人度过重要时间的地方，但是您不需要花费数年时间就可以根据自己的需要来改变色彩。 因此，让我们快速上手。

选择颜色时，有很多您不会马上想到的注意事项。 有点警告，它可能是您永远无法逃脱的兔子洞。 为了弥补这一点，我建议，首先，您应该专注于使它对用户有吸引力，同时做出合理而有效的选择来支持您的设计。 对于彩色新手来说，这似乎是一个易于管理的目标。 我意识到这听起来很浮肿，但是主观性并不是您谈论色彩时可以摆脱的。 可以说，我们可以同意选择具有意义并产生兴趣的颜色是一个不错的起点。

如果可以适当地产生色彩，那么色彩可以成为艺术或创意库中非常有力的“武器”。 对于我们在网络上的设计，色彩通常与情感和视觉影响有关。 如果使用得当，颜色可以引导观众了解重要的内容，如果您没有过度使用，则可以增加重点。 我想可以公平地说，这可能是在Web项目上使用颜色时最重要的事情。 第二个关注点是您可以建立某种情绪，这种情绪影响会进一步推动品牌创意。 整个主题是一个巨大的话题-实际上是巨大的。 我们将专注于最重要的方面和术语，以帮助您入门。

色调

色相是色轮上的任何颜色。

很多时候，人们谈论颜色时，他们实际上是在谈论色相，这是基本的“纯”色，即可见光谱内的任何颜色。 健康的人眼可以看到230万种色调； 大量的红色，蓝色，绿色等变化。

对于我们在设计中使用颜色的工作，它们代表了起点，例如原始或最原始的版本。 在我们的设计中，建议将它们抛在后面，以免显得业余或幼稚。 您是否注意到儿童卡通喜欢将这些颜色用作其角色？ 我猜这并不奇怪。 如果您追求某种美感，那么当然可以使用此功能，但是在大多数情况下，幼稚并不是在网络上效果很好的。

“特使护照”在这种情况下利用了这种卡通风格，好玩的风格。 您会看到颜色非常平坦且不复杂。 但是他们在这里使用这种风格来传达一种印象或想法，如果不为儿童模仿艺术品，这些印象或想法将很难描述。

色调，阴影和色调

色相没有色调或阴影-这意味着它们没有添加任何白色或黑色。 这就是为什么我们要谈论特定色调的色调和阴影。 色调约为某种颜色中白色的数量。 当您将一种颜色与白色混合时，您会对其进行着色。 白色越多，色调的亮度越高。 向纯色添加白色会降低其饱和度 ，从而使色度降低。

另一方面，阴影约为某种颜色中黑色的数量。 当您将颜色与黑色混合时，您将对其进行着色。 由于黑色颜料的压倒性，这导致了丰富的，通常更暗，更强烈的颜色。 许多黑人甚至通过少量的改变就能改变色调的特性。 因此，应谨慎使用它们。

从下面的光谱中可以看到，在中间可以找到纯色。 在左侧，我们通过着色为白色添加了越来越多的颜色，在右侧，我们将红色与黑色阴影化了。

我们说的是在将色调与灰色混合时创建色调，这意味着您可以有效地同时着色和着色。 色调可以比原始色调更亮或更暗-取决于添加的白色和黑色的数量。 它们还将显得不如原始色调饱和和强烈。 色调可以在色调中揭示出微妙而复杂的特质，并且更接近于我们对“真实”世界的观察方式。

值

价值是色调的明暗。 价值观对于取得专业成果至关重要。 从某种意义上说，它们比选择色调更重要。 当我们说某种颜色更亮或更暗时，我们在谈论的是色调的价值 。 这告诉我们距最亮或最暗版本有多近。 值刻度类似于特定色调的灰度。

比例尺上的各个部分称为步骤。 可以通过明显比下一个更亮或更暗来区分每个。 如果应用这些值，则可以通过使用逼真的灯光和阴影获得更好的色调对比度。

我们在艺术史上共同钦佩的许多伟大画作都是由艺术家创作的，这些艺术家通过适当使用价值尺度以微妙的色调对比掌握了作品。 他们通过有限数量的色调的渐变值实现了深度的变化。

这不仅适用于灰度，而且也适用于单色（具有一种色调）。 可以将其视为色调的明暗变化。

通过使绘画去饱和，您可以看到此比例的效果如何。 当您使颜色变灰时，这些值不会更改。 最亮的灯光和最暗的黑暗仍然定义了有效范围，以产生不会失去其艺术品质的图像。

或想想过去五十年来左右的标志性黑白照片。 它们通常在灰度级上具有广泛的阶跃，并产生更强烈，更有趣的对比度-从非常深的黑色到非常明亮的白色。 业余爱好者通常最终会获得黑白的平面图像，因为他们没有意识到有必要在更宽的灰度范围内使其更具活力。

有趣的是，每种颜色都有其固有的取值范围。 一些具有比其他更大的范围。 例如，与蓝色相比，红色具有更有限的范围。 红色处于低灰度范围内，该值非常暗。 另一方面，黄色处于高范围。 绿色，紫色和蓝色具有更大的范围，从暗到亮仅需几步即可。

我们为什么在乎？ 值是在任何画布上呈现二维描述并使用色相的相对阴影使其呈现为三维的有效方法。 这就是人们所说的更加鲜活或充满活力的色彩-与无法达到这种效果的纯色形成鲜明对比。 这就是为什么通常使用更多的不饱和色调，纯色几乎没有帮助并且看起来不成熟的原因。 一个好的技巧是从一个色调开始，为您的网站制定一个价值量表。 您可以使用值突出显示特定区域，而其他区域则柔和地淡入背景—所有这些都保持在相同的色调内。 简单而优雅。

饱和度/色度

饱和度，也称为色度 ，是我们不容忽视的另一个概念。 这是色调的“色彩”或纯度。 这些时髦的词实际上转化为感知到的颜色的强度或鲜艳度。 色度定义了色调的纯度。 当您购买绘画颜料时，色度就是您从显像管上直接取下的颜色。 与此相反，去饱和的颜色被洗掉或变灰，并且经常用作各种程度的阴影颜色。 完全饱和的颜色显示为灰色。

我们通过添加互补色来使色调不饱和。 从色轮反面添加的所有内容都会有效地降低色相的饱和度。 在两种颜色相遇的地方，您将获得中性色点（棕色或灰色）。 重要的是要了解我们没有为此添加灰色。 实际上，您是在创建灰色，而不是通过添加黑色或白色。 画家使用这些灰色来分解饱和的颜色。

为什么这是个好主意？ 答案实际上是非常实用的：您不想在各处都用强烈的色彩饱和度轰炸观众-恰恰相反。 高度饱和的颜色看起来难以置信且便宜。 太多的东西会使您的眼睛几乎没有休息的机会，也没有什么可以真正专注的，从而增加了视觉噪音。

屏幕截图

当这样的网站UXDESIGNER.TOP ，不知何故致力于UX，这样的错误，它是加倍忧伤在我看来看看。 看起来不太好，是吗？ 它有各种各样的问题，但是主要是颜色混乱并不能很容易地建立层次结构来引导观众。 糟糕的UX！

以蓝色和橙色为例。 它们彼此紧紧地表现在一起。 如果将它们混合使用，则会获得灰色调，可以很好地分离出它们更饱和的变体。 这种新颜色将自己定位在那些高度饱和的版本之间，并通过应用更逼真的颜色来创造视觉上更令人愉悦的体验。 听起来很蓬松，但它具有更多的活力和生命。 这会在技术上更加成熟的颜色之间创建一个障碍。 当您谈论绘画大师时，这是他们牢牢抓住的一件事。

在设计中，最好只关注一种或两种颜色，然后根据它们创建变化。 这为您提供了相同颜色内的大量选项。 您可以改变颜色，但保持相同的色相。 这样，当只有几个部分被选择性地高度饱和时，这有助于吸引观看者的注意力。 在上面的图像中，您会发现眼睛被sen吸引。 它真的跳出来了。

色轮

通过获取光谱，然后将两端连接到一个圆上，我们得到一个色轮。 这是用于显示颜色之间关系的经典工具，非常有用。 为何如此？ 对于初学者来说，色轮可以告诉您如何为特定选择创建最大的对比度。

对称的色轮并不是科学的东西，而是我们大脑工作方式的一种表示。 它指出了我们在颜色唤醒后会如何在情感上做出React。 从科学上讲，色谱中没有相反的颜色-这是我们大脑中的想法，或者是我们用来组织和区分颜色的概念中的想法。 当然，这对于选择颜色绝对有帮助。 这些看法不仅受到我们自身生物学的推动，而且还受到数百年来艺术史的影响，并且在不同文化之间可能存在很大差异。

在这些示例中，我们将使用基于“红-黄-蓝（RYB）”颜色模型的传统“艺术家”色轮。 这是从画家如何通过减色混合创建颜色混合中得出的。 如今，它早于科学色彩理论就被用于艺术和设计中，而色彩理论是指青色，品红色和黄色（CMY）作为其原色。 与RYB颜色模型相比，CMY可以实现更大的颜色子集。

原色：红色，黄色，蓝色

红色，黄色和蓝色用于创建所有其他颜色，因此被称为primary 。 您不能混合使用任何其他颜色来获得它们。

这当然是一个很好的起点，并且您现在需要了解所有有关原色的知识。 话虽如此，我还想提到，这是过去许多颜色理论家的假设。 实际上，例如使用油漆或墨水，您只能混合有限的颜色范围，而与健康的人眼可以感知的整个范围不匹配。 我们在这里谈论的是某种特定的颜色子集，也称为色域。 因此，这里要加一点盐。

次要颜色：绿色，橙色，紫色

通过组合原色来混合绿色，橙色和紫色。

在以上歌德的色轮中，绿色是基础。 它是黄色和蓝色两种原色的混合。 橙色是黄色和红色的混合，而紫色是红色和蓝色的混合。

第三色

我们可以进一步将这个想法带进去，并通过混合轮盘上彼此相邻的颜色来将原色与辅助色混合。

完成此磁偏角后，您将得到以下内容：

• 淡黄色：黄绿色
• 琥珀色：橙黄色
• 朱红色：橘红色
• 洋红色：红紫色
• 紫罗兰：蓝紫色
• 蓝绿色：蓝绿色

请注意，在此符号中，辅助颜色紧跟主颜色。

类似颜色

类似的颜色在色轮上相邻，彼此紧邻。

它们形成简单的关系，通常在眼睛上非常轻松，营造出一种和平，舒适的心情。 为何如此？ 最有可能是因为这种配色通常可以在自然界中看到。

互补色

在色轮上，互补色彼此相对。 互补色是一种非常流行的组合，因为它们“自然”地取悦眼睛。 红色和绿色特别受欢迎。

但是请记住不要同等使用它们，而应选择一种主要颜色。 通常，较弱的颜色应更广泛地使用，而较强烈的颜色则应用于强调。 考虑一下颜色组合，例如匹配的衬线字体和无衬线字体。 在这里，保持平衡非常重要。 互补色还可以为每种色调创建最强的色彩对比。

三色系颜色

三色系颜色在色轮上等距放置。 他们提供了更多高级组合，我认为对于初学者来说很难使用这些组合，但是请不要阻止我。 你越练习，等等，等等……

它们通常对卡通和超现实场景很有用，并且可能暗示一定的趣味性。

颜色种类

这是RYB色轮的更新表示：

暖色

暖色由色轮的右侧表示。 至少在我们通常的看法中，他们倾向于吸引更多注意力，精力充沛，真正坚强。 不要忘记这些是非常人性化的属性，与光现象无关。 这些颜色可以很快吸引我们的注意力，并且被认为是非常活跃的。

您可以使温暖的颜色有效地工作，但这是一个无法通过建立大量温暖的颜色来建立信任，安全和信心的示例。 最重要的是，这种设计在强调其主要作用方面做得不好。 他们的电子邮件订阅按钮与背景颜色相同，并且在视觉上消失。 如果仅按钮使用温暖的颜色以使背景更加清晰，而背景没有使用活动颜色的阵列，则可能会更加微妙和有效。

酷色

另一方面，左侧代表冷色。 这些更加舒适和稳定。 它们也易于淡出到构图的背景，并且不会“跳出”那么多。 它们本质上被认为是更被动的。

如今，色轮的左侧在流行网站中非常受欢迎。 只需看看那里的Facebook和Twitter，您就会发现大量的知名项目，这些项目使这些颜色成为其调色板的固有特性。 为什么？ 因为Web项目总是要与没有实际位置的位置作斗争，所以可以更轻松地建立个人和信任的连接。 迎合数百万人口的网站需要看起来稳定，可信赖，放松和平静，甚至让人感到舒适。 这些都是较凉爽的颜色类型可以帮助您的所有事项。

中性色

黑色，白色，灰色和棕色被认为是中性的。 从这个意义上讲，他们支持“颜色”。 如果正确应用，这些中性点可以将所有东西捆绑在一起，就像上面的莫奈画作一样。 它们提供了与更明亮，更强烈的色彩强度之间的区别，从而更容易吸引眼球。 从这个意义上讲，中性是兴趣和变化的基础，例如您的意粉配番茄酱和肉丸。 意大利面条是所有这些的中性粘合剂。

当您将更多饱和色带入混合时，中性色会退回到背景。 在每个出色的色彩词汇中，它们都起着重要的作用，因为它们可以帮助您在工作中建立熟练的平衡。 试想一下，如果一切都在按颜色大喊大叫。 那不是很有效，我们将再次以颜色“噪点”结束。 中立是您在需要时集中注意力的秘密武器。 实际上，这意味着您可以使用大多数中性色调构建构图，然后确定焦点在哪里以及应该吸引眼睛的地方。 那就是饱和音调发挥作用的地方。

想象一下，如果我们这里有大量的饱和色。 预定按钮很难伸出。 由于它们是该业务的核心，因此需要高度重视它们​​，以免迷路。 白色和灰色区域退回到背景，让一些色彩突显出来。

配色

在继续进行之前，先说一下将各种颜色融合在一起。 正如我所指出的，此过程实际上可以类似于选择字体。 尝试为您的设计选择一种或两种主要颜色。 您可以通过调整值，色调，亮度，饱和度或使用中性色等来进行多种选择。如果您不痴迷于成千上万种颜色，您将获得更加一致的结果-将整个作品联系在一起有意义而优雅地在一起。

从一种颜色开始，从该颜色反弹其他颜色，然后看您可以将其取多远。 如果从简单的灰度级开始，然后再等到将颜色带入方程式，那就更好了。 在您的早期方法中玩弄光明与黑暗。 为了突出显示某些部分，请保留使用主色，同时让辅助色执行背景工作。

单色选择

我还应该快速提一下您需要了解的单色选择。 还记得上面的那个家伙吗？

这是红色的单色色标。 以下是有效使用单色方法的一个很好的例子。

重点

如果稀疏使用主导色，则可以创建有效的强调。 避免过分夸大其词，并浪费其重点突出关键设计元素的机会-将其保留用于“顶部樱桃”。 用它来关注对传达最重要的信息至关重要的元素。 调色板的这种“原色”通常可以很好地与灰度配合使用，因为它容易褪色并有效地支持主色。

RIF6仅突出显示成功进行业务交易的关键项。 在此示例中，很难不注意到让您购买此商品的按钮。 没有什么办法可以将眼睛快速引导到便于用户进行主要操作的界面项目。 始终使用公司标识为品牌的主要颜色。 简单有效！ 而且没有胡说八道。

颜色一致性

一旦为用户建立了色彩思维图，重要的是不要破坏它。 如果您故意选择破坏它，请巧妙而有目的地地进行。 例如，在链接执行相同操作时保持链接颜色相同至关重要，尤其是当页面上有大量内容时。 同样，保持标题颜色一致为用户提供了一些锚定其旅程的方法。

保持相似的背景色也可能非常有效。 当被忽略时，这并不是什么有害的事情，但是当被观察时，可以将它们很好地结合在一起。 所有这一切中最重要的一点是，您正在为用户设定期望值，并且希望使用户易于理解和理解旅程的去向。

Pattern是Etsy的新产品，在一致地使用颜色方面做得很好。 甚至带有书本和东西的桌子的图像也可以优雅地扩展其品牌色彩，并保持在模糊，暖色调的范围内。 背景中的灰色墙壁为您提供了一个完美的背景，可以吸引人们注意该网站的主要行动号召。 它清楚地说出“ ETSY”，而没有在您的脸上尖叫。 竖起大拇指！

Etsy在与主页上的颜色保持一致方面也做得很出色，但是他们也到处乱丢了球。 我认为可以公平地说，在其主页上，尤其是在背景方面，可以通过更一致地使用颜色来创造更大的凝聚力。 看一下自己，您将成为法官：

颜色含义

在各种文化中，颜色可能意味着不同的含义或关联。 他们引起了不同的感受，当我们从事跨文化区域的项目时，不应低估这些感受。 为了避免误解并进行有效的沟通，我们需要考虑到这一点。

以下是将颜色识别为已附着的几种常见含义。 您可能会发现它们是肤浅的，但是了解这些关联并将它们提交到内存中仍然是一件好事。

蓝色

蓝色代表着自信，稳定和业务，这是其他颜色所没有的。 它还意味着信任和专业精神。 荣誉和可靠也就在那里。 （蓝天）是极限！

绿色

绿色意味着增长，和谐，自然，财富，乐观和金钱（当然）。

红

爱情是与红色的主要关联，但力量，色情和力量也与之配对。 使其工作起来有些棘手的是，它还可能意味着危险，鲜血，邪恶和紧急状态。 勇气也是同义词。 请谨慎对待此内容的上下文和含义，因为它可能引起非常有力的，潜在的负面含义。

SpeedX Leopard的站点非常巧妙地使用红色。 它增强了自行车本身的颜色，但很少突出显示号召性用语。 在整个地方涂红色几乎不会显得优雅。

黄色

黄色象征着希望，喜悦，阳光，兴奋，同时也警告。 由于它是如此明亮，它可以向您大声“尖叫”。 在大多数时候，这不是我们作为用户所需要的。 在下面的示例中，我认为减少会更多。 对于名称为“安全”和“家庭”的项目，黄色可能不是最佳选择。

紫色

皇室的好颜色。 不是我的茶，而是这种颜色用来传达奢华，魔幻和所有爵士乐的意味。 有趣的是，我觉得朋克也一样。 皇室贵族与奢侈品的联系可能源于紫色过去的昂贵自然。 很难生产（有些故事涉及成吨的小蜗牛等），因此，只有社会食物链中最高的蜗牛才能买得起。 如今，这当然不再是一个问题。

有趣的是， Bootstrap是一个非常受欢迎的开源项目，它在完全不同的上下文中非常成功地使用了紫色。 也许开源项目有更多的回旋余地，并且坚持不同的物理学。 太棒了！

白色

这是列表中的另一个棘手的项目。 白色通常可以传达纯度，清洁度，柔软度，精致度，优雅度，神灵，婚礼，皇室和积极性。 在其他文化中，也可以明确地将其确定为死亡和悲剧。 根据您所在的位置，白色和黑色可能具有非常不同的含义。 小心！

黑色

最后但并非最不重要的一点是，好的ol'神秘，性感和精致的黑色。 为什么这么严重的黑色？ 它是工业的，机械的，也可以与“终结”，死亡和邪恶联系在一起。 最重要的是，它也是叛逆的。

就个人而言，我认为这些关联中的许多都是虚构的。 但这取决于您！ 在进行项目时要进行研究，尤其是当项目到达您文化舒适区以外的人时，但要准备很多盐。 最重要的是，玩得开心，让您的创意源源不断！ 无论如何，严格按照书进行设计是无聊的，并且肯定是一种杀死心情的可靠方法。

颜色相关性

让我在出发之前就快速提及一下。 颜色受周围环境的影响很大。 在某个时候，我们谈论的是较冷和较暖的颜色，但是相对而言，它要相对多一些。 颜色可以以这种方式相对于彼此出现。 根据所处的环境，它们看起来可以变暖或变凉。这样，我们的人眼有点愚蠢。 观察下面的颜色如何相互影响以及内部正方形的灰色边框在每个光谱中的显示方式是否不同。 这就是所谓的颜色相关性 。

在一些极端的例子中，颜色看起来可能完全不同，并且完全使人眼蒙昧。 看看Edward H. Adelson的经典“棋盘格阴影错觉”：

信不信由你，方块“ A”和“ B”实际上是相同的颜色。 需要看一些证明吗？

如果需要，请使用您喜欢的颜色选择器进行检查。 在路上思考的食物。

最后的想法

颜色可以改变情绪。 使用它对您有利或对您的消亡。 这确实取决于您，因为它是一种强大的武器。 花时间学习更多，不要对面前的庞大规模感到沮丧。 在网络上，您绝对应该使用颜色来营造某种氛围，并突出显示特别重要的元素。 与设计原则一样，少即是多。 如果所有内容都通过颜色突出显示，则没有任何残留物出现，您最终将获得不利的信噪比。

但是，不要一次迷失所有的色彩理论！ 您只有一辈子才能完全理解。 放轻松，享受旅程吧！ 一旦您对整个主题都大开眼界，您将通过不同的视角看到世界。

翻译自: https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-color-in-design--cms-26480

ui设计的色彩