Regarding the knowledge point of adaptation, this article will help you master it thoroughly!

Orange's Orange: I remember when I first started working on UI, I didn't know that the interface needed to be adapted. I thought that it was enough to just design the design, and other things had nothing to do with me. After I gradually made mistakes, I realized that there was such a thing as adaptation. So there are some things that are difficult to realize if others don't tell you. It is too costly to rely on experience gained from mistakes. Why not stand on the shoulders of predecessors to make progress?

1. Current Situation

The UI industry is booming, and people from all walks of life are pouring in. Many people who had no design foundation before have switched to become UI designers, and there are many novices who have only studied intensively for a few months. In order to let the trainees see the actual results during the training, most of them practice drawing icons and making interfaces, and basically do not teach those things that will be used in actual work. This is not to say that the training class is not good, nor does it mean to belittle the training class. I have also participated in it. They don't talk about it just because the knowledge is obscure and difficult to understand, and it is difficult for novices to understand it, so they simply don't talk about it.

This makes many new designers think that UI design is very simple, and they only need to fill in the color of the product prototype and output the colorized design draft, and they think everything is fine. They know very little about adaptation, and some even think that it has nothing to do with them and is all a matter of development.

2. Wrong Practices

It is precisely because some designers do not have a thorough understanding of adaptation that when they are doing actual projects, when they need to adapt the 750 design draft to the 640, 720, and 1242 screens, they choose to directly stretch the design draft to the corresponding size in equal proportion, and then re-mark it. Little do they know that this method not only increases the workload several times, but also leads to unsatisfactory final results. This is what it means to spend effort but not get any results.

Taking the QQ homepage as an example, the left picture is the design draft of 750 (copied) directly stretched to 1242, and the right picture is the actual online 1242 interface.

I believe everyone can see the difference. The interface elements after 750 direct stretching are overall larger than the actual online 1242.

There are two reasons why this method is wrong. One is that according to this method, the content displayed on 750 and 1242 is the same, but in fact the screen of 1242 is longer than that of 750, so it should display more content, as shown in the following figure of JD Finance.

Another reason is related to mathematics. To make a 750 page the size of 1242, it needs to be enlarged 1.65 times. But in fact, 750 is an interface at 2x magnification, and 1242 is an interface at 3x magnification. Their ratio is 1:1.5, not 1:1.65.

That is to say, when the draft that is directly increased from 750 to 1242 is developed and implemented, the following situation will occur: the icon is 1.5 times the size (a 3x cut file is used when the icon is implemented), but the text size, spacing, and picture are 1.65 times the size. The annotation draft is also annotated at 1.65 times, which will affect the development layout and cause a series of errors.

As can be seen from the figure, when we directly mark the spacing and icon size in the stretched design draft, the icon size will be smaller than what we marked during actual development, with a difference of 15px. At this time, if the development is laid out completely according to the marked draft, this will cause the spacing of the icon area to be significantly different from other places. The difference is too large, and the icon may even be deformed.

Since the method of directly stretching the design draft is not feasible, is it the only way to make a new design for each screen size? Of course not. The development cost of this is too high and it is unnecessary. In fact, as long as you pay more attention to the adaptation issue during design, you can make one draft adapt to all.

3. Why can’t one draft fit all?

Most people can understand the adaptation of 750 to 1242, but they cannot understand the adaptation of 750 to 720. They are opposed to it, thinking that these two belong to two different terminals, iOS and Android, and the heights of the tab bar and navigation bar are different. If the design draft is not output separately, the icon image will be deformed and the spacing will be too narrow...

Now let me explain why in the past everyone has always directly explained why one draft can adapt to everything. Today we will take a different approach. Why can't one draft adapt to everything? The following is a detailed explanation of several points that everyone is confused about.

1. Icon deformation

When developing, we always use 2x and 3x cut images. The set of images used for each screen size is selected according to the magnification. The icon size, spacing, and font size are the same at the same magnification.

2. Image deformation

Pictures are all drawn in proportion. This problem can be avoided as long as you only mark the proportion when marking instead of limiting the width and height.

3. Differences between iOS and Android platforms

Some people always think that there are differences between the two platforms. For example, their navigation bars, tab bars, and time bars are of different sizes. How can they be adapted? In fact, the basic controls of these platforms, such as the navigation bar at the top, the time bar, and the tab bar at the bottom, are not on the same Z-axis as the elements in the interface. They belong to the top layer of the interface, and the size of the interface is not affected by them.

As shown in the figure below, the basic controls of Android and iOS are different, but it does not affect the size and position height of the Tab filter below the navigation bar. So it turns out that adaptation has little to do with the platform.

4. Master the correct adaptation rules

1. Same magnification

The adaptation needs to be at the same magnification. Since we want to make a comparison, of course it has to be on the same level. You can't let Yao Ming and Lin Dan compete in badminton.

After knowing the screen resolution and magnification of the mobile phone, you can calculate the screen resolution at other magnifications. For example, the size of iPhone 6 is 750*1334 (at 2x), and after multiplying by 1.5, you can calculate the size at 3x.

Similarly, we can get the screen resolutions of other mobile phones at different magnifications. The red frame indicates the normal resolution size.

Adaptation is only related to the magnification. At the same magnification, the spacing, text size, and icon size on the interface are the same. The only difference is the width and height of the screen display content. So at 2x magnification, 750=640=828=720; similarly, at 3x magnification, 960=1125=1242=1080.

Taking Xiami Music as an example, the sizes of elements on the 640, 720, and 750 pages are compared to confirm that the spacing, text size, and icon size on the interface are the same.

2. Three principles of adaptation

When adapting, three adaptation principles are usually followed: proportional scaling, elastic controls, and text flow adaptation.

Proportional Scaling

Proportional scaling means that the size of the element is not fixed, but will change with the size of the screen (usually the width). As shown in the following figure, the ratio of a single preview image on the App Store search results page is 16:9. No matter how the screen resolution changes, the image ratio will not change.

When marking, we only need to mark the page margins, image ratios, and spacing between images, and the developer can write the adaptation rules to change with the screen width.

Elastic controls

Elastic controls mean that the element size remains unchanged, and the spacing adapts to the width of the screen. The wider the screen, the larger the spacing.

Text flow adaptation

The amount of text on a line is proportional to the screen width. The wider the screen, the more text can be displayed on a line.

3. Adaptation has nothing to do with platform basic controls

In fact, not all elements of the interface need to be adapted. We only need to adapt the middle area.

The height of the top and bottom navigation is not fixed, and the height of each platform is different. For example, the navigation bar of iOS is 88px, and Android has 112px, 104px... But no matter what the height is, we just need to make the element centered.

4. Practical Examples

Having said so much, it's time to take a practical example. In fact, adaptation can be summarized into three steps: first convert to the same magnification, then adjust the interface elements, and finally restore the adjusted interface to the size that needs to be adapted at the beginning according to the magnification.

How to adapt 750 to 1242

First of all, the adaptation needs to be under the same magnification, 750*1334 is under 2x, 1242*2208 is under 3x, and according to the magnification conversion, the 2x size of 1242 is 828*1472.

So if you want to adapt 750*1334 to 1242*2208, you need to first adapt 750 to 828*1472, and then adjust the interface ×1.5 to 1242*2208.

For other things, such as how to adapt 750 to 720 or 640, the principle is the same. Their magnifications are the same, so you can save the first and last two steps. You only need to adjust the interface elements according to the three principles of adaptation.

5. Points to note

1. Small screen adaptation

Most of our designs are based on 750 pixels, which involves the problem of small screen adaptation. When an element is displayed very well on 750 pixels, it may not fit on 640 pixels. Therefore, when making pictures, designers need to consider the problem from a dynamic perspective. Here are some of the most common problems.

2. Pop-ups

The pop-up box style shown in the figure below is very good on the design size of 750, but if it is directly adapted to the 640 screen without any adjustment, it will not fit. So at this time, we need to define some adaptation rules, such as reducing the font size and spacing for small screens.

3. Text cutoff distance

The size of the screen will directly affect the number of words displayed in each line. When there are elements on the right side of a line of words, it involves the safe cutoff distance between the words and the elements. In other words, it is the area where the words can be displayed at most. Many times, when designers are making design drafts, they do not consider the extreme cases of words, which leads to overlapping of words and elements on small screens.

For example, in the following figure, the nickname of iQiyi My Page is displayed very clearly on the 750 interface, but it is not fully displayed on the 640 interface. This requires us to define the area where text can be displayed. When the length of the text exceeds this area, the text is omitted and replaced by "..."

4. Platform Differences

The system-level control styles on iOS and Android are different, so we can make several styles for both ends separately, which is not expensive but has a good effect. For example, the search box on the iOS platform is a rectangle, while the search box on Android is an underline.

5. Single screen page

Most of the interface adaptations we make are based on screen width. The height only affects the amount of content displayed on one screen. The taller the screen, the longer the content displayed. For waterfall flow layout, the height does not need to be adapted. But there are always some special single-screen pages, such as music playback page, blank page... that need to display the same amount of content on all screens.

Blank Page

For a relatively simple page like the one shown below, if the top spacing is fixed, the content will appear to be biased to the top on a large screen. At this time, if we want to display the same content on all screens, we can set a ratio for the blank areas above and below, so that no matter what screen it is on, the content will be in the same position relative to the entire screen.

The specific calculation method is: subtract the top and bottom navigation from the screen height, and then subtract the height of the content area. The remaining area is allocated in proportion: 3/7 for the top and 4/7 for the bottom.

Music playback page

This page is more complicated than the blank page, but the principle is the same. Fix the parts that can follow the basic adaptation rules and leave some adaptive parts. For example, the following picture of NetEase Music is also an interface under 2x. The height of the play operation area is the same, which is based on the basic adaptation rules, while the disc area is obtained by fixing the left and right spacing.

The only area that needs to adapt to the screen height is the green rectangular area. In fact, if you simplify this figure, you will find that the adaptation method is the same as the blank page mentioned above. However, it should be noted that the adaptive parts should not exceed two. If there are more than two, the variables are too large, which is not conducive to calculation and is not necessary.

6. Design Draft Size

As for the design size, I don't think there is any essential difference. In principle, you can use any design size you want. However, from the perspective of adaptation, 750 (2x), 720 (2x), and 375 (1x) are relatively more suitable.

I used 750 and 720 before, and I couldn't understand why people still used 1x for graphics. There are no 1x phones on the market now. If you use 1x to make graphics and export them to 2x or 3x, won't the icons have blurred edges? But later I changed to a new job, and my colleagues all used 375 (1x) for graphics. After getting used to it, I found that there is not much difference between the two.

It's just that when some icons are not integers, you need to manually export them to 2x or 3x, but in fact, even if you use 750 (2x) to make pictures, you still need to manually export them to 3x for fear of icon blurring, so it's the same. The advantage of using 1x is that many foreign resources are made in 1x, so you can use them directly.

It should be noted that when making a dividing line at 1x, it needs to be changed to 0.5px, so that it will be 1px after exporting the image at 2x. It is recommended to use inner shadow for the dividing line instead of using a 0.5px line directly.

7. Tips

When we are making a picture, we want to quickly know whether the elements of the current page can be placed on a small screen. We can't always drag the current page to the small screen to see the actual effect. This is too costly. In fact, there is a very simple way to solve this problem.

The interface of 750 and 640 differ by 110px (under 2x), we just need to subtract 110 from the interface of 750 to see if it can fit. If it can, it means it can fit on the small screen.

If you want to know whether the number of words can be placed, you can also draw a conclusion by calculation. Divide 110px by the font size, and you can get a number of words less than the design draft on the small screen. For example, if the font size is 30px, 30 words can be displayed on a 750 screen, then only 26 words can be displayed on a small screen.

8. Conclusion

***Let’s summarize the most important points of the whole article to help you deepen your impression.

The traditional method of adapting the interface by proportional stretching is wrong and extremely wasteful of manpower. One draft can adapt to all. Adaptation has nothing to do with the platform, but only with the magnification. From the perspective of adaptation, the sizes of 750 and 720 are the same, except that the interface size differs by 30px. Three principles of adaptation: proportional scaling, elastic controls, and text flow adaptation. Don’t be rigid about adaptation, but look at it dynamically. When doing it, you need to consider extreme situations, the most common of which is small screen adaptation...

The concept of adaptation is very special. It looks very simple, so simple that most people think they know it and don’t need to study it anymore, but in fact they only know the basics and don’t know the principles. For example, many people say they know PS, but compared with those professionals, what you think you know is just the tip of the iceberg. So we should always keep a heart of seeking knowledge and don’t always stubbornly stick to our own opinions. Let’s encourage each other.