The application of Gestalt in page design

The application of Gestalt in page design

What is a format tower?

Gestalt Psychology was born in 1912 and is a team of German psychologists trying to explain how human vision works. They looked at a number of important visual phenomena and compiled a catalogue of them. One of the most fundamental discoveries is that human vision is holistic: Our vision system automatically constructs structures for visual input and perceives shapes, graphs, and objects at the nervous system level, rather than just seeing disconnected edges, lines, and regions. "Shapes" and "graphics" are gestalt in German, so these theories are also called visual perceptual Gestalt principles.

The most important form of the tower principle

Principle of proximity, principle of similarity, principle of continuity, sealing principle, principle of symmetry, principle of subject/background, principle of common destiny.

The principle of > Proximity

The principle of proximity is that the relative distance between objects affects how we perceive it and how it is organized together. Objects that are close to each other (as opposed to other objects) appear to belong to a group, while those that are farther away are automatically divided into groups.

As shown in the figure above, the circles in the left figure are closer to each other in the horizontal direction than the vertical distance, so we see four rows of dots, and the right side is four columns.

A case of proximity principle

On the two map from the different financial types of Web site indexing module, the first picture in the red key to mark the classification of the field, but people's visual habitual or will be listed as a group, and the actual display of the arrangement of behavior groups repel, users read when the unnecessary visual illusion. The same content, then figure 2 of the arrangement of the visual and Content grouping unified, as users, to find the content is more intuitive and clear?

This is the two groups of different objects, designers in the process of design to achieve the exact same, but due to the difference between the distance is clearly distinguished between two groups rather than one.

The principle of > Similarity

If other factors are the same, then similar objects seem to belong in a group.

Each dot in the graph has the same vertical and horizontal distance, but we habitually treat concentric circles of the same shape as a group

A case of similarity principle

The shape of each module is consistent, but the first color is different from the other, that is, can keep the layout neat and can make the user intuitively feel the gray content and green C-volume display is different functions.

Like, spacing, the content of the first area is obviously different from the other, so naturally we separate it into one group, and the others are divided into one group. Is it possible to arrange the layout of the active page according to this rule? and scratching your scalp. Do you want each module to be highlighted to classify these issues?

The same user registration page, is a solid color guide to the end or to the current implementation of the region special callout? Obviously the latter, people's vision will automatically classify the same fill color, and that special block will be stripped out. Designers, have you noticed the details?

Because of the different alignment, the visual will be the left word in Figure 1 parsing into a column, the right text box to parse into a column, it is obvious that users can easily use the illusion of vision.

Principle of > Continuity

Vision tends to perceive continuous forms rather than discrete fragments.

The left image we see is the Blue Orange two intersecting line instead of the four line segment with a dot, do you see the right picture is some scattered blue lines or IBM three letters? Of course it's three letters, and your vision intentionally organizes discrete fragments to form the whole.

Continuity principle Case

How do you feel after reading these four pictures? This designer figure is not positioned so that the user does not see the full content? This kind of composition not only does not affect the visual effect but increases the page extensibility, the visual intentional organization discrete element imaginary whole ability not to be underestimated. Still in the main image, such as narrowing all show in the page? Bold cut a corner of the main content to show enough, the visual impact is also stronger?

> Sealing principle

The visual system automatically attempts to close open graphics so that they perceive them as complete objects rather than scattered fragments.

Our visual system is so strongly inclined to see objects that it can parse an empty space into an object, so we see that the image above shows a circle rather than a line segment.

Sealing principle Case

In the work we commonly use the same shape overlay to display the item to enrich the picture, the scene achieves the actual effect.

The principle of > symmetry

We tend to decompose complex scenarios to reduce complexity.

We are accustomed to parsing the above graph into two simple symmetrical shapes, and the right two-dimensional geometry is parsed into three dimensional surfaces.

Case of symmetry principle

Still worrying about your special scene? Need to say that your button is too flat "not like a button"? The superposition of several faces, is not the above figure that looks high-end brim big stage effect?

> Subject/Background principle

Our brains divide the visual areas into subjects and backgrounds. The body consists of all the elements in a scene that occupy our primary attention, and the rest is the background.

When objects overlap, we tend to think of the small one as the subject above the background.

Subject/Background principle case

In the page design commonly used in the main display content "after" placement impression induction background, reached the transmission of information implied theme role. Encounter a demand content gray often more atmosphere, then the content of the regular arrangements, in the background is also a good deal of treatment?

Also often used to pop-up information on other content, as the user focus of the content, the new information briefly as a new body, relative to the new information in the replacement, pop-up can help users understand their environment in each other.

> Common Destiny

In relation to proximity and the principle of similar immortality, it affects whether the objects we perceive are in groups. Indicates that objects that move together are perceived as belonging to a group or related to one another.

The same spacing of the size of the color of the graphic, then visually will be moving together into a group of graphics.

The common destiny principle case

Motion legend can not be expressed in static graphs, only hint at a point in the work of the same group to convey information, give it a consistent pattern of activity to show the form. For example, the same function button hover effect, so that users do not know the same options. Folders that are selected when you drag a folder the background and trajectory are the most intuitive interpretation of the common destiny principle.

> Synthesis

In the visual scene of the real world, various Gestalt principles are not isolated, but work together, and each principle is used to consider whether the relationship between each design element conforms to the design intention. The designer is the first QA staff of his own manuscript, we can't make it everyone's praise but can do no wrong on common sense problem.