User experience design meets color emotion

Haven't shared a bit of things for a while, remember the last time I shared with you the "http://www.aliyun.com/zixun/aggregation/12151.html" > Emotional design of the hand-painted application performance. This one again sensational, and share a little about the color of the feelings of those things, may be the former part of the color introduction we have learned. But anything because there is fruit, so or let everyone understand the composition of color and color of the emotions, and then simply to say in our lives and interface design in the use of the feelings, as well as the color of the preferences and color of the decisive role and so on.

1, color

Color, for mankind, always belongs to nature one of the most magical mysteries, always inspire our curiosity and creativity. No matter when and where in our life, full of many colorful colors, where there is light, where there is color. Sometimes we think that colours are independent: the sky is blue, the plants are green, and the flowers are red. But in fact, the color does not exist alone, beautiful color collocation can often make the screen more attractive to your eyes. Color is like a note, not a certain color is called "good" or "bad", only a combination of notes can be a beautiful music, can be said to be coordinated or uncoordinated.

2, Hue ring

Hue ring tells us the color of the mutual clearance, in a lot of color articles, you can see the figure of Hue ring, it is our choice of color a powerful tool. Hue ring refers to the human eye can be identified by the color hue of the composition of the color ring, which consists of 12 kinds of basic colors. Contains three primary colors, that is, red, yellow, blue, the original color mixture produced two times color, that is, orange, green, purple, two times color mixing produced three times color. The three primary colors are the "parents" of all colors in the hue ring. Only these three colors in the hue ring are not mixed by other colors, and the position in the color loop is evenly distributed.

Everyone has their favorite music, and everyone has their own favorite color, each color has a moral. Color as the first visual language, when the first contact with a thing to create a primary impression, the color is often more attractive than the impression of its shape. Appropriate application of color can enhance the screen appeal, improve product impression and feeling, and different colors are often about the final product to the feelings of people.

The color is symbolic, and the symbolic color has regional and national nature. When it comes to symbolism, the first thing we can think of is: red roses symbolize hot love, yellow is always with rich, right status connected, white pure, blue elegant calm, black solemn, evil and so on. Because the color is symbolic, so we have to divide the occasion to dress, gifts and so on.

Color can quickly help us build user awareness: Here is a brief introduction to the color feeling of the next three primary colors, as well as the use of life and design.

Red

Red is one of the three primary colors, high purity, high visibility, stimulating effect, is the most intense visual effect of color. Red is the favorite color of the Chinese nation, and even become the Chinese cultural totem and spiritual conversion, the Chinese modern history is a red history, carrying the people too much red memory. Red represents peace, joy, happiness, consol, nobility, Harmony, reunion, success, loyalty, courage, prosperity, romance, sexy, warm, rich, tactful feelings, means Pepsi, drive the disease in addition to disaster, manages, abandon evil and raise good ...

In life, also everywhere red presence, because red easy to attract attention, so many warning signs and hint symbols are used in red, for example, red in the traffic lights to stop, roadside maintenance lights, the car's headlights are red to express warning, remind pedestrians and so on. In fire fighting equipment, fire hydrants, fire extinguishers are used in red, convenient when necessary to quickly find them.

Traffic lights, fire hydrants, fire extinguishers

In the web design, mainly red color is not much, in a large number of information on the page has a large area of red is not easy to read. But it can also play an inspiring role if matched well. Too pure red easy to make people tired, causing people's psychological disgust, so generally only in the event of the theme of the site will be a large area of the use of pure red, and in other topics of the site, to use a large area of red need to add white or dim.

Yellow

Yellow is one of the three primary colors of color and is the brightest color in all colors. As one of the benchmark colors of warm colors, yellow gives people a happy, brisk, transparent, brilliant, full of hope and vitality of the color impression, giving a solemn, noble, bright psychological feeling. But also because the brightness of yellow is quite high, yellow is easily affected by other colors, hue slightly red, green will be thought to be orange or green, the brightness is easy to be considered soil color, so in a way, yellow is a very difficult to grasp the color.

Yellow is reminiscent of the sun and is very common in nature and the human world. This is a kind of color that can arouse people's attention. From the bumblebee to the school bus, from the traffic lights to the highlighter, there are eye-catching yellow appearance everywhere. Football players with serious fouls will be shown a yellow card as a warning, while the player wearing the amber collar in the tour is the target of all.

School bus, football yellow card

Yellow is one of the most widely used colors in a web design color, and it has a bright and cheerful feeling and can be used in all kinds of information sites. But the pure yellow is very few large area uses, same as pure red, too strong, but small area embellishment uses quite a lot. For example, with dark clear color yellow and other colors of the dark color and use, the page will be more elegant and strange feeling.

Blue

Blue belongs to one of the three primary colors of color, it is the coldest color, very pure, gives a person a beautiful, tranquil, clean, rational, serene and broad feeling, produce to the vast universe, the clear sky, ocean waves of the Sea of association; Blue is the color of the sea and sky, and is very common in nature. Blue is the symbol of eternity, its variety is very diverse, each kind of blue represents different political or other meanings. Blue has the courage, calm, rational, and never give up meaning, so many national police uniforms are blue, police and ambulance lights are generally blue.

Blue has the characteristics of calm, rational, accurate image, but also expressed hope. In commercial design, emphasis on technology, efficiency of the commodity or corporate image, most of the choice of blue when the standard color, corporate color, such as science and technology, knowledge, computer, business, government, banks and portals. Blue also represents a "trustworthy" psychological feeling, many companies do when the site has chosen blue. Tencent's official website is one of them.

Tencent's official website, Tencent Customer Service page, China Construction Bank website, Chinese Southern Airlines official website

In life and design there are a lot of such colors used, for example, Orange makes people feel ripe fruit and produce sweet feeling; Green is the color of plants, symbolizing life, conveying the image of refreshing, ideal, hope, growth, if it is paired with blue, yellow, or even red for web design, You can add a bit of lively, brisk feeling to the website, and purple gives the emotion is noble, delicate and elegant. There are so many colors here that you don't have to elaborate on them.

Color is the first thing we feel when we touch things, and it is also the most impressive. Open your eyes, point to open the Web page, the first feeling is not the content of the site, but the Web page in the color collocation of a feeling, a variety of colors are rushing along the retina imprinted in our minds, color in the unconscious affect our experience and every click, It implies the direction and meaning of the user's login to the site.

have seen the website color analysis related articles of the people must be familiar with this kind of pictures, it is a variety of well-known website logo and CIS system to collate color. We found that most Web sites and internet companies ' brand colors are located near the red and blue departments. Because the orange brings warm, enthusiastic, active sense of vitality, and Blue has a reliable, professional image, it can be said that the image of the Internet companies are committed to create the image, and blue color, in fact, there is another important feature.

The following is from Colorlovers:

Color Preferences bias:

As mentioned above, the color brought to people's feelings there is an objective representation of the significance, but in each person's eyes actually feel the color there is a large and small difference. From a customer web analytics company Kissmetrics's Survey report chart, we see clearly that both men and women like blue and green, perhaps the most common color in nature, and both men and women are more disgusted with orange and brown. The difference is that men prefer black, while women dislike Gray, while women prefer purple, while men dislike purple. So that the male and female preferences for color is biased. So in the choice of color matching do not take into account the perspective of different viewers to make choices, in-depth understanding of the reader's feelings.

Color can play a decisive role in the understanding and decision-making stage:

A survey by the American Centre for Popular Color research shows that people have a "law of 7 Seconds" when it comes to picking goods: in the face of a dazzling array of goods, it takes only 7 seconds for people to determine whether they are interested in the goods. In this short and critical 7 seconds, the role of color accounted for 67, become a decisive factor in people's likes and dislikes, this is the the 1980s appearance of the "Color marketing" theory. Similarly, in the interface design, if the color selection and collocation just right, can be a period of time to the new user to leave a deep impression, will give us the design of unexpected results.

Color can determine the conversion rate gap:

HubSpot, an American digital marketing company, once made a A/B testing to test the difference in color for user clicks. In the following figure, the left and right two test pages are exactly the same in content, the only difference is the color of the button, in more than 2000 samples of the test, the final red program hits more than the green program hits a full 21%. Before the test, most of the researchers speculated that the green plan would get a higher click because, intuitively, the green represented the meaning of passage and approval, while Red was more likely to warn and block.

Because Red has a sense of urgency to stimulate effort, often appear in the clearance scene, while the orange call is strong, used to create the order, purchase, sale of the action, so red and orange is generally used for shopping websites or app purchase and payment button. It is also used for some error-prompt pages that warn you of caution.

Because green represents security, access, permission, can make people feel relaxed, ease the pressure, so green is usually used for the Start button and download button, as well as the success of the prompt page.

Mobile QQ, QQ music Products download page

Computer Butler 8

So at design time, can not simply rely on their own preferences to color, and a large part of the reason by the product itself and the standard color and the overall tone of the decision, in addition, we should fully consider the user experience, although not fully meet all users, but at least we have to take into account the majority of users. Of course, the use of color is not limited to death, not that the purchase button must be red, orange, and the download button must be green. Specific color style needs to seriously understand the design needs, with party A to discuss product positioning and feeling, such as: stable, reliable, lively, concise, scientific and technological sense ... And so on, to understand the customer positioning of the product, we can determine how to choose the most appropriate color direction to design.