Today, I will share with you the design ideas of these styles and the points that need attention. Analyze the popular icon drawing methods from the following three aspects! Share the outline: 1. Stacking technology II. Icon graphic 3. Monochrome weak gradient transparent icon stacking technology As the name implies, there is a deep relationship between icons. By processing in this way, the icon hierarchy can be enriched, the design details can be increased, and the monotonous monochrome plane icon can be broken. Usually, most people design an icon and draw the figure directly, and that's it, no further. This icon looks boring and ordinary. As shown in the above figure, if the details of the icon are weakly transparent on the interface, the effect will be completely different. It should be noted here that, usually, the interface of icons is cascaded, and there is a linear gradient from A to B. Let's take a look at the case: Atlassian's brand icon system is recommended: it will be better if it is used in regional icons, or the icons with thicker lines are generally used on TabBar. Graphical icons are easier to use, and the icon is abstractly enlarged and turned into a graphical way. Generally used in card design. On the card on the left, the icon directly uses the stroke effect. Although some shading graphics are added to the card, the overall effect is slightly mediocre. Repainting 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 are similar ideas. You can enlarge the icon, divide the color into the background, and put the icon and copy in the foreground. As shown in the figure, I comprehensively used the first two ideas, graphic background and stacked icons. I hope you don't mess up the graphics here, and try to evolve with the graphics of icons. 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. What should I do with this icon? It is important to pay attention to unrecognizable problems. As shown in the picture on the left, the icon and background are almost integrated, and the main elements are not clear. The correct handling is just right, and the meaning of the icon can be recognized. Be sure to pay attention to the relationship between transparency and card background color. Finally, write three tips about icon design, 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. You can also combine these three ideas to design icons. This paper is only for the purpose of attracting jade, and these icon processing technologies can not be applied to all scenes. Everyone still needs to find a suitable breakthrough point to design according to their own product characteristics.