Android app development-from design to implementation of 2-3 colors

The use of color

Material DesignWith a flat design, you can see the color of a large chunk of area. Most of these colors are bright and attractive, the whole interface with the color will not be too much, basically maintained in three colors within.

"There is no wrong color, only the wrong collocation." There is no right or wrong color, we need to use experience and intuition to match them, so we should first to recognize the color.

Color theory

Color is a language, red represents this enthusiasm, blue represents the calm and quiet, green represents vitality. With a set of colors, is to express the meaning of the work to convey.

Most of us know the RGB color, which is based on the theory that any color is a combination of different intensities, and 红色R 绿色G 蓝色B change their combinations to get any color. In the computer field, these three colors have 0~255 different values respectively.

For designer color, another system of color theory is used-HSB: Hue h, saturation s, luminance B.

When we talk about color, we always say that the color is very red, a little green and blue.

When we say it 很红 , it sets a tone for the color-red. This tone is called tone. The hue is the distribution of the shape of the ring, and in turn the gradient renders a multicoloured of various colors.

The color ring has 360 degrees, so the value of the hue is 0~359度. Tonal values vary from 0 to 359, and also represent a 暖色 gradual transition from color to 冷色 . Do you feel warm when you see red, and you feel chilly when you see dark blue?

很红Of the 很 word, will be reflected through saturation and brightness,

• Saturation: Can be understood as a pure color dissolved into the water, if a lot of water, the color is very light, if the water is very small, the color is very pure. Therefore, it has a 0%~100% value.

• Brightness: We can see the object because the light shines on the object. If a little light does not, no matter what color, it looks black, only enough light to reflect the original color of the object. Therefore, it has a 0%~100% value. It means that 0% there is no light, then it will be black.

If your line of work is not a designer or just in the early days, you will be confused when it comes to applying color to Android, and don't know how to choose. Fortunately, Google has taken this into account. It is a 360-degree color ring, for everyone to choose a very suitable for the interface design of the tone, and by adjusting the saturation and brightness of these tones, a series of colors can be combined with the main tone harmony (in fact, these tones and the main tone may have subtle deviations, such as 3 degrees). These colors are put together and are called palettes of the image.

For example

These colors give the corresponding RGB values, and also give their own names, such as 500,100,200,......,a700, the higher the value, the darker the color. The band A , which indicates that this color is recommended for use as Accent Color (the next one Accent color will be introduced immediately.) ）。

Numbers are given to the color, which is designed to facilitate communication between designers and developers, giving names to these colors. When they talk about a color, they just have to say the name of the color, and everyone in the brain produces an intuitive impression. If they speak RGB values, they will find it hard to imagine.

Select Color

Generally speaking, not more than three different shades in an application interface, otherwise the difference in Hue will be too much to attract the attention of users, the focus from the content of the various colors up.

To simplify the work of designers, Google Material Design only needs to select Primary Color Primary Dark Color Accent Color Three colors to determine the overall color scheme for the entire application.

When designers want to choose a color for an application,

1. You can choose a color that the designer thinks is appropriate from the color ring.

2. You can also choose from a palette provided by Google. These colors are the result of the Google thousand selection, and if there is no special reason for this, use this robust color.

Primary Color

Primary ColorIs the most widely used color of an application, which determines the overall tone of an application. Many of the elements in the interface will use this color.

For example, the main color is selected Indigo 500.

Primary Dark Color

When the main color is selected, a dark color is often selected near the main color, such as Indigo 600~900 as a dark colour. This color is usually only reflected in the status bar color.

In addition to dark colors, it is sometimes necessary to use bright colors that match the main color, such as Indigo 500 as the primary color, and Indigo 50~400, which is a light-colored object.

Accent Color

Accent Coloris Primary Color an entirely different hue that attracts the attention of users, such as buttons, progress bars, and other interactive components that require user attention. If Primary Color it Accent Color is a different hue, the designer can choose freely, Primary Color and if it is the Accent Color same hue, then you Accent Color usually use A the color of the name in the Google palette, for example A100～A700 .

Common tools

When you use the color palette provided by Google, you can quickly see how the color is done.

Material PaletteProvide us with such convenience. The Primary Color Accent Color Preview screen on the right will immediately see the effect of the match as expected and later in the election. After confirming the collocation scheme, you can also download the color scheme to the local, which makes it easy to use the palette to import the interface design software directly.

This article is part of a series of documents from design to implementation-hands-on Android app development. Thank you for your reading and feedback, any comments and suggestions for this article, please leave a message, I will try to reply.

If you think this article is helpful to you, please recommend to more friends, or join our QQ group 348702074 and more small partners to discuss together, but also hope that you can give me advice, so that these documents can speak better, can maximize the help to the partners who want to learn and develop.

In addition to the articles published by CSDN, the newest articles in this series will be published first to my dedicated blog book.anddle.com. You can go there and sneak a peek.

Android app development-from design to implementation of 2-3 colors