A set of Effect map fit (Android and IOS) full size and labeling specification-(i) (750x1334) __ios

Original: Http://www.ui.cn/detail/59734.html?utm_source=tuicool

before, I always think of 320pt and 640px, because this can 1x2x perfect fit,

Now that the idea is a little outdated,

iphone 4 iphone 4S iphone 5 iphone 5C iphone 5S are designed with 320pt, now 357pt,414pt come, everyone is holding P6 and p6+ have face.

and Android is generally according to the design of the iOS to adjust the development of appropriate, 640 and 720 difference 80px (40DP), 750 and 720 is only difference 30px (15DP), the error becomes smaller, design layout and composition on a higher degree of reduction

The age of 320PT has passed. Why am I still thinking about 640?

It's time to change your mind and design for a big screen.

Many of the device sizing issues in mobile app development have been a headache for the Android camp in the past, but a lot of designers have chosen to ignore the Android adaptation problem with only one set of iOS platform designs. With Apple releasing two new sizes of big-screen iphone 6,ios platform size adaptation problem finally came, mobile design fully into the "miscellaneous screen" era. Look at the following three iphone sizes and resolution data to know how much the screen is miscellaneous.

Coupled with the complexity of the Android ecosystem of various exotic sizes, now app design and development must consider fit large, medium and three kinds of screen. 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.

Mobile Taobao iphone 6/iphone 6 Plus adaptation version will be submitted to the App Store audit. Let's take a look at the collaborative model we've adopted, and then explain it slowly.

The first step, the visual design phase, the designer to the width of 750px (IPhone 6) to do the design, in addition to the picture of all the design elements used vector path to do. After the final design in the 750px design manuscript to do the annotation, the output callout chart. At the same time, such as magnification 1.5 times times to generate the width of the 1125px design draft, in the 1125px manuscript cut diagram.

The second step is to output two deliverables to the development engineer: one is the @3x Chettu resource used by the program, and the other is the design callout chart of width 750px.

In the third step, the development engineer gets the 750px callout map and @3x Chettu resources to complete the iphone 6 (375PT) interface development. This phase can not be a fixed-width way to develop the interface, the automatic layout (auto layout) to facilitate the subsequent adaptation to other dimensions.

The fourth step, adapt to the debugging phase, based on the iphone 6 interface effect, up and down debug the iphone 6 Plus (414pt) and the iphone 5S and the following (320PT) interface effects. This completes the big medium and small three screen fitting.

Why Choose iphone 6 as the benchmark size.

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.

only a set of design drafts are delivered, and by default, what rules apply.

As mentioned above, the adaptation strategy is to first select the iphone 6 as the benchmark design size, and then automatically fit to the other two sizes through a set of matching rules. This set of matching rules summed up in a word: text flow, control flexibility, picture, etc. scaling.

Control elasticity refers to the navigation, cell, bar, and so on in the vertical direction of the height unchanged, the horizontal direction width changes, by adjusting the element spacing or the right alignment of elements to achieve adaptive. The larger the screen, the more content can be displayed vertically, and the advantage of a large screen is shown.

According to the above default adaptation rules, large and small three kinds of screen display effect are the same. Sometimes you want to display more content on a large screen, you need to design a special adaptation effect. For example, the home focus of the App Store, with the iphone 6 fit to the iphone 6 Plus, focuses on size and layout. The list of apps below is also transformed from a row of 3+ into a row of 4+, which really implements the idea of larger screens showing more content. These will require the designer to give the corresponding design draft.