Four roles and five principles of designing interactive dynamic effects of scene UI

The following focuses with you on the scene UI interactive dynamic 6 purposes, 4 roles, and the 5 rules of application. I hope you can help the scene UI interactive dynamic design.

App search interactive dynamic effect appreciation

The primary goal of UI interactive scene effect should be transformed and enhanced support for users in the state.

Saffer (2013) proposes that there are 6 purposes for the use of dynamic effects:

1, attract users attention in designated areas

2, the relationship between the object and the user’s operation

3. Maintain multi window or multi state context relations

4. Provide a sense of continuity of events

5, create virtual space to guide users to transform between state and function

6, create a sense of immersion and interesting

Micro interactive button dynamic effect



Scene UI four functions:

1. Support micro interaction

2. Display the movement process

3. Explain

4, decoration

Dynamic guidance



Google’s Material Design (2017) suggests that in MD, dynamic effects are used to describe spatial relationships, functions, aesthetic and mobility goals.


The dynamic effect shows how the APP is organized and what it can do, as follows:

1, the boot window switch

2. Remind the user of what happened next

3, the sense of hierarchy and space between objects

4, slow down the user’s awareness of waiting events

5, beauty and individuation

In conclusion, the author summarizes the interactive effect of purposes, SAFRI, Safari law



Tell the user how the state of the object and window changes

When the state of the object in the interface needs to change, it can show the change process with dynamic effect, so that the user can perceive the change more clearly. Accordingly, when the window changes, you can use the dynamic effect to show more clearly how the window changes from one state to another.



2. Attention

Attract users’ attention and tell users what to do

When you want users to focus on one area, or perform an operation, you can attract their attention through dynamic effects. When the user needs to perform the operation, pay attention to the combination of UI and dynamic effect to inform the user needs to operate.


3. Feedback

Tell the user the relationship between the operation and the object

When the user performs an operation, the dynamic effect is a very useful feedback mechanism. Through the proper use of dynamic effect, users can clearly perceive the feedback of their own operation, so that users know what they have done.



4. Relief

Ease the user’s perception of the processing speed of applications

When the application executes a long time operation, it can alleviate the user’s perception of time with the dynamic effect, and even create a fake dynamic effect (in fact, it doesn’t need to deal with it for so long). Now many APP drop-down when loading dynamic effect is the principle. For users, they focus on the speed of perception, not the speed of actual consumption.


5. Individuation

Make products more interesting and personal

In order to make the product more interesting, you can use some dynamic effects in some occasions to create some pleasant animation effects. Two points I think we should pay attention to, one is the dynamic effect of time is short enough, two is dynamic effect to be fluent enough.

It should be noted that these goals are not independent. Designers can use any of them to design a dynamic effect. For example, the handoff effect between the two windows not only attracts the attention of the user, but also tells the user that the panel is switching. It also tells the user about the location and space of the two panels, up and down, right and left, or around.

That’s what the APP designer needs to learn about the interactive dry goods knowledge of the scene.

Leave a Reply