IOS Development UI Adaptation Iphone6 iphone 6plus

Tagged with: iOS adapter iphone6 iphone

Apple released 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 to solve the problem of matching large and medium-sized three screens? What collaboration models are used between design and development? A basic idea is:

1, select a size as a design and development benchmark;

2, define a set of adaptation rules, automatic adaptation to the remaining two sizes;

3, the special adaptation effect gives the design effect.

When facing the big medium and small three kinds of screens need to adapt, it is easy to think of a screen first, and then to fit the remaining two kinds of screens. The first decision is what kind of screen is used to design and develop the benchmark size. We chose the mid-size iphone 6 (750px/375pt) as a benchmark, based on several reasons:

1, from the middle size up and down when the adjustment of the interface to the minimum amplitude. The 375pt design effect is not too large to fit into the 414pt and 320pt deviations. Given the elegant design of 414pt as a benchmark, the ratio between the possible elements of 320pt is not the case, and the visual proportions between the slices and the text may be misaligned.

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). There is a 1.5 times-fold magnification between the iphone 6 and iphone 6 Plus resolution in the official system. In many cases, these two sizes can be used 1.5 times times the direct ratio of the matching.

3, 1242x2208 the value of this wonderful flower is Apple's official reluctance to publicly promote a resolution, not easy to remember and calculate the grid. Although the 640x1136 is a widely used resolution, but the big screen era still small size for the design benchmark is obviously outdated, designers will stay in the small screen perspective to do the design.

Therefore, the IPhone6 750x1334 is the most suitable for the reference size.

Selectedafter the reference size, in order not to allow the 750x1334 resolution picture to magnify too much in the iphone 6 Plus, we picked 750x1334 1.5 times times (1125x2001) as the design size. When UI engineers design the UI, all dimensions are multiples of 3, and when the program needs to set the picture size, the pixels of the picture are divided by 3. That is, the number of point units required by the program. Picture processing can use Prepo this tool to automatically generate @2x @3x images.

IOS Development UI Adaptation Iphone6 iphone 6plus