Design theory: The unity of Interface design and visual effect

The original topic was conceived as the uniformity of the visual effects of the interface, but the word "unified" seems a little sensitive, afraid of touching the number of Meng, and I also have no intention to set a unity of what what to talk about, extremely professional and elegant, and after all, is a blog article, afraid of beheading cells countless, simply changed to "consistent" slightly appropriate. Generalities are the expectation of casual attitude, where to count. There is a bias, but also reasonable, when extenuating. If there is a dispute, seek common ground and disagree.

What is "consistency": tending to be the same. It also means that there are no differences. "Easy to call": "The world is not the same as the painting, consistent and hundred." "There are different ways to reach agreement, which can be visually called different manifestations and means." Of course, it is more important to achieve a consistent visual presentation that requires a holistic framework of themes, as well as multiple prerequisites under this framework.

The primary school stage, knowledge is poor and single, resulting in any subject teachers are accustomed to a philosophical idea is: "The world no two leaves are the same." "This may or may not be right, yes, the world really no two leaves are exactly the same, not the same premise is too narrow." Is "complete agreement" not parochial? If the premise is the color of the leaves, then all the yellow leaves are consistent. If the premise is the shape of the leaf, then all the palm-like leaves are the same. If the premise is the type of leaf, then all maple leaves are the same. Even the premise of the leaf consistency has texture, season, space, falling speed and so on, and so on, and not through the personal will and feelings of people.

These consistent prerequisites are integrated in different situations, trade-offs, help us to identify a range of the same attributes, in the interface of visual imagery we can also use this consistency to identify the brand effect under the same scope, this range of concepts include: the same company under the interface effect, the same attribute of the product interface, Different versions of the same software PRODUCT interface ... this is, of course, an extension of the digression.

It is important to set the premise of consistency in different subject frames, and only when the object's representation is set a corresponding premise, so-called visual consistency is established. In the specific design process, it is necessary to refine a consistent theme framework, in this subject framework to select the consistency of the premise of the combination to achieve the visual consistency of the design and judgment purposes.

The following for their own past design of some of the interface, in chronological order span of more than a year, expect from a design time line to look at different design works. Personally, through the interface components and performance means of the split, although the color of each design, each design corresponding to the product also has its own characteristics, the structure of each design is different, but their visual performance is basically still consistent.

(Figure I show the collection of interfaces)

Each design has a different visual performance, shape, color, quality and complement each other. Each interface also has a different composition elements, text, components, icons blend staggered. Each component has a premise under certain conditions to facilitate their visual performance consistency. The emphasis of this paper is on the establishment of the premise concept of consistency. Instead of combing every concrete touch point as a prerequisite for consistency, because this is a huge content, it is necessary to carefully distinguish between the prerequisites for the consistency of components within each subject frame and the trade-offs and combinations of these prerequisites under specific conditions. A consistent concept that corresponds to a particular product line.

Therefore, only a few of the prerequisites that can be extracted from the visual design of the interface are described in detail, such as the consistency and the degree of importance.

The appearance of a form:

The shape of the interface is specifically divided into shape and inner shape. The appearance emphasizes the external concrete shape of the interface. The inner shape makes the contents of the interface parallel and segmented.

Appearance: The main interface of each product is derived from the characteristics of the software itself, this can not be used as an interface to the visual consistency of the key reference. This is a good understanding, such as the Instant Messaging interface, can not talk about his affirmation has been changed day, but at least at present the long vertical interface is to give users the first intuitive feeling. As for the width and proportion of the strip, it will affect the consistency of the interface visual effect as a reference element. So when the interface of the same property tends to be the same shape, taking into account the characteristics of the product, it is also necessary to take into account the shape of each other's feelings. Of course, there are some details of the processing will also be necessary to create a consistent interface visual effects, such as the shape of the fillet radian, the thickness of the interface frame is necessary to pay attention to the details

In the inner aspect: in addition to the interface of the same property, they have the function of the approximate layout structure, their side-by-side method, segmentation should take the corresponding premise of consistency, such as Line division, the division of two colors, texture structure Division, user intent of the division ...

(Figure II Appearance and internal form in the example interface convergence of the consistency embodiment)

The expression of color:

The color application produces the feeling, is rich and colorful, is affects the visual consistency more important premise point.

The premise point can be divided into the absolute consistency of color, such as hue, purity, lightness of absolute consistency or small difference. Step back there is a simple hue of the same, or the same degree of uniformity, similar color combinations of colors. If the products of different products take into consideration a kind of affinity relationship, their color combinations also have similar color, three-color group, total hue exchange and other combinations of color feel consistent.

In the specific color of a single mask performance on the use of some of the consistency of the premise of color, such as monochrome gradient technique, two-color of the gradual approach, the use of two-color and similar color, complementarity, division and complementarity, such as the harmonic way. Such a detailed consideration can enable consistency to affect the purpose in several ways, through these perceptual things often called color feeling to achieve the goal of consistency of vision, rather than only to identify a single color is consistent narrow sense of consistency, otherwise it will directly create a single design imagination.

(Figure three similar color combinations are embodied in the convergence of the example interface)

(Figure four color and two-color gradient mode in the example interface of the consistency of the convergence embodiment)

The thickness and texture of the interface are consistent:

The thickness of the interface is another important prerequisite that affects the consistency of the interface visual effect. Because the thickness of the interface is basically due to the texture of the cause of the performance, so the two put together to illustrate the explanation.

Interface thickness is caused by the interface effect to the user a heavy sense of vision a reason, of course, can often hear the height of color lightness can also cause a heavy sense of the page view. Although the lightness of things in relation to the real objects of nature, as well as the psychological feelings of people, there should be a certain truth, but the lightness of the color can also be through the performance of texture to resolve the heavy feeling. Therefore, the corresponding nature of the object, thick and thin, the thickness of the interface will be more direct impact. So they are a prerequisite for directly affecting the consistency of visual effects.

(Figure four interface thickness of the head side Radian)

and the thickness of the interface in many cases is through the texture to complete the performance. such as the performance of radians, The imitation of real objects, the reappearance of light and shadow and so on. The texture is very big Chengdu directly determines the direction of visual style, he is very important in the premise of consistency. But also in the main frame under the guidance of, for example: crystal texture, flat texture, wood texture in the same product under different versions of the framework, the consistency of design continuity is obviously not ideal. But if these textures are in the same product's individual skin frame, they can be seen as consistent.

(Figure five interface texture relative to the consistency of the plate embodiment)

Performance of Component details:

On the unified representation of the view, many people have been very agreeable, in fact, we are doing this, such as QQ2009 after the development of visual norms, has directly affected the components of some products design. It is necessary to standardize the visual performance of each component. But in addition to the components, or other visual elements of the details can be applied to the same design means, in the same properties of the interface to choose the same way to performance, so as to affect the overall interface visual effects of consistency. There are many examples of this type of performance, at random from the visual part of the display interface:

(Fig. Six several modes of performance of the progress bar: monochrome, two-color, colorful, etc.)

(Figure seven a list of several manifestations: overall monochrome, two-color interval, monochrome interval)

(Figure Eight tab's performance)

In the interface performance, so to reach the interface effect consistency of the premise there are many, here the example is to open a head to express the view, the effect of example is only from its own interface to extract one of the specific performance. Consistent visual performance is not the final we can obtain the premise of all satisfied, but according to the different properties of the interface series, the premise of all consistency based on attributes to extract the combination, to achieve the theme of the interface visual effect consistency, this is the focus.

In many people's view, design is perceptual, but design is more in reason. such as the concept of consistency, emphasis is placed on the analysis and induction of visual elements of the interface, as well as on the concept and attitude of interface visual consistency. Constantly try and sum up the change of course, change into the subconscious of the face design, regardless of our reference, design, review, adopt approximate standard. Rather than the evaluation of each person's self-awareness, the design will become a smooth and clear idea.