visual design and annotation of Qzone project group

Pixel error

Look at their own design online site, occasionally found in the pixel between the elastic space, the total inadvertently jumped out of a certain gap. Some pages are difficult to find, such as the Activity Class page, this kind of page more irregular modelling, in the design also more flexible and changeable. However, in the Portal class page design, such as navigation, login box, line spacing, and so on, several pixel errors may affect the user's feelings. At this point, the pixel error problem is very intuitive.

In the face of growing users, Qzone platform, activities, such as continuous innovation, new visual perception, new ways of operation, new experience and so are in the pursuit of perfection. However, due to the time schedule and the different understanding of the interface, as well as the development of the front line and other reasons, resulting in the online page and design manuscript contrast, there will be several pixel error. This seemingly obscure pixel error, may lead to users can not achieve operational objectives, increase the user's operating costs, so that users frustrated, so that our product experience greatly compromised. How to let the visual designer output of the design manuscript can be more accurate display in front of the user, is a problem.

Solving method

How to solve the problem of pixel difference better? ISD Webteam after a brainstorm of the conclusions- labeling .

The so-called "annotation" refers to the label of the distance or a specially made target. The page design manuscript annotation, can greatly reduce the pixel error, especially suitable for portal products.

Currently in the Qzone project group annotation content includes: page line width, spacing, alignment and other key points of the specific pixel values. For easy identification, the annotation is marked with the icon "I", which uses the red 12th new song body.

The effect is as follows:

Perform

At the beginning of the implementation of the time to spend more, can not fully enjoy the design after the completion of the pleasure, and to face the addition of the "vast" marking the project, boring amplification, pull the ruler, move the horizontal line, fill in the data, or inevitably feel trouble. Will also inadvertently doubt, this really can be more conducive to the production and reduce pixel difference it?

Feedback

Quickly received the feedback of the page refactoring colleagues:

annotation as a reference, agreement, compared to design prototypes, more sophisticated;

Can understand the design draft intention more quickly, reduced the communication cost;

Can save more repetitive measurement work;

Enhanced downstream links include the development line to restore visual draft awareness.

Feedback also has a lot of suggestions for improvement, such as: more attention to the text between the value of the callout, more attention to spacing, element width, color value, border width, font size, text paragraph lines, and so on callout. These suggestions, we also need to continue to optimize the actual work in the future.

Some harvest

First: Visual designers, will pay more attention to line height and spacing, in the visual can be the most accurate restore to the design of the style to ensure a smooth experience, emphasizing the design of restore and the quality of the Web page, more easily focus on the visual level of design, easy to form a unified visual norms and brands;

Second: Restructuring engineers, will be more controllable and efficient, convenient reconfiguration engineers in the shortest possible time to make pages and templates, but also improve the concept of reducing the design manuscript, reducing the difficulty of reduction;

Third: to guide the development line of colleagues on the details of the attention;

Four: The most perfect interface experience presented to the user;

As the Internet product changes faster and faster, we are facing more and more complex design work, which requires us to find more and better ways to improve efficiency and improve quality.

"Tagging" may be a fruitful attempt.