A case study on the difference of static and Dynamic Web page vision

This time to share the content, is about static and dynamic visual communication in the work, the changes and values produced. Hope through our QQ game work project, the day-to-day operation of a simple example. To share with you, the role of small dynamic visual performance, as well as our designers in the project ideas and methods.

Static visual communication: Static visual communication has a wide range of forms, covering almost every aspect of social life. The static visual communication form mentioned in this paper is not a pan-talk, only taking the various static visual communication forms that I have seen in the F1 arena for example, to do case analysis. Mainly includes three types:

1. Advertising and posters for the promotion of the F1 team and drivers;

2. Guide the audience, introduce the competition and the venue of the graphic drawings;

3. I have witnessed the construction facilities (such as stands, runway, etc.), the scene environment, a large number of Chinese and foreign audiences, dress and so on.

Dynamic Visual communication:

The dynamic communication form is not the film, television and other animation art which is generally referred to. Instead, it means:

1. Video images of large screen playing in and out of the stadium;

2. Performance of all dynamic activities on site (such as spectator activities, racing scenes, etc.).

3. Standing in the perspective of "personal experience", in fact, what was real in the scene itself was a dynamic process in progress. The observation subject uses its own vision to make the "original ecological record" similar to the documentary form in the reality scene. This is also a special form of dynamic visual communication for others. (above text source Baidu Encyclopedia, the picture is self-matching)

Advantages and disadvantages of both:

Static advantages and Disadvantages: The advantages of low cost, such as posters, packaging design, the shortcomings are not vivid enough, no strong impact feeling.

Dynamic advantages and Disadvantages: The advantages can be condensed to show the scene, to bring us vivid, authentic and strong on-site impact, visual impact. Video, animation (action decomposition), the disadvantage of high cost.

(Simple animation example)

Background of an instance project

Introduction: QQ Game Hall Gift Package Aggregation page, gift package issue key entrance. The old version of the entrance vision relatively weak, in the first time users open the QQ game Hall, can not attract the user's eyes and attention. Affect the purpose of the operation of the product. Through the change of the product operation idea, the visual enhancement button expression form. In the process we also encountered some problems, in front of these problems, we are how to solve.

Second, design ideas

Can visually see the left side of the banner ads, has occupied 85% page display width, as the first page to push information. Second, we need to identify key optimization objectives, "Free gift package" pick button. Then you will face the problem of how to attract users ' attention in the existing area. and is not to affect the user access speed, under the premise of satisfying the demand for attention. So we split the design point of the button into two.

A. Increase the whole hour countdown dynamic hint effect

B. Add animated GIF package box (Flash dynamic effect)

The next is how to strengthen the concrete, the old version of the two problems. The resolution button visual boot is not obvious enough.

Iii. Design and implementation

A. The whole point countdown dynamic hint Effect: Countdown function to share (do not explain here)

B. button Dynamic Gift package (Flash effect Demo)

Flash to determine the effect of disguise, here due to the consideration of loading speed problem, we can only revert to the package to GIF format, the picture frame into PS, to determine the image positioning and sorting. (step does not specify)

Then the file format is compressed, because the gift package icon glows in the blue bottom, will have the obvious noise point. Affects the quality of the button display. Here we do a lot of compression attempts. (step does not specify)

Finally, the optimization of the export format to ensure visual quality, determine the size of the compression. Prepare test and release online.

Iv. Effect of implementation

After the release of the online, we received a surprise. There is a noticeable increase in statistical data, which is the value of small dynamic changes. Through the optimization of data before and after the proof (percent), our design ideas and implementation direction is correct.

Note : For more wonderful tutorials, please pay attention to the triple web Design Tutorial section,