iOS UI设计规范

这篇文章收录了最新iPhone设备尺寸,主要是为了自己方便自己查阅苹果设备尺寸,图标尺寸等,苹果官方有Human Interface Guidelines文档,感兴趣的朋友可以自行查阅。

官方文档地址

Human Interface Guidelines

设备尺寸

iOS UI设计规范_第1张图片
image
Device Portrait dimensions Landscape dimensions
12.9" iPad Pro 2048px × 2732px 2732px × 2048px
10.5" iPad Pro 1668px × 2224px 2224px × 1668px
9.7" iPad 1536px × 2048px 2048px × 1536px
7.9" iPad mini 4 1536px × 2048px 2048px × 1536px
iPhone XS Max 1242px × 2688px 2688px × 1242px
iPhone XS 1125px × 2436px 2436px × 1125px
iPhone XR 828px × 1792px 1792px × 828px
iPhone X 1125px × 2436px 2436px × 1125px
iPhone 8 Plus 1242px × 2208px 2208px × 1242px
iPhone 8 750px × 1334px 1334px × 750px
iPhone 7 Plus 1242px × 2208px 2208px × 1242px
iPhone 7 750px × 1334px 1334px × 750px
iPhone 6s Plus 1242px × 2208px 2208px × 1242px
iPhone 6s 750px × 1334px 1334px × 750px
iPhone SE 640px × 1136px 1136px × 640px

图像大小与分辨率

Device Scale Factor
12.9" iPad Pro @2x
10.5" iPad Pro @2x
9.7" iPad @2x
7.9" iPad mini 4 @2x
iPhone XS Max @3x
iPhone XS @3x
iPhone XR @2x
iPhone X @3x
iPhone 8 Plus @3x
iPhone 8 @2x
iPhone 7s Plus @3x
iPhone 7s @2x
iPhone 7 @2x
iPhone 6s Plus @3x
iPhone 6s @2x
iPhone SE @2x

App Icon Sizes

Device or context Icon size
iPhone 180px × 180px (60pt × 60pt @3x)
120px × 120px (60pt × 60pt @2x)
iPad Pro 167px × 167px (83.5pt × 83.5pt @2x)
iPad, iPad mini 152px × 152px (76pt × 76pt @2x)
App Store 1024px × 1024px (1024pt × 1024pt @1x)
  • Spotlight
Device Spotlight icon size
iPhone 120px × 120px (40pt × 40pt @3x)
80px × 80px (40pt × 40pt @2x)
iPad Pro, iPad, iPad mini 80px × 80px (40pt × 40pt @2x)
  • Settings
Device Settings icon size
iPhone 87px × 87px (29pt × 29pt @3x)
58px × 58px (29pt × 29pt @2x)
iPad Pro, iPad, iPad mini 58px × 58px (29pt × 29pt @2x)
  • Notification
Device Notification icon size
iPhone 60px × 60px (20pt × 20pt @3x)
40px × 40px (20pt × 20pt @2x)
iPad Pro, iPad, iPad mini 40px × 40px (20pt × 20pt @2x)

Launch Screen

Device Portrait size Landscape size
12.9" iPad Pro 2048px × 2732px 2732px × 2048px
10.5" iPad Pro 1668px × 2224px 2224px × 1668px
9.7" iPad 1536px × 2048px 2048px × 1536px
7.9" iPad mini 4 1536px × 2048px 2048px × 1536px
iPhone XS Max 1242px × 2688px 2688px × 1242px
iPhone XS 1125px × 2436px 2436px × 1125px
iPhone XR 828px × 1792px 1792px × 828px
iPhone X 1125px × 2436px 2436px × 1125px
iPhone 8 Plus 1242px × 2208px 2208px × 1242px
iPhone 8 750px × 1334px 1334px × 750px
iPhone 7 Plus 1242px × 2208px 2208px × 1242px
iPhone 7 750px × 1334px 1334px × 750px
iPhone 6s Plus 1242px × 2208px 2208px × 1242px
iPhone 6s 750px × 1334px 1334px × 750px
iPhone SE 640px × 1136px 1136px × 640px

Navigation Bar and Toolbar Icon Size(导航栏与工具条)

Target sizes(标准大小) Maximum sizes(最大尺寸)
72px × 72px (24pt × 24pt @3x) 84px × 84px (28pt × 28pt @3x)
48px × 48px (24pt × 24pt @2x) 56px × 56px (28pt × 28pt @2x)

Tab Bar Icon Size(标签栏图标大小)

iOS UI设计规范_第2张图片
image
Attribute(属性) Regular tab bars(常规标签栏) Compact tab bars(紧凑标签栏)
Target width and height (circular glyphs) 75px × 75px (25pt × 25pt @3x) 54px × 54px (18pt × 18pt @3x)
50px × 50px (25pt × 25pt @2x) 36px × 36px (18pt × 18pt @2x)
Target width and height (square glyphs) 69px × 69px (23pt × 23pt @3x) 51px × 51px (17pt × 17pt @3x)
46px × 46px (23pt × 23pt @2x) 34px × 34px (17pt × 17pt @2x)
Target width (wide glyphs) 93px (31pt @3x) 69px (23pt @3x)
62px (31pt @2x) 46px (23pt @2x)
Target height (tall glyphs) 84px (28pt @3x) 60px (20pt @3x)
56px (28pt @2x) 40px (20pt @2x)

工具推荐

这篇文章主要记录了自己平时用的比较多的一些设计尺寸参考,设计细节上的东西还是要去查看官方文档,最后也为推荐一款App Icon自动生成工具吧,只需要一张1024*1024的原图,就可以生成不同设备及尺寸的图标,同时也完全符合苹果设计规范(超哦),下面贴出网站地址:
图标工厂

你可能感兴趣的:(iOS UI设计规范)