iOS UI设计规范

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

官方文档地址

Human Interface Guidelines

设备尺寸

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
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(标签栏图标大小)


|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的原图,就可以生成不同设备及尺寸的图标,同时也完全符合苹果设计规范(超👍哦),下面贴出网站地址:
图标工厂

-------------本文结束感谢您的阅读-------------
分享到:
0%