App adaptation Ios8,iphone6 and plus screenshot brief description

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: Tips for quick adaptation to IPhone6 and plus.

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

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

Text: First, let's look at some data comparisons between Iphone5,iphone6 and Iphone6 Plus:

Model	IPhone 5 / 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 resolution Reference)	360	360	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
Number of pixels per inch of PPI	326	326	401
Status bar High (px)	40	40	60
Title Bar navigation bar height (px)	88	88	132
Tab Bar Bottom Bar height (px)	98	98	147
Desktop icon (PX)	120	120	180
Picture resource suffix Name	@2x	@2x	@3x

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 see the big picture: http://www.ui.cn/project.php?id=27104

One: Title Bar and tab bar height

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

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: Most of IP6 's icons can be directly used in IP5 resources, Plus icon needs to IP5 icon Resources x1.5 times, (when we developed the XX software, Android design size is based on 1080P, I took the Android resources to use in the plus is completely possible, so the development of Android with 1080P screen Designer Blessed, the above underlined text is the original, there is a mistake is not rigorous place, 1080P, can be used, I used to change our Android 1080P resource name to @3x, did not adjust the size directly into Xcode, simulator run up icon is very clear, this may be our Android is not 640 direct zoom to 1080, but the manual adjustment of each interface, so the resources can take up to plus, I just fit in the beginning of the time is so dry, and later found that some of the icons are not recognized, so now I again in those resources one manually adjusted to the plus available 3 times times (@3x) 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, in the future design of the app, when resources are limited, it is recommended to design 2 sets of size, based on 640x1136px to adapt to iphone4,5,6, (IP6 can be on the basis of IP5 in the white space stretching, resources with IP5, Bitmaps to be scaled), to 1242x2208px size to design iphone6 Plus, because Xcode 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, plus on the display of the physical size will be normal, and transduction will be @3x. If you use 1080P transduction, the icon resources will certainly not be clear. (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.

The physical height of the title and tab bar on the real machine is the same when you look at the real machine that the phone is taking. According to the @ 10 specimens, here the physical height is not the same, very close, I have recalculated the next, iphone5 and iphone6 the title bar physical height is 9.971mm = (128*88.51/1136), Iphone6 plus title Bar physical height is 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 for what serious.

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

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 like this interface, you can wait than zoom on it.

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

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 fdp/svg format vector pictures, and our engineers communicate that can directly out of a PDF image, I use PS export PDF to Xcode on the test available, by the way, we can not batch export PSD layer to PDF format transduction method, Is it only one cut?

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

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.) )

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:40)

App adaptation Ios8,iphone6 and plus brief description