Design theory: The perception of color in visual grade

Recently, a number of foreign Chinese in the film to be released, I would like to see, want to do some contribution to GDP, so I thought of online booking. In Hangzhou, the students know that most of the theaters are centralized in the time line, booking also probably through the website to complete. Although I finally failed to complete the long-cherished wish of booking online, I realized that I had to have a membership card to book a ticket, but at least I found an interesting place where I could write something down.

So I picked out a representative page screen to commemorate:

If you have ever really visited this site, you may have the same feeling as me: The first time I visited the page, I really do not know the color of the colors represent the meaning of the five-colour to the eyes of the people.

Well, let's talk about color first. As we continue to grow in society, we gradually develop a complete understanding of color, there are some cognitive formations that are natural, such as red, because our blood is red, the red is natural for blood, the danger is, the green symbolizes life, the blue symbolizes the deep, and so on, others are based on geography and culture, For example, or red, in China, red represents auspicious, yellow symbolizes nobility. If you start, I'll be a little bit of a fish, so stop. (A little bit of color psychology every day) is a small book on color that is recently listed and is easy to read. ）

Back to the ticket booking thing, after I saw these colors, my first reaction was that these colours were meant to distinguish something, so what was it?

Time? Because I know, for users, booking only needs to know three things, movie names, games and fares. The name of the movie is obvious, so is it the time to make a difference? No, I found that "le Fire Boy" 11:15 of that one is light orange, and immediately the "lovely China" 11:40 of that one is lavender, and then down "breathless" 11:50 is almost into the background color of the dark purple ... I want to know, these colours are supposed to be the price.

But another question is in front of my eyes-different colors represent different prices, what are these prices? After I turn the mouse wheel over a few laps, I finally, finally came to the bottom of the page, the answer appears:

If my eyes are not serious, there should be four different shades and lightness of purple, and three different shades, lightness and hue of green, of course, there are two kinds of beige yellow. Please forgive me for not being able to accurately describe the price of each color, because they are irregular--and, to be exact, they try to tell the user about the regularity of the fare in an irregular color arrangement.

This reminds me of the "user Interface design 10 principles" that I have just translated, where the fourth article is "Using visual hierarchy," and the author of Kyle warns designers that "a clear hierarchical relationship will play an important role in reducing the complexity of the appearance." I think the designer of this page must want to make the user understand the price by color, and it can be "at a glance", of course, the result is not fulfilled. In my opinion, this is only to differentiate, as some interfaces are graphical and graphical.

If we want to tell users that from the lowest fare to the highest ticket price can be identified by color, then we should find a universally accepted color recognition. So what do Chinese people think about the general color perception of hierarchical distinctions (forgive me for abandoning foreign users)?

What color do you use?

For example, white, although the original meaning of a symbol of purity, innocence, but in the hierarchy, because we often use tyro, white to describe the civilian population, whites in our cultural environment represents a relatively low grade, and cheap hooks. So similar, we can see why the yellow represents the noble. But what we need to be aware of, can not be yellow, it can only be a symbol of Huangkou, so the color saturation is also an important part of the white and black to bring people a complete difference, a perfect gradient from white to Black can reflect the visual level of change, but we need color.

two uses how many colors

So how much color are we going to use? To the top of the page to use three major colors, nine color? This is almost the upper limit of the 7±2 effect proposed by George A. Miller. Unless it is rain people, or most users can only in a short period of time to remember about 7 information, not to mention the 7 colors are how abstract, how ... Hard to remember. (Interested students, you can click on this picture, and then turn off)

In other words, specifically to this example, when you have nine movie tickets, try to use color to make grade distinctions and let the user do a memory test is no different. If you had just opened the picture of the Italian flag, would you remember the first time that it was green?

To tell you the truth, the time line of the booking page I also repeated dozens of times, but I still do not remember whether the green ticket is cheap or purple ticket cheap. Because the tickets I bought at the end are all pink.

about how to improve, the unfolding is a long time, if it is me, I may cancel color distinction, to switch to the form of data tables, but the boss may feel that the page is not flashy (in terms of national conditions, 100 design principles of the enemy is not the boss of a word); maybe I'll consider the colors on the website and the actual face print, Long-term users to form a color of the corresponding relationship, such as black credit cards are generally higher level, but the boss may feel that this increase in costs:-D

There will be a lot of ways, it depends on you ...