This article was first published on the following public accounts:
In game development, game planning often pays more attention to the integrity of the game process, GUI designers pay more attention to the feeling of the performance layer, and the animation designers tend to pay more attention to visual performance in the design of the animation in the game, so the "interactive micro-animation" of the function that is easy to ignore by the game interaction designer is more likely to be ignored. Therefore, sometimes we feel that the game projects made by our team seem to feel very stiff to operate, not enough Q bounce smooth, but we can't say where it is wrong, then we have to consider, is it the lack of interface transition animation?
Preface
Since it is from the game control to disassemble the micro-effects, the next content will be more dry, hoping to bring you some guiding significance. Without further ado, let's take a brain storm map first, and the next content will also revolve around these aspects.
First, the classification of micro-effects
Generally speaking, the functional animations produced in the game due to the position, size, transparency, lighting effects, particles, etc. of the UI controls, and which are helpful to improve the user experience, can be called micro-animations (the scope of this article is limited to the micro-animations that can be used in the game development process)
Feedback-based animation
Generally speaking, after the player interacts with the UI control, the animation effect of the control itself is generated and represented, and it must have an efficient and fast feedback mechanism, such as scaling, flashing, etc., which can be called feedback-type animation. This type of animation is suitable for UI controls that require the player to better understand the outcome of the operation and the current state.
By disassembling the UI controls of the game, generally this kind of animation will appear on these UI controls, specific to the state in which the controls may appear.
Transitional animation
Generally speaking, after the player actively interacts with the UI control, the UI layout or performance of the interface where the interactive control is located changes and is manifested between the control and other controls, which is used to supplement the animation generated by the player's game experience in addition to the feedback animation, which can be called transitional animation. This type of animation applies to UI controls that need to maintain transitions and transitions, and are not limited to organizing the evolution of UI elements in the temporal dimension.
By disassembling the UI controls of the game, generally this kind of animation will appear on these UI controls.
Guided animation
Generally speaking, the player does not interact with the UI control, triggered by the system and the UI control spontaneously displays the player's attention, which can effectively guide the player to help the animation, which can be called the guided animation. This type of animation applies to UI controls that hide a subset of functionality or remind the player of functionality. This type of animation can be reclassified, and from the form of expression, it can be divided into streamer-type animation and flash-type animation.
By disassembling the UI controls of the game, generally this kind of animation will appear on these UI controls.
Second, the design specifications of the micro-effect
Throughout the entire design history, not only a designer or institution has mentioned the principle of motion design, such as the system dynamic principle proposed by Google Material Design (2020), the system dynamic principle proposed by Apple IOS (2021), the system dynamic principle proposed by Material Design (2017), etc., so the design specifications (principles) proposed in this article are summarized according to the author's own project experience.
Design specifications for microactive effects
First, let's talk about what aspects of the specification details need to be paid attention to when designing interactive micro-animations (when designing UI micro-animations, interaction designers can adjust the following specifications according to the actual situation of their own projects).
Maintain the consistency of motion (control appearance order)
Guide animations distinguish between light/dark interfaces
Do not add too many attribute changes so as not to affect the fluency of the animation
Control animations with deep interface levels avoid overly complex animation designs
Output specification for microdynamics
Since most of NetEase's game interaction work content is divided into design and output, when talking about the design specifications of micro-effects, the author simply sorted out the output specifications of micro-effects for everyone's reference and implementation.
Establish a template for the animation of each type of game control, which is convenient for direct reuse by the output students.
When reusing the animation output, pay attention to the level of the panel, the node level needs to be consistent, and it is not easy to report errors.
For some highly variable animations, you can reserve interfaces that have parameters (more on parameters in more talks).
Third, the basic unit of the micro-effect is disassembled
What is the basic unit of micro-action? In fact, in this regard, there has been no clear academic definition, the following disassembled basic unit is also based on the author's own reading of some design network articles and books, as well as their own usual interaction experience summary supplement, this article will be composed of dynamic effects or factors that can affect the effect of the dynamics as the basic unit.
The type of underlying variation of the microactive effect
According to the definition of micro-motion at the beginning of this article, the property change is regarded as the most basic animation change, and the following classifications are made, each classification is based on the game control as the smallest unit.
Movement moves
An example of a micro-effect of a game control in a game
Scaling scaling
An example of a micro-effect of a game control in a game
Rotation rotation
An example of a micro-effect of a game control in a game
Alpha transparency
An example of a micro-effect of a game control in a game
Color color
An example of a micro-effect of a game control in a game
Lighting Effect
An example of a micro-effect of a game control in a game
Adjustable parameters for microactive effects
When making a template for general micro-motion effects, some parameter interfaces can be reserved for convenient adjustment when subsequent reuse, and the effects that designers want can be quickly previewed or obtained. The following are some adjustable parameters in this article based on the above basic changes, please refer to the actual situation of the project team.
Response time for micro-effects
The parameters of the change of the micro motion effect light effect, such as the size of the light effect, the duration of the light effect, the color of the light effect, and so on
The initial and final values of the microactivity transparency
The initial and final values of the microskinetic scaling element size
The initial and final values of the angle of the microactive rotation element
The numerical changes in the adjustable parameters of the micro-motion will be affected by the complexity of the micro-motion itself on the one hand, and the target of the micro-motion on the other hand. Take, for example, the response time of the micro-effect, which is the interval between the user's execution of an action and the occurrence of feedback. Different trigger mechanisms have different limits on response times. In the case of micro-animation entry, the appearance animation is generally faster than the entry animation, this is because the user generally needs to read and process the newly emerged information when the element enters, and the element usually indicates that the user's task on this element has been completed and does not need to be paid attention to anymore, and the rapid appearance can save the user more time. Another example is the light effect change parameters of the micro motion effect, in the ordinary game scene, due to the rich information of the interface itself, only need to give the user more attention, but do not need to distract the user too much attention, so the light intensity of the click will be weaker, the specific parameters will be smaller for each value; in the novice guidance scene, because the user is expected to pay strong attention at this time, improve learning, the user needs to concentrate, so the light intensity of the click will also be stronger, and the specific parameters will be expressed as the values will be larger.
In summary, the parameter adjustment of the micro-motion effect is an indispensable part of the interaction designer when disassembling the micro-motion effect for design and production, if the interaction designer can use these parameter interfaces well in the output process, the efficiency of the usual micro-motion effect production will be greatly improved.
The speed change mode commonly used by microactives
In addition to the above basic factors, the microdynamic effect also has a basic unit that can be disassembled, that is, the velocity (time-change), but because the speed changes too much, the following is only discussed from the several speed change modes summarized in generalization.
Linear variation
Linear change has the characteristics of uniform speed and sudden stop.
(1) Uniform speed change
Generally suitable for transition animations that are independent of physical properties (such as changes in transparency properties, including fade-in or switching between colors), or for regular loading effects (such as uniform loops, numerical changes, or progress changes). In changes related to physical parameters (such as position changes), try to avoid using linear changes, otherwise it is easy to give people a feeling of stiffness and unnatural animation.
Curve changes
Curves contain a variety of types, in the interactive micro-motion design, the application of the easing curve is the widest, the effect is the most natural, the interference with the user is also small, mostly used in the property changes related to physical properties, simply show two more typical.
(1) Slow - fast - slow
It is generally suitable for transitional animations related to physical attributes (such as element position, size, etc.), such as the animation of getting rewards, from slow to fast, which can give users a sense of surprise.
(2) Spring positive change - negative change - positive change
A common variation pattern for microactives
The common variation patterns discussed in this section are mainly common modes of microactive demonstration consisting of elements of the above 3 subsections. If the classification of the second chapter is to distinguish the types of animation from the function, then the chapter is to disassemble the animation from the perspective of the animation display method.
Container transform container transformation
Container transformation refers to the transition between background containers designed from one UI element form to another UI element form, and this micro-effect variation pattern creates a visible connection between two UI elements. By seamlessly transforming one element into another, you can enhance the relationship between the two elements. For example, when the proto-god button is clicked and converted to a detail page, the player's focus is directed to an extended version of that information.
Shared axis Shared axis
Shared grid pattern is used for transitions between UI elements that have spatial or navigation relationships. This pattern uses common transitions to enhance the relationships between elements on the x, y, or z axes. A more typical representative of the game micro animation is the switching of the game tab, which is generally a change on the x and y axes.
Fade through fade in and out
Fade-in and fade-out mode refers to the transition through fading way to each other does not have a strong relationship with each other UI elements, such as pop-up windows in the game, pop-up windows generally pop up by clicking buttons on the interface, pop-up interface and entrance button where the interface generally belongs to two interactive levels, in order to make players not confuse this concept, generally will use the form of fade-in and fade-out, and will not distract too much player attention.
Fourth, the specific case analysis of the micro-dynamic effect
In the process of serving the "Celestial Oracle" and the overseas edition (currently the first place in the Japanese best-seller list), the author has conducted in-depth exploration and disassembly of the micro-effects in the "Celestial Oracle". Next, take the "Celestial Oracle" as an example to briefly analyze several micro-effects.
The case will start from the design goal of the micro-effect, evaluate the rationality of the design, and then take a brain map below.
A guide to micro-interaction design from a company
Case 1
Scene: A four-level navigation tab of the Backpack interface of the Oracle
Purpose: To indicate the hierarchical relationship between different elements that are already within the user's attention span
Production: The micro animation uses two basic changes of zoom and light effect in the production, and scales the size of the tab by clicking, attracting the player's attention and displaying the interface level and interface information that the player is currently in.
Detail optimization: The following interface switching can also add a micro-animation effect, so that the player feels that the following content is also switched together.
Evaluation: Basically in line with the design purpose, the player's operating experience will change.
Case 2
Scene: Hints from the Oracle's quest panel
Purpose: To attract the attention of the user, to think about whether the user needs to be able to notice the effect at once and take immediate action
Production: The micro animation uses two basic changes of light effect and transparency in the production, through flickering, attracting the player's attention, prompting the next step of the current task flow, so that the player immediately has a sense of the next step of the goal.
Detail optimization: None
Evaluation: In line with the design purpose, the player has a sense of purpose in the mission flow.
Fifth, the landing evaluation plan of micro-action
So how to determine the feasibility of a micro-action specification in a real project, and whether it is really necessary to implement the specification? This article briefly summarizes some normative evaluation schemes, as follows:
Examination: When training new people, it can be used as a criterion for examination
The specification matching degree is added to the dynamic design review, and the specification compliance is specially scored
The number of statistical norms is applied, and each specification is defined as the value of the person-day, and the reduced cost is estimated
Statistics on the number of UI controls that quantify the driving effect: Quantify the number of panels and the improvement of the overall feeling after using the relevant controls
Usability Test Score: Compare scores before and after the specification goes live
Summary
This article disassembles the basic units of micro-motion, in a sense, or continues from our understanding of the physical world, friction and acceleration in another way in the virtual interface. Mimicking the interface of the real world gives us a clearer understanding of the order of the interface, allowing us to more easily understand and access the content of the interface. Of course, even if so many norms are followed, the design of motion is still an art, not a simple science, and it is always necessary to do more testing and groping. Finally, I hope that the above specifications and dismantling can help students how to use micro-animation efficiently and correctly in actual projects.