NetEase application Download Station web side GUI design small share

Objective:

NetEase application Download Station web end of the development progress, along with the test optimization work, take this opportunity to talk about the GUI design practice fur experience. NetEase application is characterized by service users download applications and social sharing, so the GUI design function is to the user interaction Experience abstract task flow and Operation Way to express as much as possible as natural as possible:

Ⅰ. The meaning of the style

Example A. Do not distract users ' attention:

GUI design should not distract users from their task goals. Don't let people always think about the interface they are using. Task operations should be in the context of the user's consciousness, not in the foreground. This is the final design of the entire interface. The main task of the home page is to watch applications, download applications, watch application promotion. Colorful's application icon and advertising display on the page, the use of simple refreshing element tone interface can be reconciled with the strong color of fatigue, and make the application of the icon itself more prominent.

Example B. Not designed for visual purposes:

A light gray gradient background color is used in the background of the first screen and is not purely visual. Consider the variety of switch tones in the head, white bottom, black and dark gray bottom, saturated color is the most common, if the white background, the white head map into one, toggle area and preview large image is divided into 2 parts, the page is broken. For example:

The head picture adds the frame to slightly feel the superfluous, the picture feels finely.

Visible with a light gray background to solve the head map to replace the problem of white, compared to the above effect switch area and preview larger picture more overall, a more strong sense of the forum. Such a head map switch different large background can be clear and the whole, the background is a single color value, the head chart and background color value of the same situation is very individual:

Ⅱ. Integration of the whole

The user interface should be conducive to the cultivation of usage habits. When using interactive software or appliances, users want to get into the subconscious habit as quickly as possible. They want to ignore software or devices, and focus on their tasks, the more consistent the software, the easier it is for users to use them. The same is true with interface controls, and their inconsistencies can force users to keep thinking about them, thus distracting the user from the task.

Example A. Optimization of the UI component library

The components in the first draft is more messy, the visible button three styles of color, gradient, the size of the words are not uniform. The small fork that closes the frame symbol also has a different style.

In the optimized component library after repeated consideration, the important level and the number of words, the emphasis is relatively clear and clear:

Example B. Graphic ambiguity:

When making the Frame UI section, follow the interactive prototyping requirements. Post-test found that the information sent back to the bomb box warning cloudy ... Think of the original problem in the frame interface has 2 of the fork meaning handled improperly, large red fork to express inappropriate, incorrect meaning. And the small gray Fork on the column indicates that the frame is closed. The optimization scheme is obvious: the small fork on the frame remains unchanged, it is clear in this sense, and very common, more involved in a wide range of interface is not easy to change; The Red Fork is relatively graphic more than interactive function, modify not to be diverted, then according to the right side of the copy can not send, can not transmit the meaning, so change to ban The symbolic image of the passage is more consistent with meaning.

Example C. Components are inconsistent with common standardized models:

User scoring system, in the early stage of planning, scoring system model see left below (left), model vision is very close to the common progress bar loading model, and the progress bar form shows completion, residual, and may need to process time information. But the scoring system is a hierarchical hierarchical ladder, and there is no completion of this information. The proposed modification of the popular five-star model, the most common to understand.

Ⅲ. Break the overall unification

Application downloads are the final task that users use for this site, and the final download button is the most important function key on this page. The first version of the application download page at the beginning of the design, too much emphasis on tonal unity, the big button was submerged, in addition to the beautiful application of the icon, followed by five stars is very prominent:

In fact, the main purpose of the page is to download, try to analyze a category of users may be free to browse to this, then the auxiliary information is helpful, another type of user may be after listening to a friend to download, auxiliary information for him, but the download steps are necessary and always important. After optimization, the huge buttons use a large area of orange and blue on the clear, as if to say "Come on, let me".

Ⅳ.gui Standard layered Model

User interface standards can be divided into multiple levels, each with a narrower internal hierarchy. User interface design has industry-level standards. Some of these are for different platforms such as: Windows, Java, as well as company-established enterprise standards, so that their products have a unique, brand-effect appearance. In addition, products in a particular product line have more similarities than other common products. Finally, some criteria can be developed for a particular product to ensure consistency between the different parts. The internal level of the standard is the complement to the external level, not the contradiction. NetEase application of the character color value, and the interface of the column size width in accordance with NetEase Portal specification color, to maintain the unity of enterprise standards added more detailed product characteristics standards.

Conclusion:

Personally think that a good GUI design, should be natural, as Born in heaven and earth between the nature of things, so that users do not perceive the design, this "ordinary" design hidden in the ordinary life, the need for designers to slowly realize the search. The above personal humble opinion is just humble know look forward to expert a lot of good words to guide.

Article Source: NetEase ued