Through micro-blog analysis of the website page construction details and details

As a professional page construction engineer,

needs to have the ability to review the design in addition to the high requirements in the field of professional skills. It doesn’t mean you’re looking for exactly the same as PSD, and it takes a lot of time to do screenshots and PSD to "pixel"". In my understanding, through the analysis of the UI design draft, the review fully understood the intention of the UI designer, and combined with the interactive state of UE, to achieve the true "restore design draft"".

example one: there is take, have, the square is comprehend

, for example, in such a design,


The intent of


this topic list has a row height of 19px, and there is a 4PX margin below each topic. There is no space between the topic caption and its own descriptive text.

page construction engineer’s analysis process:

because the module resets the row height, it is already agreed that the line height of the text specification is 18px. Through communication, the designer recognizes that the line of this paragraph should be changed from 19px to 18px. But this is limited to the spacing between the title and the descriptive text. The 4 pixel margin between the title and title, from the composition of the topic shows a paragraph between the topic of relations, you can not blindly use 18px line high resolution. Because through our understanding of the design draft, designers use these 4 pixels to widen the space between the headlines, forming a visual sense of the paragraph. So, for refactoring, the 4 pixels can’t be ignored, or designers can’t tolerate it from the perspective of visual presentation. Therefore, there are "take", "home", the side is understanding.

also had an episode in the production of the module. As follows:


The intent of


this is size 11, because it is dotted with suggestive pictures, so it is less than the font 12 in front of the title.

page construction engineer’s analysis process:

at first, the students in the refactoring group suggested that they be translated into live characters when they discussed the design draft, which is called "song number 12". Color fillet blocks written in CSS3, scalability is particularly good. Because this module is responsible for the operation team, in the future will be able to meet the needs of changing text at any time. If we come back a "shocking" and "headlines" what? Each chart re cut,

back together?

but, from the point of view of visual design, this little tag is exquisite. If the text into text, although faced with future changes in demand, there will be a certain extent of the cost, but the distinction between the text is too small, it can not highlight the feeling of small tag, it does not seem so exquisite. So in all sorts of entanglements


Leave a Reply

Your email address will not be published. Name and email are required