This article summarizes how to deliver a complete, specific, and readable motion annotation file to UI developers.
Note: this article is suitable for the reference of THE UI design baby, and the development baby can also refer to it and pass it to the design baby
The previous two articles briefly summarized the bodyMovin animation method and Bessel curve in motion effect design and implementation of the application of this article to talk about motion effect design annotation, first take a look at a scene I casually wrote online (this story is purely fictional, if there is the same, then you must be a designer who has not read this article)
Mov ** and ** cutout file. PNG ** to the baby, turn around and create an 800px*600px file to upload to his Dribbble homepage. While the designer was looking at the number of likes on Dribbble, the r&d baby was looking at the lost.mov file frame by frame more than 100 times. When the product was put into test, the designer asked the testing baby for a release package to install and see the effect. After watching it, the designer nodded “Oh, sure enough, the aesthetic of the r&d baby is just like this. The animation doesn’t look as smooth and cool as my effects. Nothing understandable, our company r & D baby ability so, send a package online.”
This situation is well understood and often occurs when designers design dynamic requirements. The main problem is that a label file is missing from the document the designer delivers to the r&d baby. It’s easy to make flat UI annotation files. For PS annotation files, you can directly use PxCook or other plug-ins. There are many methods of Sketch. I’ll write an article later on annotating methods for AppUI and webUI.
Then again, what should a dynamic annotation file look like? Many designers still statically annotate a few of the key pages of the animation as they did with static UI. Then let the r & D baby refer to the video animation preview to play freely, and then the rest is the designer with mouth and r & D baby guide the country.
Obviously, this does not accurately describe the kinetic effects. It is also a very important step to accurately express the animation you have done to THE UI development engineer, which is also the decisive factor to determine the quality of the final animation. Without a complete annotation document, it is difficult to achieve the same effect with your own dynamic effect only by talking to your research and development brother. What the developer baby wants is you just tell me how many dp intervals there are, what the color value is, you give me a vague video how do I know how many frames there are in this animation, or what the state of frame 5 is? Most designers do not study how the code is implemented, but a simple understanding of the implementation principle of dynamic effects in dynamic design is very helpful for UI designers to deliver a logical, simple and practical annotation document.
Here I do according to their own small needs to organize a simple. In addition to explaining the application of Bezier curve in design, it also summarizes how to deliver a complete, specific and readable dynamic effect annotation file to UI developers.
Dynamic effect production process
In this article I use a very simple application open screen boot animation to illustrate the process. This animation is a very simple animation of the element displacement and transparency as it slides between two pages.
First of all, take a look at my document directory structure. This article mainly tells the story of the folder ‘Motion’. I will organize a separate article about the directory structure.
1. Get the requirements document
2. Design UI with sketch and other software
Note here, usually when doing THE UI as far as possible standard naming, dynamic effect production here must be strict standard naming, and can use controls with controls. I use principle to make simple animations like this, which can be seamlessly compatible with sketch source files. When animation is made, the changes of elements between each drawing board are judged according to element names, which means that an element must have only one ID in the project. Another thing to note is that if there are not too many dynamic effect pages, you can put all the dynamic effect related pages into one sketch sketchpad, which can make animation in principle more efficient.
3. Animation using Principle
Used animation tools can choose according to ease and animation role, AE is undoubtedly the dynamic effect of software leader, but does not need to use in on a little animation needs complex software to do so, principle is very easy to use, operation is very simple, only need to understand the linkage and the dynamic effect 】 【 】 the two timeline of the relationship is good. You can check out the official tutorials on Principle \ -learn or YouTube. The quality of the tutorials in China is really bad.
4. Export the animation
Here to mention the issue of exporting GIF, after effects can use the plugin GIFgun this plug-in, can also export animation video to convert here into GIF, you can adjust the quality size of exported GIF frame number, relatively easy to use. Video to animated GIF converter
5. Export the cutting diagram annotation file
Here I’m using the plugin Zeplin for Sketch. I would like to mention that the annotation of Zeplin is slow to be accessed on the webpage and Windows client, and it is impossible to flip over the wall. It is estimated that the speed of the Zeplin server is hard. You can also choose to export the cutting map file with one click using Sketch Mesaure, but the disadvantage is that it cannot be updated online in real time. It’s gonna be a lot harder for you to change the label once it’s in the r&d baby, but personally, ZEplin works better.
6. Guide the effect labeling file
This is the focus of this paper. After referring to many dynamic effect annotations, I drew a simple animation annotation template with Sketch. In fact, it is not necessary to design a annotation document with Sketch.
To briefly explain why this is the case, I will refer back to the first two concepts of dynamic design and implementation in Android/iOS/Web development: animation and transition. Changes in the shape, position, size, color, and transparency of elements over time are animations; How does an element change between two states called transition
If we look at this table horizontally, the ‘trigger condition’ is used to break down the entire animation. The element involved in each action is called an ‘object element’. Then we explain which properties of these objects are changed under this’ trigger condition ‘. A bezier curve number is a gentle curve that tells the baby how an element changes over time, the second concept of transition.
The annotated Sketch source file is here at motion_measurement. Sketch can be downloaded and viewed if required. Or attachment download
7. Pack up the design document and send it to the r&d baby
END
Reference for this article:
Principle \- Learn
MartinRGB/MTGuideline: Some Design Guideline I made
In my next article, I will write about the directory structure of a designer’s project, as mentioned in this article.
Note: Check out more on my blog: Viggoz.com