Website User Experience Design analysis: Listen to the voice of color

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Objective

Color is a site of emotional expression or is the embodiment of character characteristics, each color has its own voice. As a visual element, color is difficult to quantify the measurement, and it is difficult to use a rational perspective to analyze and explain it, I now try to use another angle to try to measure the color of the page, a try. From the most basic color essence, color collocation form, and color on the user's potential impact and psychological hint, and so on, to analyze the color, read color, let color to help designers speak.

First, the basic knowledge of color

Three major elements of color

1. Hue

Our most common color spectrum "Rainbow" is the color in accordance with "red, orange, green, cyan Violet," the transition gradient, hue ends are warm, cool middle for middle or medium color.

2. Lightness

Lightness is the difference between the shades of color, such as crimson, scarlet, and pink.

3. Saturation

Saturation refers to the bright degree of color, also known as the purity of color.

Two, Magical color magic

1. The color has the magic power, chooses the color to need to be cautious!

Fast food restaurants give us the impression is generally a lot of seats, efficiency is very high, customers go after eating, will not stay for a long time. Some people like to meet friends at a fast food restaurant, but in fact, the snack bar is not suitable for others. This is because the decoration of many fast-food restaurants is mainly orange or red, although these two colors can make people feel cheerful, excited and enhance the role of appetite, but it will make the feeling of time is long. If you are in such an environment, you will become more and more irritable.

Ask two people to do an experiment, let one person into the pink wallpaper, crimson carpet Red Department room, let another person into the blue wallpaper, Blue carpet Blue Room. Do not give them any timer, let them feel in an hour from the room. As a result, the people in the Red Room came out 40-50 minutes later, and the people in the Blue Room did not come out after 70-80 minutes. Some people say this is because the red room makes people feel uncomfortable, so it feels very long. That's the reason, but it's not necessarily true. The main reason is that people's sense of time will be disturbed by the surrounding color. The same reason, high blood pressure people bogey red.

For example, in today's very popular recreational sports diving, people need to carry oxygen cylinders. An oxygen cylinder lasts about 40-50 minutes, but most divers run out of oxygen from an oxygen tank and feel like diving in the water for about 20 minutes. One of the reasons for this is that all the fish and beautiful corals in the ocean can attract divers attention, so it feels like time is going fast. More importantly, the seabed is a blue world surrounded by seawater. It is the blue that paralyzes the diver's sense of time, making him feel less time than he really is. (Part of the information from-"know a bit of color every day psychology")

2. Hear the color of the voice

The above stories and experiments have proved that color can affect the user's mood, but also can influence the user's judgment. Since the color subconscious is affecting us, that designer must learn to use color, in the design, with color to correctly convey the essence and connotation of the product. When the color is correctly communicated, it can resonate with the user, the product can be more deeply rooted.

Yellow: Youth, optimism, open-minded. is often used as the crowning touch.

Red: Vigor, speed, and sense of urgency, often used for promotional discounts and sales.

Blue: Trust, security, has the inside story, often used in enterprises, banks, security centers and other industry institutions.

Green: Vitality, easy, natural, non-polluting, often used in health care products and other industries.

Orange: Positive, enterprising, energetic, Alibaba color is also orange, often used to evoke action, such as button color also used orange.

Pink: Romantic, women, often used in the female consumer industry, female products.

Black: Influence, fashionable, serious, often used in luxury marketing.

Purple: Soothing, calm, mysterious, often used in the beauty of makeup or anti-old female product design medium.

When we understand the color, we can more accurately grasp the location of our page style, with color to explain your products. Often do "brain movement", Lenovo games and so on.

3. Color and marketing, Brand

Each particular industry has a similar product color bias

The logos of most well-known brands tend to use color-similar tones

Third, color matching

The following take banner as an example, a simple analysis of the color matching techniques and color combinations and the combination of the visual effects of rendering.

Monochrome collocation: By a hue of different brightness composition of the collocation, this collocation is a good experience of the level of light and shade.

Approximate color collocation: two or three adjacent colors are qualified for an approximate color. The following figure (orange/brown/yellow), this collocation is pleasing to the eye, low contrast, more harmonious.

Complementary complement: color ring in the relative two hue collocation. Color contrast strong, conveying energy, vigor, excitement and other meanings, the best complementary color to a more colorful, one color less. The following figure (purple and yellow).

Split complementary color collocation: At the same time using complementary colors and the method of analogy color to determine the relationship, known as split complementary. This kind of collocation, both the low contrast of the analogy color, and the power of complementary color, forming a harmonious and the focus of the colour relationship, the following figure, red text appears to be particularly forceful, especially prominent.

Primary colors of the collocation: most of the children's products, bright colors, such a collocation in Europe and America is also very popular, such as the blue and red collocation, Frickr logo and McDonald's logo and the main colors of red and yellow collocation.

How to pinpoint your color

The previous analysis is to feel emotions through color. Here is a simple write, how to capture the color according to the product, that is, the so-called mood BOARD (emotional version).

Emotional version refers to the design of products and related topics in the direction of the color, images, pictures and other materials collection, resulting in some emotional reactions, as a design direction or form of reference. (Please refer to the emotional version (Mood board) The new thinking of the operation process--Xiao Qian)

1. Native keyword selection

First of all, through the product understanding and understanding, as well as user research and so on to derive experience keywords (experience Keywords).

2. Derivative keywords

For the key words, the expansion of information, through brainstorming to draw the key words of the mind map, looking for extended keywords.

3. Collect related pictures, extract pictures to generate emotional version

Through the "native key words" and "derivative keywords", through the network channel, collected a large number of corresponding material map and with qualitative interviews.

4. Analysis of derivative keywords--fractal dimension annotation

5. The emotional version of the "Color analysis" and "Texture analysis"

Color extraction tool: http://kuler.adobe.com/#create/fromanimage

Summary

Color is a kind of feeling, when we learn to read color, hear their voice, we can do practice, follow the popular trend to navigate it with ease. Most of my insights are based on a shared summary of my predecessors, combined with some of my own ideas. In short, see more, think more and copy more, can help designers in the color feeling training more than twice. Successful color scheme, must be rational + perceptual combination, so designers want to do a feeling of meticulous, emotional rich perceptual person, digression:).