Why is the page so different from the design manuscript?

In the Internet product development process, the page's visual reduction is a very important step, is often the most problematic part. If some of the details are not effectively identified and resolved in this link, then the cost of solving them in subsequent processes is exponentially higher.

So let's comb it today and see what common problems are easy to encounter between the front-end engineer itself and the upstream and downstream roles.

　　Designer

Designers are the most close to the product experience, but the industry has specialized, designers tend to pay more attention to visual performance, and easy to make some beautiful mistakes:

1, the Experience analogy H5 page design with native APP

We all know that the native app experience is very fluid and the interface is gorgeous, so the design side also tries to move closer to the original app experience. But the reality is often very cruel, many APP's experience changes to H5 on the miserable, such as a complex operation of the floating layer, in a variety of low-end machines can be said to be porous. So here, it is recommended that designers should be able to compare the performance of other H5 sites to the design, rather than often compare the APP experience.

2, the design draft is the most perfect state

Yes, the design of the draft is often reflected in the most perfect state. And front-end developers often have to consider a variety of overflow state, a number of beyond, folding line, open and so on. Most of these are not reflected in the design manuscript, often to the development process to confirm the details, compared to waste time.

3, type using a non-system font

The so-called type, that is, directly in the form of text displayed on the page, rather than using pictures to simulate the text. For this part of the font, we will generally adopt a system font, not because of a few special fonts to load a set of Chinese font files. If you are an English font, you can also consider custom fonts in advanced browsers, but consider graceful demotion as well as the copyright of fonts. So the boss asked: "For Mao and design manuscript is not the same?" We can only say, no this font ah ... Here suggest, even if the design draft, type also use system font, otherwise it is a pit, look good and not realize.

4, the version is not clear

The design of the manuscript, is often a period of time planning function, and then to confirm with the product. And the product generally will say, this first not, that does not do first. But when really removed, all these spacing adjustments, color background effects, and so on, still need to be confirmed with the designer. So if possible, you should only highlight the change section each time, rather than a all-inclusive manuscript.

5, this should be so cut

On this issue, has been unable to spit, this page is not really cut out. You say so cut so cut, you cut a show me to see?

　　Front-End development

Front-End development, also known as the page Aberdeen, cut the figure, in the process of reducing the design, easy to encounter problems more:

1, do not consider overflow

There is a basic rule about overflow, that is, as long as the dynamic output content, or user input, we must consider the overflow state of the display. Text overflow, list overflow, and so on. When you get the design draft, confirm the layout, it is a variety of overflow status confirmed.

2, write code without analyzing the design draft

As a novice to get the design draft, often want to write code quickly, because write code to have pleasure. As everyone knows, the analysis of the page structure is as important as the program architecture, analysis thoroughly to take into account a variety of situations and part of the requirements change, the so-called Maito, structural analysis must be done first.

3, regardless of the state of adding or deleting elements

A slightly larger company is often parallel to multiple requirements, so the design may have an advanced part, or a function that cannot be implemented in the middle for various reasons. As a qualified front-end engineer, in the implementation of the page, it is necessary to do some of the possible changes in the section even if deleted will not affect the page a large area.

4, do not consider maintainability

Adaptive to adapt to meet changes in requirements. such as multiple floors, width adjustment, add an icon and so on. Take a simple example, such as a box in the middle of a center button, many beginners are directly with margin-left to locate, so if the outer frame width adjustment, the Margin-left value will have to follow the adjustment. Although the width is not troublesome, but when the development of large and complex pages, these linkage of small changes enough to make people dead.

5, not carefully read the design draft

The most common mistake is that there is a border on the design, but the color is too light to see. Or the design is not a border, due to the iterative style, with a dark background, ignoring the border has not been removed. Another situation is that the color block on the design is covered by the sideline, but when the implementation is not covered, it causes that part to look like a recess.

6, it's not that hard to see 1px.

A lot of new people think that the gap between the 1px is very difficult, listening to a bit of a fault. But you think, if you are a designer, hard to make a design manuscript, which is not all right, you do not feel bad? In fact, as long as you carefully look, plus some exercises, a few pixels can be almost a glance. The feeling is not sure, you can screenshot to the PS inside amplification, and then use the reference line contrast.

7, regardless of scalability

A lot of times I check page restore, nothing more than a few more items, fill in some text to try first, but a lot of people this is not going to pass. Add a project, or you don't have to set multiple lines of the bottom margin, or more than one line of border changes, or the end of the item to set a separate style. Add the text, directly to the top out to destroy the structure.

Okay, so many people must have enough, I believe that everyone in the workflow will encounter a variety of details of the problem, there are a number of repeated over and over again encountered problems, such as suddenly caught a rush to run: This page how messy ah ah ah, trouble quick look ~ ~ ~ A: ctrl+0, you enlarged ... So, do you have anything to spit on?