IOS Development UI Adapter Iphone6 iphone 6plus

Apple releases two new sizes of big-screen iphone 6,ios platform size adaptation problem finally came, mobile design fully into the "miscellaneous screen" era.

So how to deliver a set of design manuscript to solve the problem of large and small three-screen fit. What collaboration patterns are used between design and development. A basic idea is:

1, choose a size as the design and development benchmark;

2, the definition of a set of matching rules, automatic adaptation of the remaining two kinds of size;

3, the special adaptation effect gives the design effect.

When facing the large and small three kinds of screens need to fit, it is easy to think of a screen first, and then to fit the remaining two kinds of screen. The first decision is what kind of screen is used as the base size for design and development. We chose the middle size of the iphone 6 (750px/375pt) as a benchmark for several reasons:

1, from the middle size up and down fit when the interface adjustment is the smallest. The design effect under 375pt is not too large for the 414pt and 320pt deviations. Assuming that the 414pt is the benchmark for elegant design, the ratio between the 320pt possible elements is not the case, such as picture and text between the visual ratio may be maladjusted.

2, the iphone 6 Plus has two display modes, the standard mode resolution is 1242x2208, the magnification mode resolution is 1125x2001 (that is 1.5 times times the iphone 6). It can be seen that there is a 1.5 times-fold relationship between the iphone 6 and the iphone 6 Plus resolution in the official system. In many cases these two sizes can be 1.5 times times more direct than the matching.

3, 1242x2208 this wonderful figure is the Apple officials are unwilling to publicize a resolution, not easy to remember and compute grids. Although 640x1136 is a widely used resolution, but the big screen era is still small size for the design benchmark is obviously outdated, designers will stay in small screen perspective to do the design.

Therefore, the IPhone6 750x1334 is most suitable for the base size. After selecting the datum size, we 750x1334 1.5 times times (1125x2001) as the design dimension in order not to allow 750x1334 resolution images to magnify too much on the iphone 6 Plus. When the UI engineer designs the UI, all dimensions are multiples of 3, and when the program needs to set the picture size, the pixel of the picture is divided by 3. That is, the number of point units required by the program. Image processing can be used prepo this tool to automatically generate @2x @3x pictures.