iOS Design

来源：互联网发布：ubuntu连打印机编辑：程序博客网时间：2024/05/22 07:08

Resolutions

Device Portrait Pixels Landscape Pixels Portrait Logical Resolution Landscape Logical Resolution iPhone 7 Plus (Physical) 1080 x 1920 px 1920 x 1080 px 414 x 736 points 736 x 414 points iPhone 7 750 x 1334 px 1334 x 750 px 375 x 667 points 667 x 375 points iPhone 6 Plus (Physical) 1080 x 1920 px 1920 x 1080 px 414 x 736 points 736 x 414 points iPhone 6 Plus (Virtual) 1242 x 2208 px 2208 x 1242 px 414 x 736 points 736 x 414 points iPhone 6 750 x 1334 px 1334 x 750 px 375 x 667 points 667 x 375 points iPhone 5/5S/5C 640 x 1136 px 1136 x 640 px 320 x 568 points 568 x 320 points iPhone 4/4S 640 x 960 px 960 x 640 px 320 x 480 points 480 x 320 points iPhone & iPod Touch 1st, 2nd and 3rd Generation 320 x 480 px 480 x 320 px 320 x 480 points 480 x 320 points iPad Retina iPad 3, iPad 4, iPad Air, iPad Air 2, iPad Pro 9.7-inch 1536 x 2048 px 2048 x 1536 px 768 x 1024 px 1024 x 768 px iPad Pro 12.9-inch 2048 x 2732 px 2732 x 2048 px 1024 x 1366 px 1366 x 1024 px iPad Mini 768 x 1024 px 1024 x 768 px 768 x 1024 px 1024 x 768 px iPad Mini Retina 1536 x 2048 px 2048 x 1536 px 768 x 1024 px 1024 x 768 px iPad 1st and 2nd Generation 768 x 1024 px 1024 x 768 px 768 x 1024 px 1024 x 768 px

Displays

Device Size PPI Assets Color Mode Color Temperature iPhone 7 Plus 5.5″ 401 @3x 8bit RGB Warm iPhone 7 4.7″ 326 @2x 8bit RGB Warm iPhone 6 Plus 5.5″ 401 @3x 8bit RGB Warm iPhone 6 4.7″ 326 @2x 8bit RGB Warm iPhone 5/5S/5C 4.0″ 326 @2x 8bit RGB Warm iPhone 4/4S 3.5″ 326 @2x 8bit RGB Cool iPhone & iPod Touch 1st, 2nd and 3rd Generation 3.5″ 163 @1x 8bit RGB Warm iPad Retina iPad 3, iPad 4, iPad Air, iPad Pro 9.7-inch 9.7″ 264 @2x 8bit RGB Warm iPad Pro 12.9-inch 12.9” 264 @2x 8bit RGB Warm iPad Mini 7.9″ 163 @1x 8bit RGB Warm iPad Mini Retina 7.9″ 326 @2x 8bit RGB Warm iPad 1st and 2nd Generation 9.7″ 132 @1x 8bit RGB Warm

Dimensions

Device App Icon App Store Icon Spotlight Icon Settings Icon iPhone 6 Plus 180 x 180 px 1024 x 1024 px 120 x 120 px 87 x 87 px iPhone 6 120 x 120 px 1024 x 1024 px 80 x 80 px 58 x 58 px iPhone 5/5S/5C 120 x 120 px 1024 x 1024 px 80 x 80 px 58 x 58 px iPhone 4/4S 120 x 120 px 1024 x 1024 px 80 x 80 px 58 x 58 px iPad Retina iPad 3, 4, Air, iPad Mini Retina 152 x 152 px 1024 x 1024 px 80 x 80 px 58 x 58 px iPad Pro 12.9-inch 167 x 167 px 1024 x 1024 px 80 x 80 px 58 x 58 px iPad Mini 76 x 76 px 512 x 512 px 40 x 40 px 29 x 29 px iPad 1st and 2nd Generation 76 x 76 px 512 x 512 px 40 x 40 px 29 x 29 px

Common Design Elements

Device Status Bar Height Navigation Bar Height Tab Bar Height Table Width iPhone 6 Plus 54 px 132 px 146 px 1080 / 1920 px iPhone 6 40 px 88 / 64 px 98 px 750 / 1334 px iPhone 5/5S/5C 40 px 88 / 64 px 98 px 640 / 1136 px iPhone 4/4S 40 px 88 / 64 px 98 px 640 / 960 px iPad Retina iPad 3, 4, Air, Pro, iPad Mini Retina 40 px 88 px 112 px dynamic iPad Mini 20 px 44 px 56 px dynamic iPad 1st and 2nd Generation 20 px 44 px 56 px dynamic

Icons

Device Toolbar and Navigation Bar Icon Tab Bar Icon iPhone 6 Plus 66 x 66 px 75 x 75 px (max 144 x 96 px) iPhone 6 44 x 44 px 50 x 50 px (max 96 x 64 px) iPhone 5/5S/5C 44 x 44 px 50 x 50 px (max 96 x 64 px) iPhone 4/4S 44 x 44 px 50 x 50 px (max 96 x 64 px) iPad Retina iPad 3, 4, Air, Pro, iPad Mini Retina 44 x 44 px 50 x 50 px (max 96 x 64 px) iPad Mini 22 x 22 px 25 x 25 px (max 48 x 32 px) iPad 1st and 2nd Generation 22 x 22 px 25 x 25 px (max 48 x 32 px)

Default Font Sizes iPhone 5/5C/5S/6

Label Type Default Font Size Default Font Weight Navigation bar title 34 px Medium Regular buttons 34 px Light Table header 34 px Light Table label 28 px Regular Tab bar icon labels 20 px Regular

Default Font Sizes iPhone 6 Plus

Label Type Default Font Size Default Font Weight Navigation bar title 48 px Medium Regular buttons 48 px Light Table header 48 px Light Table label 44 px Regular Tab bar icon labels 30 px Regular

Size Classes For Adaptive Layout

Device Orientation Size Class iPad - Portrait Height: Regular | Width: Regular iPad - Landscape Height: Regular | Width: Regular iPhone 6 Plus - Portrait Height: Regular | Width: Compact iPhone 6 Plus - Landscape Height: Compact | Width: Regular iPhone 6 and Before - Portrait Height: Regular | Width: Compact iPhone 6 and Before - Landscape Height: Compact | Width: Compact

0 0