App Adapter Ios8,iphone6 and plus screenshots are briefly illustrated with iP6 screenshot downloads for research (not original) __ios

Reprint Address: http://blog.csdn.net/folish_audi/article/details/41244195
Luckily, on September 25, I got the iP6 and IP6 Plus's real machine, just to do the job of adapting the app (from Iphone5 to Iphone6 and IP6 Plus), so I studied Apple's adaptation to the app at different resolutions on the real machine. At the same time on the Internet also did not find the relevant real machine screenshots to illustrate what, and a friend asked me to IP6 and plus the real machine screenshot back to their own research, since so, then why not use their own resources, so that more designers to benefit from it. So say something about it, and hope that we can study together, less take detours, and grow together.

I've seen @jingdesign's article on adaptation IP6: Quick adaptation to IPhone6 and plus tips,

and the @ Rollei article: The 80 changes that Web developers and designers must know about IOS. As a reference (there are excerpts).

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

Text:

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


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 resolution Reference) 360 360 400
Device Pixel Ratio pixel ratio 2 2 3 (approximate Value
Rendered Pixels rendered pixel (default viewport size * DPR) 640x1136 750x1334
Physical pixels physical pixels (cell phone display pixels) 640x1136 750x1334 1080x1920
Picture resource suffix name @2x @2x @3x


Status bar Status column height (px) 40 40 60


Title Bar navigation bar high (PX) 88 88 132


Tab Bar Bottom column height (px) 98 98 147


Desktop icon (PX) 120 120 18 0






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


So if you use a 3x map to a high-definition Android device, the same picture will fit the iphone 6 Plus but the iphone's browser will first resize the image before rendering it on the screen.

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 is 98px in height and the plus height is 147px (98x1.5=147)


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


Conclusion: Similar status bar height unchanged, you can directly stretch width adjustment spacing can be, as well as the setting of the interface, and even the code is automatic layout without adjusting the spacing.


Second: Icon size of Tab bar

The chart identifies the size of the list: ip5=46x46px, ip6=46x46px,ip6plus=69x69px (1.5 times times the 46px).
Conclusion: Most of IP6 's icon can use IP5 resources directly, Plus the icon needs to ip5 the icon resources x1.5 times, (we were developing XX software, the design of Android is based on 1080P, I put the resources of Android to use on the plus is completely OK, so the development of Android with a 1080P screen designers Blessed, the above underlined text is the original, there are wrong places, 1080P, can be used, I have to our Android 1080P resource name changed to @3x, not adjusted to the size of the Xcode, the simulator run up icon is very clear, this may also be our Android is not 640 direct zoom to 1080, but each interface manually adjusted, so the resources can take up to plus, I initially fit when it is so dry, and later found that some of the icons are not recognized, so now I am in the resources of a manually adjusted to the plus available 3 times times (@3x) size. ）




(In explanation: for example ip5 an icon named: star@2x.png, then I put the same icon in Android to take over the name of the Star@3x.png, directly thrown to star@ 2x.png in the same folder, the Xcode can be identified as plus resources, and the simulator ran up after the icon does become high-definition, and there is no replacement of the difference is obvious. ）



In the example above, the iphone 6 Plus pixel ratio is 3x, it loads the superhires.png image, and the iphone 5s,iphone 6 loads Hires.png, and the rest loads lores.png.


By the way: In the past when Ios6,ios7 saw the App Store home page changed the style of typesetting, the previous style remember is each classification of two rows of infinite list, now the interface in each category using horizontal can be infinitely sliding style, that is, can not be fixed in a screen, IP6 did not understand this layout style before appearing, and did not find the benefit of this typesetting, when IP6 and plus, the advantages of this style of typesetting are 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 a lot of content needs to be sorted, it's recommended to refer to the App Store style and share it if you have a better style.




According to the App Store screenshot, in the future design app, when the resources are limited, the proposed design 2 sets of dimensions:


Based on 640x1136px to fit the iphone4,5,6, (IP6 can be stretched on the basis of IP5, the bitmap is equal to scaling),


Design iphone6 Plus with 1242x2208px size, because Xcode's engineering files and plus codes and screenshots are 1242x2208px resolution, but the screen physical size is 1080x1920px, So according to the size of the 1242x2208px design, plus on the display of physical size will be normal, and Chettu will be @3x. If you use 1080P Chettu, the icon resources will definitely not be clear. (If you have enough designers, of course, Iphone6 should also design a separate set.) ）


------------------------------------------------------------------
Three: BannerThe banner of the IP5 is 640x260px,ip6 is 750x304px (that is, IP5 640x260px, and so on, the size is scaled).

IP6 plus typesetting has changed, and the banner pattern is similar to that of the ipad, displaying 3, 1 main displays, and 2 are available for preview. The primary size is 795x387px. The proportions and ip5,6 are not the same, so each app may need to be restructured according to its needs.

Conclusion: Similar bitmaps, IP6, and so on can be amplified, plus need to be individually restructured.


The physical height of the title and tab bar on the real machine is the same when you take a look at the real-world screenshot of the phone. According to the @ 10 realities, the physical height is not the same, very close, I recalculated, iphone5 and Iphone6 's 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 we do not have to remember, but still want to thank @ 10 realities why serious.


Four: Albums

Looking at the changes in albums (IP6 plus IP6 screenshots), similar bitmaps should all be scaled up, and not as much as the App Store line, the size of the IP6 album single Picture is 186x186px,plus a single size is 309x309px,

So like a photo album such an interface, you can wait than zoom on it.


Five: Desktop Icon:

Looking at the size contrast of the desktop icon
iphone5=120x120px iphone6=120x120px iphone6 plus=180x180px (1.5 times times IPHONE5/6)




-----------------------------------------------------------------
Six: Automatic layout and SVG, etc.

Apple seems to provide a solution when IOS6, automatically layout auto Layout:auto Layout guide:introduction, if designers understand HTML and CSS will be easy to understand some, I 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's the iP4 before, especially now out of IP6 and plus, if you're using absolute positioning now, designers and engineers will be less efficient, so it's best to use the left side when communicating with engineers. The right number, center, and control in the screen size and position is a few of the notes, auto layout can be based on different equipment size automatically calculate UIView frame, this will be more effective and convenient to fit more sizes.


Xcode6 has begun to support the SVG format vector pictures, and our engineers to communicate that can be directly out of an SVG image can be, I use PS of a plug-in zeick can export 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/Plug-ins.




------------------------------------------------------------------
All the ip6&plus real machine screenshots are placed in the attachment for you to download the research. (compression package is a Mac with compression, in the Windows decompression may be garbled, which friends can upload a share to everyone oh.) ) Download Link: http://pan.baidu.com/s/1gdxhv5x


Reprint please keep the following information, because I will also be for the less stringent places and new discoveries at any time to modify. (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
————————————————————————————————————————————