Yuguo.us

初学者看的配色指南:从苹果的红色iPhone聊起

Introduction

user

余果

全栈工程师,《Web全栈工程师的自我修养》作者。


Featured

设计

初学者看的配色指南:从苹果的红色iPhone聊起

Posted by 余果 on .

苹果新发布了红色iPhone,引起国内很多一些产品的运营跟风,比如把产品界面改成红色之类的。

经过大量的观察,我发现有些设计得很好,有些设计得没那么好。所以我总结了一些实用套路,相信你看完就能get红色的用法

首先放结论:

  1. 红色跟白色是最佳双色搭档,没有之一;
  2. 红色,白色和黑色是最佳三人搭档,没有之一;

红色底+白色字

红色跟白色是最佳双色搭档,没有之一。有些色彩理论喜欢一开始就说红色就代表危险,或者在某些文化(比如中国)中代表繁荣之类的,我觉得并没有指导意义。颜色不会单独代表某种情绪,颜色加上形状、字体一起,才能表达情绪。

最好的学习色彩的方法就是看优秀作品,一边应用,一边揣摩。

无论如何,大面积红色底有压倒性力量,能强力渲染氛围

比如苹果官方图就遵循这个套路:

上面点缀白色文字和白色图形能够显得很清晰。因为一般白色是认为没有情绪的,所以不会对红色底产生干扰。

增加白调、黑调或灰调

苹果的背景色是红色加了一些灰调(tone)。在这里补充几个概念:

  • tint:白色与纯色混合而得的颜色
  • shade:黑色与纯色混合而得的颜色
  • tone:灰色与纯色混合而得的颜色

单一色指的就是一种颜色的tint、shade和tone,比如下图就是红色的单一色表

使用单一色表,可以很好的表示针对某一个颜色来拓展应用范围,Dribbble的取色板就采用了多个单一色表。你可以在任何一个作品的颜色调色板中取色进入色表搜索页,比如红色

色表第二列就是红色的单一色表,你可以依次从偏白调、偏灰调到偏黑调来浏览。

苹果使用的背景色在色表中的位置大概在红色偏一点灰调那里,你可以想象先取得红色(#ff0000),然后在色表中往灰色部位(左下角)移动一些距离,以增加灰调(tone):

Tips:如果你想增加白调,就往左移动;如果你想增加黑调,就往下移动。

为什么要增加灰调呢?因为纯粹的红色会对眼睛有很强刺激性,大面积使用(尤其是底色)会瞎眼。下面是一个Dribbble上的例子,你们感受一下:

其实这个画面中有较大部分的黑色和白色了,但仍抵挡不了红色的刺眼光芒,所以我觉得这是比较糟糕的用法。

那么可不可以增加白调或黑调?没问题!

如上图,使用红色+白调比较年轻可爱。

使用红色+黑调比较稳重。

上面两个是比较重的白调和黑调的例子,使用时可以用轻一点的调子(红色更突出)。总之,(异化后的)红色底色和白色前景可以很好的配合。

如果前景是文字,适合粗一点:

如果是图形,也很好,这是线条:

如果不是单色图形,其实也有一个小技巧,就是加上较粗的白色描边:

如果图形复杂,线条就细一点;如果图形简单,线条就粗一点。总之,要控制前景图形的“墨水量”合适。

Tips:墨水量过多,可以理解为如果打印出来,要花费更多墨水。

白底+红字

反过来,白色做底色,其实会被认为是没有颜色,也就是说,白底+红字,在用户看来就是几个红色的字。

在这种情况下,可能会显得红色比较单薄(极简的危险:被认为太简陋),所以红色前景部分一定要占据合理的比例

我很喜欢这个澳门饼店的品牌重构,采用了白色+红色的单色配色,但不觉得简陋。

文字比较粗大,加上圆润的12边形,组成辨识度强的logo(左上)。袋子上使用了一个墨水量十足的狮子头(右上),就不能再放其他复杂元素了(比如logo)。相对来说,左下角的图形(鸡、牛什么的)墨水量很少,就做成重复的纹理,增加了一点时尚感。

此外,红色做前景时,可以直接使用轻微调子的红色,不一定需要增加过多白调、黑调和灰调。因为前景本身比例合适的话,能增强辨识度,而不会像背景一样刺眼。

白红各一半背景色的场景(左下)中,红色也可以使用轻微调子。

红色+白色+黑色

红白的搭档中,也可以加入黑色这个“第三者”。因为白色和黑色的天然无害属性,不会对红色的氛围传达有干扰。你试试黄色或蓝色,就会马上产生冲突。

其实仔细看苹果的摄像头就是黑色。

下面这个狗,黑白组成的图形,黑白墨水量相当,没问题。

下面兔子和文字感觉也不错。不过也许可以尝试下文字全白色更好,如果是这样,白色部分会墨水量太大,可以调整小一点或者细一点。

下面这个设计使用偏白调的红色底色,加上黑白前景,粗大的字体墨水量饱满,冲击力十足。

黑底,加上红白前景,会显得很专业的配色感:

白色底色,配红黑前景怎么样?当然是完美的配色:

红色+黑色

如果是红色底,加上黑色图案或文字(完全没有一点白色),其实很难驾驭,因为会显得黑色很闷,不够突出。

不过我还是努力找了一些优秀的设计,看看他们如何规避这个问题:

上面这个设计,采用纹理的形式,能够扩大黑色(其实是偏深蓝色)的墨水量,增加一些时尚感,如果是单个黑色图标放在中间,就不会那么清晰:

这个稿看上去很赞,不过背景色其实是橘色了,如果是红色,效果不会这么好。

黑底配合红色,也是一样难办。只有单色的话,黑底配合白色前景更安全一点,或者配合黄色前景会更潮。这个就不一一举例了,你们自行去感受吧。

以上这些“套路”,都是基础,在理解规则的基础上,一切皆可违反,不过,那需要更强的掌控能力。如果基础不扎实,还是老实遵循规则比较好。

如果你觉得本文有用到哭泣,请记得分享给需要的人哦。

user

余果

https://yuguo.us

全栈工程师,《Web全栈工程师的自我修养》作者。