UI设计的色彩基础

Leonard Reese
Apr 12, 2021

Read in English

UI设计师依靠调色板来增强用户与系统之间的沟通。 尽管不同文化之间颜色的含义和关联可能会有所不同,但是当今的全球互联网用户对UI中颜色的含义抱有共同的期望。 红色和暖橙色通常表示警告,错误或删除严重性。 清爽的绿色和蓝色预示着成功。 灰色和低对比度的图形表示非永久性,占位符或空白状态。

示例UI元素中使用的颜色范围

了解色彩理论可以使设计师更有效地使用色彩。 自从艾萨克·牛顿(Isaac Newton)于17世纪首次发明色轮以来,艺术家和工匠就一直将色轮作为一种视觉设计工具来进行油漆混合和颜色选择。¹

就像X射线,微波和无线电波一样,可见光是电磁辐射的一种。 在电磁频谱内的所有频率中,只有相对有限的波长范围会真正刺激我们眼睛的颜色感受器。 我们的眼睛只能看到大约380纳米到700纳米的颜色,其余肉眼看不见。 比紫罗兰频率更强的紫外线会伤害皮肤。 相反,比肉眼可见的红色频率低是红外线,利用红外线可以做许多有用的事情,例如用遥控器打开电视。

色轮将可见光谱包裹成一个圆圈

色轮将可见光谱包裹成一个圆圈,连接紫色和红色的极端。 这会导致连续回路的视觉错觉。 正当你期望从可见光谱的低端滑出时,您会发现自己以某种方式回到了顶部。

正当你期望从可见光谱的低端滑出时,您会发现自己以某种方式回到了顶部。

色轮说明了色相之间的简单关系。 在为网站或应用程序创建UI设计系统的调色板时,设计师必须保持颜色之间的协调性,以实现平衡的美感。颜色不协调是不良设计的标志,可能像乱敲打钢琴琴键的刺耳声音那样使用户疏远。

三原色构成一个三合会。 相对的颜色相互补充。

人们使用肉眼视网膜中的特殊神经元(称为感光细胞)来感知颜色,感光细胞也因其独特的形状而被称为视锥细胞。 我们可以根据刺激它们的光的波长对它们进行分类。 延伸到红色范围的长波的光对L锥的刺激最大。 绿色范围附近的中波会激发M锥; 短波(例如紫色和蓝色)会刺激S锥。 LMS色彩空间通过组合红色,蓝色和绿色的光点来告知数字屏幕如何产生色彩。

L锥,M锥和S锥在不同波长处显示峰值刺激。

请注意,三个波长在黄色附近交汇,从而使我们感觉到黄色非常亮,与白色的亮度很接近。 因此,黄色和白色组合之后对比度较低,并且在界面中可用性不佳。 但是,黄色与色轮上与之相反的颜色-紫色具有较高的对比度。

黄色按钮背景上的白色文本对比度较低,而紫色按钮背景上的黄色文本对比度较高。

世界上多达十分之一的人会经历某种程度的色盲,其中其感光器的行为与上述典型方式不同。 UI设计师必须考虑如何最大程度地减少色盲用户在体验中出现的问题。² 仅靠颜色是不足以传达关键信息的,设计师应采用多种技术的组合为所有用户提供适当的反馈和指导 。

当图标和反馈消息与颜色编码结合使用时,错误状态更明显。

由可见光谱中的单个纯净波长的光组成的颜色称为光谱色。 这些纯频率可以由激光束产生,也可以由棱镜折射白光投射。 彩虹通过水粒子折射太阳光线时会显示光谱颜色的全部可见范围。

Photo by Leonard Reese on Unsplash. 这个棋盘的彩虹颜色是阳光通过玻璃窗折射而出的。

当浏览世界上所有丰富多彩的物体时, 这些颜色并非你所看到的光谱颜色,而是一次以多个频率反射的光,组合起来产生的独特颜色。 这些非光谱色不是由单一波长的光产生,包括粉红色,米色,棕色和紫色。 例如,茄子的紫色实际上反映了某些频率的紫色和某些频率的红色,被人类大脑解释为一种不连续的色调。

紫色阴影是通过组合紫色和红色频率而产生的。

紫色,无数种红色和紫罗兰色的组合,是所有颜色中最神秘和最具音乐性的。 紫色的线条在我们的眼睛感知电磁辐射的能力上跳动,紫色的频率太快以至于我们看不到,而红色几乎太慢。 紫罗兰色的波长是380纳米,仅约红色波长所在的700 纳米的一半。 它们的组合视觉上就像“八度音阶”一样协调。

Photo by Gradienta on Unsplash

牢记这些颜色基础知识应该在UI设计时使界面更和谐,更易访问且更吸引用户。要研究有关颜色的更多信息,请尝试使用诸如 Adobe Color 的调色板应用程序。当作游戏般,在此你甚至可以尝试打破很多规则来创建最不协调,最丑陋的颜色组合! 要了解有关色盲的更多信息,请查看 Color Blindness Awareness,并确保使用网络上可用的众多色盲视觉模拟器来测试你的UI设计。

[1] Alison Koontz. (May 29, 2018). A History of Color.
https://caltechletters.org/science/history-of-color-1

[2] Aaron Tenbuuren. (Jun 23, 2015). Designing For (and With) Color Blindness. https://medium.com/intrepid-s-insights/designing-for-and-with-color-blindness-48392aab3d87

--

--

Leonard Reese

Supposed Experience Design Expert, design educator and community organiser, based in Singapore.