Briefly explain the reasons for this topic:

Why to choose the principle of formatting

Gestalt principle is a design principle in the design psychology. We are very familiar with the design of the 4 principles “alignment, repetition, contrast, intimacy” in fact is another summary of the Gestalt principle. To a certain extent, since the advent of the graphical user interface, the Gestalt principle has been widely used in the field of design and has been deeply rooted in the hearts of the people. Therefore, it is necessary for me to share the Gestalt Principle in a series of articles.
Why do you choose Apple Music

A friend asked me why all the examples in the Basic Rules of Interactive Design series are foreign products. I want to say, the answer is very simple, because these products are “very designed” and they all reveal a very strong simple design style, and they are in place for the design languages of each family. Frankly, many domestic products are also Nice, but the relatively “pure” product design can better help us understand and recognize the design rules. In this article, I recommend Apple Music, a product that meets the requirements of “I just want to listen to music”.

1. what is Gestalt Psychology

Gestalt psychology was born in 1912, and a team of German psychologists tried to explain how human vision works. They observed many important visual phenomena and cataloged them. The most fundamental discovery is that human vision is a whole: our visual system constructs the structure of the visual input automatically, and perceiving the overall and unified shapes, shapes and objects at the nervous system level, instead of seeing the unconnected edges, lines and regions. “Shape” and “figure” are Gestalt in German, so these theories are also called the Gestalt principle of visual perception.

(PS: There are many illustrations of Gestalt psychology on the Internet. Interested friends can DIY, and I won’t describe them too much here.)

2. The application of 7 big rules of Gestalt in Apple Music

1. similarity

Similarity: Elements tend to be perceived as a group if they are similar to each other. This also means that elements with the same function, meaning, and hierarchical level should be visually matched.
We tend to treat elements that are similar to each other as the same group. Similarity helps us organize and categorize the element objects in the page and associate them with specific meanings or functions. There are different ways to make elements considered similar, and these methods include similarities in color, size, shape, texture, size, and direction. Interaction Design Foundation
Apple Music: the elements in the list of songs, the elements in the playlist have the same functions, meanings, and logical hierarchies, so the visual form satisfies the law of similarity and is highly unified.

2. accessibility

When objects are close to each other, they tend to be perceived by default in the same organization. Specifically, the relative distance between objects affects how we perceive whether or how they are organized together. Objects close to each other (as opposed to other objects) appear to belong to a group, whereas those farther away are automatically grouped out.
Apple Music (iPad): in the album page, album basic information, playback buttons, and additives more buttons are kept close to the internal space to facilitate users to familiarise themselves with the functions of the same kind and to complete the interaction.

3. continuity

Vision tends to perceive continuous forms rather than scattered fragments.
Our thoughts prefer the path to the least resistance. Continuity helps us interpret direction and motion through composition. It occurs when aligning elements, which helps our eyes move smoothly through the page and helps improve readability. The continuity principle strengthens the perception of grouping information, creates order and guides users through different content segmentation. Interaction Design Foundation
Apple Music: on the rankings page, the operation buttons associated with the list of songs or albums appear on the right side of the screen, arranged from top to bottom, not only in the visual continuity, but also in the click hot zone.

4. closure

The vision automatically tries to close (or fill) the empty/incomplete image, and perceives it as a complete object rather than a broken one.
In a word, when a graph is a incomplete figure, the subject has a tendency to close it, that is, the body can fill the gap by itself so that it can be perceived as a whole.
Apple Music: in the first screen for you to recommend, browse, and broadcast the horizontal direction of the page, there is still element information not fully displayed in the horizontal space of the page with the fragmentary element shape content. After the user sees the “incomplete” shape, it will automatically fill the rest of the shape.

5. graph / ground rule (subject and background rule)

Graph/ground rules show that the user interface needs to distinguish the subject object from the background.
This principle points out that when we perceive things, we always automatically divide the visual area into subject and background. Once a part of the image matches the background features, our visual perception will not take them as the main focus. In the user interface design based on this principle, we can turn some parts of the image into the background by some processing, so that more information can be displayed or the focus of the user is transferred. Interaction Design Foundation

Subject refers to all the elements that occupy our main attention in the interface, and the rest of the elements become the background at this time. When the subject overlaps with the background, the human vision is more inclined to consider the small objects as the main body, and the large objects are regarded as the background, so we can show the different levels of content we want to pass through the relationship between the size and the graph.

Apple Music: in the music play page, on the white background, there are very prominent subjects: album cover, progress bar, play control button and so on. In addition, when the user plays control, the size of the album and progress bar will change, which is very distinct to the background level and is very consistent with the iOS design language. .

6. Pr h gnanz (or simple law)

Pr gnanz is a German word meaning “succinct”. Human eyes prefer to find simple and ordered objects in complex shapes. When we see complex objects in a design, the eyes are more willing to convert them into a single unified shape, and try to remove the unrelated details from these shapes to simplify the objects. Here, I have to mention the golden phrases in the field of design.
Less is More

Simple things often bring people more enjoyment. Ludwig Mies Vandro, a famous architect in the 1930s
Apple Music: if the page needs to guide the user to do something, Apple Music will highlight the functional buttons that are very clear to the user’s goals; in addition, the background of most artist photos is almost pure color, aiming to highlight the image of the artist.

7. common destiny law

The first few Gestalt principles are for static graphics, where the common destiny is for moving objects. Common destiny is related to the similarities and proximity that precede it, and affects whether our perceived objects are in the same group. Common destiny points out that objects with a common form of motion are perceived as a set of interrelated objects.
Apple Music: When you complete the selection of favorite music categories and artists, the selected objects are “loaded” together with the buttons below.


Whether it is the Gestalt principle, Nelson series or the 7 laws of interaction, in fact, the application of these basic principles is not independent. On the contrary, they are highly related and complement each other. We need to use these basic rules to make a combination of the basic rules according to the different types of demand and the user field.

(Note: The copyright of this image is owned by Apple Music)


1 thought on “Take Apple Music as an example to explain the 7 principles of Gestalt”

Comments are closed.