Six kinds of icons used in the design of dynamic effect

Now more and more mobile phone applications and Web applications are beginning to focus on the design of dynamic effects, just the right dynamic effect can give users a pleasant interactive experience, is the application of Yan value to play a major part.

icon, that is, icons. In the interactive process, the application of various icon will follow different events occur different transformations. For two examples, the playback mode of a music player changes and the power icon changes when charging.

In the past, the transformation of the icon is very rigid, and in recent years, the popular in the switch icon to join the transition animation, this dynamic effect to the user experience brought positive effects is very obvious, to apply a lot of Tim.

However, in the face of the dynamic effect of icon, how should we design? Today we share several design icon dynamic ideas. In this explanation, the dynamic effect of the map some are copied some are original, only for the unified style to facilitate reading.

　Method of attribute Conversion

This is the most common and simplest kind of icon switching ideas.

Attributes include position, size, rotation, transparency, color, etc., which are used to make the action, and if properly applied, can make an immediate and bright effect.

Now most of the icon dynamic effect can not be separated from the property changes, exercise appropriate, this simple and powerful method of promising.

　　Ii. Method of Path reorganization

This may be accustomed to the properties of the transformation of the dynamic effect, but also a person to brighten the idea of the dynamic effect.

The path (stroke) of the icon is restructured to form a new icon, which tests more things, such as observing the relationship between the two icon strokes, which has recently been quite popular and challenging.

　　Third, point line surface downgrade method

This is a very useful idea.

Surface and face for conversion, you can use the line as a medium, a face first converted into a line, and then through this line into another surface. Similarly, in line and line conversion, you can use dots as media, a line to convert to a point, and then through this point into another line.

That's a bit abstract, let's look at a few examples.

　　Four, Mask method

When converting between two shapes, you can use one of the shapes as the mask of another, that is, the boundary, which, when zoomed in, is converted to the shape of another graphic as a boundary.

The idea is simple, but with a little bit of limitation, two graphs must be inclusive relationships.

Similar moves have been seen in Google's material design specification.

　V. Split-Fusion method

The appropriate analogy is to melt a sword into molten iron, and make a new one.

The split fusion method is especially useful when one of the icons is a whole and the other is made up of a plurality of detached parts. The dynamic effect of the split fusion method is also quite interesting.

Six, the icon characteristic method

The above ideas just stay in how to make the icon dynamic and interesting level, then how to make the icon dynamic is not only interesting and meaningful? This needs to consider the characteristics of different icon to design dynamic effect.

Icon characteristics, as the name implies is the use of the actual meaning of the icon to make a consistent with the dynamic effect, the need for a strong thinking divergence.

To do an icon dynamic effect, light has a way of thinking is not, but also need to know some graphics movement knowledge. How to make a pleasing icon dynamic effect, you can consider the aspects of easing, bouncing, trailing, jet lag, random, layered, sports modification and so on.