Studies have shown that when humans recall the scenes and things they have seen, they have a greater memory of color than form. In other words, from a visual point of view, the deepest impression a product leaves users is often the color of the interface. From this we can also see that color matching can be said to be the most important weapon for designers. There is probably no one, but this weapon has "restrictions" in its use.

 

A basic principle of UI design is to avoid too many colors on the page. Everyone understands this principle, but when you design yourself, you will always subconsciously introduce too many colors, causing the entire interface to look very messy. So for designers, learning to subtract the color of the interface is a very important skill. 

 

The purpose of the color matching system

 

Before establishing a color matching system for a product, the designer must first understand: Why should I establish a color matching system? This question sounds redundant and slightly nonsensical. But in my opinion, I often ask myself why I can improve work efficiency every time before I do something. Only when we truly understand the meaning of color matching can we achieve targeted and selective deletion.

 

 

Generally speaking, the establishment of color matching system mainly has the following three goals:

 

1 Visual distinction

 

2 Adjust the interface style

 

3 Attract users' attention

 

 

 

Visual distinction

 

An app or website may have several main functions and divisions at the same level. At this time, the designer needs to plan the product's information content and functional modules as a whole, and establish the basic layout of the interface to help users distinguish better visually. Color matching can help designers achieve this goal.

 

 

Color matching can complete visual distinction, but visual distinction is not only achieved through color matching. Text, images (icons), and layout can all be visually distinguished.

 

For example, a wealth management APP has different types of wealth management products (ordinary, loan-and-return, and transferable) and different states (in investment confirmation, the investment is successful, the interest has been paid, and the liquidation is a total of 11 states) .

 

In this case (3 product types, 11 product states), color matching must be very careful. First of all, we have to integrate the states, and integrate similar states into one, so that the number of colors can be reduced. Of course, some people feel that there are still more than six colors, because the book tells us that there should be no more than three colors on the same page. But we have to proceed from the actual situation. For wealth management products, users are unlikely to see all six states on the same screen, which means that the probability of users seeing six colors at the same time is very small.

 

 

In addition, we gave up the use of color matching for product types, because the state has already used six color combinations. In this case, if we also use color to distinguish product types (one color per type), then the entire page will appear messy. So here, we choose to use text (label) to distinguish product types.

 

 

 

Compared with color, text has a slightly weaker visual experience for users. So we have to prioritize the content on the page, and use color matching for important content. Here we believe that users are more concerned about the current state of their products than product types.

 

Visual style

 

The visual style of the product is determined according to its own positioning and user needs. Some products require a dynamic interface that can make users feel excited (purchasing desire). We can use longer red and orange as the main colors of the product. .

 

 

 

 

Some products pay attention to calmness, comfort and restraint, so we use blue, gray may be more suitable.

 

 

 

 

Color matching can help us to establish a product's visual style. But we also need to know that the visual style of a product is composed of text, images and colors. In other words, text and images can also affect the visual style of a product.

 

The jump rate of text refers to the size ratio between different texts in the same interface. The font size and weight of characters with different functions are different in typesetting. For example, the font size of the main title, subtitle, and main text are usually reduced in sequence. This difference in font size will bring about different text skip rates. Generally speaking, an interface with a high text skip rate will appear more lively, and an interface with a low text skip rate will appear calm and composed.

 

When matching colors, if we reduce the number of colors used, and use white, gray, black or other colors of the same color (blue and light blue, red and pink, etc.) in a large area, this interface will appear solemn, elegant and rich Modern, but it will appear monotonous. Then we should moderately increase the text jumping rate to increase the vitality of the interface.

 

 

 

 

Of course, not only text has a skip rate, but pictures also have a skip rate. Designers can reduce the dependence of interface visual style on color matching by controlling the jump rate of pictures and text.

 

 

 

Attract users' attention

 

We often like to use color matching to attract users' attention. The call to action button in the following figure is taken as an example, with a color with a large gap from the background color to make it stand out from the background.

 

 

 

 

In fact, even if we don't use color matching, we can attract users' attention very well.

 

 

There is a large area of blank space on the homepage of Google search, and the user's attention will naturally be attracted to the search box. This is in line with Google's original intention. They want users to complete search operations on this page, so there is no need to display too much other information to distract users.

 

The shadow effect can also be used to attract the user's attention. The shadow effect can increase the "elevation" of the target element and make it stand out from the background.

 

 

 

 

Of course, we can also use blur effects to attract users' attention. Users will always be attracted by those parts with accurate focus and ignore the blurred parts. The focusing mechanism of the eyeball is like an adjuster to capture objects that are suddenly far and near, so that you can feel the depth and distance of everything around you. This is the working mechanism of our human eyes. Designers can use this theory to blur some unimportant content in the interface to highlight those important content.

 

 

 

 

Conclusion

Good design should allow users to find the content they are interested in in a short time, and giving too much is actually a burden for users. Less is more. This is the creed of the current Internet era and a rule that designers need to abide by. Hope this article can help you.