Motion
A little movement can provoke an animated response. These guidelines will help you move your audience through the use of motion.
Highlights
- These animation principles apply to all types of animation at Swiper
- Animation should draw the eye to what’s most important within a scene
- Illustrations and characters must come from our existing library
Swiper motion design values
Animations bring vividness to interfaces and reinforce user experiences.
Engaging
Keep the viewer interested without distracting them
Purposeful
Tell a story and lead the viewer through it
Clear
Present complex ideas in ways that are easily understood
Delightful
Imbue animation with a spirit of playfulness
Effectiveness of Animations
We can determine if an animation is effective or not from the following two aspects：
Justified
Is this animation necessary? Does this animation help its users to digest the information? An effective animation should not be redundant.
Performant
Is there any frame loss or lag? An effective animation must be smooth, and must not hurt the overall performance of the product.
Animation principles
Different from animations usage in typical front-office applications, animations in enterprise level applications spend a great amount of efforts on reinforcing user interactions and the effectiveness of those interactions. Therefore, we derived three animation design principles from Swiper Design's core design language:
Natural
The animation should based on law of nature. This assures the animation is smooth by its nature and intuitive to its users.
Performant
The animation should have a transition time as minimal as possible so that it serves its purpose in the most effective way.
Concise
The animation should be meaningful and justified. An over fancy animation will frustrate its users, and therefore should always be avoided.