Mobile Interface UI Color Design

The first thing people understand about color is the feeling of seeing things from the eyes, for example, living in a colorful city, but also the streets of the various beer and skittles shop lighting with the light and mix to produce more charming colors. In the UI design, the use of color occupies one of the 3 major elements.

The following is a more daring contrast between activating colorful colors and the monotony of the surrounding environment, emphasizing bold shadows and highlights. Leads to unexpected and vibrant colors.

Graphic design needs to understand the UI palette

The palette's role is to provide a complete set of practical colors for iOS, Android, Web, and more. The palette is based on a base color with a saturation of 500.

Warm tones

Deep vivid tones

Cold tones

Interactive Design Color Use

The first step is to select the swatches you want to use.

To avoid visual dispersion and visual fatigue and confusion, choose from three shades and one accent color in the base color.

With alpha values for gray text, icons, and dividers, you should use different shades of text to effectively convey the visual hierarchy of information.

For text on a white background, the standard alpha value is 87% (#000000). Secondary text with low visual levels, the alpha value of 54% (#000000) should be used. The 26% (#000000) alpha value should be used for text that prompts the user, like text and tags, with a lower visual level.

Other elements, markers and dividers, should also have black alpha values, rather than solid colors, to ensure they can adapt to any color of the background.

For white or black text on a colored background, you can find the appropriate color contrast and alpha values from the palette in the table.

We strongly encourage the use of bold colors in large areas of the UI design. Different elements in the UI design fit different colors in the theme. The toolbar and large color blocks are suitable for using the base color of saturation 500, which is also the primary color you apply. The status bar is suitable for using a deeper saturation of 700 of the base color.

Accent color

Bright accent colors are used for your main operating buttons as well as components such as switches or sliders. The accent color can also be used for left-aligned partial icons or chapter headings.

Alternate Accent Color

If your accent hue is too deep or too shallow for the background color, the default option is to choose a lighter or darker alternate color. If your accent color doesn't display properly, the base color of saturation 500 will be used on a white background. If the background color is the base color of saturation 500, then 100% White or 54% black will be used.

Theme

A theme is a way to provide consistent tones to your app. The style specifies the brightness of the surface, the level of the shadow, and the appropriate opacity of the font element. To improve consistency across applications, there are two choice of themes:

• Light

• Dark

Here are the articles related to UI design training--10 interesting and creative loading waiting to experience animation works http://www.qduck.cn/forum.php?mod=viewthread&tid=16853
A little bit of UI design training for yourself every day adds a little more experience every day.
More UI design training in fun, interactive design training, web design training, graphic design training and so on you.

UI Design

Mobile Interface UI Color Design