1. What is the Gutenberg diagram
The Gutenberg Diagram, also known as Diagonal Balance, was proposed by John Gutenberg, the inventor of Western movable type printing in the 14th century. The Gutenberg chart divides what is to be displayed on the screen into four quadrants:
1. Primary Optical Area (Primary Optical Area): At the upper left, the place where the reader notices first.
2. Final Optical Area: the lower right, the end of the visual process.
3. Strong idle area (Strong Follow Area): the upper right, less noticed.
4. Weak Follow Area: At the bottom left, at least noticed.
According to this picture, the reader's line of sight will naturally swipe from the upper left to the lower right, and each glance starts from left to right along a direction axis. This direction axis is a horizontal line composed of aligned elements, lines of text, or some obvious elements. Unless there is a special visual emphasis, the strong and weak idle areas are outside this reading path and can rarely be noticed. The Gutenberg diagram reveals a practical rule of visual trajectory: reading gravity is from top to bottom and from left to right. Of course, this rule only applies to readers who are used to writing in a horizontal form from left to right. If it is the reading habits of ancient Chinese people, it may not be applicable.
2. The practical application of Gutenberg diagram in design
The application range of the Gutenberg diagram is very wide, and the traces of the application of the Gutenberg diagram can be seen in almost all places involving visual design. According to the laws revealed by the Gutenberg diagram, the picture can adopt top and bottom structure, left and right structure, or comprehensive use.
Top-down interface design
According to the gravity of reading from top to bottom, the visual terminal is directly below the interface. Therefore, the general plot animation copy is at the bottom of the screen, as shown in Figure 1. The player glances down naturally after watching the main picture without too much thinking. If the plot animation copy is placed directly above the screen, the player will feel the difficulty of reading and ignore the subjectivity of the screen.
In the upper and lower screen structure, you need to provide the information that the player needs to predict before the operation at the top of the screen. The buttons that need to be operated are generally placed below, so that the player can make a choice immediately after reading the interface information. If the operation appears first, and then the pre-required information is provided, the cognitive cost is greatly increased, and players are easily confused.
As shown in Figure 3 "Fallout 76", the top of the interface provides the player's prerequisite information: reaching level 5 is allowed to fight with other players, which leads to the operation options below: choose to fight with allies / strangers / enemy, the small text below To supplement the differences between the various options, the entire screen is very clear according to the gravity of reading from top to bottom. If the prerequisite information-reaching level 5 is allowed to fight with other players and placed below the interface, then the player will first fall into doubt, and then see the bottom of the interface to understand the purpose of this interface.
As shown in Figure 5, the main body displays the player's current upgrade information. At the same time, the button below reminds the player to continue the upgrade. The player can judge whether to continue the upgrade operation according to the upgraded attributes and required experience. If the interface elements are transferred sequentially, as shown in Figure 6, the player needs to glance up and down and keep thinking.
Interface design from left to right
Since the gravity of reading is from left to right, in the interface design with left and right structure, designers generally arrange from left to right according to the visual hierarchy they want to highlight, in order to conform to the player's reading flow.
As shown in the character viewing interface of FIG. 7, the designer places the switching operation item on the left and the information display item on the right, and the player can watch in the reading order of switching character-character image-character attribute. If the arrangement order is the same as Figure 8: Character Image-Character-Switching Character, the player will understand according to this reading order, and it is necessary to read the character displayed by default before switching.
For games that have been operating for a long time, the display and stimulation of new products are in place, so there is no worry about paying.
Interface design for comprehensive use
By comprehensively using the Gutenberg diagram, the picture can be divided into several areas, and each area also satisfies the law of gravity. According to the law of diagonal balance (that is, the Gutenberg diagram), the reading terminal will stop at the bottom right of the display area, which is not difficult to explain why most of the current easy-to-use interface operation buttons are at the bottom right or directly below the screen.
In the interface for unlocking islands in Figure 9, it is not difficult to see that the reading gravity is from left to right, select the island on the left, and display the attributes and operations of the island on the right. In the area on the right, the text information of the island affairs is displayed above, while the bottom is the focus of this area: the operation to go to the island and stay in the current position. The final operating terminal of this interface is its reading terminal: the lower right of the interface.
In Figure 10, the player's first vision is the selectable transaction in the selected island, and the reading terminal is the selected island. When the player operates on a specific island, he needs to read back and forth, which is not conducive to the player's operating efficiency.
In the illustrated interface of "Dream World" in Figure 11, the left is the operation switching area, and the right is the information display area, and the reading order is also from left to right. In each area, the top is the selection switch, and the bottom is the corresponding page display. The check function of the pet decoration in the picture, as an infrequently used module, is placed in the strong idle area in the upper right corner to avoid distracting the player's attention. If the elements are rearranged as in Fig. 12, the pet decoration becomes an option that the player can notice at first glance, and the importance is enlarged. The optional pictorial book is placed on the right. There is a contradiction between the reading flow and the mental model, which increases the player's cognitive cost.
Special circumstances that do not apply
Although the reading law revealed by the Gutenberg diagram is generally applicable, in order to break through the convention or achieve a strong impact, the visual law revealed by the Gutenberg diagram is often subverted by designers. Often subvert the method used for the use of special eye-catching image, size or color is more bright eye-catching element left in an unused area, thereby changing the player's reading order.
In Figure 7, the image of the western cowboy in the right area is very prominent, and the player's attention is immediately drawn to the character and the gun he is looking at, and then the text on the left is seen. The player first felt the tension and oppression of the game, and only noticed the game name after aroused interest. It was also a good design with a good reputation.
The interface in Figure 8 is generally darker, and the upper right of the screen uses white and orange characters with high saturation to emphasize the name of the game. Players can glance at the name of the game at first glance, and then notice the policeman on the left and the prisoner on the bottom right. The intention of this design is completely opposite to the above "Wild Wild Prostitute 2", but they all subvert the Gutenberg diagram Good design example.
The Gutenberg diagram runs through every corner of the interface design, as long as you remember the order of reading gravity: from top to bottom, from left to right, comprehensive reading flow to arrange the visual hierarchy, you can make a reasonable design. But designers can't be limited to the laws of Gutenberg diagrams, they must make good use of the laws and combine other design knowledge to make impressive designs.
