"League of Heroes" Summary of the revision of the net

01. The background of the League of Heroes Project

"League of Heroes" is currently the world's largest large-scale moba online games, from 2010 Chinese official website has been online for 4 years or so, in different stages of the game, "League of Heroes" official website also has a corresponding phase of the revision. This year as a proven product of two years of public testing, combined with the current market period and positioning of the "League of Heroes", we need to make a more targeted revision of the League of Heroes.

　02. "League of Heroes" the style of the web design trend

According to the game picture of "League of Heroes" and the original picture of the game, its positioning belong to the dark, magical, heavy texture of the game, so in the previous revisions, in order to tie in with the early stage of marketing and game style to create, are combined with the game itself in the heavy color and heavy UI to design the official website, to the early "League of Heroes" To market style positioning.

"League of Heroes" after a few editions of the website of heavy texture, has made the player to the "League of Heroes" style positioning is familiar. "League of Heroes" is currently a public test two years of mature products, the main content is no longer the style of building, but there are a lot of game information to push, introduction, game video, game activities and so on, these are the current stage of the player more attention. So this revision, we need to put a lot of information effectively pushed to the player, and no longer to the player style impact.

Therefore, we discussed the new version of the official website of the initial direction:

Then this official website revision, how to give the player more effective transmission information is the core of this revision.

In the transmission of information at the same time, in order to reduce the user in the reading information because of other elements of the excessive impact on it, so we design in the official website to weaken the heavy texture and reduce the color of the screen, the use of light and heavy combination of light-colored tune to complete the official website design.

At the current official website of the navigation department, to optimize the classification of links, so that the entire navigation structure of the site clear, improve user browsing efficiency, save user costs.

　　03. "League of Heroes" web design Element extraction

As the League of Heroes launches in the third season, the United States Riot company to the "League of Heroes" game overall UI and game style of a redefinition, the overall style of the design has changed significantly, the main color from the original blues into Green, UI texture has become more delicate, from the design style can be seen with noble, Gorgeous, magical, mysterious style, the overall design more personalized, more discerning. Contrasts with other types of games.

　　04. Analysis of the old official website of the League of Heroes

After the early period of this network revision direction of the Secretary of the analysis and preliminary confirmation, as well as the "League of Heroes" new UI overall style trend, we can begin to prepare the homepage of the production. Here we first analyze the current official website data statistics, to see what the players focus on the block, summed up some problems. More targeted to carry out the revision.

Home we through the click Stream System and http://ta.qq.com Hot Zone map Analysis of the old official website block popularity, analysis of the players concerned about the block. We used 7 days of statistical data.

In the normal situation of the official website (there is no major event to trigger a chunk of the click of the jump), through the above click Stream and Hot zone map can be analyzed, the current official website by the player's attention to the block has the following several:

We can see from the above data that

1. Free hero, through the hot Zone map observation, the number of clicks is significantly higher than the surrounding blocks. This block appears in the old official website inconspicuous position, even more than two screen position, but the number of clicks is unusually high, and in a long-term high status, so the revision needs to be put in advance and placed in a more reasonable position.

2. Site navigation, like a map, allows players to quickly find the entrance. Through the Hot zone map and click Flow Data analysis, you can see the player in the game information, novice guide, download games, video zones and long-term activities and function page of the highest click, which also conforms to the meaning of this revision, information display-oriented. It can be seen that the importance of navigation is very important, so the navigation of the site needs to comb the content, so that the overall navigation structure of the site clearly clear.

3. Game news, through the analysis of the Hot zone map, the user is only interested in the first 3-4 news, to the back of a few will be greatly reduced, then this phenomenon is due to too many news bar? Or is it because the news digest has caused the block to be too long, causing the reading pressure? To solve this problem requires a late broom online after the line, The comparison of data can be obtained effectively.

4. Carousel advertising is an unstable block of clicks, as the game activity occurs, the number of clicks surges, (last year's flop card and smashing snowballs and other activities, the Carousel block because of the display of these popular activities ads, there has been a surge of clicks) so can be seen, The player's focus on the activity can be effectively transmitted through the carousel, so the carousel blocks need a better and more reasonable location.

5. Long-term activities, function entrance is currently the official website of the 3 buttons, he currently carries the function of the game entrance (such as the Prestige system) and long-term activities of the entrance (such as the campus activities), click on the line is to highlight the icon and reputation system is the ranking of colleges and universities. The revision will also be placed on the right side of the download button. The final effect will be followed up after the internet line.

6. The game download button is to obtain a game client the most important core button, but through the data View, the official website of the number of clicks is not so high, but by looking for the reason, can be roughly drawn:

Reason one: Most of the clicks through the Guide page streaming away, by looking at the background statistics, you can determine the majority of users through the Guide page download game button download games.

Reason two: through the website home navigation "game download" link to download, view the background data, there are a large number of clicks. Although the home download button clicks on the low, but in order to prevent the user is not through the Guide page to enter the official website, so the homepage of the Download game button or must appear in the obvious area to guide users to download.

7: Other such as, tournament area, War College, Cooperation media, Soso issues, help zone also through the weight of the size of the block division.

After statistical data analysis, and the project team to communicate to optimize the block, prioritize. On the content from the top down the important level of division, and finally came up with a new version of the interactive version of official website.

About the Personal login Center

The revision of the new user login system, users can login to the "League of Heroes" website, different from the game life is, the user can directly pull in the game after the data in the official website of the personal information block display, such as Gong, gold, winning field number, and so on, can also be among the players for friends evaluation, record comparison, This undoubtedly increased the user to the official website stickiness, enhances the website social nature, causes the official website and the game the connection to be bigger.

In the interaction of the net, it can be found that the previously raised key blocks have been upgraded to appear in a higher position. The sorting of the navigation, the integration of the center, the simplicity of the news, the adjustment of the hero's position in this week and so on.

After a lot of upfront work, the next step is to start the work of visual design drafts.

　05. The League of Heroes web design

Before the analysis of the "League of Heroes" currently in the stage more biased to the dissemination of information, so the use of light and weight combination of the design, using the head of the texture and heavy color to continue the "League of Heroes" style, in conjunction with the content of the light content blocks to disseminate information.

Why is it easier to read information with lighter textures and flattened things?

A game of early use close to the game of heavy texture design, is to cultivate users of the game style awareness, and when the user training to a certain stage, light texture flat design will replace the heavy texture design, why? Because a game operation to a period of time, accumulated information will be a lot, introduction, news bulletin, Activity promotion and so on countless. and light texture can be fast and efficient, not greatly interfere with the user's situation pushed to the user to read, light texture design can restore the layout of printing design, so that users read more smoothly.

In this era of information, time is money, some light texture can even be written directly with the Web page code, and do not need to use pictures, but also allows users to load the site faster, reduce server pressure.

Before designing, we extracted the colors we needed in the old website of the League of Heroes and the new UI of the League of Heroes. Preserved the old official website of the dark blue color as the main keynote, and then extracted the new UI of the orange and green color matching, with the content of the block of light gray to carry out the overall tonal spread of the net, Then extract the game pattern in the new UI to be aided design.

After the UI refinement, officially began the official website of visual design. We have tried several different style of official website.

This is the first draft of the Web design, the initial output of the light on the design ideas, to the head of the heavy texture with the following text information to carry out the layout design. The head uses the heavy material to the website navigation, the downloading button, the Quick button, Carousel map, news bulletin, and login personal information design, dark and heavy stone UI and broken personal information cloth UI, with the "League of Heroes" original painting and, very good embodiment of the "League of Heroes" texture, magic, dark core style. The lower part of the information, in order to better spread information for reading, the use of light tones and the head division. The overall tone of the previous extraction of gray-oriented, with green, Orange Auxiliary.

The second draft continued the design structure of the first draft, but in the background of the transition using smoke to make the transition, so that the overall site more magical elements, there is no first edition so obvious cutting, download information that column using the "League of Heroes" Game of the new UI element combination, Let the site more close to the game's new style without losing information on the explicit push. Remove the heavy texture of the first version of the navigation and try to light texture navigation. The carousel map and the news area cancel the texture, but still use the heavy color of the bottom to show the news, this is to from the head of the heavy texture transition to the following information light texture. At the text information Office, the second edition also and the first edition has the bigger change, first and the project group communication, cancels the heroic Alliance community section, thus reduces the homepage information the load, then carries on the plate design optimization, reduces the horizontal line the use, lets the information be clearer, reads more smoothly. Then optimize the order of the plates, but also more in line with the important level of the block.

The confirmation draft was optimized on the basis of the second draft. The heavy color of the head continues the blue of the League of Heroes, giving users more intimacy, weakening the UI of the head again, and making the site feel more frivolous and more prominent in the spread of information. Because the background of the head will be replaced with the version or activity, in order to later background replacement to achieve the effect of the previous design, and finally to the navigation added a light texture, so that navigation can adapt to different colors of the background.

06. Introduction of new features

This revision, we also added new features and enrich the game information, get rid of the former official website is just a vase.

　　07. Follow-up and summary

Home design has been completed, through the early analysis, and then to face the official website of the block, design style adjustment optimization, have reached the expected. In terms of the overall content, through the prioritization of information, you can better enable users to read information. In visual design, the use of a large area of light texture, in order to achieve the main purpose of the transmission of information, in the part of the head of the heavy color block to render the game atmosphere, while the light texture design can effectively reduce the size of the picture of the page, the overall performance of the site improved.

Note : For more wonderful tutorials, please pay attention to the Triple Web Design Tutorial section,