Dull: this week to tell you about the color of the problem, also is to use my shallow experience, as far as possible to teach you how to do a good color.
preface
Many friends say that their color matching is like shit, because they have not learned color, no painting, leading to every time the color matching is careful.
Then go to the Internet to search all kinds of color matching theory, see what cold and warm, light and shade and other terms began to match color, but still a tuo… (So do I)
So there was a period of time when I learned about color matching and realized that it’s not that hard, at least not as hard as doing print, advertising, etc., and that the color matching of UI visual interface is actually more “simple” (simple here does not mean simple color matching, but simple color use).
So I introduce a color sharpener to you.
Material Design (MD)
MD is a design language launched by Google, it is more suitable for the UI visual interface color matching, can play a more unified, more comfortable role.
The color displayed by MD is bright, so it is also very recognizable when displayed on the device. Sometimes when you see an interface with a bright color, clean and simple, it must be based on the color of MD.
Its colours are inspired by contemporary architecture and the like, leading to bold colours that contrast sharply with its drab surroundings.
Many excellent works, including the present, are designed according to its specifications.
Since we’re only going to talk about colors today, if you’re interested in other parts of MD, check out the MD documentation online. It also includes instructions on how ICONS, framework hierarchies, controls, etc. (Suggest that if you can also English, the best to watch the original)
MD Visual palette
You may not understand the official chromatogram given by MD, so I made a clearer one (originally I made a very simple and ugly one, this one was modified after seeing @Oeko’s color palette) :
This is the color palette I made in Sketch. The color of my cycling App design is also borrowed from this color, so the color will look relatively comfortable.
However, in the process of use must learn to limit the number of. We all know that less is better when it comes to interface design, so it’s enough to choose three base colors and one accent color to match.
Three color
The three shades are as follows:
Use these three color values to do collocation, can play a transitional role.
Here’s an example:
You see this interface, I use a total of three colors, respectively with different transparency to do scheduling, the button is a color, two text matching colors, and the color of the map display.
This way the tone of the entire interface is in the same range and looks very uniform.
(Just because I do a single color design doesn’t mean it can’t do gradients, the principle is the same.)
Accent color
What are accent colors?
For example, if you select three chromaticity values and want to highlight the button, use the color of another color to highlight the button as much as possible, so the color you choose is the accent color.
Here’s an example:
The color of this button is the accent color, mainly depends on how you go to use.
If you are using a wide range of accent colors, it is enough to use transparency to control the different positions, without using too many colors for accent.
Of course, the emphasis on color is optional, maybe you see my interface using this color will feel inconsistent, that is because my background color is all warm, so adding a cool color will appear very abrupt, mainly depends on whether there is diversity in your interface, and then depending on the situation to match the color.
My suggestion is: you do a good job in the early stage of the same color department of color collocation, and then slowly extend to do multi-color mix. (This is not to say that monochrome is easy to match, monochrome is actually more difficult, so the suggestion is to do a good job of unity first, and then to make changes)
The theme color
Very simple, interface background and panel color. I chose black because I was doing a dark match. But why isn’t my black pure black?
Actually, I mentioned it above, because to match my yellow color, I added a little yellow to the black color, so that I could bring out the tone of the interface. The panel is also bright yellow, so it looks lighter than black, but not obtrusive.
This is the theme color match. Overall or relatively simple, I hope to help you.
conclusion
Sometimes when we look at a work, we may think it is beautiful, but we can’t tell where it is good. Even the bad ones, there’s nothing wrong with them.
This is the usual accumulation and summary of the problem. People often say that you should watch and practice more, but in fact, it is not the most important thing.
The most important thing is to think about it, think about why it does so, look at the official design documents, online works and articles, and then summarize it again, into their own knowledge, or you even see more and do more, there is no Ruan use.