When designing tabs or multi-level menus, try to correlate the position of interface elements with how they are opened. This animation can involve, in addition to visibility, also increased position. This way, swipe gestures are also available.
Associate Card Elements
The newly opened page on the left slides out from the slide; the newly opened page on the right is expanded from the previous card in place
Excellent animation will use swipe to open new pages
Great animations associate the same elements in different states
When designing the state transition animation, you can see if there are similar elements between the two, and if so, you can associate them. When InVision Studio creates a Motion transition, repeating elements between two screens are automatically linked, a feature that makes prototyping animations much easier.
If you want to know which motion effects can be used, I suggest you read Yuhan: I happen to have translated it). In the example I gave above, the principles of masking, transitions, parent-child relationships and easing are used.
waterfall effect
The cards on the left appear by sliding and gradient; the basic animation on the right is the same, but the delay time of each card is different
Great animations show the loading process by controlling the position and visibility of all elements
Great animation staggers the appearance of different elements and groupings
Under the premise of uniform easing and speed, the waterfall effect is achieved through the delay setting, which can ensure a consistent visual experience. There is no need to set a delay for each widget, and ensuring the appropriate grouping granularity can make the animation more efficient and fast. Google recommends that elements of the waterfall effect appear no more than 20ms apart.
force between elements
The card on the left floats at the top of the page; the card on the right pushes surrounding elements away when it expands
Excellent motion controls the change of the element itself
Great animations focus on the effect of elements on their surroundings
Embody the force between elements, that is, make them attract or repel each other. If you want to know more, you can go to Aware motio
Let the menu "grow" out
The menu on the left emerges from the bottom up; the menu on the right "grows" from the button
Excellent animation makes the element appear from the trigger direction
Excellent animation allows elements to "grow" from the parent
Use buttons to display status
The left image uses the text outside the b2b data button to display the state; the right image uses the button box itself to display the state
Excellent animations place hints near buttons
Great animation uses the button itself to show state changes
Try to use buttons to display state changes, such as button text to display prompts; or button boxes to display progress. Either way, the goal is to make the most of the user's attention (Z Yuhan: For more, see "It 's Not Gaze Tracking Elements, Elements
take attention seriously
The image on the left uses color and position to make elements stand out; the image on the right uses micro-animations to grab the user’s attention
Great design uses color, size, and placement to highlight important elements
A great design uses motion to grab the user's attention and avoid breaking the frame
When users need to do something important, try to use motion to grab their attention. Determine how much motion you need based on importance (such as size, color, and speed). But make sure to only use it for important actions - because the more you use it, the weaker it will be...and the more annoying the user will be.
Summarize
I hope these examples above will help you make decisions about motion design. With the help of new motion prototyping tools like InVision Studio, the field of creative interaction is going to take off quickly, and don’t forget about motion.
When we're designing, don't forget to use motion to explain state changes, grab users' attention appropriately, illustrate element associations, and add a little fun and personality to the product. These design principles above are enough to upgrade our motion from good to great quickly and efficiently.
Let's have fun with motion creation!