iOS Design

最新推荐文章于 2024-08-03 16:16:29 发布

kaiyuanheshang

最新推荐文章于 2024-08-03 16:16:29 发布

阅读量456

点赞数

分类专栏： iOS 文章标签： ios 设计尺寸 autolayout sizeClass

iOS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    Resolutions 
DevicePortrait PixelsLandscape PixelsPortrait Logical ResolutionLandscape Logical Resolution
iPhone 7 Plus (Physical)1080 x 1920 px1920 x 1080 px414 x 736 points736 x 414 points
iPhone 7750 x 1334 px1334 x 750 px375 x 667 points667 x 375 points
iPhone 6 Plus (Physical)1080 x 1920 px1920 x 1080 px414 x 736 points736 x 414 points
iPhone 6 Plus (Virtual)1242 x 2208 px2208 x 1242 px414 x 736 points736 x 414 points
iPhone 6750 x 1334 px1334 x 750 px375 x 667 points667 x 375 points
iPhone 5/5S/5C640 x 1136 px1136 x 640 px320 x 568 points568 x 320 points
iPhone 4/4S640 x 960 px960 x 640 px320 x 480 points480 x 320 points
iPhone & iPod Touch 1st, 2nd and 3rd Generation320 x 480 px480 x 320 px320 x 480 points480 x 320 points
iPad Retina iPad 3, iPad 4, iPad Air, iPad Air 2, iPad Pro 9.7-inch1536 x 2048 px2048 x 1536 px768 x 1024 px1024 x 768 px
iPad Pro 12.9-inch2048 x 2732 px2732 x 2048 px1024 x 1366 px1366 x 1024 px
iPad Mini768 x 1024 px1024 x 768 px768 x 1024 px1024 x 768 px
iPad Mini Retina1536 x 2048 px2048 x 1536 px768 x 1024 px1024 x 768 px
iPad 1st and 2nd Generation768 x 1024 px1024 x 768 px768 x 1024 px1024 x 768 px
 
Displays 
DeviceSizePPIAssetsColor ModeColor Temperature
iPhone 7 Plus5.5″401@3x8bit RGBWarm
iPhone 74.7″326@2x8bit RGBWarm
iPhone 6 Plus5.5″401@3x8bit RGBWarm
iPhone 64.7″326@2x8bit RGBWarm
iPhone 5/5S/5C4.0″326@2x8bit RGBWarm
iPhone 4/4S3.5″326@2x8bit RGBCool
iPhone & iPod Touch 1st, 2nd and 3rd Generation3.5″163@1x8bit RGBWarm
iPad Retina iPad 3, iPad 4, iPad Air, iPad Pro 9.7-inch9.7″264@2x8bit RGBWarm
iPad Pro 12.9-inch12.9”264@2x8bit RGBWarm
iPad Mini7.9″163@1x8bit RGBWarm
iPad Mini Retina7.9″326@2x8bit RGBWarm
iPad 1st and 2nd Generation9.7″132@1x8bit RGBWarm
 
Dimensions 
DeviceApp IconApp Store IconSpotlight IconSettings Icon
iPhone 6 Plus180 x 180 px1024 x 1024 px120 x 120 px87 x 87 px
iPhone 6120 x 120 px1024 x 1024 px80 x 80 px58 x 58 px
iPhone 5/5S/5C120 x 120 px1024 x 1024 px80 x 80 px58 x 58 px
iPhone 4/4S120 x 120 px1024 x 1024 px80 x 80 px58 x 58 px
iPad Retina iPad 3, 4, Air, iPad Mini Retina152 x 152 px1024 x 1024 px80 x 80 px58 x 58 px
iPad Pro 12.9-inch167 x 167 px1024 x 1024 px80 x 80 px58 x 58 px
iPad Mini76 x 76 px512 x 512 px40 x 40 px29 x 29 px
iPad 1st and 2nd Generation76 x 76 px512 x 512 px40 x 40 px29 x 29 px
 
Common Design Elements 
DeviceStatus Bar HeightNavigation Bar HeightTab Bar HeightTable Width
iPhone 6 Plus54 px132 px146 px1080 / 1920 px
iPhone 640 px88 / 64 px98 px750 / 1334 px
iPhone 5/5S/5C40 px88 / 64 px98 px640 / 1136 px
iPhone 4/4S40 px88 / 64 px98 px640 / 960 px
iPad Retina iPad 3, 4, Air, Pro, iPad Mini Retina40 px88 px112 pxdynamic
iPad Mini20 px44 px56 pxdynamic
iPad 1st and 2nd Generation20 px44 px56 pxdynamic
 
Icons 
DeviceToolbar and Navigation Bar IconTab Bar Icon
iPhone 6 Plus66 x 66 px75 x 75 px (max 144 x 96 px)
iPhone 644 x 44 px50 x 50 px (max 96 x 64 px)
iPhone 5/5S/5C44 x 44 px50 x 50 px (max 96 x 64 px)
iPhone 4/4S44 x 44 px50 x 50 px (max 96 x 64 px)
iPad Retina iPad 3, 4, Air, Pro, iPad Mini Retina44 x 44 px50 x 50 px (max 96 x 64 px)
iPad Mini22 x 22 px25 x 25 px (max 48 x 32 px)
iPad 1st and 2nd Generation22 x 22 px25 x 25 px (max 48 x 32 px)
 
Default Font Sizes iPhone 5/5C/5S/6 
Label TypeDefault Font SizeDefault Font Weight
Navigation bar title34 pxMedium
Regular buttons34 pxLight
Table header34 pxLight
Table label28 pxRegular
Tab bar icon labels20 pxRegular
 
Default Font Sizes iPhone 6 Plus 
Label TypeDefault Font SizeDefault Font Weight
Navigation bar title48 pxMedium
Regular buttons48 pxLight
Table header48 pxLight
Table label44 pxRegular
Tab bar icon labels30 pxRegular
 
Size Classes For Adaptive Layout 
Device OrientationSize Class
iPad - PortraitHeight: Regular | Width: Regular
iPad - LandscapeHeight: Regular | Width: Regular
iPhone 6 Plus - PortraitHeight: Regular | Width: Compact
iPhone 6 Plus - LandscapeHeight: Compact | Width: Regular
iPhone 6 and Before - PortraitHeight: Regular | Width: Compact
iPhone 6 and Before - LandscapeHeight: Compact | Width: Compact

                

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

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

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

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

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)

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

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

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

kaiyuanheshang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iOS Design

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 7
复制链接

扫一扫

专栏目录