Summary of H5 project of DNF Bath fire Renaissance

H5 is on the cusp, a lot of students want to go through this one shot, the specific play is not simple, to see the whole process of Tencent fat Cow classmate, from the early planning to implementation, color font animation can not fall, there are instances of reflection has summed up analysis, very in place of a H5 actual combat article.

　　I. Introduction of the Project

Around DNF5 Month 21st, the release of the new version of the Bath fire, we proposed a series of marketing design, and the H5 mobile theme is one of them. The project aims to DNF7 the anniversary of the player's game data for the content of the DNF7 year with the concept of player growth, and with the Black Diamond Award and version information, pull back steady active.

Data performance

This activity has carried on the attempt to the game fine operation, has obtained the above anticipated activity effect. Mobile End H5 active page PV 524.4w,uv 140W, participate in the user 111W, of which 45% of users will share this H5 to the micro-trust friend Circle QQ space, etc. compared to last October, the Guardian H5 activities, PV promoted the 362%,UV increased by 133%, the number of users increased by 266 %。

　　Second, the previous direction comb

The original idea, is to use the content of the player's data to DNF before a wave of propaganda "you do not understand DNF" to do an "answer", that is, through the interaction of the game over the years to re-examine DNF This old game, perhaps the precipitation of time can arouse the deep memories and feelings of the player. So, in fact, the performance of the data is not the focus, but by combining the content of the data and images and other copywriting to achieve the goal of touching the player is the key.

　　Content Settings

It has been said, in fact, the display of player data is only a means to close the user's distance, so how to use, how to behave is something we need to think about. But the more important thing is that we want to determine how functional the H5 page activity is going to be, whether our content is only an emotional recall, or need some reward and activity information as a benefit point to attract the attention of the player. Finally, in multi-party discussions compromise and reached a basic agreement, that is, the H5 to 7 years of player data for emotional clues, recall the memory of the DNF, and through the form of black diamond curing this emotion, so that the player on the DNF emotion has a real landing executable process. That is, the combination of soft and hard, forming a closed loop of behavior from spirit to substance. The contents are logically visible below the figure

　　Form setting

Determine the content, around the form of H5 design launched a discussion, because this publicity is more important, so still want a formal more distinctive H5. Forms are for content, and our focus is on what forms are more suitable for the theme of "DNF7". The common form of H5 is to take the form of a split-screen display content, through a few screen switching to a topic performance clearly. But this approach is more common, in today's H5 flooded market environment, it is difficult to make special features (unless, of course, the content of each page design or the screen is very characteristic). So aside from this idea, whether there is a better form of performance. If we think about the picture of "DNF7 Company", which images will emerge in the mind? People, clocks, computers, game characters, equipment, leaves, albums, photos ... etc. these, after the brain burst, has a general idea: in the form of illustration of what happened in the 7 years, as in ancient times, like murals, Record the traces of time. With different stages of the experience of copywriting, hope that through the user memories of their own experience, the DNF of the month to the feelings, and then from the emotional level pull back the user attention.

After communicating with the project team and marketing Partners, we have all along been more than approved of this H5 creative form, and the content of the copy to complement and improve. Added some version information to participate in the activities of the reward content. And the resources of the launch were further determined.

　　III. process of implementation

　　Theme Screen Content Determination

After the creativity and the form are confirmed, then starts to carry on the concrete execution work, because the final expectation effect is illustrated, and the picture must achieve the perfect annotation text. Therefore, the first step in the design is to establish the content of segmented copy of the picture. DNF is already a 7-year old game, the accumulation of time under the game culture content is more thick, need to make up a good evil. In particular, each screen should be able to evoke the memory of the player, let them understand the meaning. The details are shown below:

　　Sketch

When the content of each Che Wen case is determined, the drawing of the sketch begins, and it is not imagined that the workload would be so great when it was first conceived, and it took nearly 3 days to draw and revise the sketch alone. The content of the sketch includes not only the copy picture mentioned above, but also the content of the intermediate connection to find the material, ensure that the content of the picture will not digress, there is a sense of game generation.

Considering the screen is displayed on the mobile side, so the content of the single-screen to have integrity, at the same time the main screen of the copy must have a certain degree of coherence, so in the H5 experience will have a high degree of integrity and fluency. The image above is only the original draft, 80% of the screen content to determine the program, the latter with the adjustment of the copy and the coordination of the various parties, and a small part of the content modification, the full version will be changed.

　　Color

The draft content is basically determined and then a few versions of the color version, based on the previous map of the intention to some reference.

Finally, after discussion, the effect of scheme one and color direction more accord with DNF. So the whole picture is to draw the style of the vector silhouette, the original choice of this direction is because of the way the vector silhouette has a sense of intensity, in line with DNF This action-type game feeling, on the other hand vector silhouette processing relatively simple, compared to other styles of painting more quickly. The efficiency is very important in the case of drawing a lot of work.

　　Font

This h5 more attention to the effect of the screen, but the font is also a very important element. Fig. 1 "Keep fighting, warrior" is a slogan designed by the Great God Colgate Design of the font design, this page also needs to be reflected, but take into account the difference between the two styles, so here are the details of the adjustment, with the vector line of the form of a straight hook to do the style of unified processing (Figure 2). Figure 3 is the theme of this event, the direction of the design is basically the continuation of keep fighting style. Highlight the strength of strokes and the momentum of publicity.

　　Animation

Because of the time, the activities of the H5 can not do the full animation support, so the whole page of the interactive effect on the front-end technology, only in the character of moving around needs local animation. Thanks to the temporary support of the animation group, the characters move around the effect is very fine, but take into account the page size and load time and other conditions limit so in the case of keeping walking action visual fluency to minimize the size of the file, and finally can only intercept a part of the key frame into the H5 on the effect (to add, the characters here need two action flow, one is to walk, one is to stay.) Both need to be switched under the judgment of the front-end technology.

　　Loading

Perhaps most students think loading page is not very important, but want to do a complete with quality sense of the activity page, loading of course can not ignore. Because the loading page is the user's first eye to receive the visual information, so loading visual communication for the page to play a certain role in the tone. Good use, can be very good to arouse the interest of users. This caters to the current trend of mobile-end design and makes a simple animation. Black Diamond as the main body, supplemented by the light effect and texture of the beating effects. And look at the picture below.

　　Finished draft

On the basis of a pure screen, add the title, data copy, and version information and share the content of the page. The animation process is perfected and interactive rules are developed. If you want to browse the page can scan the lower two-dimensional code into.

　　Iv. Summary and Reflection

After the front-end and development of repeated debugging, the activity page on May 22 (than the expected date of the day), and therefore did not catch the first wave of DNF activity peak period of traffic, because the amount of work is too large, the previous paragraph and the development of the students are also day and night to fix the content, good hard The data has been shown above and should be said to be good for a H5 page. In the data to achieve good results, as creative people and designers, we have been reflecting on how our creativity and vision can make a substantial contribution to the activities, if this activity page does not have the last few pages of the version of information and forwarding the lottery activities, the user is simply to recall the past words, How much will the data be, hundreds of thousands of, tens of thousands of or more, in the same creative and visual way as this page? Have the attention of H5 marketing students have seen "W" excellent page, almost every creative will detonate a circle of friends, and the content is soft, the general style is the first to fun ideas, excellent copy to attract everyone's attention , the final release of advertising information, the content of its page is more biased towards the spread of brand value rather than operational content.

Perhaps the brand value spread of this road has been played by W company, but the function value that the H5 page can carry is not only limited in the brand, more manufacturer activity, news information, hot matter and so on hard content how to play the fun turn, is also worth us to ponder together the question, when the marketing circle from "the Fun" Play in the cool down, what will be the future of more innovative forms and ideas can detonate mobile internet?

This seems to be a bit off track, in fact, want to say is nothing more than for the h5 of some thinking, this based on the mobile end of the new marketing form There are too many things to discover. Back to the project itself, there are still a lot of regrets, if the H5 can be achieved in a purely animated way, perhaps the experience will be more fluid, if the text layout can be more novel, perhaps the user read will be more cool, if the interactive form to consider more chic, the entire page may have a different experience. In fact, however, there is nothing if these ideas may be reflected in the next project. In short, in the team transition period, our identity from the general sense of responsibility for the implementation of the designer to participate in the early planning and content customization of creative personnel, the challenge is not small. All aspects of the requirements must be balanced, not meaningless exaggerated creative form, also can not blindly pursue the maximization of the brand effect, how to fun interesting ideas and substantive game content good combination is the most we should do the most right thing.