Equivalence and contrast, connection and distinction, categorization and non-categorization are all ways to distinguish the same or different elements. Based on the information they carry, we hope that the equivalent elements can have a certain connection to show their similarity in a certain aspect. We also want to distinguish different elements to show that they belong to different categories.

等同和對比，連接和區別，分類和非分類都是區分相同或不同元素的方法。 基于它們所攜帶的信息，我們希望等效元素可以具有一定的聯系，以在某些方面顯示其相似性。 我們還想區分不同的元素，以表明它們屬于不同的類別。

Equivalence and contrast are expressed by the relationship between the elements. If two elements have a certain relationship, it can be determined that the two elements must have the same characteristics. Of course, two different elements must also look different.

等價和對比由元素之間的關系表示。 如果兩個元素具有一定的關系，則可以確定兩個元素必須具有相同的特性。 當然，兩個不同的元素也必須看起來不同。

基本特征 (Basic characteristics)

How do you express equivalence and contrast between elements? Yes, from their basic characteristics.

您如何表達元素之間的對等和對比？ 是的，從它們的基本特征來看。

So, what are the basic characteristics of elements? Basic characteristics refer to the inherent characteristics of the element itself. For example, what color is this element? How big is it? What shape is it?

那么，元素的基本特征是什么？ 基本特性是指元素本身的固有特性。 例如，此元素是什么顏色？ 它有多大？ 它是什么形狀？

These characteristics try to convey the most essential information about the element. If one headline looks larger than another, then we estimate that the first headline is more important. We will also treat those sharp bumps as a red flag.

這些特征試圖傳達有關元素的最基本信息。 如果一個標題看起來比另一個標題大，那么我們估計第一個標題更為重要。 我們還將把那些急劇的顛簸視為危險信號。

Usually, one kind of trait of an element is meaningful only when compared with the same kind of trait of another element. The title above is one such example. A headline must be compared with another headline or another piece of text to highlight its importance. Here, size becomes a very important bit quality. Through comparison, the elements can express their equivalence and contrast.

通常，一個元素的一種特性僅在與另一個元素的相同類型的特性相比時才有意義。 上面的標題就是這樣一個例子。 必須將標題與另一個標題或另一段文本進行比較，以突出其重要性。 在這里，大小成為非常重要的位質量。 通過比較，這些元素可以表達它們的對等和對比。

Another situation is that we let several elements visually have the same qualities and make these elements a group of similar elements. If two elements appear on a webpage: two red circles, users will naturally be curious about this, why are they both red? Why are all circles? This leads to the conclusion that perhaps they are not only equivalent in appearance, but there are other deeper connections. The equivalence of the appearance of the elements also reminds them that they carry similar information.

另一種情況是，我們讓幾個元素在視覺上具有相同的質量，并使這些元素成為一組相似的元素。 如果網頁上出現兩個元素：兩個紅色圓圈，用戶自然會對此感到好奇，為什么它們都是紅色？ 為什么都是圈子？ 由此得出結論，也許它們不僅在外觀上是等效的，而且還有其他更深層次的聯系。 元素外觀的等效性還提醒他們它們攜帶相似的信息。

Similarly, if we make two elements look different, then they express two completely different elements, and their meanings are also different.

同樣，如果我們使兩個元素看起來不同，那么它們表示兩個完全不同的元素，它們的含義也不同。

Any element characteristic that can be changed can make the elements equal or different. This is the element properties listed below:

可以更改的任何元素特征都可以使元素相等或不同。 這是下面列出的元素屬性：

• size
  尺寸
• shape
  形狀
• colour
  顏色
• Assignment
  分配
• Texture
  質地
• position
  位置
• direction
  方向

The contrast between the shape of a rectangle and a circle is obvious, and the two red elements are consistent in color. A red rectangle and a red circle will have different shapes and the same color. How do you balance the equivalence and different element characteristics in an element will determine what your element needs to communicate with the user.

矩形和圓形之間的對比度很明顯，并且兩個紅色元素的顏色一致。 紅色矩形和紅色圓圈將具有不同的形狀和相同的顏色。 您如何平衡元素中的等效性和元素的不同特性，將決定您的元素需要與用戶進行交流的方式。

Note: The basic feature is a basic method to distinguish between similarities and differences, but there are other ways to distinguish them: the information content that the element actually carries. For example, the comparison of the words “stop” and “walk” is similar to the words “stop” and “stop”. Pictures compare text, long articles correspond to short articles, and so on.

注意：基本功能是區分異同的基本方法，但是還有其他區分異同的方法：元素實際攜帶的信息內容。 例如，單詞“ stop”和“ walk”的比較類似于單詞“ stop”和“ stop”。 圖片比較文本，長文章對應短文章，依此類推。

比較一下 (Compared)

When humans see different elements, they will instinctively react nervously. This is a natural evolutionary survival mechanism, so that we can quickly identify threats and let us quickly respond to whether we need to fly back to a safe place immediately.

當人類看到不同的元素時，他們會本能地做出神經React。 這是一種自然的進化生存機制，因此我們可以快速識別威脅并讓我們快速響應是否需要立即飛回安全的地方。

Our ability to distinguish between different types makes the “contrast” approach particularly powerful. Any comparison will attract attention. It’s a way to attract attention. To get attention from an element, let it be distinguished from other elements in visual appearance. In this way, we can create visual focus. In fact, just because the method of making the elements stand out from the environment is so simple, we are not difficult to guess, if you want your design to become more interesting, this may also be the most effective method.

我們區分不同類型的能力使“對比”方法特別強大。 任何比較都會引起注意。 這是一種吸引注意力的方法。 為了從某個元素上引起注意，請使其在外觀上與其他元素區分開。 這樣，我們可以創建視覺焦點。 實際上，僅因為使元素從環境中脫穎而出的方法是如此簡單，我們就不難猜測，如果您希望您的設計變得更加有趣，這可能也是最有效的方法。

Contrast does enhance attractiveness. It can also establish a boundary between the two elements. For example, the different background colors of main content and tidbit content can easily distinguish them, allowing users to know where the main content and tidbit are at a glance.

對比確實可以增強吸引力。 它還可以在兩個元素之間建立邊界。 例如，主要內容和花絮內容的不同背景色可以輕松地區分它們，從而使用戶知道主要內容和花絮一目了然。

Contrast can also play an important role, highlighting a key element and content. The more obvious the difference, the more obvious the contrast, the stronger its importance.

對比也可以發揮重要作用，突出關鍵要素和內容。 差異越明顯，對比度越明顯，其重要性越強。

For example, there are two different text labeling methods: bold and italic. Boldness usually makes the contrast more obvious. Even a glance at a distance is easier to recognize than italic text.

例如，有兩種不同的文本標記方法：粗體和斜體。 大膽通常會使對比度更加明顯。 與斜體文本相比，即使一目了然也更容易識別。

If you want to distinguish between two elements, you will magnify the contrast between them. I believe you do n’t want users to judge whether they are different? Make sure the contrast is intuitive and obvious. There should be no ambiguities that cause confusion. Don’t use 16px text to compare 15px text. People usually don’t notice subtle differences, and even if they notice, misjudgment can occur. ‘

如果要區分兩個元素，將放大它們之間的對比度。 我相信您不希望用戶判斷他們是否不同？ 確保對比度直觀且明顯。 應該沒有引起混淆的歧義。 不要使用16px的文字來比較15px的文字。 人們通常不會注意到細微的差異，即使他們注意到了，也會發生誤判。 '

However, please don’t make too much comparison. Use contrast carefully. If all elements are different and are striving for attention, then in fact, it is the same as no comparison. Too much interference creates visual confusion.

但是，請不要做太多比較。 小心使用對比度。 如果所有要素都不同并且都在努力引起關注，那么實際上，它就像沒有比較一樣。 過多的干擾會造成視覺混亂。

Too much contrast can also break the harmony in the design, causing unnecessary tension and clutter. Maybe it needs to be used in some special designs, but it is definitely a good idea to rarely touch. First confirm which elements need to be highlighted, and then compare them with other elements.

太多的對比度也會破壞設計的和諧感，從而導致不必要的張力和混亂。 也許需要在某些特殊設計中使用它，但是很少碰觸絕對是個好主意。 首先確認需要突出顯示哪些元素，然后將它們與其他元素進行比較。

比較和格式塔 (Comparison and Gestalt)

The Gestalt completion law is also dependent on equivalence and contrast in a certain way. Contrast is particularly important for pattern backgrounds and outstanding focus.

格式塔完成定律在某種程度上也取決于等效性和對比度。 對比度對于圖案背景和突出的焦點尤其重要。

• Pattern background
  圖案背景

When we see an object, our first thing is to distinguish between the background and the protagonist. This relationship determines the role content of other elements in this object. There must be an obvious contrast between the protagonist and the background, otherwise it will be difficult for us to distinguish them.

當我們看到一個物體時，我們的第一件事就是區分背景和主角。 此關系確定此對象中其他元素的角色內容。 主角和背景之間必須有明顯的對比，否則我們將很難區分它們。

• Focus
  焦點

Focus refers to the most attractive and interesting elements. When designing them, you need to make them stand out from the surrounding environment. This contrast also makes them stand out and gain attention. The most prominent in an object is the primary element of the object, and in this object, the secondary highlight is the focus.

焦點是指最有吸引力和最有趣的元素。 設計它們時，需要使它們與周圍環境脫穎而出。 這種對比也使他們脫穎而出并引起關注。 對象中最突出的是對象的主要元素，而在該對象中，次要亮點是焦點。

當量 (Equivalent)

Another survival mechanism of our humanity, in addition to making us aware of differences, also makes us notice the same. This allows us to identify what we should believe and thus distinguish it from potential danger. Has a strong awareness of equivalence, which is why humans can quickly recognize various patterns. Patterns help us understand the world around us, provide information, and quickly grasp the laws. When we form a habit, we can turn it into our intuition and instinct.

我們人類的另一種生存機制，除了使我們意識到差異之外，還使我們注意到相同。 這使我們能夠確定我們應該相信的內容，從而將其與潛在危險區分開來。 對等效具有強烈的意識，這就是為什么人類可以快速識別各種模式的原因。 模式可以幫助我們了解我們周圍的世界，提供信息并快速掌握法律。 當我們養成習慣時，我們可以將其轉變為直覺和直覺。

When we design two or more similar elements, we are implying that if one of them is true, the other equivalent elements are also true. If one element is important, the others are equally important. If one of the elements is clickable, then several other visually similar elements are also clickable. This is how we recognize where is a link in a large paragraph of text. The visual contrast makes the link text different from other text to attract your attention. At the same time, the similarity of other text with links also reminds you that if one of the links is clickable, the other can also be the same.

當我們設計兩個或多個相似的元素時，我們在暗示，如果其中一個是正確的，則其他等效元素也是如此。 如果一個要素很重要，那么其他要素同樣重要。 如果其中一個元素是可單擊的，那么其他幾個視覺上相似的元素也是可單擊的。 這就是我們識別大段文本中鏈接的位置的方式。 視覺對比使鏈接文本與其他文本有所不同，以引起您的注意。 同時，其他文本與鏈接的相似性也提醒您，如果其中一個鏈接是可單擊的，則另一個也可以相同。

Equally shows that there is a connection between several elements. It can bring familiarity and consistency to your design.

同樣表明，多個元素之間存在聯系。 它可以為您的設計帶來熟悉性和一致性。

The same makes our organization’s information ability become perfect day by day. When we look around the visual environment and want to understand it, we will naturally classify all things in order to grasp more information and store it in the form of memory. Let it be our long-term memory for later analysis and problem solving.

這同樣使我們組織的信息能力日趨完善。 當我們環顧視覺環境并想了解它時，我們自然會對所有事物進行分類，以便掌握更多信息并將其以內存的形式存儲。 讓它成為我們的長期記憶，以便以后進行分析和解決問題。

Designing places with the same information to be similar in appearance will help users process and understand the information, and this is exactly the goal of our design.

將具有相同信息的外觀設計為外觀相似將有助于用戶處理和理解信息，而這正是我們設計的目標。

The more common features of the elements in common, the more identical they look, so that more users think they are the same. They seem to be homogeneous in some way, even if they have only one of the same characteristics.

共同元素的共同特征越多，它們看起來就越相同，以便更多用戶認為它們是相同的。 即使它們僅具有相同的特征之一，它們在某種程度上也似乎是同質的。

We use equivalence to build systems and patterns. The equivalence of any two elements implies that they may be a system. If you add some similar elements to this system, it will evolve into a pattern, which visually will form patterns, textures, or rhythmic visual effects.

我們使用等效性來構建系統和模式。 任何兩個元素的等效意味著它們可能是一個系統。 如果向該系統添加一些類似的元素，它將演變成一個圖案，從視覺上將形成圖案，紋理或有節奏的視覺效果。

Not all signals that look similar are equal. As shown below, do you classify graphics by shape or color? What do you see is a set of circles and a set of square shapes? Or do you see red and blue graphics?

并非所有看起來相似的信號都是相等的。 如下所示，您是否按形狀或顏色對圖形進行分類？ 您看到的是一組圓和一組方形？ 還是看到紅色和藍色的圖形？

You may first notice the color and divide the elements into red and blue. This means that the equivalent signal transmitted by the color is stronger than the shape. This is not completely absolute. For example, some people who are red and green blind will not notice the difference in color. The first thing they notice is the shape of the figure.

您可能首先注意到顏色，然后將元素分為紅色和藍色。 這意味著通過顏色傳輸的等效信號要比形狀更強。 這不是絕對的。 例如，有些紅綠盲的人不會注意到顏色的差異。 他們首先注意到的是圖形的形狀。

等效和格式塔 (Equivalence and Gestalt)

We once again mentioned Gestalt’s law, each Gestalt is about how we perceive the equivalence and contrast between objects. Here are some points that are considered equivalent.

我們再次提到格式塔定律，每個格式塔都是關于我們如何感知物體之間的對等和對比的。 以下是一些等效的要點。

• Enclosed The different elements in a whole are part of the whole

  封閉整體中的不同元素是整體的一部分

• Symmetry and order Symmetric elements belong to each other

  對稱和順序對稱元素彼此對應

• Unity of connection equivalence between visually connected elements

  視覺連接元素之間連接等效性的統一

• Common area Equivalence of elements in the same area

  公共區域同一區域中元素的等效性

• Near equivalent in a same region where successive elements

  在同一區域中連續元素幾乎相等

• Continuously localized in space in a certain rhythm or frequency of occurrence of elements equivalent

  以一定的節奏或出現頻率連續地局限在空間中

• Common destiny in motion

  運動中的共同命運

• Parallel in the same direction

  平行于同一方向

等值與對比之間的關系 (Relationship between equivalence and contrast)

Equivalence and contrast are used to express the relationship between elements. An independent element has no meaning. An element is always in contact with other elements in the same environment.

等價和對比用于表示元素之間的關系。 獨立元素沒有任何意義。 一個元素始終與同一環境中的其他元素接觸。

There is a small circle at the corner of a large circle. What does this design imply? A piece of silver-gray text is indented more than other text. What does it try to explain?

大圓角處有一個小圓。 這種設計意味著什么？ 一條銀灰色文本比其他文本縮進更多。 它試圖解釋什么？

It can be said that equivalence and contrast are like a balance, with one end completely different and one end completely identical. Most of the cases are somewhere in between, and the elemental characteristics of the relationship we have designed are only partial, not all. Equivalence and contrast are expressions of the relationship that occurs between the poles of this balance.

可以說，對等和對比就像一種平衡，一端完全不同而另一端完全相同。 大多數情況介于兩者之間，我們設計的關系的基本特征僅是部分而非全部。 等價和對比是這種平衡的兩極之間發生的關系的表達。

Even if I didn’t make it very clear, you can know that equivalence and contrast are complementary to each other. They exist and depend on each other, contrast is lacking in equivalence, and equivalence is also lacking in contrast. Its degree of complementarity depends entirely on its position on the balance.

即使我不太清楚，您也可以知道等效和對比是相輔相成的。 它們存在并相互依賴，缺乏對等關系，也缺乏對等關系。 它的互補程度完全取決于它在平衡上的地位。

When you combine these two to think together, you will feel their role. You can make a difference using only the element characteristic of color. Use the same color for several elements to connect them, and then use another color to connect several other elements. The contrast of colors has occurred again.

當您將兩者結合在一起思考時，您將感受到他們的作用。 您可以僅使用顏色的元素特征進行更改。 對多個元素使用相同的顏色來連接它們，然后對另一種顏色使用另一個顏色來連接其他元素。 顏色的對比度再次出現。

Color code is a good example, it is a very effective coding method, so that the person who writes the code can quickly understand the structure of the code even at a glance.

彩色代碼是一個很好的例子，它是一種非常有效的編碼方法，因此編寫代碼的人即使一眼就能知道代碼的結構。

When everything is equal, you will no doubt get bored. If everything is different, it will make you irritable. Good design should make the two well balanced, and then clearly express the message you want to convey.

當一切都平等時，您無疑會感到無聊。 如果一切都不一樣，它將使您煩躁。 好的設計應該使兩者很好地平衡，然后清楚地表達您想要傳達的信息。

網頁設計中的等效和對比示例 (Examples of equivalence and contrast in web design)

Identities and comparisons can be seen on every website, they coexist in web design. You can imagine if a website does not use contrast, how can we recognize where is the content and where is the title in the same background color and font size? Even if a line or a symbol is different, they can have a contrasting style.

身份和比較可以在每個網站上看到，它們共存于網頁設計中。 您可以想象，如果一個網站不使用對比度，我們如何才能識別內容在哪里，標題在相同的背景顏色和字體大小在哪里？ 即使線條或符號不同，它們也可以具有鮮明的風格。

Below are examples of comparison and equivalence in web design. Through these examples, you can better grasp the relationship between the two, which will help you deal with equivalence and contrast in design in the future.

以下是網頁設計中比較和對等的示例。 通過這些示例，您可以更好地把握兩者之間的關系，這將有助于您將來處理設計中的對等和對比。

戴維·西蒙 (DAVID SIMON)

The first website I want to mention is the DAVID SIMON website, which uses different background colors as a contrast to distinguish different components of the web page. The dark logo is also particularly prominent on a white background.

我要提到的第一個網站是DAVID SIMON網站，該網站使用不同的背景色作為對比來區分網頁的不同組成部分。 深色徽標在白色背景上也特別突出。

The perfect contrast between the picture and the background attracts attention. The background color that shows the time when the article was published, the background color and capital letters that show the number of article comments, and the background color of the page menu are all contrasted with the surrounding environment, highlighting their importance.

圖片和背景之間的完美對比吸引了人們的注意。 顯示文章發布時間的背景色，顯示文章評論數量的背景色和大寫字母以及頁面菜單的背景色均與周圍環境形成對比，從而突出了它們的重要性。

The links in the website menu have the same style and will jump to the corresponding article. These are different from other underlined links. The title of the article and the font of the main body are different, but the contrast is fixed from the entire website.

網站菜單中的鏈接具有相同的樣式，并將跳至相應的文章。 這些與其他帶下劃線的鏈接不同。 文章標題和主體字體不同，但整個網站的對比度是固定的。

The link in the main content is conspicuous, although the designer seems to try to make it less prominent so as not to disturb the reading flow. It would be better if the title could be highlighted a little more, although there is now a clearer contrast.

主要內容中的鏈接很明顯，盡管設計人員似乎試圖使其不那么突出，以免干擾閱讀流程。 如果現在可以更清楚地顯示標題，最好將標題高亮一點。

電漿 (ELECTRIC PULP)

The logo of the ELECTRIC PULP website is a red one with a modern design. It is easy to contrast with other elements of the web page we see below. Please note how the color works in navigation to indicate the current page.

ELECTRIC PULP網站的徽標是帶有現代設計的紅色。 很容易與我們在下面看到的網頁的其他元素形成對比。 請注意顏色如何在導航中指示當前頁面。

All titles on the site are in large, bold capital letters. The contrast between the title and the main content is consistent. When you click to enter the first level page of “NOTES”, you will see that the background color of the carousel button is compared with the background color of the entire page.

網站上的所有標題均使用大膽的大寫字母。 標題與主要內容之間的對比是一致的。 單擊以進入“注解”的第一級頁面時，您會看到輪播按鈕的背景色與整個頁面的背景色進行了比較。

Most of the buttons on the page are red (this is a color commonly used to decorate elements), and it will turn blue when the mouse is swept over. However, on the “work” page, the first button is just the opposite of the previous one, but a blue button, which turns red when the mouse is over. Is this a mistake? Or did the designer intentionally do it? Nonetheless, I think the comparison principle of this website is very clever.

頁面上的大多數按鈕都是紅色的(這是一種通常用于裝飾元素的顏色)，當鼠標滑過時，它將變為藍色。 但是，在“工作”頁面上，第一個按鈕與上一個按鈕正好相反，但是藍色的按鈕在鼠標懸停時會變成紅色。 這是一個錯誤嗎？ 還是設計師有意這樣做？ 盡管如此，我認為該網站的比較原理非常巧妙。

洛迪 (LOWDI)

The last website to mention is LOWDI . The picture below is the homepage of the website. Please note how designers use colors to express contrast and consistency.

最后要提到的網站是LOWDI 。 下圖是網站的主頁。 請注意設計師如何使用顏色來表達對比和一致性。

Color can clearly describe different parts. The whole color mix is ??bright. Please note how the background color of the price display is highlighted, and at the same time, it also reminds the product page below.

顏色可以清楚地描述不同的部分。 整個顏色混合明亮。 請注意價格顯示的背景顏色是如何突出顯示的，同時，它還會提醒下面的產品頁面。

后記 (Postscript)

Contrast and equivalence have different functions, and the relationship between them changes through the degree of mutual influence. You will not see them alone, they are always interdependent. Changing one means changing the other.

對比度和對等具有不同的功能，并且它們之間的關系根據相互影響的程度而變化。 您不會單單看到它們，它們始終是相互依存的。 改變一個意味著改變另一個。

Representing the contrast and equivalence in a design is the first step in visual communication and the first step for users to clearly define the site ’s intentions.

表示設計中的對比度和等效性是視覺傳達的第一步，也是用戶明確定義站點意圖的第一步。

In short, contrast and equivalence are visual signals in design elements. Differences will attract our attention, and similar elements will remind us of their relevance. The purpose of the comparison of the same layout is to make this group of elements the same as another group of elements, so as to achieve overall harmony and consistency.

簡而言之，對比度和等效性是設計元素中的視覺信號。 差異將吸引我們的注意力，相似的元素將使我們想起它們的相關性。 比較相同布局的目的是使這組元素與另一組元素相同，以實現整體的和諧與一致。