Today, I will share with you the design ideas of these styles and the points that need attention. Analyze the popular drawing method of icons from the following three aspects! Sharing outline: 1. Stacking technique 2. Graphic icon 3. Monochrome weak gradient transparent icon stacking technique As the name implies, there is a deep relationship between icons. By dealing with it in this way, the icon hierarchy can be enriched, the design details can be increased, and the dull monochrome flat icon can be broken. Usually, most people design an icon and draw the figure directly, so that's it, and they don't go any further. This icon looks boring and common. As shown above, the effect will be completely different if the icon is treated with weak transparency of details at the interface. It should be noted here that generally, the interface of icons is cascaded, with a linear gradient from A to B.. Let's take a look at the case: Atlassian's brand icon system use suggestion: it will be better if it is used in area icons, or icons with thicker lines are generally used on TabBar. Graphical icons are easier to use, and the icons are abstractly enlarged and turned into a graphical way. Generally used in card design. On the left card, the icon directly uses the stroke effect. Although some shading graphics are added to the card, the overall effect is slightly mediocre. Re-graphing the icon can not only express the current meaning, but also improve the design details and quality. Other examples of ideas extension: Of course, there is a similar idea, which can enlarge icons and color divide them into backgrounds, and put icons and copywriting in the foreground. As shown in the figure, I use the first two ideas comprehensively, graphical background and stacked icons. I hope you don't mess with the graphics here, but try to use the graphics of icons to evolve. Monochrome weak gradient transparent icon icon is treated with weak gradient transparency, and its idea is somewhat similar to the first one. However, this method has a wider range of overall transparency of icons. Let's look at a case directly first: this kind of icon gives people a relatively new sense of fashion and rich levels. How to deal with this icon? It is very important to pay attention to the problem of unidentification. As shown in the picture on the left, the icon and the background are almost integrated, and the main elements are not clear. The right processing is just right, and the meaning of the icon can be recognized. We must pay attention to the relationship between transparency and the background color of the card. Write three tips on icon design at the end, which can be read several times, and the idea is relatively simple and direct. Of course, the most important thing is to use it flexibly, and you can also combine all three ideas to design icons. This article is just to attract jade, and these icon processing techniques can not be applied to all scenes. Everyone still needs to find a suitable breakthrough point to design according to their own product characteristics.