Qzone Application Revision Case analysis: Visual optimization

Article Description: QQ Game: Qzone Big Application revision summary.

Qzone large application is a collection of QQ games on the Qzone, it contains a variety of research and development of our team's web version of casual games, has now released 19, including the joy of the Landlord, Hero Kill, QQ Billiard, QQ checkers, chess, to touch and so on ..., as the game increases, the older version of the extensibility , visual performance, functional modules are facing problems, then have the overall revision ...

The reason for the revision

1, the old vision

The background is too thick and complex, not conducive to the user's attention on the application icon; "Online friends" and "announcements" the setting of the plate is not very scientific, taking up too much space.

2, in order to drive the game online data

Although the old version of the game icon has a "big picture" "Small map" two modes, but no matter what kind of view can not be all the game icons on the home page all finished, this page shows the case, ranked on the second page of the game, online data compared to the first page of the game down thousands of points.

Problems encountered in the revision

1, limited by the Qzone application of the structural requirements

All Qzone applications are confined to the fixed width, but need to present the plate and function points are not small, primary and secondary relationship needs to be combed.

2, the entire application page for Flash development, limited the design of the play

The whole qqgame large application is developed by the Flash, so in order to control the load speed of the entire application, it is inappropriate to import too many bitmaps, so some places need to redraw in Flash, but flash as a vector design software, the details can not achieve the level of PS such meticulous The second is that some of the controls in the file are written dead in the file, so the design cannot make a big change.

Points for improvement and optimization

1. Change the paging display to one page

The "Online Friends" section moves down to empty out more space for the game icon, so that users can see all the game icons on the first screen.

2, will "start the game hall" and "Invite the friend" the function strengthens

"Start the game hall" and "Invite friends" two function points in the old version is only the form of a text chain to show, such a display form is easy to ignore, for the pull of the data does not play a substantial role. So in the new version, we'll handle the two function points as buttons, and move from the bottom of the layout to the header to increase their exposure.

3, new to join the game recommended plate, the key to recommend the game, pull high data

In the new version of the design, we joined the game recommendation Bar, to recommend the key game, due to the specificity of the size placement, hope to use this to pull the corresponding game pull data.

4, the "bulletin board" function weakening

The old version of the bulletin board is presented as a plate, occupy the entire layout of 1/6 of the area, in fact this function point played a role is not very large, do not need to occupy such a large area in an important position, so in the new version of the design, we will this function point to weaken to the text chain, However, the location is still in the layout of the head, in order to ensure that the relevant information released without distracting users of the game icon attention.

The optimization of vision

1, with the QQ Game Hall 2012 visual style Unification (style evolution)

Visual update can be said to be the Qqgame Big Application page revision of the most intuitive changes. This revision, in addition to the visual style of hope with the times, more importantly, we want to let the user first see this application page can immediately associate to the QQ game Hall, so we focus on the visual design and Game Hall of the visual style of unity, to keep the hall thin, transparent texture, and we joined the " Chuo Ming Valley "The iconic element of the 2012 edition of this QQ game hall.

The first version, focusing on lightweight design, lines and color block design as light as possible so that users will focus more on the game icon, "Bulletin" also replaced by the picture in the form of the top of the layout.

The second edition, in order to and QQ game Hall style more fitting, so that users can recognize at a glance, we will apply the background to the same as the QQ game Hall and the same hue, and joined the "Chuo Ming Valley" background.

The third edition, the top of the picture ads back to the form of the text chain, the division between the plates become more clear, plate background has been optimized to adjust the transparency, so that the entire interface looks more fresh.

Finally, we made a small adjustment to the game recommendation plate form, because the previous form would make the user look like an ad. The "Online Friends" section of the scroll bar finally removed, replaced by the home page and turn to the last button, and finally, in the layout of the head plus the "Invite Friends" button.

2, visually lighter quantization, let the user's attention more to fall on the game icon

Compared to the old version of the design, the new design of many places weakened, or even removed, such as announcements and online friends of the icon in the plate. This design method of subtraction, one is consistent with the lightweight style of the game hall, and secondly, weakening these secondary and even unnecessary elements, but more prominent in the application of the game icon, because these icons are the focus of the entire product, should not use redundant elements to interfere with their rendering.

New features

Game icon Top function

In the new version of the design, the "top" feature is added to each game. When the user moves the mouse over a game icon, the "Top" button appears and the button is clicked, and the game is moved to the first place in the game library, making it easier for the user to find and play the game next time. Because at present the whole Qqgame big application contains the game only 17 paragraph, so in a page on all show out, if the game is arranged in the middle, the user to find will waste a certain amount of time, "top" feature can be added to the user often play the game in a conspicuous position to facilitate its search.

Experience Address:

Http://rc.qzone.qq.com/myhome/385/?via=QZ.APP.SEARCH