Comparative iOS Design Guide for iPhone Devices (iPhone 6
and iPhone 6 Plus)
With the release of iPhone 6 and iPhone 6 Plus both App
Designers and App Developers have to adapt their process of creation to the
newly introduced screen sizes and resolutions. The new iPhone changes the way
graphical assets are rendered onto the actual screen. This impacts how App
Designers have to setup their art tobhave it displayed properly on the new
screen sizes. I created a guide for designing an app for the new iPhone 6 and
iPhone 6 Plus.
Since iOS 8 does not support non-retina iPhone devices so didn’t
list iPhones older than 2010.
Screen Resolutions:
iPhone 4 / 4S
|
iPhone 5 / 5s
|
iPhone 6
|
iPhone 6 Plus
|
|
Canvas Size (pts)
|
320 x 480
|
320 x 568
|
375 x 667
|
414 x 736
|
Pixel Canvas
(px)
|
640 x 960
|
640 x 1136
|
750 x 1334
|
1242 x 2208
|
Screen Size (px)
|
640 x 960
|
640 x 1136
|
750 x 1334
|
1080 x 1920
|
Points to
Pixel
|
1 = 2
|
1 = 2
|
1 = 2
|
1 = 2.60
|
Assets Scale
|
@2x
|
@2x
|
@2x
|
@3x
|
The iPhone 6 Plus renders at a 1242 ×2208
virtual canvas, using @3x assets, then takes the entire user interface and
scales it down to 1080 × 1920.
iPhone 4 / 4S
|
iPhone 5 / 5s
|
iPhone 6
|
iPhone 6 Plus
|
|
Status Bar (pts)
|
320 x 20
|
320 x 20
|
375 x 20
|
414 x 20
|
Status Bar (px)
|
640 x 40
|
640 x 40
|
750 x 40
|
1242 x 60
|
Navigation Bar / Landscape (pts)
|
320 x 44/32
|
320 x 44/32
|
375 x 44/32
|
414 x 44
|
Navigation Bar / Landscape (px)
|
640 x 88/64
|
640 x 88/64
|
750 x 88/64
|
1242 x 132
|
Tab Bar (pts)
|
320 x 49
|
320 x 49
|
375 x 49
|
414 x 49
|
Tab bar (px)
|
640 x 98
|
640 x 98
|
750 x 98
|
1242 x 147
|
Label (pts)
|
320 x 43
|
320 x 43
|
375 x 43
|
414 x 43
|
Label (px)
|
640 x 86
|
640 x 86
|
750 x 86
|
1242 x 129
|
Assets Scale
|
@2x
|
@2x
|
@2x
|
@3x
|
Common used UI elements:
App Icon (pts)
|
60 x 60
|
60 x 60
|
60 x 60
|
60 x 60
|
App Icon (px)
|
120 x 120
|
120 x 120
|
120 x 120
|
180 x 180
|
Spotlight App Icon (pts)
|
40 x 40
|
40 x 40
|
40 x 40
|
40 x 40
|
Spotlight App Icon (px)
|
80 x 80
|
80 x 80
|
80 x 80
|
120 x 120
|
Settings App Icon (pts)
|
29 x 29
|
29 x 29
|
29 x 29
|
29 x 29
|
Settings App Icon (px)
|
58 x 58
|
58 x 58
|
58 x 58
|
87 x 87
|
Nav Bar Icon (pts)
|
22 x 22
|
22 x 22
|
22 x 22
|
22 x 22
|
Nav Bar Icon (px)
|
44 x 44
|
44 x 44
|
44 x 44
|
66 x 66
|
Tab Bar Icon (pts)
|
25 x 25
|
25 x 25
|
25 x 25
|
25 x 25
|
Tab Bar Icon (px)
|
50 x 50
|
50 x 50
|
50 x 50
|
75 x 75
|
Assets Scale
|
@2x
|
@2x
|
@2x
|
@3x
|
Note : Navigation bar in landscape mode on iphone 6 plus are
not connected
Common used icons:
Design Workflow for iPhone 6 and iPhone 6 Plus
iPhone 6 has a bigger screen in width and length while still using @2x
assets, it can actually display more content onscreen. iPhone 6 Plus uses @3x
assets and at the same time also has a larger canvas size than iPhone 6. That’s
how iPhone 6 Plus can display even more content than iPhone 6.
1. If you don't update your apps
immediately, you can benefit from the auto-scaling to get a reasonable
temporary solution for the two new devices
2. When you update your app to properly
support the new resolution, you'll need to deal with more available width
and height
3. Designs will need to be more flexible,
using features like the new Adaptive Layout introduced by Apple. Instead of
being at fixed pixel positions and sizes, buttons and UI elements will have to
stretch and scale to fit various screen sizes - not unlike designing an Android
app!
4. Icons and UI elements will need to
be provided in @1x, @2x and @3x versions
5. It's unclear how some elements will
render on the iPhone 6 Plus, for example 1px hairline lines may become
antialiased due to the software
downsampling.
6. Additionally, Apple showed off the
iPhone 6 Plus running in landscape mode, which used a two-pane UI similar to
the iPad. The iPhone 6 Plus even has a landscape version of the home screen, so
we can expect more pressure to get your apps working in landscape mode.
