iOS设计尺寸规范:iPhone和iPad全产品分辨率和UI设计尺寸

iOS设计尺寸规范:iPhone和iPad全产品分辨率和UI设计尺寸

iPhone12在10月14日发布,我们可以来分析iPhone12系列对整个iOS系统的UI设计变化。iPhone12看起来有很多尺寸,那么如何来设计iPhone12系列机型呢?我们来分析和讨论一下。

少废话,先看东西与上一代iPhone对比,新的iPhone扩充了两名成员。

属性

iPhone12mini

iPhone12

iPhone11

iPhone12Pro

iPhone11Pro

iPhone12ProMax

iPhone11ProMax

iPhoneSE(新款)

屏幕尺寸(英寸)

5.4

6.1

6.1

6.1

5.8

6.7

6.5

4.7

分辨率(像素)

1125x2436

1170 x 2532

828 x 1792

1170 x 2532

1125 x 2436

1284 x 2778

1242 x 2688

750 x 1334

屏幕比例

19.5:9

19.5:9

19.5:9

19.5:9

19.5:9

19.5:9

19.5:9

16:9

设计倍率

@3x

@3x

@2x

@3x

@3x

@3x

@3x

@2x

设计尺寸(pt)

375 x 812

390 x 844

414 x 896

390 x 844

375 x 812

428 x 926

414 x 896

375 x 667

PPI

476

460

326

460

458

458

458

326

基本属性屏幕尺寸(英寸)这个对于设计师和前端来说比较重要。在苹果的App Store审核中,App Store不会去描述你需要上传的屏幕快照是多少像素的,而是具体指出是多少英寸的iPhone。

分辨率这个是iOS在设备上的渲染分辨率,可能与物理的分辨率不同。单位是px,也就是像素。我们使用手机截图等操作都是能看到设备的渲染分辨率。

屏幕比例目前主流iPhone使用的是19.5:9,这个尺寸也是作为推荐视频创作者的满屏尺寸比例。设计师可以通过这个屏幕比例和百分比来做出更多适应性的全屏内容,而不拘泥于像素单位。

设计倍率当前设计师大多使用@1x或者@2x进行设计。@1x设计的好处是适应所有界面,可以导出不同尺寸的图片。@2x设计的好处是。。。(一般使用@2x设计的可能是photoshop设计师)如果你是使用sketch设计或者其他矢量设计软件,建议使用@1x保证最强适配性,如果你是使用Photoshop等像素软件进行设计,建议使用@2x及以上或者智能对象等设计方法来保证清晰度。

设计尺寸设计尺寸是开发的主要单位,单位为pt。在使用Xcode进行软件开发的时候数字单位基本都是1倍下的pt形式出现,也就是@1x下的设计尺寸。这又体现出使用@1x设计的优势,就是单位统一,不需要额外计算。

PPI这个表现了屏幕的清晰度,PPI越高,单位面积的物理像素越多,屏幕越清晰。

设备适配对于设计尺寸不同,设计倍率相同的设备在手动标注的年代,设计师可以通过标注来适配各个尺寸的机型。但是目前大多采用自动标注的方式,所以设计师需要与前端工程师反复沟通。

在设计稿只有一个通用尺寸的情况下,通过固定宽度/固定高度/等比放大/屏幕百分比/最小尺寸/最大尺寸等多种方式进行每个组件的尺寸适配。

对于设计尺寸相同,设计倍率不同的设备可以直接通过导出@2x、@3x来适应不同的设备。目前apple都开始采用oled屏幕,基本以后的屏幕都会以@3x的倍率出现。鉴于iPhone系列堪忧的续航,短时间内不会再出@4x等更高倍率(手机端),可以放心食用。

iPhone12系列的到来给UI设计稿带来的变化目前主流的设计稿为375x812,最新的12系列只有12mini采用这种尺寸(部分传统公司在使用375x667)。iPhone12和12pro具备了相同的像素和设计尺寸,所以我们可以看到未来的下一代主流设计尺寸将使用390x844来进行设计。

使用一个设计稿,然后通过标注和沟通进行多端适配。

所有iOS设备详细参数

iOS设备具有各种屏幕尺寸,可以纵向或横向使用。在像iPhone X和iPad Pro这样的边缘到边缘设备中,显示屏的圆角与设备的整体尺寸紧密匹配。其他设备(例如iPhone SE和iPad Air)具有矩形显示屏。

如果你的应用在特定设备上运行,请确保该应用在该设备的所有屏幕尺寸上运行。换句话说,仅iPhone应用程序必须在每个iPhone屏幕尺寸上运行,而仅iPad应用程序必须在每个iPad屏幕尺寸上运行。

设备

设计尺寸与渲染分辨率

12.9” iPad Pro

1024x1366 pt (2048x2732 px @2x)

11” iPad Pro

834x1194 pt (1668x2388 px @2x)

10.5” iPad Pro

834x1194 pt (1668x2388 px @2x)

9.7” iPad Pro

768x1024 pt (1536x2048 px @2x)

7.9” iPad mini

768x1024 pt (1536x2048 px @2x)

10.5” iPad Air

834x1112 pt (1668x2224 px @2x)

9.7” iPad Air

768x1024 pt (1536x2048 px @2x)

10.2” iPad

810x1080 pt (1620x2160 px @2x)

9.7” iPad

768x1024 pt (1536x2048 px @2x)

iPhone 12 Pro Max

428x926 pt (1284x2778 px @3x)

iPhone 12 Pro

390x844 pt (1170x2532 px @3x)

iPhone 12

390x844 pt (1170x2532 px @3x)

iPhone12 mini

375x812 pt (1125x2436 px @3x)

iPhone 11 Pro Max

414x896 pt (1242x2688 px @3x)

iPhone 11 Pro

375x812 pt (1125x2436 px @3x)

iPhone 11

414x896 pt (828x1792 px @2x)

iPhone XS Max

414x896 pt (1242x2688 px @3x)

iPhone XS

375x812 pt (1125x2436 px @3x)

iPhone XR

414x896 pt (828x1792 px @2x)

iPhone X

375x812 pt (1125x2436 px @3x)

iPhone 8 Plus

414x736 pt (1080x1920 px @3x)

iPhone 8

375x667 pt (750x1334 px @2x)

iPhone 7 Plus

414x736 pt (1080x1920 px @3x)

iPhone 7

375x667 pt (750x1334 px @2x)

iPhone 6s Plus

414x736 pt (1080x1920 px @3x)

iPhone 6s

375x667 pt (750x1334 px @2x)

iPhone 6 Plus

414x736 pt (1080x1920 px @3x)

iPhone 6

375x667 pt (750x1334 px @2x)

4.7” iPhone SE

375x667 pt (750x1334 px @2x)

4” iPhone SE

320x568 pt (640x1136 px @2x)

iPod touch 5th generation and later

320x568 pt (640x1136 px @2x)

相关推荐

(不+直)是什么字?
office365打不开doc文件

(不+直)是什么字?

📅 07-07 👁️ 3217
荣耀畅玩7X和6X哪个好?华为荣耀畅玩7X和6X区别对比
365提前结束投注

荣耀畅玩7X和6X哪个好?华为荣耀畅玩7X和6X区别对比

📅 07-12 👁️ 8139
UEFI 固件的存储与执行机制
office365打不开doc文件

UEFI 固件的存储与执行机制

📅 07-18 👁️ 4612