Through the micro-blog Analysis Site page to build the audit map and details

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

As a professional page building engineer, in addition to the professional skills of a high demand, but also need to have a certain design drawings of the ability to peer review. The drawing is not meant to pursue the same as the PSD, even time-consuming screen and psd to "pixel". In my understanding, the chart is through the analysis of the UI design manuscript, fully understand the intention of the UI designer, combined with the UE of the interactive state, from which to achieve a real "restore design manuscript."

Case one: There is a house, the side is understanding

For example, in such a design manuscript

Designer's intention:

This topic list of rows 19px, each single topic below is a 4px margin. There is no space between the topic title and its own descriptive text.

The analysis process of the page building engineer:

The line height of the text specification is 18px because the module resets the row height. Through communication, the designer recognizes that the line height of this paragraph is changed from 19px to 18px. However, this is limited to the line spacing between the caption and the descriptive text. and the title and the title between the 4 pixel bottom margin, from the composition of a single topic to explain the paragraph between the relationship, can not blindly use 18px row high resolution. Because through our understanding of the design manuscript, the designer uses these 4 pixels, pulls the spacing between the headings, has formed the paragraph feeling visually. So for refactoring, these 4 pixels should not be ignored, or from the perspective of visual presentation, designers can not tolerate. Therefore, there is a house, side is understanding.

In the production of this module, there is also a small episode. The following figure:

Designer's intention:

This is the fine body of number 11th, because it is embellishment, but also a hint of the picture, so less than the previous title of the song body 12th words.

The analysis process of the page building engineer:

At first, the reconstructed group of students in the discussion of the design draft, they are proposed to do the survival text, is the song Body No. 12th. The color fillet block is written with CSS3 and is of great extensibility. Because this module is the operating team responsible for the future will be more able to meet the need to change the text at any time. What if you had another "breaking" or "headline" In the future? Do you want to cut and spell each picture again?

But, standing in understanding visual design angle, this kind of little tag is exquisite. If you make text, although faced with the future changes in demand, there will be a certain degree of cost, but the difference between the text is too small, it will not highlight the feeling of small tag, it also seems less exquisite. So in all sorts of trade-offs, I finally chose to make them into pictures.

Case two: The problem of CSS can be written in exchange for better visual effects

To give another example, we have this module.

Designer's intention:

The Avatar is aligned with the top of the name, and the micro-group level icon is aligned to the bottom of the micro-group name.

The analysis process of the page building engineer:

Because the size of the micro-group level icon is 16x16, higher than the height of the text itself, in order to ensure this alignment in all browsers, I used such a thinking.

According to the visual copy hundred percent restore, make to the effect of the left, although the CSS code looks a little trouble. But if how simple how to write, make the page effect, but did not do the actual effect is good.

Case three: page building details to deal with a little more, the user experience to improve a little bit

There is also a module:

The analysis process of the page building engineer:

We usually run into modules like this, and we divide the structure.

Because the user head is only 30px square size, so the user name can only display 2-3 characters, in fact, it is difficult to let users visually distinguish who is this person. If you do it through traditional ideas, the product and design estimates will not be satisfactory. So, in the process of building the page, we need to find ways to enlarge the display area of the user name.

So, I use the following diagram idea, without changing the HTML structure, only by changing the CSS, to expand the user name display area.

The user Avatar name module is set wide, then the negative value of margin is used to offset vs to left. Cover part of the Avatar 1 area. The final effect, can display 4 characters.

The students of the restructuring group, because there is no project experience, the tutor said what is what, so a teacher to say "to Pixel", really to focus on this, in case of the design of the manuscript itself some problems, will not judge, the results of their own very embarrassed. Sometimes, the screen static page rendering effect and design manuscript to the pixel, in fact, not a few pixels, but the static page does not feel the same as the design draft. This time always need to constantly modify, screenshot, pixel, and then modify ... Such duplication of work, in the fast-paced development of not only waste time, more likely because of no point, in the data after the load more "not so". It is better to calm down, first to carefully examine the map, and the designer to fully communicate, there are homes, smart judgments, and then to do the specific development, out of the page does not need so much to hit the patch on the pixel, perhaps better to achieve the original design of the designer.

(Weibo UDC original blog, welcome to reprint and note the source, welcome to subscribe)