User Design example: Holiday logo Interactive Design discussion

Starting from last year's logo heartily, we asked for every holiday in the future Flash logo Design In addition to the creative story, but also must design a small interactive effect, when the audience to move the mouse to the logo above (rollover), there will be response (Response) the plot occurs.

Holiday Logo Design Almost every site is done, before there are too many very successful and excellent logo design works. As a successor, we have been trying to get out of one of the many holiday logo designs (even if only a little) of our own style, and frankly, this is not easy. When you ' re only no.2000+ ... you try harder ... Perhaps a friend said, in these places to do so many useless things, it is better to put the first page that banner canceled, the site function to do a little more practical. Yes, I agree. But the problem is that I can only do things, such as logo animation design, within the scope of the design, I hope the user experience can be a little bit better to alleviate other deficiencies of the sin ...

1. The simple classification of holiday logos on the internet


We have a simple classification of the holiday logo on the network, probably divided into graphic illustrations, Flash (or Gif) animation two types, and flash animation inside like Yahoo Korea and other foreign websites, animation more interactive effect. Graphic illustrations of holiday logos are usually beautifully painted, and Google logo in addition to beautiful illustrations, there is a more difficult to imitate the characteristics of other sites: Holiday pattern is the creative and Google these six letters closely together, which in addition to painting beautiful, but also must have unlimited imagination, of course, The high simplicity of the application environment is also an important factor that it appears to be prominent.

2. Taobao Holiday logo design style of positioning

Taobao home page because of a lot of content, considering the overall download speed home page, the front end assigned to our logo can be designed areas (including Taobao three words) probably for 250*53px (2009 version of the first page of the festival logo size), if the form of illustrations to design, graphic information is relatively small, It is also difficult to jump out of the box of predecessors, so we decided to use the display of the long term to make up for the lack of space design, that is, the design of small animation logo. (heartily before Taobao animation logo design, please refer to:http://ued.taobao.com/blog/2009/05/18/2009%E6%B7%98%E5%AE%9D%E7%BD%91%E5%8A%A8%E7 %94%bb%e8%8a%82%e6%97%a5logo%e7%ac%ac%e4%b8%80%e5%ad%a3/ OMG, half a year ago sent the article incredibly forgot to change the Chinese URL into Chinese ... ）。 Of course, this also has a risk, animation story to promote the need for a certain period of time, if the beginning can not attract the audience, we have already lost patience in the frame screen.

Add interactive small plot, for animation logo to give higher emotional value. Animation logo can be more visually attractive, but since it is designed with flash, why not take advantage of the Basic Action Script command to achieve some simple interaction effect, because the animation inside every element of the development of the plot to let the audience full of expectations, If we design a small animation through the mouse or click, can also produce to the audience unexpected visual effects, will let them feel pleasantly surprised, and remember the brand and even enhance the goodwill of the brand.

Korea Yahoo Animation logo Design has been our learning role model, its original is also a graphic illustration, probably at the end of 2006, Christmas began to become interactive animation, each observation of their design let me very excited, for their imagination dumped. But in the interactive design logic is different: Their logo animation is the user must make rollover action, only to start playing. That is, the audience with the mouse over the logo, is seen as an animation switch, if I do not want to see, it will not automatically play, reduce interference. This design is very good, but to first cultivate the user's default holiday logo is the sense of animation plot, otherwise, the animation playback rate is really not high. We just started naturally difficult to do this, so the first thought is, first play animation, frame, then appear rollover effect, a few seconds after the animation will be back to the file, replay. The problem is that when the animation is played to the frame, there may be a large number of audiences who do not know that the logo can be clicked to trigger the feeder plot, thus diverting some of the users away. Even so, we can still ensure that all users can see the first animation, part of the careful audience can be in the animation frame, the discovery of further interactive effect, feel pleasantly surprised.

3. Taobao 2009 Christmas and 2010 New Year's Day logo design

Design heartily logo, we use the bonus plot method, that is, if the user mouse does not interact with the logo, is not to see the rewards of the storyline. and 2009 Christmas and 2010 New Year's Day logo is the use of recall method, when the animation playback to a frame, the mouse response area appears, rollover is a replay has occurred before a plot.

All of the above interactive instructions are using the mouse rollover, so can we use press (left click) of the action? If the holiday logo just appears on the home page (like Taobao), at this time not as a return to the home life buoy function, then press and rollover can be consistent. However, in the network advertisement, the press has already become a jump instruction by default, so it is easier for the audience to "feel at ease" with rollover than press in the visual design which is generally just a display function. But if you're designing a touch-screen flash interactive animation, rollover doesn't really work.

4. The holiday logo design on the touch screen

The traditional flash animation can hover the mouse over the response area (hot zone), so usually do rollover animation to respond to action. (After the rollover animation, usually no more design release animation, otherwise the whole click Process redundancy, affect the user experience).

When using the touch screen, the finger is hovering over the sensor area, which does not trigger the interactive action, so in most cases there is no rollover state (touch screen plus Wii technology is another matter). So, the animation that responds to the user's click behavior starts at the moment the finger presses (press) and gets out of touch (release). (Note that it starts when it is release, and if the animation starts playing in press, the finger will block the animation.) In addition, the more advanced touch-screen terminals to support the length of the fingertip (long Press), drag (Drag) behavior, design can be used as a complement to interactive action.

From the legend can be seen, touch screen Flash logo animation design and ordinary design difference is not large, in addition to rollover action to press (Actually:release) action, the biggest difference may be when the mouse rollover, animation can be repeatedly played , while changing to touch screen, the finger press can only recall once, long press to repeat the recall plot. Throughout the design process, the fingertips long press, Double Click, or even drag can produce more interactive behavior, leading to more dramatic plots and visual effects. Of course, this design applies to the holiday logo on a higher cost, (design, user groping and learning interactive behavior in two aspects of the cost). If used in larger interactive animation or online advertising, you can make the audience and advertising more interaction, so as to improve user participation, enhance their brand experience. What if you want to let the consumer realize jump? A well-designed web ad for the user experience usually divides the response area of the jump into separate sections.

Summary , whether it is graphic illustrations, Flash animation or interactive animation, as a holiday logo design is not the form of a good or bad points, the key is whether with the application of the environment, whether with the site's personality and positioning consistent. On this basis, coupled with a little bit whether visual or interactive imagination and creativity, will make your holiday logo in a myriad of homogeneous design to stand out, to bring users surprises, so that they leave a good brand impression. When we ' re only No.2, we have to try harder.

above three Taobao holiday logo swf format download address :
Http://www.jolam.cn/download/Taobao_Logoes_2009_Pack2.rar