“Diagram Dynamic Effect Design Idea”

This paper focuses on the dynamic effect design process of three types of charts: line chart, line chart and pie chart, and the dynamic effect of interactive scenes on mobile terminals. There are many graphic design works on the Internet, and some of them will also add dynamic display. This paper takes the graphic of the team’s mobile terminal products as a reference, and refers to theories and academic basis to create well-grounded dynamic effects.

01

–

Lead parameters

Good dynamic effects should be “invisible”, and this invisible is not invisible to the user, but natural and logical perception, and has the value of contributing to the function and conform to the physical material characteristics of the real world. Scientists have studied How long it takes humans to perceive things in animations — 230 milliseconds? , the time and motion curve (style) of the dynamic effect components are established as follows:

  • Number of seconds:

  1. Length (light) : 450ms, used for large area, strong function, let users clearly perceive and other dynamic effects

  2. Medium: 300ms, used for functional or highly decorative (such as water ripples), let the user feel the dynamic effect

  3. Short (heavy) : 200ms, weak decorative, no user perceived (negligible but delicate component) dynamic effects.

  • Motion curve:

  1. (X,Y,X,Y)=(0,0,0,1) : functional and perceptible (> 230ms) dynamic effect.

  2. (X,Y,X,Y)=(0.25,0.1,0.25,1).

Prepare in advance, then use the chart to study.

02

–

Chart analysis

As can be seen from the figure, one or more main broken lines in the broken line chart represent the trend of data, and are combined with auxiliary designs (for example, the red interval indicates the abnormal part, and the dotted line indicates the important data). Some of the curves are set to read the latest data or obtain values through operation. In the bar chart part, it can be seen that the same line chart contains the main bar chart and other auxiliary designs (warning line in the figure). In the interaction design, click each bar to view data details. Pie chart shows the main chart, block ratio means different proportions, also click on the block or corresponding list to see the data details.

03

–

Dynamic effect to realize

After understanding the composition of each chart, I disassembled the chart as follows and arranged it in logical order: 1. Vertical and horizontal coordinate values 2. Main curve 3. Auxiliary design 4. In order to clearly show the effect of the chart, the longest 450ms matching dynamic effect curve (X,Y,X,Y)=(0,0,0,1) is used. In order to conform to the nature and logic without image deformation, it is presented in a left-to-right mask mode. The rest of the auxiliary effects use 200ms color gradient, in order to display. See the diagram belowAfter explaining the general design idea, the remaining details of each chart are described separately below.

  • The graph

The auxiliary background color ends with the chart display, with interactive operation, click on a time point to display the details of the change, use 200ms gradient with displacement mark, click on the association with the description

  • A histogram

One: the column chart is divided into two levels. Do not compress when displaying dynamic effects, and keep the natural mask. Click on the same line chart for illustration 2.

Second: the auxiliary alarm standard line ends with the background color and chart display, so as to distinguish the user perception and highlight the alarm standard message

  • Pie chart

One: the pie chart divided into multiple blocks does not compress in displaying dynamic effects, and keeps the natural ring mask

Two: you can match the following table, or directly click the chart block to select the operation, view the details of the block message, and mark the current selected item with the background color of the table selected status.

04

–

Result summary

At first, the length of display time was discussed for a long time. 450ms was too fast for some people, but the original speed was maintained after trying a longer value such as 800ms. Since the dynamic effect design was positioned as auxiliary loading effect, considering that the product was mainly a monitoring and alarm system, the display of dynamic effect was difficult to become its characteristic. After this attempt, the dynamic effect of the idea is more clear, there is no absolute standard answer to the design, but through the theoretical basis, the results of the attempt and the output of more convincing and valuable.

Check out more original content