Day Vision

Reading Everyday,Extending Vision

Why is the front-end reversibility so low? How do I label it?

2023-02-28 04:19:59

06. SummaryIn order to better solve the problem of design reduction, the following points need to be noted: 1. The position of the elements is designed using the building thinking and the design draft is modularized, and the elements that are easy to cause ambiguity are separately marked while the clear and clear annotation is output to reduce the reduction error; 2. Determine the minimum unit grid before the design begins, and use the principle of multiplex

文章来源:一起设计UED   作者:一起设计UED

This article mainly explained: the design and the development regarding the spacing understanding difference,

With the change of market environment and the improvement of industry level,

However, in the process of cooperation, the deviation between design and R&D thinking is gradually reflected: "This demand cannot be done, the spacing is not adjusted well"...

It can be said that in the growth process of every UI designer,

How to better achieve design restoration and reduce duplication of work?


The entire article is divided into the following five parts:


The labeling of“Element locations” is a hot spot with developers when it comes to design acceptance.

In the face of it, the designer should stand

1. Absolute position and relative position

We often say that "position" is the coordinates of the X axis and Y axis representing the element in the interface, and the same element will be roughly divided into two types because it presents different positions in different models: 1.Absolute location; 2. Relative position.

As junior high school physics says, “The relativity of motion and rest”, a ship is sailing on the sea, the coast is the reference, the ship is relative to the coast, the sea lighthouse is absolute position.

1. Absolute location

Absolute position:

For example: common navigation bar, bottom tab bar, bottom suction button and floating button.

2. Relative position

Relative position:

For example: Alipay's list stream.The spacing of lists is fixed, and when a list is deleted, the position of the list below is automatically moved up.(as shown below)

Second, the attention point of the location marking

When making location notes,

Elements are superimposed into a building in the form of modules.

When making annotations, the correlation between elements is analyzed to make annotations, and the location of the elements on the floor where they are marked is marked.It can be used throughout the entire design production process.

For example: list flow, multiple cards, or multi-line diamond zones, just mark the location of the elements in a layer. (see below)

3. Labeling methods for absolute position and relative position

And clearly and clearly marked so that developers can better and faster restore.

Or fixed position labels.

Relative position

02. Component spacing

In common design annotation files, component spacing can be broadly divided into two types:

1. Margins

2. Spacing between content blocks;

1. Page margins


At the same time, a small detail can be found in the interface of 36Kr: the icon on the right is not attached to the security area.This is because in the case of small icon size, in order to ensure its clickability, blank pixels will be filled around it, so that the clickable hot spot area is larger than the visual size of the icon.(as shown below)

In the design process, we should use commonly used margins, such as 32px, 30px, 24px, 20px.

Reduce communication costs with developers.

2. Content block spacing

There are two main types:

Typically, according to the "similarity principle" in Gestalt, the intra-block spacing is smaller than the out-of-block spacing, ensuring the intimacy of the content blocks and the sense of separation between blocks.(as shown below)


It is necessary for designers and developers to keep the same thinking when marking the outer spacing of blocks, so that the page can be restored.




The above two methods are not very easy to use, the basic has been eliminated.



This is the most suitable adaptation scheme for development thinking, and it is also an adaptation scheme with a better reduction effect.

The specific method is to fix the upper and lower areas, and the intermediate interval area is adaptive.Individually divided areas can be given either a height value or a given scale.(as shown below)



In a word,

Get in line with them.


In the design process, we often use the following methods to regulate the spacing:

1. Define the minimum unit grid, such as 4px, 6px, 8px, etc.;

2. Set common spacing: if the minimum unit is 4px, common spacing is set to a multiple of 8,16,24, etc. .

The common use of the minimum unit spacing grid multiple settings, can ensure the accuracy of visual elements, make the design reasonable, but also facilitate developers to achieve restoration, reduce communication costs.

DO as much as possible“Restraint”, avoid too much space so that developers in the restoration process create unnecessary trouble.


Notes on content spacing,


03. Icon divider



By analyzing the spacing of icons, we will simplify all icons into two categories:

1. Rule (with bottom version) icon;

2. Irregular icons;

1. 有底版图标

Most of these icons appear in the King Kong area, such as: Taobao, Vipshop.

King Kong area icon commonly used layout has two kinds, one is equidistant, one is the screen is equidistant.


Irregular icons

Such icons will appear in the King Kong area, list flow, navigation bar, tab bar, etc., such as: get, hornet's nest, etc.

When labeling, it is also marked with the icon box area.

Usually the smallest clickable area is 48px by 48PX, and write that in the specification document. This makes it easy for developers to review, and it also saves time for the entire project process.


As a small element in a page, we can easily ignore it in the design, so it is very important to do a good job of marking up the dividers.


Most list flows use dividing lines, such as Alipay, WeChat.


When we draw our own dividers, we recommend using a height of 1px for the dividers. Docking with the developer shows that the dividers are 1px for@1,@2, and@3.

2. Feed streams

Feed streams are also frequent customers who use dividing lines, such as: The Paper, Jianshu.

The annotation of text needs to pay attention to the fact that the text itself has a default line height.So we can't completely label the text itself, but leave a few pixels as the line height of the text itself.

3. Between content blocks

Split lines are sometimes used between content blocks, for example: eye-opening, beep-beep-beep.

We need to mark the space between the dividers and the content, and then mark the space between the top and bottom.

But there is one thing to note here: there is a problem of omission when drawing a dividing line. We often use sketch to draw, but because of the sketch's default property, lines are centered, which results in lines that are visually aligned to pixels, but it will display 0.5 pixels on the data.

When spacing is calculated between multiple elements, it can cause inconsistencies between the graphics displayed on the data and in the actual picture.At this point, we need to use the rectangle tool to draw a line 1 pixel wide, so that we can ensure both visual alignment and integers in the data.


First, the text line height adapts



Why is that? Because different glyphs will produce slight differences in height, whether it is using the original method or using the sketch default line height to label the text, it is inconsistent with the font default line height in the software that edits the text at the front end.

For example, the line height effect corresponding to the Xcode for iOS and Android text editors.

As can be seen from the above image: developers will use a textview when writing fonts, we can understand as a text box, the word is not full of this box, is a certain amount of white space.

So, we can think of line height as an invisible box that wraps around the font. When we mark the line height of text, we need to include white space and mark it as a text box (the default line height) .

Specific with the developers to restore text spacing annotation methods, can be roughly divided into three:

1. Install the plugin;

2. Manually modify the text line height;

3. Text componentization;

1. Install the plug-in

More lazy ways:

Although this kind of plug-in looks like it can be done once and for all, there are currently fewer applications on the market, and there are more bugs, and single-line text can basically be restored, and multi-line text is basically not applicable.(Plug-ins can be downloaded in the attachment)

2. Manually modify the text line height

The most accurate way: according to the front-end editor default line height of their own perfect restore.


3. Text style

This way of standardizing the design can better allow developers to restore the design draft, and it is also convenient for us to proofread and adjust the page later.

At this time, sharp-eyed friends may find that the default line height of the text editor developed by Android and iOS is also different, do we have to produce 2 sets of design annotation files?

Although it is undeniable that the ideal state is of course for designers to produce 2 sets of design drafts, designers who have rolled in the workplace will know that most products are in a rapid iterative process, and the time cost of producing 2 sets of design drafts is too high and does not meet the actual situation.

Adjust the annotation separately for special pages.All in all, which method to use to mark the text should be analyzed according to the specific situation of your project.

Second, the text is flexible and adaptable

Text elastic adaptation generally involves width adaptation.

This method can achieve better adaptation, and it is also a fast and commonly used adaptation method.


(of course, our main goal today is not to teach people how to make shadows, but to

Do you do the diffuse shadow in the docking with the developers have encountered the following pain point:

, uneven copywriting,

And how are we going to do that?

Combined with their actual work experience and communication experience with developers,

1. Map docking developers;

2. CSS code implementation.



2. The frontend will prefer CSS code to achieve diffuse shadow effect

Under normal circumstances, the effect is better, but there will be some exceptions, such as irregular shapes, usually with the code is more complex, this time need to communicate with the developers cut diagram, avoid late-stage problems.

Regardless of the method, there is no right or wrong, the key is to know how to "weigh the pros and cons" and communicate with the developer in advance.As long as it is suitable for your own company's project and can efficiently restore the design draft, it is worth using.


In order to better solve the problem of design reducibility, the following points need to be noted:

1. Element position

Use the building thinking to design and modularly annotate the design draft, and separately mark the elements that are prone to ambiguity while outputting clear and clear annotations to reduce the reduction error;

2. Component spacing

Determine the minimum unit grid before the design starts, and use the principle of multiplier to determine the common spacing to ensure the accuracy between the elements during adaptation and reduce the complexity of development;

3. Icons

Cut and annotate according to the size of the icon box for later development;

4. Dividers

In the annotation, it is necessary to explain that the dividing line always maintains a height of 1 pixel under different models;

5. Text

Since the text in the development environment has a padding height, it is necessary to manually modify the line height to the default line height in the development environment during design; When adapting to multi-line text, determine the spacing between the left and right pages of the text, and stretch the content part elastically;

6. Projection


Good design can not be achieved without developer on-the-ground support. As designers, collaborative developers to complete the design landing is also an important part of the work. Do the above points, stand in the perspective of developers for them to“Think a step more”, high-quality design restoration is just around the corner.

It's worth more than 2 months of hard work.

If you find this article helpful

Must Remember to share to the friends around ha ~

Oh, right

Set it as a star

Every one, it's good.

Experience | Interviewed more than 50 UI designers, and I summarized these job search tips

UI designer interview routines in detail

About the Nice Lab

A circle that regularly recommends good global designers and industry celebrities for live broadcast sharing.