Here are some practical tips for improving UI animation, and let’s take a look at some examples of UI interactive animation going from good to great. How they use interactive animation to improve the user’s interface experience through detailed adjustments.

The interfaces listed in this article focus on showing continuity between states, representing relationships between shared elements, and directing users’ attention to what they should be paying attention to and taking action on.

To create these animations, I followed the principles of animation from Material Motion, IBM, and the UX in Motion Manifesto.

All interactions are accessed using earlier versions of InVision Studio. You can download the source file here.

1. Enable the label content to slide

The content on the left fades in and out, and the content on the right slides along with the label.

  1. A good animation transforms content from one state to another.
  2. A good animation is one that maintains continuity between state transitions.
  3. When you design interactions like tabs or pop-up menus, try associating the location of the content with the action to open it. This way you can not only improve the visibility of the content, but also animate the location of the content. As you design the animation, you can also add a sliding gesture that takes you from one content to another.

2. Connect the shared elements of the card

The one on the left opens a new screen that slides up, and the one on the right expands the card and fills the screen.

  1. A good animation uses transition details such as swiping left or up to show the content.
  2. A good animation establishes a connection between two states by animating shared elements.

When animating between different states, see if there are any shared elements between them and connect them. When using InVision Studio, creating a Motion transformation automatically connects duplicated components between the two screens. This makes prototype animation a breeze.

See the animation manifesto for the types of animations you can apply. The example above uses a combination of Masking, Transformation, Parenting, and Easing principles.

3. Use cascading effects in your content

The content on the left is shown with slides and fades in the animation, and the same animation on the right, but with a short delay for each card.

  1. A good animation changes the position and opacity of elements as they enter the interface.
  2. A good animation will quickly arrange the interface elements in an orderly way.

To complete the waterfall effect, try applying delay to each content or group of content. Maintaining the same respite and duration gives the user a consistent feeling. However, instead of cascading each small element animate the content group, keep the animation fast and smooth. Google recommends no more than 20 milliseconds for each element to start moving. You can see more examples of choreography in Material Motion.

4. Let content push other elements of the interface out of the way

The content on the left is on top of the other content, and the content on the right is pushed out as the interface expands.

  1. A good animation is one that moves and displays elements in context.
  2. A good animation is an element that affects its surroundings as it changes.

Make the elements in the content aware of their surroundings. This means that content changes to attract or repel elements around it. For more examples, see Aware motion principles in Material Design.

5. Make the menu appear in context

The content on the left is the menu flying in from below, and the content on the right is the menu expanding from the action of creating it.

  1. A good animation is when menus show the content that appears from the direction of the button that opens them.
  2. A good animation emerges from the action of creating them, unfolding from the touch point.

6. Use buttons to display different states

The content on the left is the text indicating the status of the button, and the content on the right is that the button uses the changing container to display different events.

  1. A good animation is to display the event near the button.
  2. A good animation is to use the buttons themselves to display different states.

Try using a container of buttons to provide visual feedback on the state. For example, you can replace the CTA with a spinner or load animation; Or you can add animations in the background that show progress. The solution is up to you, and the idea is to use Spaces that users already interact with. Reward points if you use button colors and styles to confirm success status.

7. Focus on what’s important

The one on the left uses color and location to make elements stand out, and the one on the right uses subtle animations to catch the user’s attention.

  1. A good animation uses color, size, and location to highlight important actions the user needs to notice or take.
  2. A good animation uses animation to draw attention to important actions without distracting the user.

Try animating your users to get their attention when they need to take action on something important. Start with a subtle animation and increase the intensity (changes in size, color, and speed) relative to the importance of the action. Use it only for critical actions, and the more times you use it, the less of an impact it will have, and the more annoying it will be for the user.

conclusion

I hope these examples will help you make better decisions when animating your interactions. With new animation and prototyping tools like InVision studios, I predict we’ll soon see a Renaissance in creative interaction. We just have to play responsibly in this new superpower.

Let’s apply animations to explain state changes, draw attention to necessary actions, establish relationships between elements, and add some fun and character to our product. By following these principles, we will change the animation from good to great.

Uxdesign.cc/good-to-GRE…

Make/Pabloy Stanley

College is not easy

Pretty skin is all the same, interesting soul 140 pounds

Editor/Yingsheng @ Chuangyu front end

The copyright of this article belongs to Chuangyu. Welcome to indicate the source of this article. Link to this article: knownsec-fed.com/2018-09-27-…

To see more sharing from the front line of KnownsecFED development, please search our wechat official account KnownsecFED. Welcome to leave a comment to discuss, we will reply as far as possible.

Thank you for reading.