Design deliverables

preface

Design delivery is a necessary workflow for UI designers. Design delivery affects the final implementation of the interface and the size of the fit.

Bad fit is the development’s fault?

Many beginning designers have the wrong idea about adaptation. I believe that adaptation is what developers need to do. Developers need to be responsible for the results of adaptation of various sizes. Their job is to make the interface design beautiful and easy to use. This is a very unprofessional idea. It is important for the interface to be easy to use and beautiful, but the interface is not stored in the PERSONAL computer for self-appreciation, but in the form of app in the user’s mobile phone. Only then will your design unveil the mysterious veil and show the most real appearance. Therefore, it is necessary for designers to cooperate with development to do restoration and adaptation, and further improve the product, which is a part of designers must pay attention to and think about.

Personally, I care about the final result of development. The problem I mentioned in my last article “This Sketch plug-in helps you perfectly restore the Android interface” was the one I vowed to solve after I got the test machine for several times. The last article addressed the issue of page restoration after design delivery. Today I will share with you the impact of design delivery on fit between different sizes (ios).

Automated labeling, once and for all?

Up to now, automatic labeling has been very intelligent and popular, a large number of designers have actively entered the door of automatic labeling tools, from now on, say goodbye to overtime. I do not deny that brought by the automated labeling designed to promote the efficiency of delivery and human liberation, but behind this efficient, less a self audit process, are more designers in the design of interface of size and spacing of the control, without the page reduction to control this opportunity, all the design elements, size, spacing and so on to the development of autonomous control. In addition, the designer’s responsibility for interface restoration and adaptation results is reduced to a large extent, and the uncertainty brought by automatic marking to the adaptation of devices of different sizes is ignored.

Next, I will analyze the reasons why the adaptation between devices of different sizes cannot be clearly described by automatic labeling in terms of text, ICONS, pictures, components and other dimensions. And how to deliver the design properly and comprehensively.

Text and ICONS

Text, as one of the foundations of interface design, is rarely mentioned separately in design delivery, because the pt text automatically adjusts to the corresponding size for @3x and @2x devices. As the screen grows or shrinks, the size of text displayed on both devices is almost the same. (Plus is slightly larger) The amount of content you can see on one screen increases and decreases accordingly, effectively highlighting the advantages of viewing more content on a larger phone.

And the adaptation that seems to be most developed is simple and efficient, with no exceptions. But this isn’t the only way to adapt words.

There is another way to enlarge the text size according to the screen proportion. On the basis of the need for a 2x image to adapt a 3x image *1.5, multiply the ratio of two screens again to get a text scaled according to the screen proportion. The text size on the two devices is obviously different, visible to the naked eye.

The advantage of such text adaptation method is that the proportion between text and interface is closer to the design drawing, and it also avoids, to a certain extent, the increase of negative space in the interface when the interface size changes but the text remains unchanged. In this way, the interface is often not only text, including pictures and components will be proportional to scale, to maintain a complete screen of content. Therefore, the two ways have their own advantages, combined with different page content and characteristics of the product, to take the appropriate adaptation, better quality to show the user page information and product content.

The picture

Here, the image is defined as the image spread across the screen or the image size is determined based on the horizontal screen size, such as banner, background, etc.

If it is a simple gradient with small details, it is also acceptable to flatten the background. However, if the image such as banner is rich in content and requires high quality, it is not possible to use the default adaptation method. For this type of image, it is necessary to maintain the image aspect ratio and equal scale when adapting.

However, proportional scaling brings a new problem, that is, the height of the picture as the background after equal ratio stretching is higher than that of the design drawing. At this time, the text and text gap on the background need to be adjusted accordingly to avoid the increase of negative space as the background increases. This also increases the workload of development to a certain extent, so in the design of delivery to choose suitable for different pages of the picture adaptation, to achieve a balance of time and effect.

component

Component is a more general term. It refers to a section of a page made up of multiple elements. It can be a king kong area, a list of heads, or a set of X-axis sliding cards. Components are rich and varied, different products have different purposes and different styles of component parts. Therefore, the rich components of the adaptation also have a variety of adaptation.

One, content spacing equal scale

Two, the content size is fixed, the spacing is adaptive

3. The content size is self-adaptive and the spacing is fixed

Fourth, the content size is unchanged, the spacing is unchanged, and the quantity is self-adaptive

conclusion

In many cases, there is more than one adaptation method, and the design delivery cannot be clearly expressed by fully automated annotation. If the designer does not think about the suitable adaptation method of the page or does not communicate clearly during delivery, the development will only be handled according to his expertise and experience. Waiting until acceptance to modify will only be more time-consuming and laborious, most will choose the next iteration optimization, and then will be nothing. Therefore, designers should think about the suitable adaptation methods of different plates and pages during design, and make remarks in the automatic annotation tool through text description, so as to accurately transfer the adaptation ideas to the development. Only in the design of a step more thinking; Delivery of more than one step of communication, will be in different sizes of equipment in the adaptation of the perfect product.