来了,iPhone 12设计适配指南

52天前发布

原创文章 / UI / 观点
新像素UI教育 原创,如需商业用途或转载请与新像素UI教育联系,谢谢配合。

北京时间10月14日凌晨1点,2020年苹果第二场秋季发布会拉开了帷幕。

也许是上个月的首场秋季发布会缺席了新品iPhone,让很多人对这次的科技界春晚更加充满了期待。看完发布会你还在纠结新iPhone如何设计适配么?且听像素妹给大家娓娓道来。


作为本次发布会备受关注的主角,iPhone 12一共有四款机型。

分别是5.4英寸的iPhone 12 mini,6.1英寸的iPhone 12和iPhone 12 Pro,以及迄今为止苹果手机最大的尺寸6.7英寸的iPhone 12 Pro Max。

有意思的是,iPhone 12 mini在体积上甚至比第二代SE更小,但因为采用了全面屏设计,屏幕可视面积反而更大。mini价位是四款新品中最便宜的,对于预算不多,喜欢小机身和单手持握感的用户来说,是个不错的选择。


这四款手机均采用了OLED全面屏,并且是苹果历史上首个支持5G网络标准的智能手机系列产品,速度超快。在线看高品质大片,玩游戏将会特别流畅。(相信不少lol玩家在看到发布会上展示英雄联盟手游的时候,都小小的激动了一把~)



跟前几代iPhone相比,12系列在外观上有个很大的不同,就是将圆弧形边框换成了直角边框,回归iPhone 4的经典工业设计美学,这样在宣传上多了个致敬经典的噱头。在外观颜色的选择上,iPhone 12 mini和iPhone 12提供了白色、黑色、蓝色、绿色、红色可选,iPhone 12 Pro和iPhone 12 Pro Max则提供了海蓝色、银色、金色、石墨色。四款手机均使用了超瓷晶面板,取代了玻璃面板,抗跌落能力得到了大幅度提高。



摄像头方面,iPhone 12 mini和iPhone 12采用了双摄(广角+超广角),iPhone 12 Pro和iPhone 12 Pro Max则采用了三摄(广角+超广角+长焦),全新的图像信号处理器支持杜比视界视频拍摄,细节表现的更丰富。


硬件方面,全系搭载了A14仿生芯片,这是iPhone首款5纳米制程芯片,是一个重大升级,加快了人工智能和芯片处理的速度,另外也确保了电池的续航。


价格方面,iPhone 12 mini RMB 5499起,iPhone 12 RMB 6299起,iPhone 12 Pro RMB 8499起,iPhone 12 Pro Max RMB 9299起。

目前我们在设计UI界面时,一般是基于iPhone8来进行设计(分辨率750*1334px,在Sketch中作图尺寸为375*667pt),也有以iPhone 11 Pro为设计基准的做法(分辨率1125*2436px,在Sketch中作图尺寸为375*812pt),然后提供切图给到开发人员。


首先我们要明确一点:手机适配采用几倍图与PPI有关系,这就是为什么iPhone4、5、6之间分辨率和屏幕尺寸不一样,但是同样采用@2x二倍图的原因,因为它们有同样的PPI(326ppi)。


新发布的iPhone 12 mini屏幕尺寸为5.4英寸,分辨率为1080*2340px,iPhone 12和iPhone 12 Pro屏幕尺寸均为6.1英寸,分辨率为1170*2532px,iPhone 12 Pro Max屏幕尺寸为6.7英寸,分辨率为1284*2778px。

很多新手设计师在看到这些分辨率时可能要懵了,这与之前所接触的iPhone手机分辨率完全不一样,该怎么进行适配?会不会还有4倍图?


不要慌!像素妹儿接下来给大家分析一下,这些其实很简单!(认真脸)

我们先看iPhone 12和iPhone 12 Pro(1170*2532px),PPI是460ppi,与iPhone 11 Pro(三倍图)的458ppi基本一致,并且这三款手机均采用了超视网膜 XDR 显示屏,我们可以推论出它们使用的都是三倍图@3x。


从页面宽高比例来看:

iPhone 12 Pro的逻辑像素宽度是1170/3=390pt,高度是2532/3=844pt。

iPhone 11 Pro的逻辑像素宽度是1125/3=375pt,高度是2436/3=812pt。其实就是iPhone 12 Pro宽度比iPhone 11 Pro多15pt,垂直方向上的显示内容多了32pt,有些类似于iPhone 5和iPhone 6的适配方式。


同理,iPhone 12 mini的PPI是476ppi,与iPhone 11 Pro(三倍图)的458ppi相差不大,同样都采用了超视网膜 XDR 显示屏,我们可以推论出它们使用的也都是三倍图@3x。

要注意:虽然iPhone 12 mini官方给的物理尺寸是1080*2340px,但是设计尺寸却是1125*2436px(屏幕截图分辨率),这一点与Plus系列类似。


也就是说iPhone 12 mini与iPhone 11 Pro设计尺寸一致,逻辑像素均是375*812pt。


最后是6.7英寸的iPhone 12 Pro Max(1284*2778px)的PPI是458ppi,与iPhone 11 Pro(三倍图)的458ppi相同,都采用了超视网膜 XDR 显示屏,我们可以推论出它们使用的都是三倍图@3x。(也可以用iPhone 11 Pro Max与之对比)


从页面宽高比例来看:

iPhone 12 Pro Max的逻辑像素宽度是1284/3=428pt,高度是2778/3=926pt。

iPhone 11 Pro的逻辑像素宽度是1125/3=375pt,高度是2436/3=812pt。iPhone 12 Pro Max宽度比iPhone 11 Pro多53pt,垂直方向上的显示内容多了114pt。


我们来做一个小结:

iPhone 12 mini、iPhone 12、iPhone 12 Pro、iPhone 12 Pro Max使用的均是三倍图@3x

适配方法与早期的iPhone 5适配iPhone 6类似,并且由于都是全面屏,理解起来应该是比较简单的。


举个适配iPhone 12的例子:

假设我们在设计的时候以iPhone 11 Pro(375*812pt)为基准做设计稿,由于都是@3x,将画板宽度拉宽为390pt,高度拉高为844pt,状态栏、导航栏、标签栏、主页指示器的高度均不用更改,剩下的就是微调页面布局了,很简单~。适配到别的机型的方式同理,当然,还有其它的适配的方式,在这里就不一一赘述了。



最后像素妹给大家整理了目前iOS适配所用到的切图及对应机型,便于大家记忆:

这次新发布的iPhone 12系列大家是不是有些蠢蠢欲动想要剁手呢?甭管别人说12香还是王守义说13香,能满足你的使用需求就是值得入手的~


欢迎各位在评论区留言哦!我们下期再见咯~


23
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息