Article: Before breaking the rules, be sure to understand these
From the public number: Study set
So let's first understand what the principle of similarity is. The similarity principle tells us that elements with the same attributes are more associative than elements that look completely different.
As shown in the figure, we will subconsciously think that there is a certain connection between circles and circles, they have the same contour characteristics, of course, squares are the same. Visual similarities help us to simplify the information we see in front of us, while also facilitating the brain's understanding. Similar colors are more easily associated with us than in other ways. Even if the shapes are different, they are seen as a whole with an association.
Similar to the proximity principle mentioned in the previous section, the similarity principle also has the effect of correlation and differentiation. But the principle of similarity is not affected by location, and associations can still be created even at great distances, which is completely different from the principle of proximity.
Size is another effective tool that we can use to create similar properties. Even if all shape features are the same, the similarity of sizes makes larger shapes stand out and form a combination with each other, and smaller shapes naturally become another combination. In addition, similar directions can also be created. We only need to consciously create similarities to relate elements to each other.
In fact, the application of the principle of similarity is very common, for example, a simple example, games like Lianlian Watching, take advantage of this physiological phenomenon of distinguishing correlation in people's vision. Icons with the same outline and color are easier for us to spot, and can easily catch our attention even if they are far between them.
On the pitch, no matter how the position of the players changes, we can identify which team they are by the color of the clothes.
Conversely, the principle of similarity certainly helps us to distinguish between irrelevant content. Let's make a game together, can you find Teacher Xu Jinjiang in a short period of time?
Of course, if you think it's too simple, we can also increase the difficulty...
So, here we can initially summarize the content of the similar principle, which means that when the human eye recognizes the surrounding environment, it will subconsciously classify visual elements with similar appearance into one category, and this cognitive process will not be limited by distance. So knowing this, how can we apply this visual principle to design? Next, I will lead you to find this answer.
Don't underestimate the principle of approximation. Recognizing this visual organization mechanism can effectively help us improve our design. By summarizing and inducting, we try to further divide the approximate principle into functional divisions. I also hope that everyone can absorb it faster and understand the function and role it plays in the design.
The principle of approximation has four main functional properties in design applications. So what are they? First of all, the first function is to establish connections, that is, we can use this feature of the approximation principle to easily establish association properties in the layout.
Let's take an example. Imagine how quickly you can tell the same team out of a crowd? In fact, the answer is also very simple, we can use the principle of approximation to add similar attributes between players, so as to connect them. So, for example, we can let the players wear the same hat, so that the purpose of the association is achieved?
In the same way, how can we distinguish between paragraphs in the face of the text in front of us? Think about the crowd example, and maybe you already know the answer. That's right, by adding similar attributes to the beginnings of each paragraph, we can easily separate paragraphs.
For example, add a bullet in front of each paragraph, which is like a hat in the crowd, connecting the heads of each segment to each other. It is precisely because of the addition of bullets that we can distinguish where they are located in the first time.
Interestingly, in textual arrangement, this common property can be arbitrary. For example, it can be a number with a color.
Or a completely invisible space, where we only need to indent all the segments inward and we can create the same property.
Of course, this is also a paragraph differentiation method that is used more frequently in daily arrangement.
There is also a form of increasing the distance above each segment, which is also a relatively common practice. It applies both the principle of proximity mentioned in the previous section and the properties of approximation in it.
Page numbers are one of the essential elements in book design, and its main function is to associate pages in addition to being easy to consult. Elements such as headers or page numbers often appear in the same place in each page layout, and because of this, no matter how the content in the layout changes, they also appear to be related as a whole.
As with the distinction in the previous paragraphs, the invisible space is also very important in the layout. For example, if we want to place a square element in the center of the layout, its size and position will inevitably affect the surrounding blank shape. In this case, we can establish an association by repeating the size of the space. By dividing the layout into smaller spaces, we can control the white space more precisely. After visual inspection, it can be seen that the size of the square is very similar to one-ninth of the size of the page, and it is not centered. So since it is very close, let's just normalize it to the same proportion as the surrounding space. After adjustment, the positive and negative shapes in the layout show the same proportional relationship, that is, they have a certain visual correlation.
In the layout arrangement and logo specifications, this spatial approximation method will be used to standardize the layout. The processed layout is simpler and easier to understand, when you find that both visible and invisible elements in a layout appear to be related. Then there is no doubt that the principle of approximation must be at work.
The connection of the elements in the layout is also these details that play a key role, the same elements will make people feel unified, and the similar attributes also make the variability in the layout appear more harmonious.
So what role does the principle of approximation have besides helping us to make connections? Next we will continue to study the second functional property, which is to create order and law.
This is not difficult to understand, for a simple example, if we compare messy rooms to neat rooms, what is the difference between them? Obviously, the same objects in a tidy room will be sorted and placed, which enhances the commonality in the overall space.
The military platoon is another notable example, where people wear the same uniforms and even move the same. The result is a rule and order. This is precisely the principle of similarity at work.
Since repetitive patterns have no concept of edges, we can often see similar designs in design scenarios where the size of the edge of the page is uncertain. For example, the wallpaper in our home is a typical example, the manufacturer can not estimate the size of the wall of each room, so simply use repetitive pictures to flatten, so that the problem is solved.
The composition of the sense of order is also common in daily life, such as backpacks, packaging, throw pillows, etc. are used in similar patterns. It will give a gorgeous and complicated visual impression.
Of course, we can also create "differences" in the order. In addition to the function of "obsessive-compulsive disorder", this kind of picture can also allow us to easily establish focus. When most of the layout is approximate or identical elements, that difference is infinitely magnified, and we can easily notice them, which is why the application of this technique in graphic design is also quite common.
Now that we have learned about relation and order, let's learn the third property of the principle of approximation. That's rhythm and rhythm, and you can understand it as a law with hierarchical variations.
The same repetition, although it has a sense of order, can sometimes be tiring. But there are too many changes, and it will appear particularly messy and annoying. Complex graphics can also be difficult for people to understand. Is there any way to combine change and order? The answer is yes, we can be somewhere in between, on the basis of variation to enhance the similarity between elements. And this process produces the key to rhythm and rhythm.
If we think about the beat of the music, is there a repetitive loop while changing?
If you hear a static sound, it's not music. Just like in the picture. Is it as if you hear a burst of noise across the screen?
Rhythm and rhythm are also very important in typography design, for the content itself, different levels of information need to reflect enough visual differences, and the same level of information, the appearance should also look the same
Let's take the layout of this book as an example, let's analyze what rules and changes its composition has. First of all, important information, we can see that the green signs in the picture are all the same level of content. Since it is important, it should be the most eye-catching in the layout, so a larger visual area is essential. Then secondly, it is relatively sub-important information, that is, the content marked in blue on the screen. The last thing that's left is, of course, other information. The lines serve both the purpose of decoration and provide the role of division. The page number at the bottom also has the function of embellishing the layout in addition to supplementing the information.
We are coming to this layout, the font size and color of all the main headings are consistent, and similar features help people quickly identify the next heading. The visual area of the picture also adopts the same principle, the primary and secondary are clear, and the picture area under the same level is almost the same.
So here we have one last feature left untouched. It is visual guidance, and like the proximity principle, the proximity principle also has a guiding property.
Like street lights on the street, directivity occurs when elements with the same attributes appear in the form of gradients. Direct our gaze further, or closer.
These two posters take advantage of this. We can clearly see that the repetitive figure on the left gradually becomes smaller, leading the gaze to the title; similarly, the poster on the right points out the subject of the content by changing the text from small to large, directing the line of sight to the bottom of the wave painting.
Of course, the guidance method in the principle of approximation is not only that, we have four motorcycles here with corresponding introductions. Add five similar lines horizontally between the image and the text, which also forms four parallel channels, and the line of sight moves horizontally under the division of the lines.
Of course, you can also use the principle of proximity to make the content-related elements close to each other and the irrelevant content far away from each other to achieve the purpose of guiding the line of sight. And the text is added to the bottom of each car, which is also a kind of similarity, like the hats in the crowd, and they are effectively organized.
Remember that the principle of approximation is not limited by location? We only need to add a number near the motorcycle and the same number on the corresponding content below. In this way, the two sets of content are easily linked together, and the purpose of the guide is achieved.
The invisible space is also an effective way to establish associations, and the position of the top space can be directly identified with graphics, and the association can also be established intuitively.
Of course, we can also use the correlation effect of color, the trick is to find those properties that can be used as common features, and use them, and the line of sight will move back and forth on the associative elements according to the principle of approximation.
Let's do a case study, we virtualized a "Lotus Photography Exhibition" project, the above is the photo and copy information. First of all, we determine the structure of the elements in the layout, and arrange the position relationship of the elements according to the visual center of gravity. Next, replace the picture and arrange the subjects in the photo in the appropriate positions. Second, we prioritize text messages by importance and replace the intended sketch.
Next, we put a decorative line for the text group, so that the information appears more prominent, and at the same time, it also makes the text combination look fuller. Add an icon of flowers above the group to make the group of words more relevant to the body. Add a color to the composition to make the petals more closely connected to the text combination. So at this point, this layout is completed.
Above we have introduced you to four properties related to similar principles: association, order, rhythm, and guidance. So we'll move on to another visual property related to the principle of approximation, which is perceptual constancy. What is perceptual constancy? It refers to the fact that our brain has maintained a relatively stable state in the process of cognition, and even if the objective conditions have changed within a certain range, we can still clearly identify things.
Let's take a few examples, for example, when you see this picture of Monroe in the picture, you will have a certain impression of the picture.
No matter how the picture has changed, our perception of it will remain the same. It is precisely because our visual perceptions are constant that they are not treated as other new things.
In an example, when you look at the doors in front of you, you'll see that each of them comes with the same button. When you click on one of these buttons, the answer is that the door is opened. Then we will associate the other three buttons according to experience, thinking that just clicking on the red button will open the door, even if we see the same door a long time later.
In the same way, if we learn to realize that a certain mushroom is edible, then the impression of the mushroom will remain in our minds. When you see a similar-looking mushroom again, we compare it to the mushroom in our impression. Even if their angles, shapes, and other appearances are different, due to the existence of perceptual constancy.
We can naturally identify that they belong to the same class of edible mushrooms.
Perceptual constancy can be divided into different property changes such as size constancy, shape constancy, color constancy, distance constancy, and velocity constancy.
But you just need to know that our brains have the ability to recognize the same objects. For example, we see this graphic now. No matter how it changes, we can recognize that they are the same.
You may come here and ask, what is the use of us learning such knowledge? In fact, all the design principles are a summary of various phenomena. Only by understanding how they work can we notice its presence in the design.
Of course, we can also consciously break this perceptual constancy. For example, in the picture, from the first point of view, it looks like the shape of a bicycle, but from another point of view, it becomes a different look.
We can still use it in design, and when we need to relate two images to each other, we don't need to choose a photo that is exactly the same. Because of the existence of perceptual constancy, whether it is a change in shape or a change in features, we do not think of it as something new.
So even if the angles of another photo are not the same, we can treat them as the same product. This not only adds to the variability of the layout, but also makes the display forms between products more abundant.
We're working on a simple case, which is an introductory interface for a drone. We threw both image information and text messages into the page. To make the picture more eye-catching, here we add a blue color that symbolizes the sky. The picture is then blood-treated and placed in a position where the layout approximates the golden section; the text information is also divided hierarchically, and finally arranged in a blank space on the right.
Add relevant secondary information and decorative elements to other areas of the layout to enhance the jump rate between elements and make the layout look richer and more interesting. Absorb the color of the picture and fill it with decorative lines to form an echo between the pictures and texts. Because it is to explain the power system, we can also extract the wings individually. When people see the graphic on the right, they can naturally associate the details with the photo on the left.
Because of the existence of perceptual constancy, we do not need to use the exact same image, we just need to let people see that it is the same part. Then this section is completed here.
So at this point, I believe you already have some understanding of the similar principle. Elements with similar characteristics are associated with each other to make it easier to understand the information. Colors exhibit stronger similarities than shapes and sizes. The relevance embodied in the principle of approximation is not affected by distance, but it also has the role of order, rhythm and guidance. In fact, the principle of approximation is not far from us, on the contrary, its application in design is quite common, so let's take a look at some of its application cases in design.
Let's look at this set of posters, where the similarity of colors runs through the entire layout, correlating different key messages together.
This layout also uses the correlation effect of color. White added wireframe, yellow added wireframe and pure black text, three sets of elements interspersed with each other to form the layout effect we see.
What about this section? The bottom text body and the main title are related and echoed because of the same color.
In this layout, although the text information is not close in position, it uses the same glyph and font size. He made them have the same common features between them. So these two passages are naturally linked together.
The same icon appears on the layout and on the product, and such graphical associations are also very common.
In this layout, although the shape of the chair is different, due to the relationship of perceptual constancy, we can still see it as the same chair.
What about this set of layouts? When people see a large circle icon in the center of the layout, they will naturally look at similar but smaller graphics. This creates an interesting visual guidance process.
This layout also uses the association of colors.
All text adds the same angle of inclination, because even tilting doesn't look messy. This is precisely the sense of order produced by the principle of approximation, which makes each element have the same properties.
Isn't that practical? As long as you understand the principle of approximation, it will become a guideline in our design, and when you want to make certain elements related in the design process, you don't need to think hard. So by this point do you think this article is over? If you look at the progress bar, you know, we still have the "common destiny principle" mentioned in the opening paragraph that we did not talk about, and yes, we will introduce two principles to you in this lesson.
It is closely related to the principle of approximation, but it is different, so let's take a look at the principle of common destiny.
The name of the principle of common destiny may seem strange, right, so what does it really mean? The main feature of the principle of common destiny remains relevance and distinction. This is similar to the two principles we have discussed earlier. However, the difference is that the main condition for the proximity principle to achieve association and distinction is the position relationship. The key to the similar principle that we are mainly talking about today is the common characteristics between the elements. What about the principle of common destiny? The main conditions on which to rely are movement and direction.
It mainly means that elements moving in the same direction and at the same speed will be identified by the brain as a group of elements when all other conditions are the same. No matter how far apart these elements are, or how different they look, if they move or change together, then they are considered related visual units.
This phenomenon is also widespread in nature, whether it is ants, geese or schools of fish in the sea. When these individuals move in the same direction and speed, we subconsciously see it as a complete combination.
Movement is also a way of contrasting, relatively speaking, all kinds of cars with very different appearances only need to move in the same direction and have similar speeds, then they will be regarded as a complete set of visual elements.
For easier understanding, let's take a look at a short video.
This is a classic example of the application of the Common Destiny Principle in a graphical interface, and it is also a group function that we use almost every day.
What other examples are there? We all know that the browsing direction of the web page is scrolling up and down, so while scrolling, some elements will remain still, while other elements will move with the scrolling. This is also a method of distinguishing content, which also applies the principle of common destiny.
In the app of the mobile phone, we will also use the principle of common destiny, through the addition of animation, we can easily distinguish which parts are in the same group and which parts belong to another structure.
In this day and age, the most people face every day is the mobile phone screen. In fact, the movement of each set of icons on the screen is a typical common fate.
Today, we have talked about two major points of knowledge, which are the principle of approximation and the principle of common destiny. So in order to make it easier for everyone to understand what we are talking about today, I will lead you to make a practical case together. In this process, I also hope that you can think about the problems with the content we have talked about today and observe the layout from a new perspective. So let's first look at what's in it.
This is a webpage that basically introduces this security series robot SQ2.
First, we plan the proportions of the page, determine the screen width and height of a 16:9 screen on the first screen, and then add vertical gridlines. At this point you might ask? Why only the vertical grid? This is due to the fact that web design and traditional printing are different, and its height is uncertain, so we only need to standardize the vertical grid lines. The first screen of the web page is naturally arranged to introduce the model of the robot. We can draw inspiration from the brand's logo, and here we have chosen a hexagon that is elongated at a 45-degree angle as a visual cue throughout.
This is the second picture of the drop-down page, and the main title still inherits the hexagonal line, which echoes the main vision and also plays a role in emphasizing the hierarchy.
Here we extract three key points, still using the hexagonal setting, combining the icons and information with illustrations into three independent pictures.
Faced with abstract data, people often feel disgusted. The visualization of data is therefore particularly important. It will help people understand the information more. The same blue color is also a key element in creating associations.
Below the whole, we can arrange three link buttons to make it easier for people to learn more about other content.
At the end, we arrange a real-life photo to reflect the complementary role of robots in the copy to the population shortage.
Finally, the company profile, the title part still follows the same style of appearance, the rest of the information only needs to be arranged under the same grid system, the position between the information will produce a sense of unity and relevance as a whole.
So at this point, this web design is basically complete. The hexagon's diagonal lines establish an association between the titles, echoing the main vision above. So let's look at how the elements are grouped under the influence of a common destiny. When all the elements move in the same direction, all the elements in the picture are associated together. This is where the principle of common destiny comes into play.
Finally, let's summarize today's content. Our brain will look like the same elements into a category, they will establish a relationship with each other, just need to add similar attributes on top of different elements, we can easily create a connection; at the same time, those similar common attributes can form a rule, rules and order is the basis of design, only the changes made on the order can be more prominent; in addition, the unchanging repetition will cause visual fatigue, so on the basis of maintaining commonality, we need to make corresponding changes, in the text arrangement Hierarchy is typical of this sense of rhythm; establishing associations also means that it has the function of guiding the line of sight.