Visual designer as the execution layer to show the final form of the product, before the product goes online, visual and interactive restoration is a necessary link, and the time left for the designer to check and modify is actually very small, sometimes in order to match the product launch time, usually can only sacrifice some details, in the next iteration for optimization.In order to better restore each online product, designers need to understand what rules are used to restore our design drafts, and how we should set the rules for every detail when making and delivering design drafts.

Development: It's perfectly aligned here.

Visual: It doesn't look perfectly aligned, and my diagram isn't cut wrong, right?

Development: Font size and spacing are based on visual drafts.

Vision: the spacing here is so big, why not follow the vision draft?

Development: There are many visual styles, and the spacing of each designer seems to be different.

Vision:......

We often hear some conversations between designers and development brothers around us, and design restoration issues such as alignment, size, and spacing are often discussed for a long time, and sometimes we even feel that the pitch of several pixels is not necessary to be so entangled.Take the cloud product official website I often contact as an example, the cloud product official website is huge, a single page or information module style reuse can be up to hundreds of sub-product pages, at this time the first module design standardization, extensibility, reusability has become particularly important, so in order to make the design scheme more reasonable, in order to make the cooperation more efficient, here is a summary of some design experience, and discuss with you.

This article will consider from the following three aspects, as a visual designer, how to make the design more reasonable and effective:

视觉处理（设计）

Design Logic (method)

Delivery run check (co-operation)

Visual processing

1. Font structure

In web design, we can't avoid dealing with fonts, fonts are also a part of our design that we often overlook, and often the reason for mistakes is often because our understanding of the text is not clear enough.Compared with Western font, Chinese font structure is complex and the font library is huge, the rendering effect of the web page will be much more difficult than that of Western font.

但无论是中文还是西文，我们经常需要用到的无非是字体大小、字重、字色，还有就是经常被我们忽视的行高和行宽，我们从西文字体提取三个最主要的因素，即字高、行高、行宽。基于西文字体的结构转换为中文，我们可以理解为，字高指的就是我们肉眼所能看到的字体的实际高度，而行高指的是字高+上边距＋下边距，反过来说，行高减去字高除以 2 就能得到我们的上下边距，行宽指的就是整个文本的宽度。

To take an example of a graphic module, the spacing we see with the naked eye in figure (1), when we make annotations, we actually see the three color blocks in figure (2), and we actually give the developed annotation, which is the size of the color blocks and the spacing between the color blocks, as well as detailed text properties.

2. Line width

Regarding the line width, taking the title and description text of the design banner as an example, the line width is defined to allow the text to wrap at the limit width, and then fix the size of the picture, so as to obtain the spacing between the text and the picture, define the line width, line count, and word count, which can better standardize the output copy for the operation personnel and avoid the visual imbalance caused by too many or too few words.

When we deal with an unordered list, four short sentences of text, different lengths, we also need to limit the width of a line of text, define the maximum number of words that a line can carry, and confirm with the product the maximum number of words that may appear, confirm the feasibility of the module design, and ensure that subsequent operators will not make mistakes when replacing copywriting.

Both of these examples are common mistakes in our design language. The correct definition of a specification, whether it is for delivery development or other downstream, ensures extensibility and standardization of module design, ensure the quality of the final line.

3. The icon illusion

Regarding the icon, here mentions the concept of a geometric illusion, the visual size, length, area, direction, angle and other geometric composition, and the actual measured number is significantly different from the illusion, called geometric illusion.The visual balance accepted by the human eye is often not the precise alignment on the design software, and we will always make up some negative space by adjusting the spacing, size or angle to keep the picture visually balanced.

Take the card style of the customer case as an example. The customer case is an essential module in to B products. Our customer logo has some circles, some rectangles, some plain text, and the size difference is quite wide, in this case we need to give him a height limit, within this height, and then according to the size of the logo itself to adjust the size of the image, handle the visual balance of the logo, finally, the red area is the actual size of the logo, and the blue area is the size we actually gave to the development. From the development point of view, it is actually a placeholder. The standard drawing is to set the transparency of the placeholder to 0, the placeholder is the actual active plot area.

UI design usually "right arrow" to indicate that the current link can be jumped, when using arrows for drawing, when we align the arrow and the text to the right, the arrow will actually protrude more outward, at this time we will artificially push 1 to 2 pixels inside, and finally the actual development should also be the size of the red box, that is, the size of the placeholder of 16×16.

Buttons are also a common component in UI design. When we use icons and text in a button, the overall center of gravity shifts to the right because of the larger size of the text, so what we tend to think of as moving the icons and text overall to the left, making the overall visual balance more balanced, is actually giving the developer two different margins.

Design logic

1. Rational design

In the design specifications of iOS and Android, it has been mentioned that the concept of using "8-point grid" is mentioned, that is, it is recommended to use an 8×8 grid system for design, we all know that 0.5px rendering will become blurry on the screen, the reason why a multiple of 8 is used is because the mainstream screens on the market can be divisible by 8, the use of 8-point grids can maximize the content style we design to maintain high-definition display on the screen, and in daily web design, I actually prefer to use a 4-point grid system.

Let's take the example of the four sets of numbers in Figure 4. You may have used the values in the three blue sets above to apply to your design, either in multiples of 5, or in multiples of 10, or in even-numbered design logic, in fact, multiples of 5 contain odd numbers, which can cause the control to be out of alignment. When multiples of 5 and even numbers are used at the same time, 1-like numbers of 14,15, and 16 appear, this makes it difficult for our size specifications to define rules and form logic, and with multiples of 4, their tolerances are 4, and there are no odd numbers or adjacent numbers.

Let's look at some common size definitions. For example, the common icon design sizes are all multiples of 4.

The common web page grid and the cards and spacing it divides equally are also multiples of 4, if our control size, icon size and spacing are all defined in multiples of 4, then all the information modules will naturally be better adapted to each other, and the logical relationship among the layers will be more obvious.

We applied the 4-point grid design logic to the card design. At first glance, it may be difficult to judge whether the two are good or bad, but if we look closely, we can see that the buttons on the first card are not aligned horizontally, the size of the spacing between each other is also illogical. If today adjust a distance of 8px, tomorrow adjust a distance of 10px, designers go to check up it is difficult to find problems, docking development is difficult to have a reference to the standard. On the other hand, by taking a multiple of 4, we find that all the information is perfectly aligned, and with a tolerance of 4 between each value of the multiple of 4, even if we fine-tune the design by 1PX, we will find that very quickly, development also has a metric when restoring a design manuscript.

Grid design in newspapers, magazines, posters and other graphic design field is also very common design techniques, through the establishment of a grid, each information module in the page to study the placement of the position, size ratio, color proportion, so that the page information to maintain order, balance.

使用 4 点栅格系统，通过理性、秩序、逻辑的设计方式赋予画面秩序感以及阅读体验，而以 4 为倍数，每个数字之间都相差为 4，不会太大，也不会太小，同时保持着秩序，让设计更加理性。对于团队合作，设计师与开发也将更有默契，不必再为不清不楚的间距浪费时间。

Delivery to go check

1. Effective cutover

With respect to cut diagrams, determine with development the format and size of the output before cutting diagrams, and determine whether you should use SVG, one-or two-fold diagrams. SVG small volume rendering quality, monochrome use can also replace the color, PNG is usually used in the scene, double and double graphics output according to actual needs.

If we want to do layered animation, then we need to layer cut, if the desktop and mobile side style is quite different, then we need to communicate with the development how to achieve, whether the need for special cut, for all special cuts and styles, we should communicate with the developer ahead of time.

2. Interaction details

If a control or information module interaction style is more, then we can have a blank artboard to clearly mark these states and styles, many development in the restoration process is a hand visual draft and a hand interactive draft, but the visual designer as the execution layer to show the final form of the product, in many cases, the visual stage will still have a lot of interaction and product communication modification, so in order to avoid missing modification points, the visual draft should present the most complete design details, which will also greatly save development time, Reduce the chance of errors.

When the page content has a certain frequency of updates, we need to indicate the visual style specifications, as well as the follow-up rules of operation, complete closure, can avoid products often come to seek online material and specifications. There are some requirements that require three months or six months to go online, and clear labeling can also help us quickly recall the background of the requirements, allowing us to keep a clear mind and be organized in our daily work, it also saves us time.

3. Review the refactoring draft

When checking and restoring, right-click on the blank space of the Chrome browser to check, find the Computed window inside, we can find the specific text, spacing, projection and other properties, sometimes some more subtle adjustments, we can double-click the specific value to adjust, adjust to their satisfaction and then give the specific value to the development, so that there is no need to cause trouble for both sides in our vacillating situation.

Finally, we can use the SwitchHosts client to configure the development environment for the pre-release experience to ensure the final release.