"Invisible" animation effect

The animation effect on the invisible, is the highest state of animation effect.

There is no doubt that the dynamic UI has become a trend. But many designers are too concerned about the animation effect itself, ignoring the core of UI design is to improve the details and features to please users. In 2013, Pasquale D ' Silva received an interview with the Web directions South, which had a very good suggestion. Recommendations are as follows:

The more difficult it is to perceive, the better.

Don't make it obvious to the user that "this is an animated effect."

This is exactly the principle that our campaign Monitor ' s mailbox team remembers and practices: The goal of animation is to improve performance and to give the user just the right feedback experience in silence.

Do a year mailbox, I really learned to do web animation (different from the original application) of the complex, far more than speed, fixed distance, plastic or set smooth values. The same animation effect in different devices and browsers are not the same, and some even can not display normally. We have to create a better user experience environment to cater to the differences between the platforms. Apple, for example, designs many nifty and useful interactive animations for the 27-inch imac, but it doesn't end up in production, considering that some users will be unable to tolerate the effects of being jerky on other devices.

Animation effects and interactive prototypes have a wide variety of concepts and design phases, but only the most practical and high-performance ones can be put into production. The work of our people is to sift out which is the most practical, further improvement until impeccable. Everything is to improve the user experience. The filtering process is shown below:

How the Drop-down interface appears

The user clicks the "Pull down" button, the interface fades in with the button as the starting point. So obviously this interface is linked from this button.

How to collapse a toolbar

Fold down the other columns, you can display the relevant title and content of this column. Giving the user a slight lag effect while the pointer passes, as well as fading the UI flag color of the area, is a straightforward way to tell users that the diagram is operable.

Status of the button rendering

Waiting is always maddening. When the user waits to receive the mail document, we can do an appropriate animation to indicate that the backstage is busy. Of course it doesn't actually change the time it takes to get a collection, but it does make the wait less difficult.

Add or copy an interface

When a user wants to add or copy an interface, a new space quickly fades from the center of the screen. Very intuitive.

Remove interface

When you have too many similar or almost repetitive content in your mailbox, the animation will come in handy. Slide up the interface of the content you want to delete, and it will disappear.

Interface Controller

When the user's mouse hovers over the interface, the interface displays some controllers. These controllers are generated from this interface and it is easy for the user to understand that their operation is a change to the interface.

I know that there is room for improvement in these dynamic effects--a glimpse of the eye can be seen. But in order to accommodate certain equipment, we cannot make the animation effect too exquisite. It's a pity. However, we have implemented the concept of "people-oriented", which is impeccable.

The current animation effect is mixed into more and more fields--chat, writing, interactive design--but that doesn't mean you have to add anything to the action. As I said before, if our team is really perfect, the above animation effect, you do not find in the mailbox.

The animation effect on the invisible, is the highest state of animation effect.