1e41f4b71Sopenharmony_ci# Animation Design Principles 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ciAnimations add meaning to your UI. Animations direct user attention to where it is supposed to be, serve as a type of feedback to user operations, show the hierarchical relationships between elements, facilitate transitions to create a seamless user experience, and promote your brand image. Design animations based on basic rules of the physical world, that is, how objects in the physical world would interact with each other, so your animations will play in ways that meet user expectations. The elements used in your design must be aligned with your brand image and the general tone of your product. 4e41f4b71Sopenharmony_ci 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci## Smooth and Natural 7e41f4b71Sopenharmony_ci 8e41f4b71Sopenharmony_ciSmoothness is user experience about the difficulty of information processing. It is a combined response from gesture touch, visual perception, and expectations. Stable frame rate, instant feedback, and responsive operations are basic requirements for animations to deliver a seamless experience. 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci 11e41f4b71Sopenharmony_ci## **Simple and Efficient** 12e41f4b71Sopenharmony_ci 13e41f4b71Sopenharmony_ciThe motions of UI elements should be kept as simple as possible. The more complex the elements, the longer the user interaction, leading to a sense of sluggishness. 14e41f4b71Sopenharmony_ci 15e41f4b71Sopenharmony_ci 16e41f4b71Sopenharmony_ci 17e41f4b71Sopenharmony_ci 18e41f4b71Sopenharmony_ci## Quick Response 19e41f4b71Sopenharmony_ci 20e41f4b71Sopenharmony_ciKeep the displacements of elements short so the animations will not take excessive time to play. For example, keep the animation duration to be less than 350 ms for a long displacement, 250 ms for a medium displacement, and 150 ms for a short displacement. 21e41f4b71Sopenharmony_ci 22e41f4b71Sopenharmony_ci 23e41f4b71Sopenharmony_ci 24e41f4b71Sopenharmony_ci 25e41f4b71Sopenharmony_ci## Consistent Motions 26e41f4b71Sopenharmony_ci 27e41f4b71Sopenharmony_ciWhen orchestrating motions, use consistent motion paths and appropriate orchestration methods to allow users to focus only on the tasks at hand. 28e41f4b71Sopenharmony_ci 29e41f4b71Sopenharmony_ci 30e41f4b71Sopenharmony_ci 31e41f4b71Sopenharmony_ci 32e41f4b71Sopenharmony_ci## Easing the Wait Time 33e41f4b71Sopenharmony_ci 34e41f4b71Sopenharmony_ciAnimations can ease the wait time between operations for users by leveraging intuitive, eye-pleasing graphical elements and also smooth the transitions between different screens and elements. You can also use animations to make serial tasks appear as if they were parallel tasks. 35e41f4b71Sopenharmony_ci 36e41f4b71Sopenharmony_ci 37e41f4b71Sopenharmony_ci 38e41f4b71Sopenharmony_ci## Highlighting the Brand 39e41f4b71Sopenharmony_ci 40e41f4b71Sopenharmony_ciWell designed animations help enhance the brand image by delivering delightful, high-quality user experience. Brand animations, imitations of astronomical phenomena, such as tailing, melt ball, light emitting, and magnetic attraction, if used throughout the entire system, give your UI signatures that are unique to your brand. 41e41f4b71Sopenharmony_ci 42e41f4b71Sopenharmony_ci
