In the previous article , of project 1-2 was also briefly introduced. The meaning and basic types of interactive dynamic effects are introduced. Here we will talk about it in detail~
1. About the classification of dynamic effects
First of all, let's distinguish several concepts of motion effects.
1. MG Animation
MG animation (Motion Graphics), in simple terms, means graphic animation. The overall application of MG animation is very extensive, including the beginning of movies, the beginning of TV, column packaging, product demonstrations, advertising programs and other fields.
As an Internet designer, we can use simple MG animations to display APPs: for example, videos in the app store, videos on the official website, or project results in work reports. Generally, we can classify them in the category of brand design.
2. Emoji pack animation
Today's WeChat emoji platform has developed into an emoji package industry, which allows designers to publish their own emoji packages for WeChat b2b data users. Some of the emoji packages are animated, that is, the product of frame-by-frame animation, in the form of small gifs. Format presentation.
3. UI interaction effects
In the design of user experience interface, the dynamic effect design occurs due to interaction requirements, such as loading, transition, click feedback, etc.
Now more and more professional UX interactive animation software helps to realize the real-time operation feedback of html on mobile phones, as if you made an app without code.
2. About the software for animation
Before, I often saw children's shoes under the animation works and asked, "Big brother, which software did it?", here is a unified summary, and you don't need to ask others about this kind of question in the future.
1. Adobe After Effects
The most familiar AE, the most common software for UI animation.
Advantages: The software for movie special effects, the types and complexity of motion effects that can be completed can be imagined, and it is convenient to flexibly cooperate with Adoubi's own ps and ai, and can provide Lottie animation library Jason files.
Disadvantages: high entry threshold, complicated functions, high learning cost.
Export format: mov video file.
2. Adobe Photoshop
Well, yes, you read that right, it's the Acubi's ps that you open every day, and it can also be animated.
Advantages: The timeline is also used to design motion effects, and the operation is relatively simple.
Disadvantages: There are few animation effects that can be completed, and it is suitable for completing frame-by-frame animations (such as simple small gifs in emoticons).
Export format: gif file.
3. Hype 3
If AE is the ps of the UX dynamic effect (complex and comprehensive), then Hype 3 should be the sketch of the UX dynamic effect (for strong and easy operation).
Advantages: Easy to use, real-time interactive animation operation without code, native interface supports Chinese, and more animation effects are supported after version 3.0.
Disadvantages: The dynamic effect that can be completed is limited.
Export format: gif animation/video/png/Html, pc, mobile real-time operation.
4. Flinto/Principle
In fact, these 2 things are not too much, they are all simpler versions of Hype 3.
Advantages: The operation is as simple as sketch, and there are sketch plug-ins that can be used together, which is highly efficient, and can realize real-time interactive animation operations without code.
Disadvantages: The animation effect that can be completed is more limited than that of Hype 3.
Export format: video mov, the link can only be previewed synchronously on the mobile phone, and the screen can be recorded.
5. Keynote
This should be an artifact that designers know, just like the slogan "Let your presentation be refreshing and outstanding", it is 10,000 times easier to use than PPT.
Advantages: Brainless operation, first-class effect.
Disadvantage: Only effective transition animation.
Export format: keynote file.
3. Inventory of core skills commonly used in UI animation
Since most of you here are UX designers, the following will focus on the introduction: How to use AE to achieve several core UI animation skill points?
Skill Point 1: Easing
The original intention of interactive animation is to bring a comfortable user experience to the product, so in essence, the transition of each interactive animation should follow the principles of physical curves and easing, such as: pull-down gravity, ease in and out of cutscenes , to prevent the product from giving users a blunt feeling like a machine.
AE application