Tencent Game process Specification Information visualization Project combat

Compared to boiled water, ice cream is obviously more delicious (unless you have a strong resistance to sweets). So for your eyes, nature is also more want to "eat ice cream" slightly!

In recent years, the emergence of various data visualization, information visualization, science knowledge, research reports, information charts to get rid of the previous single data text content, no longer cold and have their own "taste." These interesting reading experiences are not the very rich taste of "ice cream"! Let's take a look at these wonderful examples.

The above is a designer to their own diet planning a week for the theme of the poster, originally less than the color so delicious moving junk food simple health food, in the designer's ingenuity to become cute and fresh, the thermal protein and other data are no longer dry and become one of the beautiful elements of design. This is more than those on the market didactic healthy eating recipes to make people have more appetite, is not to let the viewer more motivation to throw away the junk food, into a healthy new life?

Above is the classic font helvatica a set of timeline charts, designers in addition to clearly show the history of the font, do not forget to use strong black-and-white red coagulation with the font itself "elegant, classic" temperament.

The above is a group of Mercedes-benz ads. As we all familiar with the luxury car brand, this group of ads in the form of information visualization, some people inkling common sense of the graphic exaggeration, the screen is attractive at the same time more convincing. Through indirect means to promote brand concept, enhance the brand's rich connotation image. The text used in the chart's content needs to be "professional, rigorous," and not everyone can get valid information from it. After the graphic content, the characters have the expression, reading threshold greatly reduced. is no longer a read-and-forget cramming information.

　　Project background

Participation in our various needs of the team outside a large number of people, there are more specific work flow specifications to enable the small partners to understand that their participation in the project is necessary to improve efficiency. The general specification content is to express with the pure text content, for me this kind of Islands of course is to look over to forget, wait to use when need to turn out again to read again, the efficiency is low and very troublesome. If you convert it to the image content, will it be more intuitive and easy to impress?

　　Project Process

At the beginning of this demand, we intend to be a full HTML animation to achieve the design, not only in the process can make the original ppt form easier to read beautiful, but also some new technology to try. The whole process is based on the concept of a factory line, with many interactive operations and small animation effects to allow viewers to be more specific about each step.

But due to the direction of the set too vague bias to non-functional. After the first draft of the draft design, there are many problems: the reading time is too much, but the intersection of the intuitive text PPT greatly improved the reading threshold. Job roles are too abstract, too much, the distinction between inconspicuous colors also creates a more visual confusion, with the names of characters and small objects that also cause distinctions between each other to pass through weakly, spending most of the time in the design of scenes and animations instead belittling the display of the most important steps in the specification. This and graphical process specifications to allow the viewer to better understand the purpose of the entire workflow is inconsistent, and in accordance with this form to draw, 12 specifications is a considerable workload, if the follow-up specification content has been modified, the maintenance volume is too large. Then we adjusted the various aspects of the flowchart after the discussion. First of all, we re-examine the roles of each person, collect and observe the positions of personnel, refining its more typical characteristics. First by the most understanding of the role of visual designers to start: love to wear the black Department of concise clothes, more unique round frame glasses, commonly used tools Photoshop and so on. Remove the emotional color of facial features, so that each character does not have too much subjective inclination. To express the difference with simple elements.

After many adjustments, the final image has been more generally recognized, so all the roles are redrawn. Each persona uses the same doll template, and then the roles are differentiated by their dress style.

The characters of the adjusted character are more obvious, and the distinction degree has been greatly improved. More specific visualization makes the sense of generation also strengthened, while discarding the use of character images in the process spindle and describing them in words. The character image is only displayed on the head of the page and used on the pages of the catalogue. Then the main axis of the process is also adjusted to remove or weaken the superfluous details and strengthen the important information. To ensure that the information conveyed by the clear and clear. At the same time, the process is classified into four categories, each of which is placed in an interesting common form (road, river, Monopoly, processing line). Each of these process tracks has made a few small differences, as far as possible in the cost of unnecessary effort to reduce visual fatigue. The orbit main body also uses the low saturation color, avoids disperses the visitor to the key node information reading.

At this stage, the process of visual seems to be slightly thin lack of fun, and then intercept the more important steps of the node to draw the icon. Because the contents of the icon are different, the direct placement in the process will appear quite messy so add the same dark gray round bottom and long projection. Because the step icon is a key part of the process, it adds four frames of animation to make it more vivid.

Final product implementation: Not for the form of design but from the function to design and add animation, in addition to the main functional blocks, other decorative elements as simple as possible.

　　Project Summary

It took a lot of time to discuss and revise, and I got a lot of experience from it. Compared to simple daily needs, this function priority, will be long-term use, more complex projects, before beginning design should be more thorough thinking and judgment, with its use of group perception, in order to ensure the good realization of its function in the case of conversion to design language, just talk about is good design. Just like ice cream, coloring agent modelling and other packaging means is to take people's attention, but more important is to make its formula is not delicious. Rather than doing nothing, the idea of making "ice cream" is good, but making "nice and tasty ice cream" really meets the needs of the user.