本文探讨了图片相似度对比的基本原理，源自uxdesign.cc的文章，讲解了对比和相似性在设计中的应用。
图片相似度对比原理
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:-
在有意识的思维被干扰之前，由无意识的思维自动扫描和识别的元素特征称为元素的原始特征 。 这些是人们可以用来使元素在合成中占主导地位，失去其主导地位或使元素看起来相似的功能。 元素的主要原始特征更可能被播放来应用对比度和相似性：
- Size 尺寸
- Shape 形状
- Color 颜色
- Texture 质地
- Position or alignment 位置或对齐
- Motion 运动
- Saturation 饱和
- 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:-
许多格式塔原则都谈到以直接或间接方式显示对比，从中我们仅讨论其中两个：
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 —
在设计任何类型的构图时，我们需要确定图形和背景。 这种关系有助于为合成中的所有其他内容设置上下文。 我们需要确保人物和地面以正确的方式彼此形成对比，以使观看者在确定哪个是哪个方面没有问题。 进一步了解相同的内容-
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 上 发布 。
翻译自: https://uxdesign.cc/principles-of-design-the-application-of-contrast-and-similarity-d87f261fb84f
图片相似度对比原理
扫一扫
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
