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年