iOS screen adaptation (cont.)

Tagged with: iOS uifont adapter

The previous blog summarizes some tips on how to fit your iOS screen, and this article adds a few other things

Design drawings

The design of the interface is usually made by the artist, and then the development is realized. The last blog is mainly about developing how to achieve the problem. In fact, from the aspect of the design diagram, we need to start to consider the problem of interface adaptation. The main point is 2:

1, out of a few pictures

If the design is based on iPhone6, it is generally difficult to fit perfectly to the iphone4,5 and 6P, because the screen size varies greatly. Generally on the 6 is very compact and good-looking, on 4 and 5 will not be placed (overflow screen), on the 6P there will be a relatively large gap

There are usually several options:

The location and size of the design elements, rather than the specific values, are used as percentages, which will be adapted on each screen. But usually this is only ideal, because the width-to-height ratio of the 4 screens is different, and it is inevitable that stretching will occur, and that the display area and the hit area on the 4 will be very small, and it will be difficult to achieve the best visual effect.

Try to consider streaming layouts, such as waterfall streams, scrolling pages, and so on, so that there is usually no problem because the pages are scrollable. By contrast, restricting the display area to one screen makes it prone to problems.

The perfect way to do this is to make 4 drawings, with a specific value instead of a percentage. This can be done best on every screen. Of course, the workload of design and development is also the largest

2, point and resolution relationship

iOS in the development, the unit is point, but generally only developers understand the concept, designers generally use the resolution when drawing. The 2X resolution is on the 4,5,6, and the 3X resolution on 6P. This must be considered at design time.

For example, the font size on the 2x screen is 24px, it must be designed to 36px on 3x, so development does not need to make any judgment, font size will naturally be multiplied by 1.5. A reverse example, the design of the 2x screen is the 24px,3x screen is 28px, which is usually a wrong design. Development can only set the size of the Uifont based on the screen type, and 28 is not divisible by 3

For example, design an element distance from the left side of the 2x screen is 10px, then the 3x screen is designed to 15px, development does not need to make any changes

Compatible Web pages

In another case, some pages need to be implemented on the app as well as on Web pages. The wrong thing to do in the first place is to ask the Web page to "pinpoint" the app's design. In fact, this is not possible because 2 points:

1, the Web page uses the CSS layout method, with the iOS interface development idea has very big difference, will have the problem in the realization

2, the Web page to face the mobile phone screen size more, whether it is design or development, to precisely match the N kinds of screen, it is impossible

So, the right way to do this is to make a new design for the Web page, where the size is determined by the percentage:

For example, in an app design you can determine the width of each cell exactly, and in the Web, you should specify 50% of the screen width for each cell. Even a responsive layout should be used on the web to handle screens with huge differences in size, but this is another topic that doesn't extend

How big is Uifont?

This is what we tried the wrong try out, in fact very simple, set

[Uifont Systemfontofsize:16]

This font on the 2x screen is 32px, on the 3x screen will naturally become 48px, very convenient

In the same vein, set a uiview frame to

CGRectMake (0, 0, 100, 100);

On the 2x screen is the 200px * 200px rectangle, on the 3x screen is 300px * 300px of the rectangle

iOS screen adaptation (cont.)