Designer's Magic Wand: Gestalt principle

Source: Internet
Author: User
Tags continue

Gestalt principle-graphic and background, close, similar, closed, continuous, simple, balanced

Gestalt psychological discipline is an important theory in cognitive psychology, which has already had a great influence in visual design. If you go into the principle of gestalt, it may take a long time to learn to understand, as interactive designers and interface designers, in fact, as long as the understanding of the meaning of these principles and the use of methods, you can guide and support their own design.

Let's talk about my own understanding of these principles:

Graphic and background principles

--Perception helps us to separate the graph from the background. The greater the contrast between the graphic and the background, the more obvious the shape is, the more easily the graph is found.

Legend: When the white box is larger and bigger, it gradually retreated to the background, and the orange box from the background gradually changed into a graphic. Through the area, color, contour and so on, we can better grasp the relationship between the graphics and the background.

Example: The text of the signature is grayed out and the background is reduced, which makes the signature document more close to the background than the nickname and the Avatar, and plays a weakening role.

Proximity principle

The parts near the distance (position) tend to form the whole. This is the simplest and most commonly used principle.

Legend, the perception is more inclined to realize "3 sets of Circles", rather than "6 circles":

One of the simplest applications: a 6-row button looks a bit more, and "over" is also mixed in it, the distance of 6 buttons to separate a little, you can split the button into two groups, thus resolving the problem.

In another case, the product wants to add a share button to the certificate panel. The interactive suggestion button is placed in the certificate, because the certificate on the increase of the button is prone to damage the original overall sense of the certificate (thus may want to modify the certificate), and the Share button may be in addition to the certificate of multiple graphics, resulting in the button's fitness requirements to become higher:

Solution 1--Requirements (Please ignore button color and texture, this is not visual manuscript)

Scenario 2--interaction Scenarios (planning concerns this scenario will cause buttons and testimonials to appear to be not a whole in the more-spent game interface) (Please ignore the button color and texture, this is not a visual manuscript)

Actual effect-or think "share to friends" is for the certificate, right? This is the "power of proximity" (if you go through the program and add some shadow to two pieces, it's more holistic--the principle of similarity)

Similarity principle

--In one aspect the similar parts tend to form the whole.

The legend is more conscious of the "3-group Circle (proximity)" or "2 circles (similar)" rather than "6 circles":

Example: Think about it, if the second row of buttons is also color ... ^_^

Example: Use a similar style to cause perception to be grouped by itself. This principle has actually used a lot, not to say more.

Closure principle

The parts of each other, which form the closed entity, tend to form the whole.

Legend: Perception is more inclined to realize "1 circles and one point" instead of "9 circles":

Example: the left and right two programs which look more concise and vivid?

Continuous principle

In the perceptual process, people tend to make the straight line of the perceptual object continue to be a straight line, so that the curve continues to become a curve.

Legend: Perception weakens the "block" of these divisions and still realizes "straight, round, and curved".

Example: The most common form is the table:

Sometimes in order to simplify the interface, some separator lines are removed, the sense of "continuity" weakens, and the "proximity" becomes stronger, making the perception more conscious of the "column", and the user will naturally want to think of it as "the line", which leads to uncomfortable feelings when the reason and the emotion run counter. At this time we usually establish a "continuum", a "guide, learning, reading" The role of the bar background, the establishment of a "continuous law", when the awareness of this law, uncomfortable feelings will be greatly reduced.

Of course "continuous" we can also be interpreted as "when the perception of the easy discovery of a visual law, tend to actively to the subject to continue to follow the law," such as "a row of points"

Simple principle

The parts of a simple graphic feature with symmetry, regularity and smoothness tend to form the whole.

Legend 1: Perception is more inclined to realize "1 symmetrical patterns" instead of "7 symbols":

Legend 2: The following four graphs of cognitive difficulty is approximately "round ≈ square ≤ star < polygon".

In my opinion, the simple principle can also be explained as "the same as the law in the past, similar objects are easier to recognize", of course, there are "continuous principle" of the perceptual continuity.

Equilibrium principle

Perception tends to seek order or balance in the visual combination.

Legend: Does it feel very uncomfortable? Because perception will think that the great circle is heavier, and the graph gives us the opposite of understanding and perception.

If changed to this, it seems a lot better, because "hollow" reduces the "weight" of the great circle.

Example: in Fig. 1, perception gives us the feeling that "a whole villain is standing on the background (the qqgame is the Avatar)", and Fig. 2, with no sign of "dismemberment", breaks the whole sense of fig. 1 and feels uncomfortable. Figure three makes a window that allows characters to come out of the window and hide a part of the body, subtly satisfying the sense of harmony of perceptual requirements.

Article Source: Tencent GDC

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.