U L0VE I | 给Apple洗洗白——为何iPhone plus系列分辨率让设计师蛋疼?

相信做过iOS端从iPhone6\7\8到plus系列适配的小伙伴们,心里都应该有过这个疑问:

为什么Apple这么操蛋,做个手机搞这么多分辨率,而且还不是倍数关系,完全不顾及设计开发的麻烦,这不是成心跟设计师和开发过不去吗?

难道分辨率不同也能提高iPhone的逼格吗?

小U君当初也是对Apple这样的设定“怀恨在心”,认为Apple没事找事,可能他们的设计师闲的蛋疼,所以让我们一起蛋疼。

但好奇的小U君放下了加班适配的愤怒,去了解了下背后的故事。才发现Apple也有苦衷,而且更让你不敢信的是,这样做的目的,竟是为了方便设计和开发!(我勒个去)

这里我们先来重温下iPhone分辨率,着重看下iPhone6/7/8及其plus系列的:

看到没,是不是一看就来气!明明iPhone6/7/8还是375pt,甚至连后面的iPhoneX也是好端端的375pt,只不过屏幕密度系数不同罢了,中间却挤着一群格格不入的414pt的plus系列。

明明适配乘以或除以1.5就完事儿了,现在还得另外改尺寸,不说了,天要亮了。

不过且听小U君来给你慢慢解释,说不定听完你会好受点,因为Apple已经很为我们设计师着想了。

要想弄清其中的原因,得先从上图中左边圈中的2个名词讲起。

Rendered Pixels直译过来是渲染像素。

Physical Pixels则是物理像素,不过像素换成分辨率可能更好理解啦。

仔细一看,只有plus系列的渲染分辨率和物理分辨率不同,而其他的iPhone渲染分辨率和物理分辨率都是一致的。

物理像素是事先定好的,和其他物理尺寸一样,比如iPhone6+是一块5.5英寸Retina HD高清显示屏,1920×1080px分辨率,401ppi,机身三围:158.1mm×77.8mm×7.1mm,重量:172g。

这些参数都是没得商量的。所以作为设计师的我们,其实要讨论的是可变的渲染分辨率。

我们不妨先来试试,若按照常规最方便开发的@2x或@3x密度来设计plus系列,会出现什么问题。

1.plus继续采用@2x密度分辨率

上图可看出,iPhone6/7/8和plus系列的ppi分别是326和401。ppi即pixels per inch,像素每英寸。假设同一张图,放在iPhone6和iPhone6+(此后均简写为iP6、iP6+)上。

由于是同一张图,所以像素尺寸一样,而iP6+的ppi大于ip6,所以图在iP6+上的实际长度尺寸要小于iP6!这就意味着,同样的图像或文字,在大屏的iP6+上反而缩小了,更看不清楚了,这怎么能行呢!

2.plus采用@3x密度分辨率

采用@3x密度屏的话,还是放同一张图(这里为了方便计算,设置这张图@2x下为44x44px)到iP6和iP6+里。当然@3x的话图在iP6+里就变成66x66px啦,这样一看确实图片得到了扩大,但是新的问题又来了。

我们来算下这张图占整个屏幕的比例:

iP6是44px/750px≈0.053

iP6+是66px/1080px≈0.056

也就是说,同样内容占iP6+屏幕的比例要大,也就是说,最终一个大屏手机所显示的内容反而没有小屏的多,那我要这大屏有何用!

3.Apple的最终解决方案

所以,传统的@2x和@3x密度都不适合plus系列屏幕,而真正合理的值在2和3之间,是@2.46x。但是这个值对于我们设计和开发来讲,太不友好了,一想到一大堆、一串串的小数就头皮发麻。

于是Apple想了一个神奇的解决方案。屏幕还是采用@3x的,也就是说我们用1倍密度设计后乘以3就行了(或2倍密度乘以1.5),但设计分辨率设为1242x2208px,而不是物理分辨率的1080x1920px,iOS在拿到我们设计的尺寸后,会自动缩放到1080x1920px的物理屏幕上显示。

其实看得出来,这样也并没有达到显示最佳的@2.46x,而是一个@2.62x密度值。屏幕所显示的图像也比我们设计原图要小约13%(若你实在想要以原始设计尺寸显示,设置里“放大显示”了解一下)。

但由于iP6+Retina屏的超高401ppi,这一点点改变往往可以被忽略。

所以说到底,Apple之所以另起一条分辨率路线,竟是为了方便我们设计师和开发。啊,Apple,我错怪你啦!

经小U君一顿讲解,小伙伴们是否也体会到了Apple的良苦用心呢?

这是小U君在U L0VE I的处女文,今后也将不断分享小U君的设计经历和一些设计思考。

小伙伴们有任何建议或问题,欢迎在下面留言,小U君会认真回复的!另外,别忘了把小U君分享给更多的朋友哦,谢谢~

本文由微信公众号【U L0VE I】原创首发,转载请联系授权

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

推荐阅读更多精彩内容