Brief description of APP adaptation to IOS8, iPhone6 and Plus, iP6 download for Research (original), ios8ip6
I was lucky enough to get the real machine of iP6 and iP6 Plus in September 25. I just want to adapt to the APP (from iPhone 5 to iPhone 6 and ip6 plus ), so on the real machine, I studied Apple's official adaptation to the system APP at different resolutions. At the same time, I did not find the relevant real machine comparison instructions on the Internet. Another friend asked me to ask for the real machine of IP6 and PLUS to go back to my own research. In this case, so why don't we use our existing resources to benefit more designers? So let's talk about it. I hope you can study it together to avoid detours and grow together.
I have read @ jingdesign's article on ip6 Adaptation: quick adaptation to iPhone 6 and plus,
There is also an article by @ Luo lei: Web developers and designers must be aware of the dozens of iOS 8 changes. As a reference (with excerpt ).
------------------------------------------------------------------
Body:
First, let's take a look at some data of iPhone 5, iPhone 6, and iPhone 6 plus:
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 (for Android devices with the same resolution, refer to) 360 360 400
Device Pixel Ratio 2 2 3 (approximate value)
Rendered Pixels rendering pixel (default viewport size * dpr) 640x1136 750x1334 1242x2208
Physical pixels Physical pixel (cell phone display pixel) 640x1136 750x1334x1080
Image resource extension @ 2x @ 2x @ 3x
Status Bar Height (px) 40 40 60
Title Bar navigation Bar height (px) 88 88 132
The Bottom Bar of the Tab Bar is high (px) 98 98 147
Desktop icon (pixels) 120 120 180
Here is a reference for the front-end: iPhone 6 and iphone 5 are the same, the pixel ratio is 2, but the actual dpi ratio of iPhone 6 plus 401 should be about 2.60. To solve this problem, Apple has a new concept rendered pixels to render pixels. If the pixel ratio is 3x, in theory, a screen with a css width set to 414px should have a physical pixel of 1242px (in reality, it is 1080px, Which is 13% smaller ). (The pixel ratio calculation method is: the front-end code is to write the screen width of iPhone 4 and 5 to 320px, while the actual width of all products of iPhone 4 and 5 is 640PX, so the pixel ratio is 2, the CSS of iPhone 6 is 375px, the actual pixel is 750px, the pixel ratio is 2, and the plus is not .)
Therefore, if you use a 3x image for a high-definition Android device, the image will also adapt to the iPhone 6 Plus, but the iPhone browser will first adjust the image size before rendering the screen.
We can see from the figure that:
I. Title bar and Tab bar Height
Title bar: the height of ip5/6 is 128px, and that of plus is 192px (128x1.5 = 192)
Tab bar: the height of ip5/6 is 98px, and that of plus is 147px (98x1.5 = 147)
The height of the Title bar and Tab bar of ip5 and ip6 is not changed, and the icon size of the tab bar is not changed, but the width of the entire column is stretched, therefore, it would be nice for IOS engineers to use Autolayout for Automatic Layout during early development. If the layout was written to death, it would have to be changed from an interface to an interface.
Conclusion: The height of the similar status bar remains unchanged. You can directly stretch the width to adjust the spacing, and set the interface. If the code is automatically laid out, no adjustment is required.
2. icon size of the Tab bar
The figure shows the ranking size: ip5 = 46x46px, ip6 = 46x46px, and ip6plus = 69x69px (1.5 times the size of 46px ).
Conclusion: Most ip6 Icons can directly use ip5 resources. The plus icon needs to multiply ip5's icon resource x1.5 (when we developed xx software, android is designed with a size of P. I can use android resources on the plus. Therefore, the android developer is blessed with the p screen design, the above underlined text is the original text, where errors are not rigorous. It can be used for 1080 P. I used to change the name of our android 1080P resource to @ 3x, if you do not adjust the size, you can directly put it in xcode. It is clear that the simulator runs the icon. This may also be because our android system does not directly scale to 640, but manually adjust the size of each interface, so resources can be used for the moment on the plus. I did this when I first adapted it. Later I found some icons could not be identified, so now I am manually adjusting those resources one by one to 3 times the plus available (@ 3x .)
(In the interpretation: for example, ip5 an icon name: star@2x.png, then I put the same icon in android to rename it star@3x.png, directly to the star@2x.png in the same folder, xcode can recognize as plus resources, after the simulator runs, the icon is indeed in high definition, which is obviously different from other ones without replacement .)
In the example of the above Code, the iPhone 6 Plus is 3 X, and the iPhone 6 will upload superhires.png, while the iPhone 5S, iPhone 6 will upload hires.png, and the rest will be lores.png.
By the way: in the past, when IOS6 and IOS7 saw that the homepage of app store changed the typographical style, the previous style was listed infinitely in two rows for each category, currently, each category in the interface uses a horizontal layout that can be moved infinitely, that is, it does not need to be fixed on a screen. ip6 does not understand this typographical style before it appears, the advantages of this typographical style were not found. When ip6 and plus appeared, the advantages of this typographical style were obvious, because it would be easier to adapt to screens with various resolutions. Therefore, when your APP has multiple categories on a single interface and many content needs to be arranged, we recommend that you refer to the app store style. If there are better Styles, you can share them.
According to the app store, we recommend that you design two sets of sizes when there are limited resources when designing an APP in the future:
Use 640x1136px as the basis to adapt to iPhone 4, 5, 6, (ip6 can be stretched in the blank area on the basis of ip5, bitmap is proportional scaling ),
The iPhone 6 plus is designed in the size of 1242x2208px, because the xcode project file and plus code are both 1242x2208px resolutions, but the physical size of the screen is 1080x1920px, so it is designed according to the size of 1242x2208px, the physical size displayed on plus is normal, and the cut graph is @ 3x. if you use P to cut the graph, the icon resources will be unclear. (If you have enough designers, you have to design one iPhone 6 .)
------------------------------------------------------------------
3. bannerip5's banner is 640x260px, and ip6 is 750x304px (that is, the scaled size of 640x260px of ip5 ).
The layout of ip6 plus has changed. The banner chart style is changed to be similar to that of ipad. Three are displayed, one is displayed on the master node, and two are displayed on the preview node. The main size is 795x387px. The ratio is different from that of ip5 and 6. Therefore, various apps may need to re-typeset and adjust it as needed.
Conclusion: similar bitmap, ip6 proportional amplification, plus needs to be adjusted separately.
Let's take a look at the mobile phone's real machine. The Title and Tab bar have the same physical height on the real machine. According to the @ ten tips, the physical height is not the same here. It is very close. I re-calculated it myself, the physical height of the Title bar of iPhone 5 and iPhone 6 is 9.971mm = (128*88.51/1136), and that of the Title bar of iPhone 6 plus is 10.591mm = (192*121.8/2208 ). However, the data here is not very useful. It is only for solving whether the physical height is the same, so you don't have to remember it. But I still want to thank @ 10 for taking it seriously.
Iv. Album
When viewing the changes in the album (ip6 plus compared to ip6), similar bitmaps should all be proportional amplification, and do not increase the number of single lines like app store. The size of a single image in ip6 album is 186x186px, the Single Size of plus is 309x309px,
Therefore, you can perform proportional scaling on an interface like photo album.
V. desktop Icon:
Let's take a look at the desktop icon size comparison.
Iphone5 = 120x120px iphone6 = 120x120px iphone6 plus = 180x180px (1.5 times that of iPhone 5/6, I .e. @ 3x)
-----------------------------------------------------------------
Vi. Automatic Layout and svg
Apple seems to have provided a solution when IOS6 is used to automatically deploy Auto Layout: Auto Layout Guide: Introduction. It is easier for designers to understand html and css, I am only familiar with html. It is best not to write a fixed number of pixels for the data marked by the designer in the design field. Using absolute positioning is the solution before ip4, in particular, ip6 and plus come out. If we still use absolute positioning, the efficiency of designers and engineers will be very low. Therefore, when we communicate with engineers, we 'd better use the left, right, center, and widgets in the screen, such as the size and position of a few points, Auto Layout can automatically calculate the UIView frame according to different device sizes, this makes it more effective and convenient to adapt to more sizes.
Xcode6 has already started to support vector images in svg format. We can communicate with our engineers that we can directly produce an svg image. I can use a plug-in of PS, zeick, to export svg, however, this plug-in is charged. Do you have a better way to use ps cc to export svg tools/plug-ins?
------------------------------------------------------------------
All ip6 & plus VMS are stored in the attachment for you to download and study. (The compressed package is compress on mac. unzipping the package on windows may cause garbled characters. Which of the following friends can upload the package again and share it with you .) Download link: http://pan.baidu.com/s/1gdxhv5x
Reprinted, please keep the following information, because I will modify the information at any time for less rigorous places and new discoveries. (Last updated)
--------------------------------------------
This article is reposted from Youku, author @ youngxkk
Original address http://www.zcool.com.cn/article/ZMTE0MjMy.html
--------------------------------------------
