UI interface Color method tailored for beginners

How to quickly select or match colors? Today @micu design and everyone introduced in the interface of the most commonly used three methods, simple and practical, attached a large number of excellent examples, especially for beginners in the color novice, learn!

Fast New Year, we have a lot of things on hand, so many students to design activities page or app interface big revision, etc., then how fast choice or with color? Choose "and" with the color ", hear these two words, is not from the subconscious will have aversion, psychological thinking, this is definitely a pit!" I'm sure we'll have to toss and turn. In fact, many novice designers will encounter the same problem.

Let's say these three strokes straight into the knife.

　First knife: color only three

Often a lot of great God said on the Internet color not more than three colors, in this I only say three times, color but three, color but three, color but three! Whether it is to do flat or Web pages, or do app design, all need to adhere to this basic truth.

Then what is not more than three colors of the match it?

A lot of people here think that there are no more than three different color values. In fact, no more than three kinds of color collocation, refers to not more than three kinds of hue collocation. In a single hue can use color lightness or saturation to do the richness of color, and hue not over three!

If the design of the interface is too much color, cool dazzling is what kind of effect? Let's take a look at a well-known recruiting website.

I think you and I just burst into tears.

Yes, we simply want to find a suitable job, live a happy and beautiful life. And not so simple, one into the main page, an instant, Dogskin plaster storefront. This feeling, my little heart suddenly collapsed ... A small area, a city address on the emergence of three colors. Is this really good?

Let's make a comparison. There is a design that calls someone's home design. Green is always the brand color, red is the website decorate color, this is called inheritance.

The unified main color style guide, can enhance the user to the product the memory degree, but also the product experience feeling more comfortable and natural.

Is that the more concise the color is the best?

Then we can only use one color. In the image below the single color and a variety of hue color contrast, we can see in the single color of the design more unified, more harmonious picture. In a variety of colors in the interface of the functional modules more specific, more differentiated, so that in the use of a variety of colors also need to consider the content of the product and the core.

Three-color collocation, as long as the control in no more than three kinds of hue range can be. The business designer who has studied painting should know clearly the lightness, darkness and saturation of color.

The use of monochrome design, will appear tedious. and the overall color saturation through low will cause the screen boring and not breathable. The bright color and the color of the light and shade can make the picture appear level of rich and energetic.

Make exquisite colors and refine your style

In the interface design, color is the most important in the design, whether the correct and complete performance of the product temperament is essential. A single hue, rich lightness and saturation can make the interface look layered and rich. and the compact color, the processor will also be easy to unify and control. In the use of color, the less the better, but to ensure that the right to convey the need to express the functions and elements of the premise. Every time we add a color, we need to think about it, there is no need. Because of the complexity of the design, there will not be more than three kinds of main colors.

The following interface in order to distinguish more content areas using three colors, but because of excessive color caused page segmentation messy, red in the page is redundant, functional segmentation is also redundant. When you can use two colors, do not use three of colors. When you can use a color, do not use three of colors. Simplicity will make the work more mature.

In the desktop icon design, often also use the two-color and three-color collocation form. Such a color can make the icon appear simple and no lack of taste.

　　Second knife: Determine the primary color

In the use of color design, the heart to know. The primary and secondary relationship of color can set the nature of the work. The color of good works is so clear,

Remember the color function of the division: primary color, auxiliary color, decorate color.

The charm of the main color

The main color determines the style of the design.

In the design of color as an important emotional element, the main color is the cultural direction of the work. We need to have a clear understanding of the project at the beginning of the design and refine the selection of the most appropriate primary color positioning.

Each color bearing culture is different, will lead the entire interface design direction.

Web design, mobile interface design, banner design, graphic design ... Different media, the main color of the use of the law are not the same. Web design and interface design, usually the main color used in the structure and decoration. and banner and posters to be more eye-catching, the main color is usually used in the background color.

In the design of the interface will often be the color of the brand logo as the main color, and in different interfaces in the area of the main color will also change.

The following figure we can see the public comments, Baidu Takeout, the United States Group applications will be the color of the product logo for the continuation of the logo color definition as the main color, the effective unification of the spread of the product.

It is also found that the main color area of the interface design of these products is also very consistent. The main color area used in the home page is larger, and the navigation bar is filled with the main color. In the Level two page, the area used is less, the main color is dotted to the interface.

We can understand this way, when users use the product, they prefer to remember products. And when the user entered the information page is more attention to ease of use, I hope users can find the things they need. So the main color in the home page used more area, and the level two page used in the key operating point. From the product point of view, we use the main color to consider the content of the relationship between the page, understanding the level of interface and functional nature. From the vision, choose a higher saturation color as the primary color, to consider because of excessive color area caused by visual fatigue.

In the design of banner and poster, the area of the main color is generally used in the background color, the relative area is larger. It's a straight-through theme.

　　Third knife: Find the auxiliary color from the contrast color

It is generally felt that as long as the color area is the main color. In fact, People's reading psychology is different, if the color saturation is lower than the relatively small area of high saturation color eye-catching, so in the definition of the main color of the interface to suspend the saturation (purity) high color as the main color will be more stable.

In the interface design summary use complementary color contrast is the strongest. This kind of color can make the user's vision produce intense stimulation, the emotion is strong, leave a vivid impression to the person. This is the easiest way to spread. Suitable for use in exaggerated and publicized scenes. But this color is too common and easy to cause the user's visual fatigue. Give a person a feeling of unrest. Then you need to control the use of the location and the size of the information in the use of such a collocation, the core of the place can be used in this way.

Main three pairs of complementary colors: red-green, blue-orange, purple

We can see a lot of app icon in order to attract the attention of users to use a strong contrast of complementary colors

Tomato fast, QQ space, Camera 360

　　The color will also be used in contrast to warm and cold

Warm and cold contrast color is the law of natural balance, can be used in a large number of design, such a color will make the work is very good, not dull.

Let's take a look at the icon design of several apps:

The following app name is called Koi, very like this application color, apply to the warm and cold color, played a very good embellishment effect, looks smart and eye-catching.

Tweetbot's icon also used the contrast of the warm and cold color, is not eye-catching and cute ah, we can go to try this collocation, hundred Test Lark.

Seedling comic Studio, this icon applied to the warm and cold with the wonderful, the sight of the focus on the center point.

In the design, the contrast between cool and warm is the most widely used method in the interface design, and the effect is very outstanding.

Color is like the yin and Yang Tai chi, cold and warm two-level balance to restore the harmony in life. Use this color effect to make the user feel comfortable and peaceful.

Warm and cold color collocation method basically has no shortcoming, use in the design, the skill is more, the exquisite feeling of the design request is relatively high.

Although Alipay's main icon has changed to become a concise blue Alipay, but the main page of the use of cool and warm, a good distinction between classification, and make the page rich classification becomes not so fragmented. Many designers encounter a full version of the category icon when the big, easy to handle the page to spend, the proposed use of warm and cold way to adjust, the page balance well.

At that time, when he was designing 360 anti-loss device, he used two colors, red and blue to match the warm and cold. Incorporate 360 font styles into the building with a warm red color, and a pin to find the location used cold blue.

All right, let's write this down. Look back at the points of knowledge that we are talking about today.

The color is only three

Definition of primary color, and area

Looking for auxiliary color, also remember that a few pairs of auxiliary color?

Today and you share this is not only used in the interface, but also the choice of color to the important three points! The practicality is extremely high! Seemingly simple, we use it to add more analysis Oh ~