Android app development-from design to implementation of 2-5 icon usage

Use of icons

Icons can give the most intuitive impression, sometimes a lot of explanations can not be an icon.

The Android app's icons are divided into two categories,

• App icon: The start icon that represents the entire app on the main screen, is the icon that gives the user the first impression. A successful application development will not be downloaded by users, perhaps depending on the user to see its first eye.

• System icon: The use of various icons in the application of special meaning, to guide users to do more work.

App icon

The design of application icons is also Material Design a reflection: the process of making application icons is the process of cropping, folding, coloring, and adding shadows to a piece of paper.

Although the application icon can be designed to be strange, but it is still a lot of routines can be used, as long as the following these routines, you design the icon will not be ugly where to go.

First of all, the rules that apply icons must be enforced:

1. Google gives a grid diagram of the icon design. To design the application icon, refer to this grid to lay out and arrange the pattern.

2. Android wants to apply icons framed within 48DP size boxes and has a 1DP border (within 48DP dimensions). In order to plot the meticulous, we suggest that the 48DP icon to enlarge 4 times times, that is, 192DP (border 4DP), and then design.

3. The icon can be made of rounded square, round, vertical rectangle and transverse rectangle according to the design line. The area dimensions of each shape are:

   It is important to note that although the shapes of the icons are different, they are all in square squares that are limited to 192DP (scaled), and the dimensions are scaled up to 4 times times larger.

4. When making an icon, select a simple and straightforward geometry line.

Then there is the design-related element. An icon consists of 7 elements:

1. Background: The background of the icon, the size of which is determined by the shape of the icon, such as rounded square, round and so on, does not occupy the entire area of the icon.

2. Foreground: The foreground of an icon is usually the geometry that expresses the meaning of the application.

3. Color: The choice of color is the same as the selection of the application interface color, to choose the hue that can embody the application content. The color is not enough, preferably not more than 3. Colors can only be placed in the foreground, or they can be placed in the background only.

4. Tint Edge: Tint is a mask that can be interpreted to bring a hat to the layer. This hat can have its own color and transparency, blending with the layers it covers, showing different effects. We will explain tint in detail later. The tint edge appears on the upper edge of the foreground and background. It is stipulated that:

5. Shadow Edge: Appears at the bottom edge of the foreground and background. It is stipulated that:

6. Shadows: The foreground will leave a projection on the background, and this projection is also specified:

   The height of the foreground relative to the background is 1DP.

7. Illumination: The icon has a light source that shines from the 45-degree angle on the top left. Note that this light source is confined to the inside of the icon. The properties of the light source are as follows:

Finally we talk about the color of tint and shade mentioned earlier.
Both tint and shade add a matte above the original layer to overlay the mask with the layer, resulting in a different color effect.

1. First determine the type of the main hue: cool? Warm?

2. Select the color of tint and shade according to the table below.

For example, the main color is yellow 500, which belongs to Warn warm colors. So

• Its tint color is the main color added 20% white.

• Its shade color is the main color, add 20% deep Orange 900

System icon

The following common icons are the system icons.

They are all very simple, with a thick, geometric pattern. Designing the system icons is also a very routine thing.

First of all, the rules that apply icons must be enforced:

1. Google has designed a grid for this type of icon,

2. Android wants to apply icons framed within 24DP size boxes.

3. The pattern is within 20*20, and the extra 4dp is empty as a border.

4. The icon can be made of rounded square, round, vertical rectangle and transverse rectangle according to the design line. The area dimensions of each shape are:

   It is important to note that although the shapes of the icons may be different, they are all confined to the square squares of the 24DP.

This is followed by the design-related elements:

1. The outer edges of the icons are arcs of 2DP, while the inner edges are square;

2. The stroke thickness of the drawing is consistent, and the stroke is square. The stroke-out thickness is 2DP.

   Fake shape is very complex, 2DP is really crowded, it can be appropriate to use a fine strokes, such as 1.5DP. If it's hard to draw, think about whether your icon is too complex to consider a simpler pattern.

3. When the icon is laid out on the interface, let it have an extra margin. Plus the margin, the entire size of the icon to reach 48DP. In other words, it should have a 24DP margin around the top and bottom. Why is it? Because most of the system icons need to let the user click, after testing, the person's finger touch the screen size of the area is almost 48DP.

4. In addition, when using the geometry as an icon, to choose the plane of the graphic, there is no need for the effect of the image, because Material Design it is a flat design.

The System icon's color setting also has the rule which needs to follow, in the light dark different background, the color is different,

• In bright background, use black:

• In the dark background, use white:

Tools

Knowing the rules for making icons, it's all right. If you are a design expert, you can use tools, from scratch, completely draw an icon yourself. If you have limited time, you can find many design icons from the Internet.

Google has released a lot of out-of-the-box icon material on the official web, covering many categories, basically enough for us to use directly.

Ali also provides a collection of many icons of the site Iconfont, we need some type of icon when you can go to the above search. This will almost certainly meet our needs.

The material that makes the icon is preferably a vector image, so that the size of the material is easily scaled, and the edges of the pattern can be clearly visible. and the icon material that we want to use is a very simple geometry, and the vector image occupies a very small amount of storage space.

There is also a practical icon making tool website for Android Asset Studio. You can choose to make the app icon or the System icon, and after adjusting the parameters, you can download the icon to use locally.

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-5 icon usage