苹果iPhone和iPad全产品分辨率和UI设计尺寸(含iPhone12系列)

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

本文为现阶段最终版,将来会持续更新,可以添加收藏

少废话,先看东西

与上一代iPhone对比,新的iPhone扩充了两名成员。

属性
iPhone12mini
iPhone12
iPhone11
iPhone12Pro
iPhone11Pro
iPhone12ProMax
iPhone11ProMax
iPhoneSE(新款)
屏幕尺寸(英寸)5.46.16.16.15.86.76.54.7
分辨率(像素)1125x24361170 x 2532828 x 17921170 x 25321125 x 24361284 x 27781242 x 2688750 x 1334
屏幕比例19.5:919.5:919.5:919.5:919.5:919.5:919.5:916:9
设计倍率@3x@3x@2x@3x@3x@3x@3x@2x
设计尺寸(pt)375 x 812390 x 844414 x 896390 x 844375 x 812428 x 926414 x 896375 x 667
PPI476460326460458458458326

基本属性

屏幕尺寸(英寸)

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

App Store后台截图

分辨率

这个是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 Pro1024x1366 pt (2048x2732 px @2x)
11” iPad Pro834x1194 pt (1668x2388 px @2x)
10.5” iPad Pro834x1194 pt (1668x2388 px @2x)
9.7” iPad Pro768x1024 pt (1536x2048 px @2x)
7.9” iPad mini768x1024 pt (1536x2048 px @2x)
10.5” iPad Air834x1112 pt (1668x2224 px @2x)
9.7” iPad Air768x1024 pt (1536x2048 px @2x)
10.2” iPad810x1080 pt (1620x2160 px @2x)
9.7” iPad768x1024 pt (1536x2048 px @2x)
iPhone 12 Pro Max428x926 pt (1284x2778 px @3x)
iPhone 12 Pro390x844 pt (1170x2532 px @3x)
iphone 12390x844 pt (1170x2532 px @3x)
iPhone12 mini375x812 pt (1125x2436 px @3x)
iPhone 11 Pro Max414x896 pt (1242x2688 px @3x)
iPhone 11 Pro375x812 pt (1125x2436 px @3x)
iPhone 11414x896 pt (828x1792 px @2x)
iPhone XS Max414x896 pt (1242x2688 px @3x)
iPhone XS375x812 pt (1125x2436 px @3x)
iPhone XR414x896 pt (828x1792 px @2x)
iPhone X375x812 pt (1125x2436 px @3x)
iPhone 8 Plus414x736 pt (1080x1920 px @3x)
iPhone 8375x667 pt (750x1334 px @2x)
iPhone 7 Plus414x736 pt (1080x1920 px @3x)
iPhone 7375x667 pt (750x1334 px @2x)
iPhone 6s Plus414x736 pt (1080x1920 px @3x)
iPhone 6s375x667 pt (750x1334 px @2x)
iPhone 6 Plus414x736 pt (1080x1920 px @3x)
iPhone 6375x667 pt (750x1334 px @2x)
4.7” iPhone SE375x667 pt (750x1334 px @2x)
4” iPhone SE320x568 pt (640x1136 px @2x)
iPod touch 5th generation and later320x568 pt (640x1136 px @2x)