App adaptation Ios8,iphone6 and plus screenshot brief description

This article reprinted to http://blog.csdn.net/yongyinmg/article/details/41422873Original: http://www.zcool.com.cn/article/ZMTE0MjMy.html

Fortunately on September 25 to get the iP6 and IP6 plus the real machine, just do the work of adaptation app (from Iphone5 to Iphone6 and IP6 Plus), so on the real machine on the next Apple official in different resolutions of the system to do the adaptation of the app. At the same time on the internet did not find the relevant real machine comparison of what, and a friend asked me to IP6 and plus the real machine back to their own research, since this, then why do not use their own resources, so that more designers benefit? So let's say something, to make a point, I hope we can study together, less go some detours, and grow together.

I've seen @jingdesign's article on adaptation to IP6: A quick fit for iPhone6 and plus tips,

There's also an article at @ Loeffler: Web developers and designers have to know about IOS 80 changes. As a reference (excerpt).

------------------------------------------------------------------

Body:

First, let's take a look at some of the Iphone5,iphone6 and Iphone6 plus data:

iphone5/s iphone 6 iphone 6 Plus
Size 4 "4.7" 5.5 "
Viewport ' s device-width (in CSS pixels) 320 375 414
Viewport ' s Device-width (Android device with same resolution Reference) 400
Device Pixel Ratio pixel ratio 2 2 3 (approximate Value
Rendered Pixels render pixels (default viewport size * DPR) 640x1136 750x1334 1242x2208
Physical pixels physical pixels (cell phone display pixels) 640x1136 750x1334 1080x1920
Picture resource suffix name @2x @2x @3x

Status bar High (PX) 40 40 60

Title Bar navigation bar height (PX) 88 88 132

Tab Bar height (px) 98 98 147

Desktop icon (PX) 120 120 18 0

This is for the front-end reference: the iphone 6 and iphone 5, like Silverhalide are 2, but on the other hand the iphone 6 Plus 401 dpi true pixel ratio should be about 2.60. To solve this problem, Apple has a new concept rendered pixels render pixels, if like silverhalide is 3x, then theoretically a CSS width 414px screen should have 1242px of physical pixels (in reality, 1080px, 13% smaller). (the pixel ratio is calculated: The front-end code is the iphone4,5 screen width is written as 320px, and at this time all the iphone4,5 of the actual width of the pixel is 640PX, so the pixel ratio is 2,iphone6 in the CSS is 375px, the actual pixel is 750px, The pixel ratio is also 2, and Plus is not. ）

So if you're using a 3x diagram for your Android device, the same picture will fit the iphone 6 Plus but the iphone's browser will resize the image first before rendering it on the screen.

Then I compare the 3 screen App Store interface: (Unable to view the original image?) ), click here to view the large HD image

As you can see from the diagram:

One: Title Bar and tab bar height

The height of the Title BAR:IP5/6 is 128px,plus height is 192px (128x1.5=192)

The Tab bar:ip5/6 height is 98px, plus the height is 147px (98x1.5=147)

The height of IP5 and IP6 's title bar and tab bar has not changed, and the tab bar's icon size has not changed, only the width of the entire column stretch, so iOS engineers in the early development of the use of the AutoLayout automatic layout will be very cool, if the layout is dead, That really needs an interface to change the interface.

Conclusion: Similar status bar height is not changed, can be directly stretched width adjustment spacing, there are settings interface, and even the code is automatically layout without adjusting the spacing.

Two: The icon size of Tab bar

The figure identifies the size of the leaderboard: ip5=46x46px, ip6=46x46px,ip6plus=69x69px (1.5 times times 46px).

Conclusion: IP6 's icon, most of which can be directly used IP5 resources, plus icon needs to IP5 icon Resources x1.5 times, ( when we developed XX software, Android design size is based on 1080P, I took the Android resources out to use in the plus is completely possible, so the development of Android with 1080P screen designers blessed, the above underlined text is the original, there are errors not rigorous place, 1080P, can be used, I used to put our Android 1080P resource name changed to @3x, not resized directly into Xcode, simulator run up icon is very clear, it may be that our Android is not 640 direct zoom to 1080, but each interface manually adjusted, so resources can take up to the plus, I did this at the beginning of the adaptation, and later found that some of the icons were not recognized, so now I'm going to manually adjust those resources to 3 times times (@3x) of the plus available size. ）

(In explanation: for example, ip5 an icon named: [email protected], then I put the same icon in Android to the name of [email protected], directly into the [email protected] in the same folder , Xcode can be identified as a plus resource, and the icon does become HD after the simulator runs, and the difference between the other and no replacements is obvious. ）

In the above code example, the iphone 6 Plus pixel ratio is 3x, it will load superhires.png this picture, and iphone 5s,iphone 6 will load hires.png This diagram, the rest of the load lores.png.

By the way: before Ios6,ios7 to see the App Store homepage changed the layout style, before the style remember is each category two rows down unlimited list, now each category in the interface using the horizontal can be unlimited sliding style, that can not be fixed in a screen, IP6 did not understand the typography before the advent, and did not find the benefits of this typesetting, when IP6 and plus appeared, the advantages of this style of typesetting is obvious, because it will be easier to adapt to the various resolutions of the screen. So, when your app has a single interface with multiple categories and lots of content to arrange, it's recommended to refer to the App Store style, and if you have a better style, you can share it.

According to the App Store, when designing apps in the future, with limited resources, it is recommended to design 2 sets of sizes:

On the basis of 640x1136px to adapt to the iphone4,5,6,(IP6 can be on the basis of IP5 the white space stretch, the bitmap is equal to zoom),

To 1242x2208px size to design iphone6 Plus, because Xcode's engineering files and plus code and all are 1242x2208px resolution, but the screen physical size is 1080x1920px, so according to the size of 1242x2208px to design , the physical size shown on the plus will be normal, and transduction will be @3x. If you use 1080P transduction, the icon resources will be unclear. (If you have a large number of designers, of course iphone6 should also design a separate set.) ）

------------------------------------------------------------------

Three: Banner

The banner of IP5 is that 640X260PX,IP6 is 750x304px (that is, IP5, 640x260px, etc.) than the scaled size.

The IP6 plus layout has changed, and the style of the banner diagram is similar to the ipad, showing 3, of which 1 are main and 2 are available for preview. The main size is 795x387px. The proportions and ip5,6 are different, so the apps may need to be re-typeset according to their needs.

Conclusion: Similar bitmaps, IP6 and so on can be enlarged, plus need to be re-typeset separately.

look at the real phone camera,

The physical height of the title and tab bar is the same on the real machine

. According to

@ 10 Specimens why

the reminder that the physical height here is not the same, very close, I myself recalculated under, Iphone5 and iphone6 title bar physical height is 9.971mm = (128*88.51/1136), Iphone6 plus title bar object 10.591mm = (192*121.8/2208). But the data here is not very useful, only to solve the physical height is the same, so you don't have to remember, but still want to thank

@ 10 Specimens why

of seriousness.

------------------------------------------------------------------

Four: Albums

Looking at the changes in the album (IP6 Plus contrast ip6), similar bitmaps should be equal to the magnification, and not as the App Store line increases the number of IP6 albums individual picture size is 186x186px,plus a single size is 309x309px,

So an interface like a photo album can be as much as a zoom.

------------------------------------------------------------------

Five: Desktop Icon:

Look at the size comparison of the desktop icon

iphone5=120x120px iphone6=120x120px iphone6 plus=180x180px (1.5 times times IPHONE5/6, i.e. @3x)

Conclusion: Icon will have a set of 180x180px size.

Similarly: about the start-up diagram, which is the splash screen, if your webapp has a launch map, then you have to add two lines of code to fit the new IPhone. The image size for the splash screen IPhone 6 is 750x1334px,iphone 6 Plus corresponds to 1242x2208px.

------------------------------------------------------------------

VI: Automatic layout and SVG, etc.

Apple seems to provide a solution when IOS6, auto Layout:auto layout guide:introduction, if the designer knows HTML and CSS will be easy to understand, I myself just understand the fur of HTML, Designers in the design of the interface when the data is best not to write a fixed number of PX, using absolute positioning that is iP4 before the scheme, especially now out of IP6 and plus, if now also with absolute positioning, designers and engineers efficiency will be very low, so we and engineers communicate with the best use of the left, Right how much, center, and control in the screen size and position is a few of the kind of annotations, auto layout can be based on different device sizes automatically calculate UIView frame, which will be more efficient and convenient to fit more dimensions.

Xcode6 has started to support the SVG format vector pictures, and our engineers communicate that can be directly out of an SVG image, I use a PS plug-in Zeick can be exported SVG, but this plug-in is charged, do not know that there is no better way, you can use PS CC export SVG format Tools/plugins?

------------------------------------------------------------------

All the ip6&plus are attached to the attachment for download and research. ( compressed package is a Mac with compression, in Windows decompression may be garbled, which friend convenient can be re-uploaded once to share to everyone oh.) ) Download Link: http://pan.baidu.com/s/1gdxhv5x

Reprint please keep the following information, because I will also for the non-rigorous areas and new discoveries at any time modified. (Last updated on 2014-10-29 09:50)

————————————————————————————————————————————

This article reprinted from the station Cool NET, author @youngxkk

Original Address http://www.zcool.com.cn/article/ZMTE0MjMy.html

—————————————————————————————

App adaptation Ios8,iphone6 and plus brief description