In the field of user experience design, animation design is an important means to enhance the vitality and interactive experience of user interface. This article details how to establish an effective set of animation specifications, including the four key steps of recording, sorting, referencing, and formulating specifications, aiming to help designers and teams improve the professionalism and practicality of animation design.
In this article, I will take the design overhaul of the iQIYI app that I am responsible for as an example to explain how I sorted out and established a set of real and useful animation specifications.
1. Records
At that time, in the iQIYI app, many pages did not move, resulting in the operation of the page being very stiff.
In addition, there are a lot of animations, which are obviously the same kind, but they look different on different pages.
So, to establish a set of specifications, I first need to figure out, what animations are needed in the app?
So I started a carpet search.
I walked through all the main pages in the app and wrote down all the animations I found in an Excel spreadsheet
Second, carding
With these "ingredients", I can start combing. I categorized all the animations that I recorded.
When encountering an animation that cannot be classified into an existing category, a new category is created until all animations are grouped into a certain category.
Once you've sorted them out, check them out and see if there are any categories that you can integrate.
With the above steps, I was able to identify all the animation categories I needed in my app.
III. Reference
With categories, I need to define the specifications for each category. Just as we usually need competitive product analysis to do design, we also need this step to do design specifications.
I carefully studied the dynamic design specifications of Google and other major manufacturers, and studied which modules are included in their specifications and what content is included in each module.
This process gives me a clear idea of how my specification should be structured.
Fourth, formulate norms
First, define what role the specification can play in the application, and what are the basic principles that should be followed.
Then, define each of the animation categories according to the animation categories sorted out in step 2.
The result is a set of animation specifications that are truly practical and most applicable to our app.
Here's a detailed definition of one of the categories of animations
Finally, since I was in charge of designing the revision, there was a fifth step:
According to the specification, the animations that do not meet the specifications in the page are singled out, and then sent to the corresponding developers for optimization.
In this process, because the iQIYI app contains a lot of page types and complex animations, the leader also assigned other designers to help me complete it.
As the person in charge, I formulated the overall idea and assigned and followed up on the tasks.
In the end, 5 designers were organized to complete this big project together. This kind of project also allowed me to exercise my management skills. The leader was very satisfied with the results of the project, and let me start to take charge of the interactive team of the core video business, which started my management path.
To sum up, today I will introduce you to 4 steps to establish an effective set of animation specifications in your work:
This article is written by Everyone is a Product Manager Author [Mu Feng], WeChat public account: [Mu Feng's UX Charging Station], original / authorized Published in Everyone is a product manager, without permission, it is forbidden to reprint.
Image from Unsplash, based on the CC0 license.