iPhone 12设计适配指南【转】

北京时间10月14日凌晨1点,2020年苹果第二场秋季发布会拉开了帷幕。也许是上个月的首场秋季发布会缺席了新品iPhone,让很多人对这次的科技界春晚更加充满了期待。看完发布会你还在纠结新iPhone如何设计适配么?且听像素妹给大家娓娓道来。

image

image

作为本次发布会备受关注的主角,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价位是四款新品中最便宜的,对于预算不多,喜欢小机身和单手持握感的用户来说,是个不错的选择。

image

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

image

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

image

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

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

image

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

image

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

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

新发布的iPhone 12 mini屏幕尺寸为5.4英寸,分辨率为10802340px,iPhone 12和iPhone 12 Pro屏幕尺寸均为6.1英寸,分辨率为11702532px,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的适配方式。

image

image

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

从页面宽高比例来看:

iPhone 12 mini的逻辑像素宽度是1080/3=360pt,高度是2340/3=780pt。

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

image

最后是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。

image

我们来做一个小结:

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

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

image

举个适配iPhone 12的例子:

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

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

image

再来一张

截屏2020-10-17 上午9.06.13.png


再来一张

截屏2020-10-17 上午9.06.13.png

iphone12系列的导航栏和状态栏高度未经实测,需要用到的请用真机,用代码测试高度

STATUSBAR_HEIGHT = [UIApplication sharedApplication].statusBarFrame.size.height

iphone12的屏幕介绍,请参考https://www.sohu.com/a/435241357_719287

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


参考链接:https://www.zcool.com.cn/article/ZMTE4NjAzMg==.html

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容