The effect chart gives the idea and life to the effect chart.

Do not use blue, change color try, try green, purple, orange, try it ... This element is bigger, the element is bigger, and that is bigger. Don't use this font, try something else ... Try to put the module as a whole on the left, the following module to get to the right, not or as a whole to try ... Oh,my god! Behind each designer is a group of Jiangshan gods! Ah ...

Whenever people ask you to change this change that time, as a designer you can do is self-pity, while licking the injured heart, while changing his work? At this time has not thought about why, there is no full responsibility for their own design effect map?

The first step: 100% interface display + design ideas

The effect figure 100% interface display and with their own design ideas, which for the designer to send the effect of the picture is the most basic (the effect of the picture because of the width of the text required to compress). As shown above, for Baidu Mobile Input Method V2.1 version of the default interface and change the theme interface effect, clarify the design reason, convenient demand side know why you so design, for some unreasonable demand is once tried and pass away.

For important projects, not simple to clarify the reasons for the design, you can use the form of PPT, multiple pages to elaborate the design process and ideas, and finally 100% interface to show the design effect. As shown in the picture above, Baidu Mobile Input Method logo revision, we from the original purpose of the revision, keyword ideas to expand, shrink keywords, color collocation, element collocation, the actual effect in the mobile phone side display and so many angles, explain why logo design using such shapes and colors.

Finally, the new version of Baidu Mobile phone Input Method logo is shown above.

The effect chart shows the basic taps:
1. The effect chart to be saved to the actual size, or does not affect the demand side to determine the size of the effect
2. Save picture as. png or as high as possible. jpg or. gif format, do not let the color of the effect map loss
3. Explain the rationale for the design: Why do you use these colors? Why do icons have to be designed like this? Why do you use this font? ...... If it is an important project, think more complex and systematic, you can consider PPT and other forms of the overall elaboration
4. If it is a mobile phone interface design, as far as possible to provide documents for the demand side actually machine test to see the effect.

The second step: to give thought and life, into the situational design

The first step mentioned above is to be the most basic requirement for a designer to deliver an effect map. After completing the first step, if you want to give your effect chart more points, then you need to give the effect of thinking and life, into the emotional design. On this point you can try to start with the following aspects.

Integration: A number of key interfaces in a map, as shown above, Baidu Mobile browser Android version of the effect map, the start page, input status, progress bar read, unread and other status of the integration. This is convenient for the demand side according to the interactive flow chart control, can have a more overall sense of the software. Any design is not isolated, put together to let the need to understand the designer's overall consideration, as much as possible to reduce an interface, a detailed effect of the decoration of the near perfect, but in the whole set of interface with disharmony. It also allows the demand side to understand that you have a sense of overall consideration.

Dynamic effects: More and more software design from the point of view of adding dynamic effect to enhance user experience, dynamic effect can make interface and interface between the switch looks more cohesive and fluent, but how to let the demand side or developers understand what the designers want to perform dynamic effect is. This time, if you can add a little bit in the first draft of the effect, you can let the demand side feel the effect, with as little cost as possible. As shown in the image above, the effect of a software diagram, simply shows the dial scrolling, more relevant information scrolling and so on. Of course, after the first draft confirmation, if the need for more real dynamic performance, but also need to create a live demo, higher-order effect display for the time being not discussed.

Situational: As mentioned above, each design element is not isolated, and the effect chart can have thought and life. As shown above, Baidu mobile phone browser logo Design effect map, complete this has been completed the first step, 100% of the results show + design ideas.

Design is very perceptual, in addition to the professional theory to support and persuasion, how to let designers in the design process to convey and express the artistic conception, want to bring users feel the most intuitive use of communication ... That only completes the first step is not enough, at this time can be on the basis of the first step, auxiliary some situational effect chart, the designer's mind intuitive expression. As shown above, Baidu Mobile browser's Little Bear logo, he is alive, he can be sad, can be happy, can bounce, and even can fly ... In order to be able to demonstrate that the logo in the future has a good ductility.

He's not alone. In this world he has his own friends! This is to show that, in addition to the day-to-day appearance of the standard style, in a specific festival or according to a specific group of people, he can be personalized, for the later operation laid a good foundation.

As a product logo, the final product application on the display is his mission. As shown in the figure above, the effect map fully shows the logo in the future use of the various scenarios: Launch interface, desktop icons, desktop widgets and so on. On the one hand can let the designer at the beginning of consideration, carefully review whether the design can be applied to each scene, whether the need to do the corresponding deformation according to the scene, on the other hand, can also let the demand side intuitive feel, design in the future application of the actual effect.

Not only is he not alone, he has his own friends, he even has his own career, he is a bear who broke through the automatic, he is high in the universe looking at everything on earth ...

Through the first and second steps above, the demand side can clearly understand what has been considered in the design process through the effect diagram, design the match, the interface layout and so on all have the reason, they can and the designer empathy, this time pushes the effect to be used finally the probability to increase greatly, although seems to spend the time more, But the time to adjust the changes will be greatly reduced. Many times is not behind the "God" how hard it is, but in the mind is not synchronized, the designer did not understand what the demand side is, the demand side also did not finally understand what the designer wants to express.

The effect chart shows the advanced Taps:
1. There are several interrelated key interfaces, placed on a whole picture to be shown together
2. It involves dynamic interaction and provides simple dynamic effects.
3. The design is perceptual, through the emotional effect diagram lets the demand side understand in the design process all did what thinking ...

At the back of the tips above, I added ..., because this is still far from enough, and there are more things that can be done for the effect chart. Design works like a designer's child, and the effect of the picture is the first time the child to accept the world to examine the opportunity, if you really love their children, please good packaging, so that the effect of the picture is no longer cold, but can convey your thoughts and feelings of the carrier, to the effect of the picture to give thought and life!

Reprint please specify from "Baidu Mux"

Source Address: http://mux.baidu.com/?p=2605