Motion Design
foreword
At the end of 2018, a cross-team sharing course was held for 50 people. During that time, there was a lot of need for interface animation effects which I was fascinated by. I took the opportunity to share and communicate within the company and picked some ppt clips.
1 What is Motion Design
Motion Design is not animation or cartoon.
Motion Design usually refers to the dynamic changes in interface design, which can often be seen in electronic products such as computers and mobile phones. With the improvement of technology and equipment, especially the advent of the iPhone (2007), motion effects have truly entered daily life. Moiton Design has gradually been valued and used by designers. The premise of interface animation is user experience, which means that all interface animations need to be "meaningful", which is the biggest difference between Motion Design and animation.
For example, refreshing pull-down app pages or clicking the feed card transition is common. The realization of motion design requires the effort of both the developer and designer.
2 Basics of Motion
2.1 Object
2.2 Elements
△Position + Scale
△Position + Scale + Rotate
Each element corresponds to these attributes (position, scale, transparency, rotation, color, shape), and they can change at the same time in a motion event. For example, what you see here is a square element, position, and scale attributes Changing together. Other common attributes, as well as blur, speed, and so on.
For example, while clicking or tapping the feed card, it will transition to the details page, which includes the disappearance and appearance of text, that is, the change of transparency, it includes the movement of the position of the main images and the change of scale and mask. When making Motion Design, these need to be thought clearly: whether the position of the element changes, whether the size changes, whether the transparency changes, whether it rotates, whether the color changes, and whether the shape changes. With these considered clearly, Motion Design will establish a solid foundation.
2.3 Trigger
Triggers include user behavior, system, and environment, most of the trigger behaviors we recognize are initiated by people, and there will be no motion without user interaction. We often ignore the motion generated by the system, such as low battery reminders, network disconnection reminders, notifications, etc. Another trigger factor is the environment, for example, the mobile phone automatically adjusts the brightness according to indoor and outdoor light, etc. People’s senses of touch, hearing, vision, taste, smell, expressions, and actions are all trigger mediums.
Gestures and voice are common ways to trigger motion on mobile. On PC, usually, we can not directly interact with the device, so we can only rely on the keyboard and mouse to interact with products in a relatively primitive way. In somatosensory games and smart devices, the triggering method extends from the hand to the movement of the body, even the five senses, body temperature, and so on.
2.4 Time
Curves are the core of Motion Design. In addition, it is necessary to clarify two key points of quantification, the conversion of time units, and the conversion of frame rates: 1s=1000ms,
Generally, the Motion Design of the interface will be accurate to ms, which is also a common time unit when developing.
In traditional software such as AE, the setting of the frame rate needs to be considered. Some teams set 60 frames per second (google SUMux Motion Design Team), and how to set the frame rate is to prevent video clips could not be merged. When producing, as long as you can set a frame rate that is convenient for unit conversions, like multiplication and division. Such as 25 frame rate/s, it is convenient for the whole production to divide, as long as it is convenient for you and the team to communicate.
In 2007, the latest experiment of the Human processor model (how long it takes to perform a certain task.) proved that the speed of human perception image is between 70-700ms, with an average time is 230ms. In 2014, MIT research pointed out that the limit speed for human eyes to perceive images is 13ms.
It can be found that from 2007 to 2014, with the accuracy of the research, the rapid development of society, and the advancement of technology, people's patience has become less and less, and our expectations for the response time of mobile devices have become shorter and shorter, testimonials also change with the times. What we actually need to do is not experimental research, but extract scientific basis from the data that affect the duration of Motion Design, because the appropriate duration of interface animation is not only an art but also a science.
According to the physiological experiment papers and experience just mentioned, the best duration of Motion for mobile devices should be between 75-500ms. In Google's latest Material Design websites, the shortest disappearance time is also defined as 75ms for circular breathing motion. Such as loading, it will even be extended to 1000ms/cycle.
In addition to physiological factors, there are also equipment factors that affect the duration. According to the speed formula, we can get: Speed is equal to distance divided by time, that is to say, at the same time, the same element moves farther on a large screen than on a small screen. In order to balance the visual effect and maintain the element’s consistency, the application of Motion Design should also consider the size of the screens. For example, the same moving element on iPad last 30% longer than on mobile.
3 Features of Motion Events
3.1Feature
△Excerpt from ppt (The elements in left gif moving without priority, the elements in right gif moving functional.)
The motion on the left can attract the user's attention, each element has made a movement carefully, but it is counterproductive. Icons and text appear in order from top to bottom and then leave the scene sequentially. This kind of movement is worse than without animation, the movements don’t guide users, and it only adds to the confusion: "Which one should I look at? Is it the icon that appeared first, or the icon that moved last?"
On the contrary, the motion on the right is functional. After users clicks, the main element moves reasonably, such as the fan product photo, which is the last moving element, which can be well conveyed to the user. Because the fan product photo is the main element of the transition, importance, and priority are used to convey information and explain how the results seen by users come from. This is the function of dynamic effects.
3.2 Physicality
Motion Design has three important characteristics: Physical(Material), Functional, and Emotional( Delightful).
Motion Design can help us improve user experience, make the UI interface appear more consistent and real, and bring an innovative feeling to the whole product.
Physicality: reality, rhythm, space, level, time
Functionality: predictive prompts, attracting attention, efficient feedback, transmitting information, guiding operations, smooth transitions
Emotional: adding fun, entertainment, innovation, and uniqueness
In Motion Design, the application of physical laws is to increase the authenticity of the interface. Reasonable motion is meaningful and can meet expectations. The more motion is in line with the cognition of the real world, the more it can help users predict and understand, and feedback. Authenticity is the basis for users to perceive the action. The motion also imitates the force of the real world to make the movement more natural, which means that our subjective feeling is more natural.
The action experience we build in real life is all derived from the "weight" of objects. [Newton's second law] In the real world, the sense of weight is conveyed through the object's response to force. The lighter the object or the greater the force it receives, the greater the acceleration, and vice versa. In interfaces, we also use speed to convey the user's perception of the force, the perception of weight, speed, and slowness of objects.
In addition to weight, acceleration, and deceleration are also affected by surface friction, inertia, etc. Therefore, elements in the interface animation will not suddenly move quickly, and suddenly stand still. We will use ease-in and ease-out parameters to attract or impair concentration.
The sense of weight conveys the material, weight, and speed of elements, space conveys the hierarchical relationship of objects. With the help of space, designers can express the front and back relationship of objects at different levels in a non-3D environment, and cleverly combine the methods of "cover" and "mask" to help designers explore more virtual physical spaces on the z-axis. The hidden, underlying, and off-screen elements in the static interface UI can be well-fed back to the user through Motion Design.
3.3 Emotional
△Excerpt from ppt
In addition to satisfying functions and physicality, a new trend in motion design is emotion. The integration of emotion makes people feel unique. When you see similar motion, you will think of a certain product, such as the motion of like and folow at facebook, Weibo app etc.
As we said before, motion tells stories. When people interact with products, products change states. Most of the changes are communicated to users through interfaces, directly affecting the user's experience. Reasonable use of Motion Design can enhance the vitality and expressiveness of products and reduce the cost of understanding for users. Like Interactive Design and Visual Design, it is a channel to convey product information.
4 Launch and Tools
△Excerpt from ppt
Designers produce Motion Design and throw them to developers videos or gif. It is not surprising that developers complain that there is no time to make any Motion Design. Developers can’t develope projects just by looking at video demos. Often, Bezier curves and functions are the most important data for developers. We need to provide parametric data which developers can rely on to accomplish the Motion Design and maintain motion uniformity and reusability.
Like the animation and video we saw at the beginning, it is a method that designers are familiar with to describe the way of motion, which is to output video or gif demos. It is necessary to use function curve to convert these motion speeds into a language that developers can understand. The specification documents after the demo are necessary. This document needs to be clearly written, in addition to objects, movement mode, trigger, and time, it also needs to describe how elements move in a language that developers understand.
Each tool has a different method of obtaining Bezier values. For example, in AE, we can convert by editing the value chart, but the conversion method is very complicated. You can also use a simple plug-in FLOW to conveniently control the easing of element attributes. Similarly, in Principle, we can also find the preset easing type and parameters, and at the same time, we can drag and drop to adjust the motion effect by ourselves.
△Excerpt from ppt (Bezier curve)
△Excerpt from ppt (specification document: curve parameters)
Curve and time are two important values for parameterization. This is when I was working on an operation project about the World Cup. Regarding the communication method between dialogue bubbles and development, the first thing is the elements. You must be clear about the elements you design. Sometimes it is necessary to split them. For example, I split the motion of these bubble elements into text, speech bubbles, and decorative football graphics. Let's take a closer look at what other parameters are needed: The designer needs to briefly describe the trigger, whether it is clicking or sliding up, and which button appears. The second is the duration, which refers to the duration of the movement of a certain attribute of this element, such as the dialogue bubble here, the position and transparency attributes of the dialogue bubble change for different durations, so they must be marked one by one. The parameterized dimension should be based on the attribute of the element. The next step is to use the development language of the Bezier function curve to explain how the element attribute moves.
Some readers may find that there is another kind of description of motion effects here, which is the AE Expressions, which can satisfy some Motion Design that cannot be achieved by Bezier, such as elastic animation. Although Expressions can be expressed more delicately and realistically, but first of all, the designer needs to be able to write AE Expressions, and at the same time, the cost is slightly higher for developers. Bezier can meet most of the animation needs. If you use AE for animation, some scripts can quickly add and see Expressions, such as "Flow", and the "inspector spacetime" developed by Google itself can also export animation parameters with only one click.
△Excerpt from ppt (specification document: CSS Sprite)
Another landing method is the traditional CCS Sprite, which is mostly used for interface animations (micro interaction) with more complex visuals and less interaction, such as icon changes, loading animations, brand design, and so on. Most of this part of the animation is done by the visual designers. The interactive designer may be seldom or not involved. The method of the output sprite image is relatively simple. We only need to output the images in png format for each frame, and then stitch together a long image according to the actual pixels. The png sequence frame guarantees quality and transparency, but we do not choose to output the format of gif, because gif cannot achieve multi-level transparency and takes up a lot of memory. The way the sprite is played is like the original animation film. If you use this method, you need to reduce the frame rate as much as possible and try to delete unnecessarily repeated frames (such as 2, 4, 6...)
△Excerpt fr
In fact, for designers, there is no best animation or motion tool, only the most suitable one, because each tool has its own advantages and disadvantages. For example, AE is more difficult to learn, like Principle and Flinto, which are easy to learn but have the disadvantage of not being able to export codes, like Origam is hard to learn cause the user need to have coding skills, and not every designer can control it.
So we have to consider which software to use in terms of compatibility, interactivity, and teamwork.
The Motion Design is done after the visual output, and the visual draft needs to be used, so the animation software should consider compatibility with software like Sketch, Figma, and PS.
Compatibility with PS, software like Principle and Flinto can be imported from Sketch with only one click, saving the trouble of cutting every layer of png image and importing them to animation software. AE also has a plug-in that can import sketch files (Sketch2AE Google produced), but neither is efficient enough. Like AE, it has powerful functions and fine motion effects. Many scripts can be used to export codes in AE, but the worst point is that the motion prototype cannot be clicked, gesture interaction is not possible, and production is time-consuming.
The last point is the cooperation of the team. Considering the upstream and downstream of the teamwork process, what format the software can export, how to share the motion effects to PM, and whether the software can share the animation parameters or codes directly to the developers. Of course, there is no animation software that can do both well.
It depends on what we need. If we focus on the basic dynamic effects of the interface, such as transitions, and want to quickly output the motion and communicate with team workers, then easy-to-use software such as Principle is the best choice. It is very suitable, fast, and efficient. If you want to do micro-interaction such as icon micro-interaction, turning a cross into a check mark, or a series of micro-expressions while tapping the "like" button, probably no more suitable than AE software.
5 The Conclusion
Interface animation is a part of interaction design. Although in most teams, UI is responsible for animation, as in Motion Design, "movement" should combine interaction and cognition, because the moving part can attract users and improve the quality of the interface. Even the cartoons we saw when we were young are meaningful "movements". When the character stops running, he always shakes his body. Then it falls. This is actually imitating physical inertia, but it is exaggerated. Let's end with the carton "Tom and Jerry".Fin
No reprint