You know why you are able to read this article right now apart from the availability of your eyes, internet, device, etc.? What is the font color of this text you’re reading? — Black. What is the background color of this page you’re on? — White. Yes, Black and White are one of the prime reasons that you’re able to read this article and it’s the Application of Contrast at work. Keep reading to know more about the same with the Application of Similarity in this article.

您知道為什么除了可以使用眼睛，互聯網，設備等之外，現在還可以閱讀本文？ 您正在閱讀的文本的字體是什么顏色？ - 黑色。 您所在頁面的背景顏色是什么？ —白色。 是的，黑白是您能夠閱讀本文的主要原因之一，而這正是工作中的對比度應用。 繼續閱讀以了解更多有關本文相似性應用的知識。

Welcome back to the third part of the ‘Principles of Design’ series where we’ll explicitly talk about two prime applications of design — Contrast, And Similarity from which the latter also comes under the principles of gestalitsm.

歡迎回到“設計原理”系列的第三部分，在該系列中，我們將明確討論設計的兩個主要應用程序- 對比度和相似性 ，后者也來自手勢的原理。

In designing any type of composition whether it’s UI design, Marketing Collateral or anything in general, we come across two things:-

在設計任何類型的構圖時，無論是UI設計，市場營銷抵押品還是一般的東西，我們都會遇到兩件事：

1)主要要素-本章標題 (1) THE PRIMARY ELEMENTS — TITLE OF THE CHAPTER)

During information architecture, we decide what is this one or more primary elements (a piece of information, product, feature, copy, event name, illustration) which should come first in the viewer’s eyes when they look at the composition or certain area of the composition. After that we decide the alignment of other design elements around it to support the prominence of these primary elements, this from deciding the primary elements to actually bringing it out in the composition can be done by making the contrast between the elements.

在信息架構中，我們決定這是一個或多個主要元素(一條信息，產品，功能，副本，事件名稱，插圖)是什么，當他們查看廣告的組成或特定區域時，應該首先出現在觀看者的眼中組成。 之后，我們決定圍繞它的其他設計元素的對齊以支持這些主要元素的突出，這可以通過確定元素之間的對比來確定主要元素到將其實際呈現到構圖中。

2)第二要素—本章的段落 (2) THE SECONDARY ELEMENTS — PARAGRAPHS OF THE CHAPTER, IT IS)

In the same way, we want some (more than two) elements (block of texts, shapes, sections) to look as if they share sameness in terms of functions, usability, features and be perceived as part of the same group by the viewer. And, we also want some elements to look as if they are different from some other elements and be perceived as part of the different group. This deciding of which elements are to be part of the same group (for ex:- address, contact, phone no) to actually bringing it out in the composition can be done by making the elements share similar characteristics.

同樣，我們希望某些(兩個以上)元素(文本塊，形狀，節)看起來好像它們在功能，可用性，功能方面具有相同性，并被查看者視為同一組的一部分。 并且，我們還希望某些元素看起來好像它們與某些其他元素不同，并被視為不同組的一部分。 確定哪些元素屬于同一組(例如：-地址，聯系方式，電話號碼)以使其真正出現在組合中，可以通過使這些元素具有相似的特征來完成。

In the above image of the book, on the left page you see a block of heading ‘Separation versus intimacy’, whether we want it or not, we after turning on this page from the previous we first see this heading because of the good application of contrast done by the layout designer. The heading just grabs our attention because of its boldness and space around it. And to show the application of similarity in the same image, on the right page you see the block of paragraphs which shows the application of similarity at work — how? Because of the same font size, typeface, color, leading, alignment, line length and constant proximity among a block of paragraphs and that’s why we think that these blocks of paragraphs are part of one group. We just need one extra line of space in just one paragraph to destroy the constant proximity among these blocks of paragraphs and ultimately destroying the application of similarity. We’ll think the paragraph which is after the extra line of space is the beginning of some other section and does not belong to the same previous group.

在本書的上方圖片中，在左側頁面上，您會看到一個標題為“分離與親密感”的塊，無論我們是否想要，由于使用了良好的應用程序，我們從上一個頁面打開后我們首先看到了此標題布局設計師的對比。 該標題因其大膽和周圍的空間而引起了我們的注意。 為了在同一幅圖中顯示相似性的應用，請在右側頁面上看到幾段顯示相似性在工作中的應用的段落-怎么樣？ 由于一組段落之間具有相同的字體大小，字體，顏色，行距，對齊方式，行長和恒定的接近度，因此我們認為這些段落段落是一組的一部分。 我們只需要在一個段落中多留一行空格，以破壞這些段落塊之間的不斷接近，并最終破壞相似性的應用。 我們將認為多余空格之后的段落是其他部分的開頭，并且不屬于同一組。

The Application of Contrast and Similarity can be done by using the primitive features of elements in the composition.

對比度和相似度的應用可以通過使用合成中元素的原始特征來完成。

基本功能 (PRIMITIVE FEATURES)

The features of an element that are automatically scanned and recognized by the unconscious mind before the interference of the conscious mind are called primitive features of an element. These are the features which one can use to make element dominant in the composition or lose its dominance or make elements look similar. The prime primitive features of an element which are more likely to be played to apply contrast and similarity are:-

在有意識的思維被干擾之前，由無意識的思維自動掃描和識別的元素特征稱為元素的原始特征 。 這些是人們可以用來使元素在合成中占主導地位，失去其主導地位或使元素看起來相似的功能。 元素的主要原始特征更可能被播放來應用對比度和相似性：

1. Size
   尺寸
2. Shape
   形狀
3. Color
   顏色
4. Texture
   質地
5. Position or alignment
   位置或對齊
6. Motion
   運動
7. Saturation
   飽和
8. Space
   空間

Ultimately, we realise that these primitive features are responsible for the makeup of an element. — Me B)

最終，我們意識到這些原始特征負責元素的構成。 -我B)

Though we’ll be discussing the application of contrast and similarity in detail from the next section, here’s a quick example of the application of these with the use of primitive features on this eBay homepage:-

盡管我們將在下一部分中詳細討論對比度和相似性的應用，但是在此eBay主頁上，這是一個使用原始功能的快速應用示例：

As we can see that the homepage banner gets our attention first because of the Application of Contrast by using the primitive features of full width-size, bright-color primarily. Secondly, the section of ‘popular destinations’ below the homepage banner shows the Application of Similarity by again using the primitive features of the same-size circle, same font-size, same-saturation of their background color, same-balanced adjustments of the products inside it, the same distance between circles — these all features shows these circles are all part of one group and likely to be doing the same thing like go to some other page when clicked. And this is the power of the primitive features of elements in a composition.

我們可以看到，由于對比度的應用，首頁橫幅首先受到關注，這是因為它首先使用了全角，明亮顏色的原始特征。 其次，首頁橫幅下方的“熱門目的地”部分通過再次使用相同大小的圓圈，相同的字體大小，其背景顏色的相同飽和度，相同的平衡調整來顯示相似性的應用。里面的產品，圓圈之間的距離相同-這些所有功能都表明這些圓圈是一組的一部分，并且可能會執行相同的操作，例如單擊時轉到其他頁面。 這就是合成中元素原始特征的力量。

還有一個—設計上的比較 (THERE’S ONE MORE — COMPARISON IN DESIGN)

But there is still one other thing left which is equally responsible for the proper working of Application of Contrast and Similarity and that is — Comparison. Most of the time, an element feature needs to be compared to same features of other elements around it in order to work. Like in the yellow background color of banner in image above gets attention first because it contrasts with the white background color of the UI if the white color of the UI was also yellow or some light shade of yellow there’d be no good contrast as it is now.

但是，還有另一件事同樣負責應用“對比度和相似性應用”，即“比較”。 在大多數情況下，元素特征需要與周圍其他元素的相同特征進行比較才能起作用。 就像上面圖像中橫幅的黃色背景顏色一樣，由于它與UI的白色背景形成鮮明對比，因此首先引起注意，如果UI的白色也是黃色或某些淺黃色，則對比度就不會很好就是現在。

It’s through comparisons like these we actually show the Application of Contrast or Similarity.

通過這樣的比較，我們實際顯示出對比度或相似性的應用。

對比度— A是蘋果色，B是球色，要看對比度嗎？ (CONTRAST — A FOR APPLE, B FOR BALL, SEE THE CONTRAST?)

In the above poster, Quote Marks & Square with a human face in it gets the utmost and first attention in this layout because of the use of proper black and white color contrast, the designer has used the white for the background and black for the element. And secondly, because of the space around the black elements in the center as the remaining common information is either placed on top right or bottom right.

在上面的海報中，由于使用了適當的黑白對比，因此在布局中使用人臉的Quote Marks＆Square受到了最大的關注，設計師將白色用作背景，將黑色用作元素。 其次，由于中間黑色元素周圍的空間，因此剩余的公共信息位于右上角或右下角。

From the above poster, we can answer three questions related to contrast in design, which are as follows:-

從以上海報中，我們可以回答三個與設計對比度有關的問題，分別是：

1) What Is Contrast In The Context Of Visual Design?Contrast in the context of visual design can be defined as a difference between two or more elements in a composition. The more the difference between the elements, the greater they are easy to compare and comprehend and that’s when they are said to have contrasted with each other.

1)視覺設計中的對比是什么？ 視覺設計中的對比度可以定義為組成中兩個或多個元素之間的差異。 元素之間的差異越大，它們越容易比較和理解，這就是說它們彼此形成對比的時候。

2) Why You Should Apply Contrast In Design?I was thinking to follow the reverse model of Why, How, What of Simon Sinek but I guess What is much more important here and then Why.

2)為什么要在設計中應用對比？ 我當時在想遵循西蒙·西內克 ( Simon Sinek)為什么，如何，什么的反向模型，但我想在這里以及為什么要更重要。

So, the answer lies in the science of our human mind and eyes, specifically visual processing. It’s always interesting to see when science and design come together, isn’t it?.

因此，答案在于我們人類大腦和眼睛的科學，特別是視覺處理。 看到科學與設計何時融合在一起總是很有趣的，不是嗎？

Pre-attentive processing is the unconscious accumulation of information from the composition (or anything in general like poster, tangible product, when you see something) that occurs in our early vision. In simpler and visual words, it’s reading a poster unknowingly at a first glance. In this processing, our eye movement is not determined by the tradition of reading from the top left to right bottom or start to end but is driven by primitive features of the element, the element which stands out the most is seen first and that’s the element with high contrast. And that’s when we begin the process of communicating the composition with our viewers before they’re even consciously paying attention and coming in a stage of attentive processing.

注意力集中處理是在我們的早期視力中無意識地從構圖(或任何東西，如海報，有形產品，當您看到東西)中積累信息。 用簡單直觀的語言，它乍一看就在不知不覺中閱讀了一張海報。 在此過程中，我們的眼球運動不是由從左上到右下或從頭到尾的閱讀習慣來決定的，而是由元素的原始特征驅動的，最突出的元素是最先被看到的，那就是該元素高對比度。 那就是當我們開始與觀眾交流構圖的過程之前，他們甚至沒有自覺地引起觀眾注意并進入細心處理的階段。

Color is one the major primitive feature of an element which can be used to apply contrast among element. See this to know why.

顏色是元素的主要原始特征之一，可用于在元素之間施加對比度。 看到 這個 知道為什么。

In this pre-attentive processing, viewers are more likely to take a decision whether they want to stay and begin with attentive processing (see the whole composition attentively), and as we know every composition fights to grab the attention of the viewer, we need to take control of the element which the viewer is going to see in this pre-attentive processing. We need to decide first on how to grab the attention of the viewer anyhow so they can take the decision of switching to their attentive processing and scans the whole composition attentively. And as eye movement is determined by the primitive features of the element we need to apply such features on those elements (that we want the viewer to scan in pre-attentive processing) that grabs the attention and entices the viewer to stay and read more.

在這種預先注意的處理中，觀眾更有可能做出是否愿意留下來并開始進行認真處理的決定(認真觀察整個構圖)，并且我們知道每一個構圖都在爭奪觀眾的注意力，我們需要以控制觀眾在此預先注意的處理過程中將要看到的元素。 我們需要首先決定如何以任何方式吸引觀看者的注意力，以便他們可以決定切換到他們的細心處理并專心掃描整個構圖。 并且，由于視線的移動是由元素的原始特征決定的，因此我們需要將這些特征應用到那些元素上(我們希望觀察者在專心的處理過程中對其進行掃描)，從而吸引注意力并吸引觀察者停留并內容。

And by doing this we also take the cognitive load of the viewer of whether they want to continue to look at the composition or not, because of this high contrast visibility in pre-attentive processing they can take the decision faster and move on. They don’t have to scan the whole composition just to realize that they didn’t want to look at that. That comes from the understanding of why we need contrast in the design, now let’s understand how to apply it.

通過這樣做，我們還承擔了觀看者是否愿意繼續看構圖的認知負擔 ，由于在注意前處理過程中具有很高的對比度可見性，因此他們可以更快地做出決定并繼續前進。 他們不必為了意識到自己不想看而掃描整個構圖。 這來自對為什么我們需要在設計中形成對比的理解，現在讓我們了解如何應用它。

3) How To Apply Contrast In Your Design?The Application of Contrast can be done by answering one of the critical questions and that is — What is this first thing which you want the viewer to look at in the design or specific area of the design?. And here that thing isn’t supposed to be logical, it’s supposed to be first of all the thing which attract the attention of the viewer and that can be anything like the quote marks above in the poster — though they are there because the poster is about literature but you know this when you read the information of the poster not when you see the poster at the first glance.

3)如何在設計中應用對比度？ 可以通過回答一個關鍵問題來完成“對比”的應用，即—您希望觀眾在設計或設計的特定區域中首先看到的是什么？ 在這里，這不應該是合乎邏輯的，應該是首先引起觀眾注意的東西，可以像海報上的引號一樣—盡管它們在那里是因為海報是關于文學的知識，但是您在閱讀海報的信息時就知道這一點，而不是乍一看就知道。

Now when you have decided that element which you want the viewer to see first, all you have to do is use the primitive features of the elements discussed above to make it stand out. In the poster above, the designer has used features like color, space, and scale.1) The Color of the background and the element has established a perfect figure-ground relationship between background and element.

現在，當您確定要讓觀看者首先看到的元素時，您要做的就是使用上述元素的原始特征使其突出。 在上面的海報中，設計師使用了顏色，空間和比例等功能。1)背景和元素的顏色在背景和元素之間建立了完美的圖形-背景關系。

2) The White Space between center black elements and top and bottom text has created a sense of understanding to the viewer that the center element is much more important to look at than the others.

2)中間黑色元素與頂部和底部文本之間的空白產生了一種讓觀看者理解的感覺，即中心元素比其他元素更重要。

3) The Size of the center elements seem and are exceptionally large and that’s why they are the center point of attraction.

3)中心元素的大小似乎而且非常大，這就是為什么它們是吸引力的中心點。

The viewer eyes will now in this hierarchal order — 1) Centre black elements, 2) Top Right Text and 3) Bottom Right Text.

現在，查看者的眼睛將按此層次結構順序排列-1)黑色中心元素，2)右上文本和3)右下文本。

格式塔的對比度和原理 (CONTRAST AND PRINCIPLES OF GESTALT)

Many gestalt principles talk about showing contrast in a direct or indirect way, From which, let’s just discuss two of them:-

許多格式塔原則都談到以直接或間接方式顯示對比，從中我們僅討論其中兩個：

1. Figure-Ground — What did I just step my foot on? Yuck!!

   Figure-Ground-我剛剛踏上了什么？ uck！

   In designing any type of composition, we need to decide what’s the figure and what’s the ground. This relationship helps to set the context for everything else in composition. We need to make sure that figure and ground contrast with each other in a proper way so that the viewer will have no problem in determining which is which. Learn more about the same —

   在設計任何類型的構圖時，我們需要確定圖形和背景。 這種關系有助于為合成中的所有其他內容設置上下文。 我們需要確保人物和地面以正確的方式彼此形成對比，以使觀看者在確定哪個是哪個方面沒有問題。 進一步了解相同的內容-

   here.

   這里。

2) Focal Point — What is your area of interest other than the dominant element?Focal points are specific areas of interest, emphasis or difference within a composition that captures and holds the viewer’s attention. Like the face in the above poster which is one of an area of interest. Focal points are designed to look different from their surroundings, and contrast helps them to look different and get attention. We’ll be discussing the same in upcoming articles.

2)聯絡人-您感興趣的主要領域以外的領域是什么？ 焦點是構圖中特定的興趣區域，重點或差異，可以吸引并吸引觀眾的注意力。 就像上面海報中的面Kong一樣，這是我們感興趣的領域之一。 聯絡點的設計使其看起來與周圍環境有所不同，而對比度則可以使它們看起來有所不同并引起注意。 我們將在以后的文章中討論同樣的問題。

相似性-A對于蘋果，B對于香蕉，看到相似之處嗎？ (SIMILARITY — A FOR APPLE, B FOR BANANA, SEE THE SIMILARITY?)

Back to this poster again (Damn, I’m starting to love this poster), as we have covered the center section of the poster, let’s have a look at the top right section. The section where we can see the Application of Similarity in Design because of the similar primitive features used among the text elements — color, same variance in color, same typeface, same font size, same font-weight, same alignment, justification, same letter spacing, similar line length and same kerning and due to these all sameness we think of these text elements are part of one group. Being able to recognize similarity is why human beings are excellent at finding patterns

再次回到該海報(該死，我開始喜歡這個海報)，因為我們已經覆蓋了海報的中心部分，所以讓我們看一下右上角的部分。 由于文字元素之間使用的原始特征相似，因此可以在本節中看到“相似性在設計中的應用”-顏色，相同的顏色變化，相同的字體，相同的字體大小，相同的字體粗細，相同的對齊方式，對正，相同的字母間距，相似的行長和相同的字距，由于所有這些相同性，我們認為這些文本元素屬于一組。 能夠識別相似性就是為什么人類擅長發現模式

And again from the above poster, we can answer three questions related to similarity in design, which are as follows:-

再從上面的海報中，我們可以回答三個與設計相似性有關的問題，如下：

1) What Is Similarity In The Context Of Visual Design?Similarity in the context of visual design can be defined as a similarity between two or more elements in a composition. The more the sameness between the elements, the greater the probability of them being appearing as part of one group. The Similarity is also one of the gestalt principles of perceptual organization.

1)視覺設計中的相似性是什么？ 視覺設計中的相似性可以定義為組成中兩個或多個元素之間的相似性。 元素之間的相同性越強，它們出現在一組中的可能性就越大。 相似性也是知覺組織的格式塔原則之一。

2) Why You Should Apply Similarity In Your Design?The answer of this too lies in the science of our human mind and eyes, specifically visual processing.

2)為什么要在設計中應用相似性？ 答案也在于我們人類的大腦和眼睛的科學，特別是視覺處理。

Attentive processing is when a viewer starts to look at a composition consciously and start becoming aware of the elements present in. Composition. During this processing, the rate of cognitive load starts to rise up according to the information present in the composition. Here, similarity complements our natural tendency to processing information.

細心處理是指觀看者開始有意識地觀看構圖并開始意識到其中存在的元素時。 在此過程中，認知負擔的比率開始根據組成中存在的信息而上升。 在這里，相似性補充了我們處理信息的自然趨勢。

Too much variance in features among elements in a composition is a sign of cluttered-ness, noise, and complexity. What if the sub-headings of this article is varied in font size and font color, you’d be confused if the sub-headings are sub-headings or sub-sub-heading or primary headings.

構圖中元素之間的特征差異太大，表示雜亂無章，雜亂無章和復雜。 如果本文的副標題的字體大小和字體顏色不同，該副標題是副標題還是副標題或主標題，您會感到困惑。

What happens is, to make sense of everything in a composition we naturally group elements in chunks in order to store more information in our working memory and let the cognitive load rate balanced. But if there is no chance of grouping information because of no similarities among elements then the cognitive load may start to rise up in a negative way and can have a negative impact on the viewer overall because we have left them with too much information to gather from which some of them are unnecessary. And if there are no similarities in design then the viewer won’t be able to make sense of it all and be confused about what to store and what not and what with, what is important and not.

發生的事情是，為了充分理解合成中的所有內容，我們自然將這些元素按塊進行分組，以便將更多信息存儲在我們的工作記憶中，并使認知負荷率達到平衡。 但是，如果由于元素之間沒有相似性而沒有機會對信息進行分組，那么認知負擔可能開始以負面的方式上升，并且可能對觀看者產生負面影響，因為我們給他們留下了太多的信息，無法從中收集信息其中有些是不必要的。 而且，如果設計上沒有相似之處，那么觀眾將無法理解所有內容，而對存儲什么，不存儲什么，使用什么存儲，什么是重要和不重要感到困惑。

So, just to let the viewer group information so he/she can store information and maintain their cognitive load, we need to apply similarity in design. Let’s know how to do it, shall we?

因此，為了讓觀看者分組信息，以便他/她可以存儲信息并維持他們的認知負荷，我們需要在設計中應用相似性。 讓我們知道怎么做吧？

3) How To Apply Similarity In Your Design?Like the Application of Contrast, The Application of Similarity can be done by answering one of the critical questions and that is — What are those pieces of information that have similar functions like (address, contact info or set of links which have the function of getting licked or list of items in a menu) which you need the viewer to perceive it as one part of the group and understand these elements have a similar function.

3)如何在設計中應用相似性？ 像“對比應用”一樣，“相似應用”可以通過回答一個關鍵問題來完成，即-具有相似功能(例如地址，聯系信息或具有獲取功能的鏈接集)的那些信息是什么？菜單中的項目或列表)，您需要查看者將其視為組的一部分并了解這些元素具有相似的功能。

Now when you have decided that pieces of information that are supposed to be perceived as part of one group, all you have to do is use the primitive features of the elements discussed above to make them similar. In the above poster to make the text elements of top right section appear as one part of a group, the designer has used the primitive features like same font size, typeface, color variance (black and grey), alignment (left) and that’s why we perceive these text elements as part of one group.

現在，當您確定應該視為一組信息的一部分信息時，您要做的就是使用上述元素的原始特征使它們相似。 在上面的海報中，為了使右上部分的文本元素作為一組顯示，設計師使用了原始特征，例如相同的字體大小，字體，顏色變化(黑色和灰色)，對齊(左側)，這就是為什么我們將這些文本元素視為一組。

格式塔的相似性和原則 (SIMILARITY AND PRINCIPLES OF GESTALT)

Though ‘Similarity’ is one of an independent principle in gestaltism. Many gestalt principles talk about showing similarity in a direct or indirect way, From which, let’s just discuss two of them:-

盡管“相似性”是完形電影中的一項獨立原則。 許多格式塔原則都談論以直接或間接方式顯示相似性，從中我們僅討論其中兩個：

1) Common Region — It’s a school playground, remember?As the name suggests, to show similarity among the set of elements — just enclose them in any way probably byline or background patch and the enclosed area is now called a common region where these elements lie. By doing we can make these elements appear part of one group.

1)公共區域-這是一個學校操場，還記得嗎？ 顧名思義，要顯示元素集之間的相似性，只需以任何方式將它們包圍起來，可能是用劃線或背景補丁將其封閉，現在將封閉的區域稱為這些元素所在的公共區域。 通過這樣做，我們可以使這些元素成為一組的一部分。

2) Uniform Connectedness — Mommy, I don’t want to wear school uniform :/The principle of uniform connectedness works by connecting the set of elements with abstract elements (ornaments) or functional elements (arrow) to make them appear as part of one group because they are now visually connected. Uniform connectedness is one of the strongest principles in gestalt principles of perceptual organization.

2)統一連接-媽媽，我不想穿校服：/統一連接的原理是通過將元素集與抽象元素(裝飾品)或功能元素(箭頭)連接起來，使它們作為一個元素的一部分出現而起作用分組，因為它們現在已經在視覺上相連。 統一的連接性是知覺組織的格式塔原則中最強的原則之一。

相似度與對比度之間的關系 (RELATIONSHIP BETWEEN SIMILARITY AND CONTRAST)

From the above reading, you must have noticed that I’ve shown 3 unique examples to show the application of contrast and similar in design. But you must have also noticed that I’ve shown the application of these two together in all three designs. Which makes us realize that one is impossible without the other.

從上面的閱讀中，您一定已經注意到，我已經顯示了3個獨特的示例，以顯示對比和類似設計的應用。 但是您還必須注意到，我已經在所有三個設計中同時展示了這兩個應用程序。 這使我們意識到，沒有另一個就不可能。

Contrast is the lack of Similarity, Similarity is the lack of Contrast.

對比是缺乏相似性，相似性是缺乏對比。

Contrast and Similarity are really opposite ends of a scale. On one end of the scale, elements look different and on the other hand, elements look similar. Thinking about them together when designing a composition can actually make it more impactful, appealing, attractive, communicable, clear and all of the other adjectives which you just started to make of your own around these.

對比度和相似度實際上是標尺的相反兩端。 在比例尺的一端，元素看起來不同，而另一方面，元素看起來相似。 在設計構圖時一起考慮它們實際上可以使其更具影響力，吸引力，吸引力，可交流性，清晰性，以及您剛開始圍繞這些形容詞制作的所有其他形容詞。

更多示例-好吧，這是您的閱讀時間 (MORE EXAMPLES — WELL, IT’S YOUR READING TIME)

Let’s consider some examples of user interface design in the website to understand how designers have applied the contrast and similarity.

讓我們考慮網站上的一些用戶界面設計示例，以了解設計師如何應用對比和相似性。

1)印度型鑄造廠 (1) Indian Type Foundry)

The center text starting with ‘ITF is a digital type foundry….’ Is one of the primary text which the company wants the viewer to read it first and that’s why they have applied the contrast on it by using the primitive features of font size, white space. We in the first fold see nothing but read this first. The background color is also in contrast with the font color but I think there could a lighter version of grey as it seems a little dull now.

以“ ITF是數字類型代工廠……”開頭的中心文本。 是公司希望觀眾首先閱讀的主要文字之一，這就是為什么他們通過使用字體大小，空白的原始功能在其上應用對比度的原因。 我們第一眼看不到什么，只有先讀懂這一點。 背景顏色也與字體顏色形成對比，但是我認為可以使用較淺的灰色，因為現在看起來有點暗淡。

Secondly, the text ‘font’, ‘Indian’ and ‘Latin’ text are underlined which shows the application of similar at work. We now perceive these text as one of the attractions, primary points in the overall copy. The designer wants us to at least remember these three words from the copy, designers do this all the time — if we want you to remember a certain number of things we just make it look similar which makes it easier for you to remember because of pattern finding. And also these three texts are clickable.

其次，帶下劃線的文字是“字體”，“印度語”和“拉丁語”，表示在工作中類似文字的應用。 現在，我們將這些文本視為吸引人的內容之一，是整體副本中的重點。 設計師希望我們至少記住副本中的這三個詞，設計師一直在這樣做–如果我們想讓您記住一定數量的事物，我們只是使它看起來相似，從而使您更容易記住圖案發現。 這三個文本也是可單擊的。

2)完美酮 (2) Perfect Keto)

The products placed on the right are the ones that grab our attention at first sight because of the contrast applied to them against other elements like space, high saturated packaging color of the packets. The application of such a contrast with the help of copy on the left helps us to understand that the website sells packaged foods. And secondly, the green button is also the one which gets our attention after the products, so what we see is how the designer is quickly persuading/helping the viewer to understand what the website and what should they do next by excluding the trivialities.

放在右邊的產品是第一眼引起我們注意的產品，因為它們與其他元素(例如空間，包裝的高飽和包裝顏色)形成鮮明對比。 在左側復制的幫助下應用這種對比可以幫助我們了解該網站出售包裝食品。 其次，綠色按鈕也是吸引我們關注產品的按鈕，因此，我們看到的是設計師如何快速說服/幫助觀眾了解瑣事，從而幫助他們理解該網站以及下一步該做什么。

There are two navigation bars in the first slide which I personally think it’s complex but let’s see the application of similarity in both. In the first, the black bar on the right we see four sets of icons sharing similar primitive features like color, font size, icon style, proximity, an alignment which makes us perceive that this set of icons belong to one group and performs a similar function like getting clicked and going to next page.

第一張幻燈片中有兩個導航欄，我個人認為這很復雜，但讓我們看看兩者的相似性。 首先，在右側的黑條上，我們看到四組圖標具有相似的原始特征，例如顏色，字體大小，圖標樣式，接近度，對齊方式，這使我們感覺到這組圖標屬于一組并執行相似的操作功能，例如單擊并轉到下一頁。

3)Coursera (3) Coursera)

You must be able to figure out the first attraction of images and button in web banner here if you’ve read the examples above. Let’s see contrast particular sections like on the top bar, on the extreme right side there are text ‘login’ and a button ‘join for free’. If you notice this area only, you’ll notice that the button is the one with high contrast as compared to the ‘login’ text and the designer wants the viewer to see it first. And I think they did this because they must be getting new visitors more than returning visitors, and new visitors are more likely to sign up first than log in if returning visitors were they could have reversed the situation.

如果您已閱讀上面的示例，則必須能夠在此處找出圖像和Web橫幅中按鈕的第一個吸引力。 讓我們看一下對比特殊的部分，例如在頂部欄上，在最右側，有文本“登錄”和按鈕“免費加入”。 如果您僅注意到此區域，您會注意到該按鈕是與“登錄”文本相比具有高對比度的按鈕，設計者希望觀眾首先看到它。 我認為他們這樣做是因為他們一定會吸引更多的新訪客，而不是回頭客；如果回頭客可能扭轉了局面，那么新訪客更可能會先注冊而不是登錄。

Now, the similarity in not-similar here, after the banner we see a row of organizations logo like Illinois, google, duke though they all have different primitive features they all are still perceived as one part of the group — WHY? Because of their constant invisible proportion of size, they all have similar optical heights and proximity among them. And secondly, the text above this row states that these are all universities and companies which make them appear as one part of the group.

現在，這里的相似點并不相似，在橫幅廣告之后，我們看到一排組織徽標，例如伊利諾伊州，谷歌，公爵，盡管它們都具有不同的原始特征，但它們仍然被認為是該組的一部分-為什么？ 由于它們的尺寸始終保持不可見的比例，因此它們之間的光學高度和接近度都相似。 其次，該行上方的文字指出，所有這些都是大學和公司，它們才是大學中的一員。

4)Bookmyshow (4) Bookmyshow)

Particularly in web design/development where things can be controlled after some seconds or by a click of an action, designers/developers need somethings to be done first before than anything because this thing is going to determine the next things for the viewer.

尤其是在網頁設計/開發中，可以在幾秒鐘后或通過單擊某個動作來控制事情，設計師/開發人員需要比其他任何事情先做的事情，因為這件事將為觀眾確定下一步的事情。

For example, in the above, the website needs to know the location of the user so that they can show the upcoming events/movies in that location only and that’s how the content is decided based upon that metric of location. So, to perform these designers show a popup box in front of the viewer when they enter a site and ask them their question like location (did in the above )and blocks about the remaining content of the site in that time by implementing a transparent grey layer on it which makes the viewer understand that they need to fill the location metric in the popup box to get ahead and see the full content. Designers are only able to do this by application of contrast, in the above website we can see how the location metric box contrasts with the content covered with a transparent grey layer, popup box is acting like figure here and content is acting as a ground.

例如，在上文中，網站需要知道用戶的位置，以便他們只能在該位置顯示即將發生的事件/電影，這就是根據該位置度量確定內容的方式。 因此，要執行這些設計器，當他們進入網站時，會在查看器前面顯示一個彈出框，并向他們詢問其位置之類的問題(如上所示)，并通過實施透明的灰色框來阻止有關該網站當時的剩余內容圖層，使查看者了解他們需要在彈出框中填寫位置指標才能繼續查看完整內容。 設計師只能通過對比來做到這一點，在上面的網站中，我們可以看到位置度量框與透明灰色層覆蓋的內容如何形成對比，彈出框在這里的作用類似于圖，內容在作為地面。

In the popup box of the above design, the row of icons shows the application of similarity at work in terms of — stroke weight, optical height, font, font size, font weight, font color, icon color, proximity.

在上述設計的彈出框中，圖標行顯示了相似性在工作中的應用，例如筆劃粗細，光學高度，字體，字體大小，字體粗細，字體顏色，圖標顏色，接近度。

5)球系統 (5) Ballsystem)

There’s a saying — Nothing attracts attention like red color. In this website when you click on the menu — a red circle pops up and this list of menu list appears. This circle get all of the attention in the composition because of its primitive features like red color, big shape. The color contrast with the background black color and the size contrast with all the small shapes/elements lying around — the shape is so big that the eyes unconsciously keep getting attracted to it — thus making the objective of seeing the menu when the menu button clicked, complete. Which makes me realize that this is one of the best application of contrast done here.

俗話說：沒有什么能像紅色那樣吸引眼球。 在此網站上，單擊菜單時-會彈出一個紅色圓圈，并顯示此菜單列表列表。 該圓圈由于其原始特征(如紅色，大形狀)而在合成中引起了所有關注。 顏色與背景黑色形成對比，大小與所有周圍的小形狀/元素形成對比-形狀是如此之大，以至于眼睛在不知不覺中不斷被其吸引-因此，當單擊菜單按鈕時，可以看到菜單，完整。 這使我意識到，這是此處進行對比的最佳應用之一。

Coming to Similarity, the list in the circle has the same font, font size, leading, a color that shows the application of similarity at work. But I think the representation could be better here as after ‘Sustainability’ there is no bar but a new line and which have the possibility of perceiving the next text ‘business units’ as part of the ‘Sustainability’ which is not actual, these both are independent items. There could be either dash like there’s between ‘Company’ and ‘Sustainability’ or something else could be done to make the differentiation. You can only see this distinction when you hover on a certain item — as other items will get translucent and the item primitive feature will remain the same, but only when you hover.

出于相似性考慮，圈子中的列表具有相同的字體，字體大小和前導，該顏色顯示了相似性在工作中的應用。 但是我認為這里的表示可能會更好，因為在“可持續性”之后沒有任何障礙，只有一條新的線，并且有可能將下一個文本“業務部門”視為“可持續性”的一部分，這是不實際的，這兩者是獨立的物品。 在“公司”和“可持續性”之間可能有些破折號，也可以采取其他措施來實現差異化。 當您將鼠標懸停在某個項目上時，您只能看到這種區別-因為其他項目將變得半透明，并且項目基本特征將保持不變，但僅當您將鼠標懸停時才可以。

In Visual Design, it’s critically important that we some things to be different and the same. This is one of the building blocks of making a design, deciding what should stand out and whatnot. It’s like deciding which family photo of you should stand out on a wall with other similar photos. You’ll always see the application of contrast and similarity together because neither exists without the other.

在視覺設計中，至關重要的一點是我們之間的某些事物必須相同和不同。 這是進行設計的基礎，決定什么應該脫穎而出，什么不決定。 這就像決定您的哪張家庭照片應與其他類似照片一起站在墻上。 您將始終看到對比度和相似性的應用，因為兩者之間沒有一個就不存在。

The way we apply contrast and similarity creates visual understanding, the hierarchy of information, eye draw and flow, and compositional balance — the topics which we’ll get to know incoming articles in the same series — Principle of Design.

我們應用對比和相似性的方式可以創建視覺理解，信息層次結構，吸引眼球和流動以及成分平衡(我們將在同一系列中了解即將到來的文章的主題)-設計原理。

Originally published at https://charchitgarg.com on April 13, 2020.

最初于 2020年4月13日 在 https://charchitgarg.com 上 發布 。