Plans and details of page construction

As a professional page construction engineer, in addition to high technical requirements at http://www.aliyun.com/zixun/aggregation/7411.html ">, but also need to have a certain degree of review of the design drawings Drawing plans does not mean pursuing exactly the same PSD, or even taking a long time to take a screenshot with PSD to "pair pixels." In my understanding, plotting is done through an analysis of the UI design draft to fully understand the UI designer's intentions , Combined with the UE's interaction status, from which to achieve a true "restore design draft."

For example, in such a design draft

The list of topics is 19px high, with a 4px margin below each single topic. There is no spacing between the topic title and its own descriptive text.

Page construction engineer analysis process:

As the module reset the row height, has been "agreed" well, the text standard height is 18px. Through communication, the designer approved changing the paragraph height from 19px to 18px. But this is limited to the line spacing between title and descriptive text. The title and the title of the 4-pixel lower margin, from the composition of the description of the relationship between paragraphs of a single topic, can not blindly use 18px line height solution. Because through our understanding of the design draft, designers use these 4 pixels, widened the gap between the title, visually formed a sense of paragraph. So in terms of reconstruction, these 4 pixels must not be ignored, otherwise the visual presentation of the point of view, the designer can not tolerate. Therefore, there is a choice, square is comprehension.

In the production of this module, there is also an episode. As shown below:

Designer's intentions:

This is the fine No. 11, because it is embellishment, but also prompted pictures, so less than the previous title of the Times New Roman 12 characters.

Page construction engineer analysis process:

At first, students in the reconstruction group proposed to make them a living word when discussing the design draft. Color rounded corners with CSS3 write, especially good scalability. Because this module is responsible for the operation of the team, in the future also be able to meet the changing needs of the text at any time. In the future, a "shocking", "headline" what? Each figure is re-cut, re-fight it?

However, standing on the understanding of visual design point of view, this small tag is exquisite attention. If made into text, although the face of future demand changes, there will be a certain degree of cost, but the difference between the body is too small, it can not highlight the feeling of a small tag, it seems not so refined. So in a variety of tedious balance, I finally chose to make them a picture.

For another example, we have a module like this one.

Designer's intentions:

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

Page construction engineer analysis process:

Because the micro group level icon size is 16 × 16, higher than the height of the text itself, in order to ensure that the alignment effect in each browser, I used this idea.

According to the visual draft hundred percent reduction, made the effect of the left, although the css code looks a bit troublesome. However, if how simple how to write, done the page effect, but did not do so the actual effect is good.

There is such a module:

Page construction engineer analysis process:

Usually encountered such a module, we will be so divided structure

As the user avatar is only 30px square size, so counting user name can only display 2-3 characters, in fact, it is difficult for users to visually distinguish who this person is. If you do through traditional thinking, product and design estimates are not satisfied. So, the process of building pages, we must find ways to expand the user name display area.

So, I use the following cut map ideas, without changing the HTML structure, only by changing css, to expand the user name display area.

To the user avatar module fixed width, and then use the margin negative value, so vs left offset. Cover part of the avatar 1 area. The final result, you can display 4 Chinese characters.

Reconstruction group of trainee students, because there is no project experience, the teacher what is what to say, so I heard the instructor, "on the pixel," really to focus on this, if the design draft itself has some problems, it will not judge A moment, the result of their own quite embarrassed. Sometimes, the screen shot static page renderings and design draft go to the pixel, in fact, a few pixels, but the static page does not look like the design draft is not the same. This time always need to constantly modify, screen shots, pixels, and then modify ... Such duplication of effort in fast-paced development is not only a waste of time, more likely due to unnecessary points in the data after loading more "is not the case Child ". It is better to stop and go to the careful plan, fully communicate with the designer, have their own homes, smart judgments, and then to do specific development, out of the page do not need so battered pixels, perhaps Better to achieve the designer's original intention of it.

(Microblogging UDC original blog, welcome to reprint and indicate the source, welcome to subscribe)