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?.

因此，答案在于我们人类大脑和眼睛的科学，特别是视觉处理。 看到科学与设计何时融合在一起总是很有趣的，不是吗？