文章来源：一起设计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:

01､位置

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.

一般来说，常见的有四种方法：

1.

2.

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

3.

4.

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)

3和4是比较常用的高度适配方法，尤其是第4种，酷狗和QQ音乐都是采用第4种方法进行适配。（如下图）

块内间距的标注涉及到文字、图标等内容会在后面章节进行说明，此处省略。

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

Icons

图标是设计中最常用的基础元素，我们会在金刚区、tab栏、个人中心、导航栏等不同位置用到。

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.

1.列表流

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.

04､文字

First, the text line height adapts

有部分设计设计师用原始方法来标注文字：如下图，标注从上面文字“科”的末端开始测量到下面灰色文字的最高点“2”结束。在这种情况下，开发人员还原出来的效果和设计稿有一定的差距，需要调试很多遍才能达到想要的效果。

Later,

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.

05､投影

(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.

1.用切图与开发人员对接

这个时候需要设计师和开发人员都比较细心，因为

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.

http://www.gaoquanquan.com/archives/162

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.

06

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

常规投影与弥散阴影推荐使用css代码完美实现；特殊情况下还需提前与开发人员沟通权衡各种方式的利弊，选择适合项目产品的实现方式。

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.