Summary of interactive fretting effect design

The direction described in this paper belongs to functional dynamic effect, which is suitable for interactive effect design of UI interface. It has a clear logical purpose and focuses on helping users understand and effectively get through the current state. Dynamic effect covers the entry/exit dynamic effect (enter &; Exit), transition, notification and loading.

Mitigation, offset and delay (offset &; Delay) is mainly related to time. Parenting is used to explain the relationship between elements. Transformation, value change, masking, superposition and cloning all play a role in strengthening the continuity of the elements themselves. Parallax is often used to express the hierarchical relationship of elements. Use masking, dimensions, Dolly & Zoom to show the relationship between elements and space.

1. Loosen

When the movement occurs, the change of the movement rate of the element meets the user's expectation. There are few complete linear motions in nature, and nothing can perfectly maintain a uniform motion. The slow-motion effect can make the action look more natural, conform to the user's cognition and meet the user's expectation.

For example, almost all the dynamic effects in your mobile phone are slow motion. Does it look comfortable and harmonious?

2. Offset and delay (offset &; Delay)

Offset and delay are used to stagger the movement time of elements, indicating the hierarchy and relationship between elements. Designers use staggered movement time to make information or interface elements advance and retreat in different orders, use obvious disorderly movement to suggest that there may be some difference between user information and interface elements, or use disorderly methods to attract users' attention. But in general, designers should not use too many delay effects, because, for example, the loading of the network itself takes time, so it is best to use delay effects only to serve the technology.

Example: Apple official website's product details page is widely used.

Step 3 nurture

When users operate, elements with parent-child relationship help users to better understand the hierarchical relationship between them and bring more rational operational feedback. Just like the animation given above, the lower box moves left and right, and the upper box moves left and right with the lower box, and at the same time makes its own scaling movement, which constitutes a father-son relationship. Simply put, the parent-child relationship is that the value of an attribute of a child element changes in proportion to the value of an attribute parameter of a parent element.

Example: Google Allo holds down the send button and slides up, and the font of the sent content becomes larger.

Step 4 convert

Use morphing to inform users that the state or function of an element has changed. People are sensitive to the deformation of physical objects, and reasonable deformation can clearly and efficiently convey correct information to users in the most efficient and pleasant way. Note that the deformation mentioned here does not have to be big enough for the animation above to be considered deformation. Perhaps the change of color or angle can achieve the desired effect.

Example: Know the animation effect of Live's choice of sponsorship amount.

5. Changes in value

The dynamic effect of continuous numerical change can make users clearly see whether the numerical value is increasing or decreasing. In this regard, I want to present it with two moving pictures. As you can see, does the continuous dynamic effect of digital changes better let you know whether the number is increasing or decreasing? Imagine that if this value is your money in a wealth management App, then the increase or decrease of this number is very important to users.

For example: JD Finance Mobile App, the numerical change effect of "Total Assets" and "White Strip" pages.

Step 6 cover up

Mask animation is an option to create a continuous effect when interface elements enter or exit. This type of dynamic effect seems to be common in material design, so partners who have never used the native Android system may be unfamiliar.

Example: native Android system (above 5.0 and below 7.0), 7.0 cancels the menu key and replaces it with the above operation. ) Click the menu button to bring up the animation effect of the menu. The transition effect of Meitu Xiu Xiu mobile App after clicking the function buttons on the home page.

7. Covering

Overlay is used to clarify the positional relationship between two independent elements on the plane (no thickness) design interface. In graphic design without the concepts of thickness and depth, the use of overlay animation can make better use of the limited screen space.

Example: WeChat swipes the card to delete the chat record.

8. dim

Masking is very similar to masking, showing depth in graphic design, without the concept of depth. It does not completely cover the underlying elements, but it usually keeps the underlying elements visible by Gaussian blur or darkening.

Example: Frosted glass effect can be seen everywhere in iOS.

9. Cloning

When an element is produced, it expresses the continuous relationship between elements. This animation can clearly show the occurrence and relationship of one or more events caused by an operation.

Example: the effect of Apple Messages sending information.

10. Parallax

Interface elements start to move at the same time, but the efficiency of movement is different, which constitutes the parallax effect. Users can display the position and hierarchical relationship of three elements in the space through parallax effect when scrolling. This effect is very beautiful and high-end, which can make the whole page look more vivid. Through the characteristics of parallax, I can guide users to pay attention to what they should pay attention to. Elements with high movement efficiency usually indicate that they are closer to the user and are suitable for carrying important information with more practical significance, while elements with low movement efficiency usually indicate that they are far away from the user and may not carry any important information.

For example: Apple official website product details page.

1 1. dimension

Plane interface elements are multidimensional, which are used to express the position and hierarchical relationship of each element in space. In fact, flattening does not conform to human cognitive logic (and conforming to human cognitive logic is almost the first principle of usability), so people have made great efforts to flatten the interface and express depth and thickness in an interface without depth and thickness. This sentence is awkward to read, but it is actually like this. Multidimensional is rarely used because there are many ways to increase the depth (overlay, mask, shadow, etc.). ), and the cost of multi-dimensional development is relatively high.

Example: the page turning effect of iBooks and Flipboard, and the Appbar animation of Didi taxi exiting the call state.

12. lens translation and zoom (push-pull &; Zoom)

Lens panning and zooming sound the same thing, but in fact they are completely different. Lens translation is a term for shooting. The object remains stationary when the lens moves, or the lens remains stationary when the object moves back and forth away from or near the lens. Zooming means that the lens and the main body remain stationary when the main body zooms. The effect of lens translation and zoom shows the relationship between elements and space, and also shows a sense of depth.

For example, the unlocking animation of iOS is a typical lens translation effect, while the animation of double-clicking to enlarge the picture is a typical zoom effect.

I remember? A website about memories, which gives you a refreshing browsing experience after clicking.

Two. Response time and duration

Time is the core element of dynamic effect, and two kinds of time-reaction time and duration time need to be considered in designing dynamic effect.

1. Response time

Response time refers to the interval from user operation to feedback. Different trigger mechanisms have different restrictions on response time:

For the feedback directly triggered by user operation, the ideal response time should be controlled within 100 milliseconds.

For the feedback indirectly triggered by the user's operation, the response time can be allowed to reach about 1 second, and no feedback will be given for more than 2 seconds.

When it takes more than 2 seconds to get the feedback result, the loading must be designed.

When the feedback time is 2-9 seconds, cyclic loading (such as common chrysanthemum flip) can be adopted.

When the feedback time exceeds 10 second, the loading method with progress instructions must be used (if 60% has been loaded, 30 seconds remain).

2. Duration

The duration of interactive inching effect should not be too long, so as to avoid wasting users' time and affecting users' reading and operation efficiency. Generally, the duration should not exceed 500 milliseconds (except the loading effect).

If you want users to clearly capture the gradual change of elements, it must last for more than 200 milliseconds; If you don't mind the user thinking that the change of elements is instantaneous and want to save the user's time as much as possible, the duration can also be designed within 200 milliseconds (for example, the color changes from hovering to subtle buttons).

On the one hand, the specific duration will be affected by the size of elements and the complexity of dynamic effects; On the other hand, it will also be affected by the target dynamic efficiency and the dynamic efficiency of equipment operation:

The slight change effect of small elements (such as fading in and out, size change and other small-scale changes) is generally within 200~300 milliseconds.

The complex change effect of larger elements (such as large-scale slow displacement) can be as long as 400-500 milliseconds.

Faster dynamic effects are easier to attract users' attention and save time. If the dynamic effect elements are out of the user's sight, in order to attract the user's attention and take action, dynamic effects that change greatly in a short time (such as position movement, speed change, etc.) can be used; If the dynamic element is already within the user's attention range, in order to maintain visual continuity, it can be finished after completing the necessary transition (such as fading in and out).

Slow dynamic effects have less interference to users and are more suitable for scenes that are not directly triggered by users. If the dynamic effect is not directly triggered by the user, it is expected that the user's attention will not be diverted, and a dynamic effect that changes little for a long time can be used (generally, there will be no position shift).

Different devices have different screen sizes and characteristics, and the ideal duration is also different. Generally speaking, for mobile devices, the larger the screen, the greater the displacement of the dynamic effect, so the longer the duration should be (the duration on wearable devices is about 30% faster than that on mobile phones, and the duration on tablet computers is about 30% slower than that on mobile phones). The dynamic effect design of desktop devices is often simpler and faster than mobile devices (150 ms ~200 ms is more common). This is because in the scene of desktop equipment, complex dynamic effects are prone to frame loss and jamming, while the dynamic effect of instantaneous response avoids this situation.

The incoming dynamic effect is generally faster than the incoming dynamic effect (for example, the incoming dynamic effect is set to 230ms, and the incoming dynamic effect can be set to 200ms). This is because users usually need to read and process new information when an element enters the market, and when an element enters the market, it usually indicates that the user's task on the element has been completed, so there is no need to pay attention. Fast input can save users more time.

Three. Common types of dynamic effects and their application reference

The most commonly used, easiest to implement and best able to guarantee the performance in browsers are the changes of four attributes: position, zoom, rotation and transparency. When changing any one or more of these four attributes can achieve the purpose of interactive micro-effect, there is no need to add other unnecessary attributes to avoid affecting the fluency of dynamic effects.

The change of attributes is generally divided into linear change and curve change.

1.？ linear change

Linear change has the characteristics of uniform speed and sudden stop, and is generally suitable for transitional dynamic effects (such as changes in transparency properties, including fading in and out or switching between colors) or regular loading dynamic effects (such as uniform circulation, numerical changes or progress changes) that have nothing to do with physical properties. In the changes related to physical parameters (such as position changes), try to avoid using linear changes, otherwise it will easily bring people the feeling that the dynamic effect is stiff and unnatural.

2.？ Curve change

There are many kinds of curves. In the design of interactive fretting effect, transition curve has the widest application range, the most natural effect and less interference to users. Mostly used for attribute changes related to physical attributes. Common scenarios are as follows:

label

The interactive fretting effect is mainly functional and must follow three core design principles: restraint, clear focus and natural fluency. Before designing, we should think about how we want to influence users' attention, what is the goal of the dynamic effect, what is the frequency of the dynamic effect and what is the trigger mechanism. When designing, we should choose the appropriate dynamic effect type and duration, and pay attention to the reaction time of feedback, so as to be reasonable and convincing.

Self-translation reference:/UX in motion/declaration of UX creation availability in motion -a87a4584ddc