In this article, we’re going to explore the concept of contrast and its fundamental role in UX and visual design.

在本文中，我们将探讨对比度的概念及其在UX和视觉设计中的基本作用。

Let’s start by defining what contrast is.

让我们开始定义什么是对比度。

对比的定义 (The definition of contrast)

Contrast is the quality of two juxtaposed elements to be different from one another.

对比是两个并置元素的质量彼此不同。

Contrast determines the way our senses perceive our surroundings and the properties of the objects we interact with. In the words of author Dan M. Mrejeru:

对比度决定了我们的感官感知周围环境的方式以及与之互动的对象的属性。 用作者Dan M.Mrejeru的话说 ：

BSolovki’s Ersatz: On the Evolution of Modern Human Brain explains:

B. 索洛夫基的《 Ersatz：论现代人脑的进化》解释说 ：

Let’s take a look at a couple of examples.

让我们看几个例子。

We perceive variations in microtonalities in music as fluctuations of the same note, also known as vibrato. However, we interpret broad, symmetrical differences in the frequencies of subsequent notes as musical. Conversely, asymmetric frequencies are considered dissonant.

我们将音乐中微调的变化视为同一音符(也称为颤音)的波动。 但是，我们将随后的音符频率中广泛而对称的差异解释为音乐。 相反，非对称频率被认为是不协调的。

Small variations in temperature are also nearly imperceptible. You’ll have a hard time distinguishing between 75℉ (23.8℃) and 76℉ (24.4℃), but you will notice the change of temperature when you step outside your house on a cold winter morning.

温度的细微变化也几乎不可察觉。 您将很难区分75℉(23.8℃)和76℉(24.4℃)，但是当您在寒冷的冬天早晨离开家时，会注意到温度的变化。

设备中的视觉对比 (Visual contrast in our devices)

Of all the different kinds of contrast that our senses are capable of perceiving visual contrast is the essential type of contrast for UX and digital design.

在我们的感官能够感知视觉对比的所有不同种类的对比中， UX和数字设计的对比是必不可少的对比类型 。

The main output of digital products is visual.

数字产品的主要输出是视觉。

The stimuli produced by the hardware of our devices remains constant, whether it’s a touchscreen or a keyboard. What changes is what we see on the display, which is determined by the software.

无论是触摸屏还是键盘，我们设备硬件产生的刺激都保持不变。 所发生的变化是我们在显示屏上看到的，这由软件确定。

To create useful software it is vital to be aware of the different types of visual contrast in design.

要创建有用的软件，至关重要的是要注意设计中不同类型的视觉对比。

设计中视觉对比的类型 (Types of visual contrast in design)

There are five types of visual contrast in UX and visual design:

UX和视觉设计中有五种视觉对比类型：

• Color
  颜色
• Proportion
  比例
• Shape
  形状
• Proximity and space
  邻近空间
• Movement
  运动

Let’s explore them in detail.

让我们详细探讨它们。

颜色 (Color)

Our eyes evolved to perceive a portion of the electromagnetic spectrum that we call visible light.

我们的眼睛演变成感知到电磁光谱的一部分，我们称之为可见光。

The wavelengths of this spectrum range from about 400 nanometers to 700 nanometers (nm). Our brain processes different wavelengths as different colors. E.g., We perceive the wavelengths from 490 nm to 450 nm as the color blue.

该光谱的波长在约400纳米至700纳米(nm)的范围内。 我们的大脑将不同的波长处理为不同的颜色。 例如，我们将490 nm至450 nm的波长感知为蓝色。

The larger the difference in wavelengths in a pair of colors, the more contrast there is between them.

一对颜色的波长差异越大，它们之间的对比度就越大。

But of course, there’s an exception.

但是，当然有例外。

Even though red and violet have very different wavelengths, there’s little contrast between them. Why? Well, I couldn’t find the scientific reason, but my theory is that both of these colors are at the limit of what our eyes see.

即使红色和紫色具有非常不同的波长，但它们之间几乎没有反差 。 为什么？ 好吧，我找不到科学的理由，但是我的理论是，这两种颜色都在我们的眼睛所能看到的范围内。

Shorter wavelengths than red are referred to as infrared light, and longer wavelengths than violet give us ultraviolet light. Both of them are invisible to the human eye.

比红色短的波长称为红外线，比紫色短的波长称为紫外线。 它们都是人眼看不见的。

We believe it was Sir Issac Newton, the first one who came up with the idea to organize the visible spectrum in a circular diagram giving birth to the chromatic wheel. This is an excellent way to illustrate the contrast relationship between the colors we can see.

我们相信是伊萨克·牛顿爵士(Issac Newton)爵士 ，他是第一个提出以圆形图组织可见光谱的想法的人，从而产生了色轮。 这是说明我们所看到的颜色之间的对比关系的绝佳方法。

Opposing colors on the chromatic wheel create a sharp contrast. We call them complementary colors. And they look good together. Like blue and yellow, which are the colors of a sunny day on the beach.

色轮上相反的颜色形成鲜明的对比 。 我们称它们为互补色。 他们在一起看起来很好。 像蓝色和黄色，是海滩上阳光明媚的日子。

比例 (Proportion)

Proportion is the relationship in size between two elements. The more significant their difference in size, the more visual contrast there is going to be. This also applies to the sides of any same object.

比例是两个元素之间的大小关系 。 它们的大小差异越显着，则视觉对比度就越大。 这也适用于任何同一对象的侧面。

The reason we are so sensitive to substantial differences in proportion has to do with our evolution. Humans love symmetry. And we don’t really like asymmetry.

我们对比例的实质性差异如此敏感的原因与我们的发展有关。 人类喜欢对称 。 而且我们真的不喜欢不对称。

As Dan M. Mrejeru points out, our brains interpret asymmetry as dangerous:

正如Dan M. Mrejeru所指出的，我们的大脑将不对称性解释为危险的：

Symmetry plays an important role in natural selection because within nature the asymmetry is a sign of illness, threat or danger [sic] — Solovki’s Ersatz: On the Evolution of Modern Human Brain.

对称性在自然选择中起着重要作用，因为在自然界中，不对称性是疾病，威胁或危险的标志[原文如此] — 索洛夫基(Solovki)的《艾尔莎兹：现代人脑的进化论》 。

Like with extreme temperatures, our senses are particularly reactive to things that might be harmful. This is why we are so sensitive to asymmetry and why you cringe when a frame is crooked (the struggle is real).

与极端温度一样， 我们的感官对可能有害的事物特别有React。 这就是为什么我们对不对称如此敏感，以及为什么在弯曲框架时您会畏缩(斗争是真实的)的原因。

But as you probably guessed, there is an exception to the rule. It turns out there’s a specific type of asymmetry we are more than ok with, we love it, and that’s the golden ratio. In the words of Johannes Kepler:

但是正如您可能猜到的那样，该规则是个例外。 事实证明，存在一种特定类型的不对称，我们非常喜欢，我们喜欢它，这就是黄金分割率。 用约翰内斯·开普勒的话来说：

Geometry has two great treasures; one is the Theorem of Pythagoras; the other, the division of a line into extreme and mean ratio. The first we may compare to a measure of gold, the second we may name a precious jewel. — Johannes Kepler

几何学有两大宝藏： 一种是毕达哥拉斯定理；另一种是毕达哥拉斯定理。 另一种是将一条线分为极值比率和均值比率。 我们可以先将其与黄金进行比较，其次我们可以将其称为贵重珠宝。 —约翰尼斯·开普勒

You can write entire books exploring the implications of the golden ratio in design, but we’re not going to go down that rabbit hole. Suffice it to say we perceive it just as proportional as perfect symmetry. You could say it’s the ideal asymmetry.

您可以写整本书来探讨黄金分割在设计中的含义，但是我们不会陷入困境。 可以说我们将其视为与完美对称成正比。 您可以说这是理想的不对称性 。

形状 (Shape)

When all other variables equal, two objects of different geometry will look different, contrasting with one another.

当所有其他变量都相等时，具有不同几何形状的两个对象将看起来彼此不同。

Shape contrast is particularly evident when working with type. A pair of letters of equal size and color will look very different. We attribute sounds and concepts to different shapes, and this allows us to write and read.

使用type时，形状对比特别明显 。 一对大小和颜色相同的字母看起来会非常不同。 我们将声音和概念归因于不同的形状，这使我们能够进行写作和阅读。

Some designers are masterful at font pairing, which is the art (it truly is) of combining different typefaces that look good together.

一些设计师精通字体配对，这确实是将看起来不错的不同字体组合在一起的艺术。

Keep in mind some typefaces have more contrast and therefore are more legible. If you want to learn more about the properties of fonts and typography, I recommend you check out The Elements of Typographic Style by Robert Bringhurst.

请记住，某些字体具有更多的对比度，因此更易读。 如果您想了解有关字体和字体属性的更多信息，建议您阅读Robert Bringhurst撰写的《字体样式元素》 。

间距和分隔 (Spacing and separation)

Objects in nature that are close together are usually related. Conversely, the larger the distance between them, the less they relate to one another.

自然界中接近的物体通常是相关的。 相反，它们之间的距离越大，它们彼此之间的联系就越少。

Without getting too metaphysical here, this stems from the fact that, in evolution, pairs of objects that are harmful to one another won’t survive to reproduce, and therefore will go extinct.

在这里不必过于形而上学，这源于以下事实：在进化中，成对有害的成对物体将无法生存而繁殖，因此将灭绝。

But of course, you guessed it. There are exceptions, such as like parasites and viruses.

但是，当然，您猜对了。 也有例外，例如寄生虫和病毒。

The key concept here is that, in your interface, you can use the perception of space to indicate the user which groups of elements are related and should be interpreted as one. This is known as chunking.

这里的关键概念是，在界面中，您可以使用对空间的感知来向用户指示哪些元素组是相关的，应将其解释为一个元素。 这称为分块 。

You can also utilize space to guide the user’s eye to what you want them to focus on. Remember: perception distinguishes signal from noise, so if you want to make something stand out, place it in the middle of a lot of negative space.

您还可以利用空间来引导用户的眼睛关注您要关注的对象。 切记 ：感知将信号与噪声区分开来，因此，如果您想使某些东西脱颖而出，请将其放置在许多负空间的中间。

In design, the separation between elements or groups of elements is known as white or negative space.

在设计中，元素或元素组之间的分隔被称为白色或负空间。

The quintessential modern example of using spacing and chunking in design is, of course, Apple.

当然，在设计中使用间隔和分块的典型现代示例是Apple。

Using spacing and separation is a great way to break down large pieces of information into bite-sized chunks, reducing cognitive load.

使用间距和分隔是将大量信息分解为一口大小的块，减少认知负担的好方法 。

运动 (Movement)

Last by not least, our eyes are fantastic at detecting movement

最后，我们的眼睛非常擅长检测运动

The fovea, where our visual acuity is sharpest, represents only about 1% of our entire visual field. The rest, known as peripheral vision, is low resolution.

中央凹，我们的视力最敏锐，仅占整个视野的1％。 其余的称为周边视觉，则为低分辨率。

Yet there is a good amount of research that suggests our peripheral vision is actually attuned to detect movement (Bartram, Ware & Calvert, 2001).

然而，有大量研究表明，我们的外围视觉实际上已被调整以检测运动(Bartram，Ware＆Calvert，2001)。

Regardless of whether we detect it through foveal or peripheral vision, using animation makes things stand out against their background.

无论我们是通过中央凹视觉还是周边视觉来检测，使用动画都会使事物在其背景下脱颖而出。

结论 (In conclusion)

There are five types of contrast you can use to make an interface more natural to use. They are all connected to the way our eyes evolved to perceive our environment.

您可以使用五种对比度来使界面更自然。 它们都与我们的眼睛感知环境的方式有关。

• Color
  颜色
• Proportion
  比例
• Shape
  形状
• Proximity and space
  邻近空间
• Movement
  运动

Learn how each one plays a role in creating contrast and take advantage of them to improve the UX of your product.

了解每个人如何在创建对比中发挥作用，并利用它们来改善产品的用户体验。

进一步阅读 (Further reading)

1. Definition of contrast

   对比的定义

2. Who invented the color wheel?

   谁发明了色轮？

3. Solovki’s Ersatz: On the Evolution of Modern Human Brain.

   Solovki的Ersatz：论现代人脑的进化。

4. Wikipedia: The Golden Ratio

   维基百科：黄金分割

5. The detection of motion in the peripheral visual field

   周边视野中运动的检测

6. Moving Icons: Detection and Distraction — Bartram, Ware & Calvert, 2001

   正在移动的图标：检测和干扰 -Bartram，Ware和Calvert，2001年