First, thank you for clicking on this article. This paper is mainly used to summarize the learning results of User Experience Design 100 Introductory Course. The significance of posting it is to hope that more people can understand UX and provide services for UX beginners and interested readers. This article will help you understand the five visual principles of UX through examples.

I. Basic concepts

1. User experience

User experience refers to the subjective feelings established by users in the process of using products, that is, the subjective psychological feelings established by users through products. Therefore, the user experience of products is largely determined by the subjective feelings of users. The user experience built by products for users is not short-lived, but runs through the whole process from product production to after-sales.

2. User experience design

After understanding the definition of user experience and user experience, let's talk about the concept of user experience design. User experience design refers to a user-centered design method, aiming at user needs. User experience design is to interact in a way that users can accept or like, so as to design products that really meet users' needs. The quality of product reputation is also closely related to the user's feelings. The process of product experience design also pays attention to user-centered, so the concept of user experience has entered the whole process from the earliest stage of product development and runs through it.

3. Sensory experience

Senses are organs that feel the stimulation of external things, including eyes, ears, nose, tongue and body. The brain is the center of all feelings. Eyes are vision, ears are hearing, nose is smell, tongue is taste, and all parts of the body are touch. The five senses of the human body provide a lot of convenience for people's lives. In addition to the well-known five senses, there are other sensory systems at work, such as keeping balance and feeling hungry. There are about 20 sensory systems. The user's sensory experience is the most direct presentation of user experience, and sensory experience happens all the time around us. Sensory experience is a psychological feeling formed by sensory experience and brain processing.

Two. Five visual principles

1. Visual weight (comparison of distance and size)

Visual weight refers to the influence of different positions of the same image on visual focus. Usually, the larger the area, the closer it is to the line of sight or the larger the figure occupying the line of sight, the more "weight" it has. This visual weight is mainly used to highlight key points, attract users' attention and make users pay attention to what you want them to pay attention to. It should be noted that the visual weight is relative, and all visual principles are obtained by comparing a design element with its surrounding elements.

So how to increase the visual weight? There are roughly two methods: distance and size. First of all, from the perspective of distance, the closer to the line of sight, the more attractive it is. In real life, we will pay attention to things that are close to us and ignore things that are far away from us. Therefore, UX design must pay attention to the relationship between near and far, and put the things that should be highlighted in the vicinity. The advantage of this is that it can not only highlight the key points, but also make the design more "three-dimensional", "hierarchical" and "real". As shown below.

colour

Choosing the right color is one of the important visual principles. Any product is inseparable from a key modeling element in the design process, that is, color. The color of products plays an important role in the process of human-computer interaction and is one of the most intuitive means to improve the user experience of products. For example, the black spot on the white paper in the picture below, even if its area is not as big as white, you can see it at a glance. This is the effect of color: emphasizing the subject, which is of course the same effect of other visual principles. In addition to emphasizing the role, for enterprises and brands, the color selection and color matching design of products are definitely not blind, nor are they "popular" at present, but "appropriate". Why do you say "appropriate"? Because the colors are bright and dark, dark and bright, cold and warm, we must choose carefully if we want to achieve the purpose of publicity. Take Coca-Cola as an example, as shown in the following figure. When you see this picture, you will probably think of Coca-Cola, because the red bottle of Coca-Cola is the symbol of Coca-Cola, and red represents the classic, energetic and positive brand image of Coca-Cola. Therefore, shaping the brand image of products in the eyes of users is also the visual experience effect brought by color.

3. Repetition and pattern breakthrough

One of the principles of visual design is to create all kinds of patterns, to shift users' attention to important things-and try to break through. From the mode, there are many visual modes. For example, circle points and arrange them in a straight line, so that straight lines and circles give people a completely different feeling, which is not only easier for people to notice, but also completely different for users to see. This is the pattern. From the perspective of pattern breakthrough, for example, there is a straight line and waves appear at the end of the straight line, so people will pay more attention to the waves. The original understanding of straight lines may change from "hard" to "soft" because wavy lines are more soft like ribbons, which is a pattern breakthrough.

4. Linear tension and angular tension

Visual tension means that a visual work, after touching the eyes of the audience, is attracted by the aesthetic feeling of its composition and color, which makes the audience feel unwilling to look away, and psychologically accepts all the information conveyed by the work naturally. Compared with the visual impact, it seems that the internal and external forces in China Kung Fu act on the vision in different degrees in graphic design works, resulting in the feeling of continuity, contraction, expansion, projection or rotation. This feeling comes from the internal and external forces of modeling. What we visually perceive is only a potential force that gathers, radiates or tilts in certain directions in the shape. It is not a physical force, but a visual psychological force, which is one of the indispensable contents of visual activities. I talked about the beauty of color earlier, and here I talk about the beauty of composition, which mainly includes linear tension and angular tension. Let's talk about linear tension first. Linear tension refers to the perception of a nonexistent line or "path". Our eyes will follow the direction of this path and guide the eyes of users. For example, in the picture below, we will pay more attention to the gap between straight lines. Let's start with angular tension. We have been talking about a straight line before, and the angular tension is a "shape" composed of multiple lines. As shown below, many houses are arranged in a curve, forming a whirlpool.

5. Arrangement and proximity

First of all, in terms of arrangement, different arrangements give users different feelings. Orderly arrangement makes people feel regular, disorderly, compact and tight, and evacuation makes people feel alienated. The simplest example is hair, and the feeling of combing is very different from that of not combing. But it should not be too compact, leading to evacuation, which will make people feel nervous and empty. Therefore, we should not only pay attention to the choice of arrangement, but also pay attention to the degree of arrangement in UX design.

In terms of proximity, the closeness or alienation between two things will make people feel that these two things are related or irrelevant. This distance is called "proximity". Usually, we put related elements closer together and irrelevant elements farther away. For example, the title, text area and button related to the same behavior are usually designed together so that users can know that they are related without looking at anything.

Three. conclusion

The explanation of the five visual principles ends here. The five visual principles are not separated from each other. They promote each other, complement each other and improve each other. I hope this article can make you understand the charm of UX.

(This article's personal views are for reference only)

References:

[1] Application of Synaesthesia in Experience Design, Fan.

[2] Development of catering industry design service contact based on sensory experience, Xu Xiaoning (Shandong Institute of Arts and Crafts, Jinan 2500 14).

[3] Product color positioning design method based on user experience, Lin (shanghai second polytechnic university, Shanghai 20 1209)