|
| 1 | +--- |
| 2 | +tags: ['颜色心理学','心理学','设计','用户体验','科普组第24小组'] |
| 3 | +title: 如何正确的搞颜色？ |
| 4 | +date: '2022-02-04 23:05:17' |
| 5 | +categories: '心理学' |
| 6 | +cover: https://s2.loli.net/2022/03/14/MvIFKyeghcNL8nX.png |
| 7 | +copyright_author: '时光' |
| 8 | +--- |
| 9 | + |
| 10 | +# 如何正确的搞颜色？ |
| 11 | +> 作者：时光 |
| 12 | +
|
| 13 | +<div>  如何正确的搞颜色？看到这里，你的脑海中是不是闪过了一些奇奇怪怪的东西？不，这是篇非常正经的科普！所以现在，让我来给大家看一张色图。很正经吧~这张图上的小可爱叫做色轮，它将是我们接下来的科普中的主角，现在请先记住它的样子吧！</div> |
| 14 | +<img src="https://s2.loli.net/2022/03/14/vNeWPSi8I47TkFC.png" width=300/> |
| 15 | + |
| 16 | +<div>  本文中我将围绕色彩的基本知识、几种常见的配色方案逐一展开介绍。</div> |
| 17 | + |
| 18 | +# 颜色理论与配色模式 |
| 19 | +## 人类是如何看见颜色的？ |
| 20 | + |
| 21 | +<div>  在自然界中自然光从光源发出，到达物体的表面。大部分被照射到的物体会吸收掉其中的一部分光，将剩下的光线反射到我们的眼睛里，成为了我们所看到的这个物体的颜色。如果一个物体不吸收任何落在其表面的光线，也就是说呢它把所有照射在它身上的光线都原封不动的反射回去了，那么它在人眼看来就是白色的。而另一方面，如果一个物体吸收了所有照射到它表面的光，那么这个物体看起来就会是黑色的。</div> |
| 22 | + |
| 23 | +<img src="https://s2.loli.net/2022/03/14/7OXjMaiqZVDd2B8.png"/> |
| 24 | + |
| 25 | +<div>  这种成色原理被称为减色法，在多媒体领域中对应于CMYK颜色模型。在日常生活中，这种颜色模型广泛应用于打印机等需要在不会自然发光的物体上显示颜色的场合。这是因为物体不会自发光，所以我们所看到的它的颜色来自于油墨本身反射的光。</div> |
| 26 | + |
| 27 | +<div>  而另一种颜色模型，RGB颜色模型则相反。想必相对于CMYK，各位对RGB的了解更多一些。RGB三个字母分别代表红、绿和蓝，是光的三基色。RGB颜色模型是指将这三种颜色按不同的比例进行混合得到一种新的颜色。这种颜色模式广泛应用于电视、电脑、手机等能够主动发光的设备。</div> |
| 28 | + |
| 29 | +<div>  现在，你已经了解了两种最基本的颜色模式，要怎么把这些颜色组合出完美的颜色搭配呢？接下来，我们先欣赏几种由前人总结出来的搞颜色的模式吧！</div> |
| 30 | + |
| 31 | +## 单色配色 |
| 32 | + |
| 33 | +<img src="https://s2.loli.net/2022/03/14/kKlBfrNyOhuI1bS.png"/> |
| 34 | + |
| 35 | +<div>  单色模式应该是看起来最和谐的配色模式了。通过的示例，你几乎感受不到色彩上的冲撞，整个画面带给人一种和谐、清新的感觉。</div> |
| 36 | + |
| 37 | +<div>  单色模式之所以呈现出这种和谐感，是因为它其实是由同一种基础颜色，也就是色相，经过一定的明暗变化得到其他颜色的集合，正如这张色轮所示。除了基础颜色之外，它不包含额外的颜色的干扰，因此看起来更加简单、干净和精致。但是单色配色模式的缺点也很明显，那就是它是一种缺乏变化的配色方式。</div> |
| 38 | + |
| 39 | +<img src="https://s2.loli.net/2022/03/14/KdQcZhwj7XboMal.png"/> |
| 40 | + |
| 41 | +## 互补配色 |
| 42 | + |
| 43 | +<img src="https://s2.loli.net/2022/03/14/rxGlkCwFJfcXmvz.png"/> |
| 44 | + |
| 45 | +<div>  那，如果说单色配色模式干净悠远又和谐，那我们接下来要介绍的这种配色模式就要活泼许多。有人想猜一下接下来要介绍的是哪一种配色模式吗？可以在群里打字哦。</div> |
| 46 | + |
| 47 | +<div>  接下来我们要介绍的就是互补配色，也被称作对比配色。互补色能够给人以一种强烈的碰撞感。在色轮上，互补色正好处在色轮的两端，这意味着这两种颜色的冷暖属性、给人的感受是完全相反的。也就是说，当这两种颜色放在一起时，我们很容易注意到两种颜色带来的冲突，如果应用得当可以带来十分惊艳的效果。</div> |
| 48 | + |
| 49 | +<div>  比如UI设计师们喜欢用互补色来突出希望用户注意到的信息，一些画作也巧妙的利用了这种冲突来表现画面，让观众第一眼能落到设计师希望观众注意到的地方。它的缺点也是显而易见的，过于混乱的对比关系可能让人眼花缭乱。</div> |
| 50 | + |
| 51 | +<img src="https://s2.loli.net/2022/03/14/WT87GKkfJHpBivS.png"/> |
| 52 | + |
| 53 | +## 补色分割配色 |
| 54 | + |
| 55 | +<img src="https://s2.loli.net/2022/03/14/xNn5RAOp9yFMHE2.png"/> |
| 56 | + |
| 57 | +<div>  接下来我要介绍的是补色分割配色法。补色分割配色如上图所示，使用一个基础色以及两个在色轮上相互对称的次要颜色，共组一个窄边三角形；它会选取一个暖色和两个冷色、或一个冷色配合两个暖色。</div> |
| 58 | + |
| 59 | +<div>  与互补色不同，补色分割配色较为协调也给予柔和些的视觉感。一般来说，在三角形中窄角的颜色一般为主要色，另外两个次要颜色常作打光或强调色使用。这创建了一个比互补色方案更为微妙的配色，它和互补色有着同样的視觉效果，但又不会显得那么“冲撞”。通过色轮可以看到，补色分割配色本质上就是互补配色的一个变形或分支，但它有一个重要区别：它的色彩对比和视觉反差不如互补配色那般强烈和夸张。</div> |
| 60 | + |
| 61 | +<img src="https://s2.loli.net/2022/03/14/j8UBEim5LzgS9K4.png"/> |
| 62 | + |
| 63 | +## 近似色配色 |
| 64 | + |
| 65 | +<img src="https://s2.loli.net/2022/03/14/KwQGlfmFjaRsX7U.png"/> |
| 66 | + |
| 67 | +<div>  下一种配色模式似乎兼备了前面提到的两种配色模式的优点，它不如单色模式那样过于单调，但也不像对比色那样激烈。灵活应用这种配色模式，你可以轻易设计出和谐又活泼的界面。这是什么呢？那么我们来到了第三种配色模式，近似色。</div> |
| 68 | + |
| 69 | +<div>  近似色是指没有太多对比的一组颜色，它们在色轮上相互靠近。这种配色模式可以说是无所不能的，我们先来看看近似色和单色之间的对比。不难发现，相对于单色而言，近似色包含了更多的色彩，但是近似色又没有打破颜色之间微妙的和谐与平衡。这使得近似色能表现得更加丰富多彩，适合需要更多多样性的设计。</div> |
| 70 | + |
| 71 | +<div>  同时，相对于互补色，近似色又要柔和得多，因此是被称作万金油的搭配模式。我们经常在各种场合见到近似色。</div> |
| 72 | + |
| 73 | +<img src="https://s2.loli.net/2022/03/14/iKX73RdNEqHemx2.png"/> |
| 74 | + |
| 75 | +## 三等分配色 |
| 76 | + |
| 77 | +<img src="https://s2.loli.net/2022/03/14/IyZNiCoKfkTPAcm.png"/> |
| 78 | + |
| 79 | +<div>  接下来我要介绍的是三等分配色法。三等分色的三个颜色位置之间有平均的距离，彼此之间存在一定的对比关系。如此一来三个颜色皆为主要颜色，产生一种鲜艳、抢眼的效果。不过使用这种配色方案需要特别注重作品的色彩平衡。正因为每种颜色之间微妙的对比关系，这种配色方案对于需要在设计中对每种颜色创建出高对比度的画面很有用。但是如果平等的分配三种颜色，可能会让画面的冲击感太强而失去美感。</div> |
| 80 | + |
| 81 | +<div>  那么有没有例外情况呢？有。在类似暗含“均分”元素的画面中，比如说三个功能的按钮，平均分配三种颜色确实不成问题。但是画面一旦复杂，平均的分摊三种颜色就会变得混乱。</div> |
| 82 | + |
| 83 | +<div>  要正确的应用三等分配色，一般是在三种颜色中选择一个或两个颜色作为主色来压制其他颜色。主色作为画面中最为主要的颜色，再少量使用其他颜色作为蜻蜓点水般的辅助，或者简单地选择一个柔和的色调来覆盖其他两个颜色也是可以的。</div> |
| 84 | + |
| 85 | +<img src="https://s2.loli.net/2022/03/14/S1hVsrUOcBnvdJ6.png"/> |
| 86 | + |
| 87 | +## 矩形配色 |
| 88 | + |
| 89 | +<img src="https://s2.loli.net/2022/03/14/cM1JyufH96oZax2.png"/> |
| 90 | + |
| 91 | +<div>  如果从色轮中选择两对相互对立的颜色，会获得怎么样的效果？这就是矩形配色，比三等分配色还要桀骜不驯的一种配色方式。矩形配色的四种颜色间并没有明显的主次关系，但由于两两对比，这种配色模式也有着鲜艳亮眼的效果。这些颜色结合起来可能给人强烈的视觉感，但是为了求最好的视觉效果，在设计之前需要事先构思和细心创作。</div> |
| 92 | + |
| 93 | +<div>  颜色越多，设计师往往就越难调和它们。矩形配色更常见与四个按钮这样的平均分配的情况，或者降低对比度相互混杂以达到一种“纷繁”的效果。</div> |
| 94 | + |
| 95 | +# 颜色心理学 |
| 96 | +<div>  我们已经了解了一些配色的基本知识，那我们要怎么去选择合适的配色方案呢？在正式开始搞颜色之前，我们需要了解一些“颜色心理学”。很多人认为颜色的选择主要取决于设计师的品味和审美，然而色彩选择的过程要比看起来要复杂得多。正确的搞颜色，在设计中非常重要。我们来看下图的这张表格，我们发现对于不同的颜色，人们的感受是存在区别的。</div> |
| 97 | + |
| 98 | +<img src="https://s2.loli.net/2022/03/14/cGeVawtlFJd98bZ.png"/> |
| 99 | + |
| 100 | +<div>  例如，当我们谈论红色时，会发现这个颜色常常与激情、热血或者侵略、进攻的感觉联系在一起。红色是双面的，它不仅给人带来热爱、自信的感觉，也能让人们联想到愤怒，是一种非常引人注目的颜色。在设计中，红色的使用往往是吸引用户注意的一种有效方式。</div> |
| 101 | + |
| 102 | +<div>  再举一个例子，当我们说到绿色时，你脑海中出现了什么画面？即使不是第一反应想到的，我们也总能通过绿色联想到茂密的森林和生机勃勃的草地。绿色是一种充满活力的颜色，所以它并不适合用来装饰消极或悲观的图像。更多的时候，我们会选择灰色系来处理后者。</div> |
| 103 | + |
| 104 | +<div>  但是色彩心理学只能代表大多数人的感受，它无法避免一些人对某种颜色有其他的理解。比如说一些人一看到绿色就会联想到瘟疫、疾病和死亡。此外，由于文化上的差异，同一种颜色在不同的文化中可能代表不同的含义。例如白色在西方文化中是神圣、纯洁的，经常用在庄严神圣的场合，比如婚礼。这也是为什么西式婚礼新娘的婚纱通常是洁白的。而在中国传统文化中白色则是死亡的象征，比如我们常常说红白喜事，这里的“白喜事”指有家里有高寿老人过世。</div> |
| 105 | + |
| 106 | +<div>  所以呢，在选择颜色的时候不仅需要考虑我们希望观众看到我们搞的颜色时的心理反应，还需要考虑不同文化下颜色的特殊含义。</div> |
| 107 | + |
| 108 | +<img src="https://s2.loli.net/2022/03/14/SZlhd9fekqvBXVC.png"/> |
| 109 | + |
| 110 | +# 正确的搞颜色 |
| 111 | + |
| 112 | +<div>  现在我们已经了解了颜色配色的基础知识和色彩心理学，是时候开始正确的搞颜色了。然而，如何正确地选择第一个颜色呢? 正如前面提到的，颜色的选择非常重要，选错了颜色可能是致命的。那么，我们将从受众群体和主题的方面进行考虑。</div> |
| 113 | + |
| 114 | +<div>  如果考虑受众默认为所有群体，有人知道最“安全”的颜色是什么吗？答案是蓝色。我们可以非常轻易的在手机上找到以蓝色为主色调的应用，比如默认主题的QQ、支付宝、推特、Pixiv等等。为什么是蓝色呢？通过下图可以发现，不管是男性还是女性，喜欢蓝色的群体占比是最大的。这意味着选择蓝色能迎合大部分人的喜好。考虑一下不同国家的文化差异呢？我们会发现图表中罗列出来的几个国家最喜欢的颜色中占比最高的竟然也都是蓝色。从颜色心理学的角度出发，它深沉、给人创新和信任、安全的感觉，是一种让人舒服的颜色。</div> |
| 115 | + |
| 116 | +<img src="https://s2.loli.net/2022/03/14/bKIeMnUBlEYsvP8.png"/> |
| 117 | +<img src="https://s2.loli.net/2022/03/14/t9QSKFvdcPUrTx7.png"/> |
| 118 | + |
| 119 | +<div>  现在我们考虑考虑特殊的受众群体。如果受众群体主要是女性，那么可以考虑使用一些暖色调，给人带来浪漫和美好的感觉，比如粉色、紫色、红色等等。而相反的，如果受众群体以男性为主，可以考虑使用冷色，比如绿色、蓝色和黑色，这样能给用户带来一种冷静、深沉、科技感等等的感觉。而如果观众是儿童或年轻人，可以考虑使用互补色、三等分色、补色分割等配色方案，因为这些颜色相对活泼大胆。相反，如果观众主要是成年人，则比较朴素的单色或类似色可能更合适。</div> |
| 120 | + |
| 121 | +<div>  从主题来看，比如说如果一幅画或者一个设计的主题是体育运动，那么它的主色调往往和黄色、红色或绿色脱不开干系，因为前两种颜色让人感觉“充满活力和热情”，而绿色则给人一种充满活力和追求成功的感觉。另一方面，如果主题是工作学习，蓝色、绿色、紫色甚至黑色等冷色更合适，因为这些颜色能唤起一种智慧和成熟的感觉。</div> |
| 122 | + |
| 123 | +<div>  现在，你已经是一个成熟的人了，相信你在日后欣赏色图的时候能对着色图的配色模式展开合理的分析，同时也能应用今天学到的知识正确的搞颜色。谢谢大家，本文就到此结束啦。</div> |
| 124 | + |
0 commit comments