在这13年间iPhone的屏幕尺寸是怎样一步步进化到此的?基于软硬一体的设计,屏幕物理尺寸的变化背后包含着怎样的进化规律?这些变化对与我们朝夕相处的手机app又产生了什么影响?根据已有的进化规律,我们是否可以展望未来的iPhone还会走向何方?基于iOS14Beta中发现的新线索,我们又可以推断出iPhone12的哪些更多信息呢?本文就来说道说道。
第一代iPhone于2007年发布,配备320×480像素(pixel,可简写为px)的3.5寸屏幕,PPI(表示每英寸所具有的像素数,数字越大清晰度越好)为163,这块支持多点触控的小屏幕开创了iPhone历史的先河。
2008年iPhone3G发布,其搭载的iPhoneOS2.0系统首次支持了AppStore功能,自此第三方app开始逐渐在iPhone上大放异彩;2009年iPhone3GS发布,相比前一代,其屏幕从18位色升级到了24位色,屏幕表现更加丰富。iPhone3G和iPhone3GS这两代的屏幕尺寸和分辨率与初代iPhone完全相同,即320×480px的3.5寸屏幕,PPI为163。
2010年具有全新硬件设计的iPhone4发布,其屏幕分辨率升级为640×960px,是前几代iPhone的两倍,屏幕尺寸仍然保持3.5英寸,PPI达到了326。在如此高的像素密度下,人眼已经几乎看不到屏幕上的像素点,因此Apple称之为「Retina/视网膜屏幕」。2011年发布的iPhone4s与前一代的屏幕分辨率和尺寸保持相同。
至此iPhone的屏幕分辨率由一种变化到两种,在同样大小的3.5寸手机屏幕上,更高的分辨率不是为了显示更多的内容,而是为了让屏幕上的内容更加清晰。Retina屏幕在渲染图像时,每四个像素成为一组,输出原来屏幕的一个像素显示的大小区域内的图像,以此提供了更高的图像精细度,下面的对比图可以直观地看出这种变化,右边的图片明显比左边的图片更加清晰锐利。
如果一个app还没有适配新的Retina屏幕分辨率,在Retina屏幕上显示就会显得很模糊。
既然存在两种不同的分辨率,在app设计上就需要针对它们提供不同尺寸的设计图,比如下面的这个照相机的图片,在非Retina屏幕上它的高度是44像素,而在Retina屏幕上的高度就变成了88像素,是非Retina屏幕上的两倍。
但我们知道,无论是不是Retina屏幕,这个照相机的图片在3.5寸屏幕上的实际显示大小是相同的,而如果用像素去表示的话,它们的数字却是不同的,这会带来很多沟通和操作成本,需要一种更好的方法去表示这个照相机图片的尺寸,「Point点」的概念应运而生。
Point点(可简写为pt)是专门为Apple操作系统设计的一个单位,它与屏幕上的像素密度无关,只与屏幕上的内容多少有关。在第一代iPhone到iPhone3GS的非Retina屏幕上,一个点就等于一像素,可以表示为@1x;而在iPhone4到iPhone4s的Retina屏幕上,一个点等于两个像素,可以表示为@2x。而日后发布的一些设备(如iPhone6Plus、iPhoneX)还会出现一个点等于三个像素的情况,可以表示为@3x,这种@1x、@2x、@3x可以称之为「比例因子」。
从下面的图示可以看出,在物理尺寸相同时,从@1x到@3x图像清晰度依次递增。
回到上一部分提到的照相机的图片,它的高度就可以直接统一表示成44pt,不再需要提及是什么设备、什么样的屏幕,这样极大地减少了沟通成本,剔除了设计时无关的干扰因素。
设计师在进行设计时可以直接按照44pt的高度进行设计,设计好的图像对应导出「camera@1x.png」和「camera@2x.png」两张图片,非Retina屏幕的iPhone在显示时会自动调用第一张图片,Retina屏幕的iPhone在显示时会自动调用第二张图片。
用与像素密度无关的单位「point点」来表示设计内容的尺寸的优势在日后iPhone的屏幕尺寸变得更加复杂之后会更加凸显。
进一步,第一代iPhone到iPhone3GS的屏幕分辨率可以表示为320×480pt@1x,iPhone4、iPhone4s的屏幕分辨率可以表示为320×480pt@2x。而使用「point点」这个单位表示的分辨率我们可以称之为「逻辑分辨率」,而使用「px像素」这个单位表示的分辨率我们可以称之为「渲染分辨率」。
通过「逻辑分辨率」我们可以比较屏幕上显示内容的多少,前五代iPhone的逻辑分辨率相同,所以显示内容的数量没有差别;通过「渲染分辨率」以及屏幕尺寸我们可以计算出PPI,进一步比较屏幕的清晰度,iPhone4、iPhone4s相比前几代iPhone的屏幕尺寸相同,但渲染分辨率更高,PPI更高,所以屏幕更加清晰锐利。
2012年Apple发布了配备4寸屏幕的iPhone5,这是历史上iPhone屏幕尺寸的第一次改变,屏幕的分辨率为640×1136px,PPI仍然为326,也即相比iPhone4s屏幕清晰度没有变化,其比例因子仍然为@2x,其逻辑分辨率为320×568pt。iPhone5搭载的iOS6系统是iOS系统拟物化设计的最后一个版本,也是最成熟的一个版本。
仔细观察上面的数字我们可以发现,相比iPhone4s,iPhone5在横向上的内容宽度与前一代保持一致,但纵向上增多了88pt,也即在纵向上可以显示更多的内容了。如果一个app没有适配新的iPhone5,它将会在iPhone5上以iPhone4s的大小样式显示,也即上下会各留出44pt的黑边。
这种通过屏幕逻辑分辨率「横向不变、纵向变长」来增长屏幕尺寸的方式是iPhone屏幕进化的重要方式之一,在日后还会多次看到,同时由于这种变化导致的app上下存在黑边的适配问题也同样会多次出现。
2013年Apple发布了相比iPhone5屏幕没有发生变化的iPhone5s和iPhone5c,它们的屏幕逻辑分辨率仍然为320×568pt@2x。同年Apple推出了iOS7,从此设计风格由拟物化风格转向扁平化风格。
由于屏幕的逻辑分辨率没有发生变化,app就不需要为新机型的屏幕进行适配。凡是可以运行在iPhone5上的app都可以在iPhone5s、iPhone5c上正常显示。
2014年iPhone6和iPhone6Plus同时发布,iPhone的屏幕尺寸再次发生重大变化,根据不同人群的使用需求和偏好,由之前的一种主流尺寸衍变成了一大一小两种尺寸。小屏旗舰iPhone6采用4.7寸屏幕,屏幕逻辑分辨率为375×667pt,比例因子为@2x,PPI为326;大屏旗舰iPhone6Plus采用5.5寸屏幕,屏幕逻辑分辨率为414×736pt,比例因子首次采用@3x,PPI为401。
这次的iPhone6Plus有一点比较特殊的地方,其渲染分辨率为1242×2208px,但其设备真实的屏幕物理分辨率只有1080×1920px,也即处理器渲染的图像分辨率比屏幕自身物理分辨率更高,在实际显示时相当于将渲染的图像缩小了1.15倍。图像在屏幕上显示时如果能做到像素一对一显示效果才能最完美,但Apple在此机型上作出了妥协,究其原因可能是因为当时1080p的屏幕的广泛使用可以削减手机成本、加快出货日期,同时也可以有更好的续航能力。
这是历史上iPhone屏幕尺寸的第二次重大变化,但与之前的4寸iPhone5s仔细对比观察,你会发现新的4.7寸和5.5寸的屏幕与以前的4寸屏幕宽高比例是相同的,所以可以理解成4寸的屏幕分别「等比放大」了约1.17倍和1.29倍,变成了现在的4.7寸和5.5寸屏幕。屏幕逻辑分辨率在宽度和高度上的增加,可以让屏幕上一次性展示更多内容,减少用户滚动屏幕的频率。
至此,从屏幕逻辑分辨率的宽度来看,分化出了三种:320pt、375pt、414pt。在app设计时一般以375pt宽度为基准,其他宽度app的设计进行针对性处理。实际上,这三种宽度的逻辑分辨率一直到2019年都没有再发生变化。
如果没有适配新机型的app在显示时,由于和上代iPhone具有相同的屏幕比例,所以会直接将iPhone5s的app放大显示到屏幕上。用户的直观感受就是虽然屏幕变大了,但仅仅是将原有的内容放大了,而不是在屏幕上可以一次性展示更多内容。而且因为不是像素一对一显示,屏幕上的内容看上去会不够清晰锐利。
这种通过将屏幕逻辑分辨率「等比放大」来增长屏幕尺寸的方式也同样是iPhone屏幕进化的重要方式之一,在日后也会多次看到,同时由于这种变化导致的app被整体放大显示的适配问题也同样会多次出现。
2015年到2017年Apple相继发布了iPhone6s和iPhone6sPlus、iPhone7和iPhone7Plus、iPhone8和iPhone8Plus,它们的屏幕参数与iPhone6、iPhone6Plus保持了一致。4.7寸和5.5寸屏幕的iPhone也在四年间迅速普及。
至此,iPhone非全面屏时代可以基本宣告结束了。
如前文所讲,iPhone5s的4寸屏幕、iPhone6的4.7寸屏幕、iPhone6Plus的5.5寸屏幕的宽高比例是相同的,它们是依次放大的。于是从iPhone6、iPhone6Plus开始,iOS新增了一个这些机型独有的功能——「放大显示」,简单来看它将屏幕上的内容放大显示以便于存在视力障碍的用户更轻松使用iPhone,当然你也可以根据自己的偏好选择使用放大显示模式。
将屏幕上的内容,特别是包含了众多第三方app的内容进行整体放大而不让布局错乱并不是一件简单的事,为了减少不必要的设计和开发成本,放大显示功能巧妙地利用了已有的屏幕逻辑分辨率。
具体来说,放大显示的实质是将高一级的逻辑分辨率降级到同一比例的低一级的逻辑分辨率,比如当放大显示模式开启时,5.5寸屏幕可以使用4.7寸屏幕的逻辑分辨率来显示内容,4.7寸屏幕可以使用4寸屏幕的逻辑分辨率来显示内容。将低一级的逻辑分辨率放到更大的屏幕上展示,自然会有放大效果,适配了大屏幕iPhone的app自然也适配了更小屏幕的iPhone,这样就可以完全没有额外的设计和开发成本。
随着iPhone机型越来越多,屏幕尺寸越来越多,屏幕的逻辑分辨率也越来越多。设计师和开发者在设计和开发app时需要对多种屏幕布局进行适配调整,才能让app在每一台iPhone上完美运行。
iPhone上的app中的内容包含文字、图片、按钮、输入框、导航栏等各种各样的形式,我们可以把这些不同形式的元素统称为「View视图」。要确定iPhoneapp中每一个view在屏幕上的布局,可以想到的最直观的方式就是确定这每一个view的摆放位置和尺寸,摆放位置可以通过在屏幕上建立坐标系后利用横纵坐标(x,y)来表示,尺寸可以通过描述一个view的宽度和高度来表示。这种确定了每一个view的位置和尺寸的布局方式不会受内部或者外部因素所影响,可以称之为「绝对布局」。
例如下图中的这个例子,在iPhone8上有一个app,app的界面中展示有四个不同颜色的方块。按照绝对布局的方法来确定四个方块的位置和尺寸:
当把上面确定的每个方块的绝对布局参数放到iPhone8Plus的屏幕上显示时,我们就会发现四个方块在屏幕上显示的位置有些奇怪。仔细思考下,在iPhone8的屏幕上四个方块的位置坐标之所以可以确定下来,是因为我们想要这四个方块在屏幕水平方向上是居中对齐的。当移动到iPhone8Plus的屏幕上,屏幕的逻辑分辨率发生了变化,屏幕变宽了,如果还是按照之前的位置参数放置四个方块,其自然不会在屏幕水平方向上处于居中对齐的位置了。
AutoLayout是一种相对布局的方案,它不要求直接给出每一个view的位置和尺寸信息,而是通过建立view之间的约束关系(constraint),动态计算出在不同情景时每个view的具体位置和尺寸。
来看下图中的这个例子,蓝色方块命名为「BlueView」,红色方块命名为「RedView」,它们之间的距离是8,通过图中所示的等式就可以表示出这两个view之间的约束关系,用自然语言来描述就是:
这里特别提及的一点是,在描述蓝色方块右端和红色方块的左端之所以不直接使用「right右」和「left左」这两个单词,而是使用了「trailing尾」和「leading头」这两个单词,是因为这样的描述可以更好地兼顾从右向左书写的语言(如阿拉伯语)的app的适配,利于app实现国际化。
通过两个方块之间相对的约束关系,不论在任何尺寸的屏幕上,这两个方块之间的距离都是8,不会因为两个方块各自的位置和尺寸而变动。
回到上面绝对布局中所举的例子,现在用相对布局的方法来思考下四个不同颜色的方块该如何布局,按照AutoLayout的思想,可以确定界面上view的几个约束关系:
通过上面确定的四个约束关系,四个方块的尺寸固定了下来,但在屏幕上的位置并没有完全固定,会相对于屏幕尺寸发生动态变化。这样当整个界面显示在iPhone8Plus或者其他尺寸的屏幕上时,四个方块就能始终在屏幕水平方向上居中对齐。
通过AutoLayout这个武器,利用相对布局的思想,设计师和开发者确定好不同view之间的约束关系,就能让整个界面在不同尺寸的设备上都能正确地显示,不再需要一个设备一套设计方案,这样的设计也被称为「适应性布局设计」。
以上示例只是AutoLayout的一个简单示意,在实际情况中,app界面上包含各种view,约束关系自然更加复杂,AutoLayout的作用也会更加明显。且从更大范围来看,不只屏幕尺寸变化,AutoLayout的这种适应性布局设计方案还可以适应各种外部和内部变化:
通过AutoLayout,不同屏幕尺寸的设备都可以用一套设计方案来布局内容,但这并不代表不同尺寸的屏幕上显示的内容布局都应该是一样的,比如同一个app在iPhone和iPad上的布局一般是不一样的,更何况屏幕在使用时还需要区分横竖和竖屏的使用场景,app横屏和竖屏显示的内容布局也会不一样。从iOS8开始推出的「SizeClass尺寸级别」就是为了解决这个问题。
SizeClass根据app的实际使用场景定义了不同尺寸的屏幕、不同方向的屏幕在「width宽度」和「height高度」上的尺寸级别,较短的宽度/高度定义其级别为「compact」,意为紧凑,可放置较少的内容;较长的宽度/高度定义其级别为「regular」,意为普通,可放置较多的内容。宽度和高度与这两个级别相互组合就形成了四种尺寸级别。特别注意的是,同一个尺寸的设备,横屏和竖屏的尺寸级别并不一定是完全相反的。
如下图,iPhone8在竖屏时的SizeClass是「compactwidth,regularheight」,在横屏时是「compactwidth,compactheight」;iPhone8Plus在竖屏时是「compactwidth,regularheight」,在横屏时是「regularwidth,compactheight」,与iPhone8并不相同,因为iPhone8Plus屏幕尺寸更大。
不同屏幕尺寸、不同屏幕方向的iPad也同样有SizeClass的定义,如iPadPro11寸在竖屏时是「regularwidth,regularheight」,在横屏时也是「regularwidth,regularheight」。特别的,从iOS9开始,iPad上的app支持以SlideOver侧拉或者SplitView分屏浏览的形式显示,在这些使用场景中,它们也被定义了SizeClass。
有了SizeClass,设计师和开发者在设计和开发app时就不需要根据繁多的屏幕尺寸和屏幕使用方向等多个内外因素来确定app内容布局,新的屏幕尺寸出现时也无需再单独适配。来看几个具体的SizeClass应用实例。
据此进一步印证了6.5寸的iPhoneXsMax的存在。同一个app在不同屏幕尺寸的屏幕上显示的内容布局不同,究其原因,如下图所示,在屏幕宽度上5.8寸屏幕的SizeClass是「compactwidth」,6.5寸屏幕的SizeClass是「regularwidth」,SizeClass不同,所以它们的app内容显示布局不一样。
第二个例子,再次回到在AutoLayout中提到的app,基于已经确定的四个方块的约束关系,当在iPhone横屏使用时,我们会发现由于四个方块是竖直排列的,所以不能在横屏时的屏幕上显示完全,左右两侧还有较大的空间被浪费掉了。
当利用SizeClass对不同情况下的内容进行布局,iPhone竖屏也即SizeClass为「compactwidth,regularheight」时,四个方块在屏幕上水平居中对齐,纵向排列;iPhone横屏也即SizeClass为「anywidth,compactheight」(any包括compact和regular两种情况)时,四个方块在屏幕上竖直居中对齐,横向排列,这时的布局约束关系为:
进一步,当app运行在iPad上,也即SizeClass为「regularwidth,regularheight」时,四个组成一个方块组,分两行排列,整个方块组在屏幕上竖直居中对齐,这时的布局约束关系为:
这样同样的内容在iPhone横屏、竖屏和iPad的不同设备和使用场景上布局不同,把上面三种情况的内容布局的约束关系总结概括一下:
第三个例子,随着iPad的定位在逐渐向电脑靠拢,人们对iPad上的app生产力要求越来越高,需要利用好iPad这块大屏幕的空间、更容易地在app内进行导航,所以在iPadOS14中,iPadapp增加了侧边栏这个导航样式,用户可以在侧边栏上更容易找到app不同层级的内容入口。
但由于侧边栏占据了较大的显示面积,所以侧边栏不适合内容显示区域较小的情景。例如下图中的「音乐」app,在iPadPro11寸上全屏展示时,此时SizeClass为「regularwidth,regularheight」,app使用侧边栏作为导航方式;当「音乐」app以SlideOver形式运行时,此时SizeClass为「compactwidth,regularheight」,横向上显示空间有限,所以app改用以前的标签栏作为导航方式。
有了SizeClass这个武器,在iPhone和iPad上进行app的自适应布局设计变得更加方便统一。但目前的SizeClass并不是完美的,因为iPad横屏和竖屏时的SizeClass在最初设计时都被定义为了「regularwidth,regularheight」,所以当想要针对iPad横屏和竖屏有不同的内容布局方案时,SizeClass并不能满足,还需要依靠其他判断条件。随着iPadapp的地位的提高,也许以后的SizeClass会进化出更多的级别以应对上述情况。
2017年iPhone转向全面屏时代,搭载iOS11、配有5.8寸屏幕的iPhoneX发布,屏幕分辨率为1125×2436px,PPI达到458,屏幕尺寸和屏幕分辨率都发生了重大变化,而且屏幕由以前的LCD屏改为了OLED屏。由于从非全面屏到全面屏的进化,iPhone去除了Home键,由软件层面的HomeIndicator代替;去除了TouchID,由刘海内的FaceID代替;屏幕的四角也变成了圆角,整块屏幕不再是规则的矩形。
5.8寸的iPhoneX的逻辑分辨率为375×812pt,比例因子为@3x。逻辑分辨率在横向上是与4.7寸的iPhone8的屏幕相同的,在纵向上比iPhone8多了145pt,纵向上可以显示更多内容了。所以iPhoneX的逻辑分辨率实际上是对iPhone8的逻辑分辨率「横向不变,纵向变长」得来的,这与从iPhone4s到iPhone5的屏幕进化方式相同。
2018年5.8寸的iPhoneXs发布,与iPhoneX的屏幕保持一致,同时全面屏iPhone家族新增了6.5寸的iPhoneXsMax,屏幕分辨率为1242×2688px,PPI为458。2019年5.8寸的iPhone11Pro和6.5寸的iPhone11ProMax发布,与上一代的屏幕保持一致。
2018年Apple还同时发布了6.1寸屏幕的iPhoneXR,屏幕分辨率为828×1792px,PPI为326;2019年iPhoneXR的继承者iPhone11发布,与上一代的屏幕保持一致。
2018年和2019年全面屏iPhone家族新增的6.1寸屏幕和6.5寸屏幕,它们虽然屏幕尺寸不同,但逻辑分辨率相同,都为414×896pt,不同的是6.1寸的比例因子为@2x,6.5寸的比例因子为@3x,所以它们显示的内容数量是相同的,但6.5寸的屏幕清晰度更高。
这两个机型的逻辑分辨率在横向上是与5.5寸的iPhone8Plus相同的,都为414pt,在纵向上比iPhone8Plus多了160pt,所以也是采用「横向不变,纵向变长」的逻辑进化而来。5.8寸的全面屏iPhone是由4.7寸的非全面屏iPhone进化而来,6.1寸/6.5寸的全面屏iPhone是由5.5寸的非全面屏iPhone进化而来,同时4寸、4.7寸、5.5寸的非全面屏iPhone的宽高比例是相同的,5.8寸、6.1寸、6.5寸的全面屏iPhone的宽高比例也是相同的,6.1寸、6.5寸也可以看做是由5.8寸屏幕「等比放大」而来。
在非全面屏iPhone的时代,从iOS7开始,为了让app在设计和开发时更容易、更正确地进行布局,Apple引入了「LayoutGuide布局指导」的概念。简单来说,显示在iPhone上的app中不仅包括app本身要显示的内容,如文字、图片等,还包括一些让app更易用、更统一的系统控件,如状态栏、导航栏、标签栏、搜索栏、工具栏等。这些系统控件一般会在屏幕顶部或底部占据一定的区域,而除去这部分才是app真正显示内容的区域。
如下图所示,在iPhone8上,屏幕顶部的状态栏、导航栏、搜索栏的区域称为「TopLayoutGuide」,屏幕底部的标签栏的区域称为「BottomLayoutGuide」,app内真正显示的内容应该在这两者之间进行布局。由于屏幕是一个规则的矩形,无论是竖屏还是横屏,系统控件只会出现在屏幕顶部和底部,屏幕左右两侧是不受约束的。
进入全面屏时代,刘海的加入,屏幕四角由直角改为圆角使得屏幕不再是一块规则的矩形,同时软件层面HomeIndicator变成了常驻系统控件,原先的TopLayoutGuide和BottomLayoutGuide已经不能再适应新需求,从iOS11开始进化成了「SafeArea安全区域」。
如下图所示,SafeArea是一块可供自定义内容展示的规则矩形。在竖屏时,由于顶部刘海和底部HomeIndicator的存在,需要空出这两块区域;在横屏时,由于一侧有刘海,一侧没有,但为保证内容对称,所以左右两侧需空出等宽的区域,而屏幕底部也需要为HomeIndicator空出一定的区域。进一步,当放置了系统控件之后,SafeArea会在上面的基础上进一步缩小。
有了SafeArea的定义,app在设计和布局自定义内容时应该处于SafeArea之内,避免与屏幕的圆角、刘海、HomeIndicator发生重叠或裁切,但对于可滚动的内容以及控件/页面的背景颜色,可以让其延伸到屏幕边缘,以形成连续显示的效果。
可以说全面屏iPhone的诞生催生了SafeArea,让LayoutGuide更加完善,为众多第三方app在设计和开发时提供了内容布局指导,以让它们在整个iOS系统中保持一致性。
基于OLED材质屏幕的显示特点,当屏幕显示黑色的面积越大越省电,这也是从iOS13开始app在系统级别上支持了深色模式的一个原因。适配了深色模式的app可以让用户根据需要和偏好选择使用浅色模式还是深色模式,深色模式可以让用户更加聚焦于内容本身,更加适合在灯光条件较暗的环境下使用手机。但有一点特别注意的是,深色模式不等于低对比度,因为开启了深色模式而使得app上的内容识别度和可读性下降,这不是一种正确的做法。
随着iPhone的屏幕尺寸变得越来越多,屏幕变得更长更大,iOS系统的许多交互也在不断发生进化,在此举两个例子。
从iOS11开始,为了让用户更加明确自己处于app的哪个位置,让app突出自己的核心模块,系统引入了一种新的导航栏样式:大标题导航栏,它比以前的导航栏样式更加醒目,在纵向上占据了更多的屏幕空间,这增强了刚进入这个页面的用户的空间感,而当用户滚动app的内容时,用户已经知道所处的位置,大标题导航栏又可以自动地缩小,以让此时的用户把注意力放在内容本身上。
在iOS14/iPadOS14中新增了一种菜单样式,当用户点击按钮时,新的菜单会直接显示在菜单旁边,而不再是使用以前的ActionSheet(从屏幕底部弹出的菜单选项)样式,例如下图中的「提醒事项」app。新的菜单样式可以让用户在较大的屏幕上更好地理解菜单选项和按钮之间的关系,同时可以不需要大幅度移动手指就可以完成操作。
值得注意的是,以前的ActionSheet样式也并不是不再使用,当执行破坏性操作(比如删除操作)时,仍然建议使用ActionSheet来让用户完成操作的二次确认,因为ActionSheet会吸引用户的注意力,只有将手指移动到屏幕底部才能做出选择,避免了误触情况的发生。
iPadOS14中也同样增加了这种菜单样式,这也与macOS中的弹出菜单交互逻辑保持一致,更有利于iPadapp通过MacCatalyst技术向Mac平台转移。
前文提到,从iPhone6开始,iOS在部分机型中新增了「放大显示」功能,放大显示的实质是将高一级的逻辑分辨率降级到同一比例的低一级的逻辑分辨率。在全面屏iPhone中,6.1寸、6.5寸的iPhone具备放大显示的这个条件,所以这两种尺寸的iPhone在系统中同样可以开启放大显示模式;但5.8寸的iPhone不存在比它还要低一级的同一比例的逻辑分辨率,所以5.8寸的iPhoneX、iPhoneXs、iPhone11Pro一直没有放大显示功能。
根据目前媒体获得的消息,2020年秋季将会有四款iPhone发布,旗舰系列包括5.4寸的iPhone12(非最终命名,下同)和6.1寸的iPhone12Plus,超旗舰系列包括6.1寸的iPhone12Pro和6.7寸的iPhone12ProMax。
本文开头提到,在iOS14Beta3版本中有用户发现5.8寸的iPhone也有了放大显示这个功能,根据前文所讲的放大显示的存在条件,我们可以推测存在一款iPhone与5.8寸iPhone的屏幕是同一比例,且逻辑分辨率比5.8寸iPhone低一级。
同时还发现Xcode中的模拟器可以正常运行在960×2079px分辨率下,假设比例因子为@3x,其屏幕逻辑分辨率就为320×693pt。综上两个发现,传闻中的5.4寸iPhone的屏幕参数似乎已浮出水面。
小屏旗舰iPhone12配备5.4寸屏幕,屏幕渲染分辨率为960×2079px,PPI约为424,逻辑分辨率为320×693pt@3x;而大尺寸的iPhone12Plus仍然保持6.1寸屏幕,分辨率等与之前的iPhoneXR、iPhone11保持一致。
可以看出5.4寸iPhone12的逻辑分辨率的宽度与4寸的iPhoneSE第一代是相同的,都是320pt。5.4寸的iPhone12的屏幕变化实质也是「横向不变,纵向变长」,相比iPhoneSE第一代,纵向上多了125pt,当app没有适配新尺寸的iPhone时,上下会出现黑边。这样来看,5.4寸的iPhone12就是之前大家翘首以待的全面屏iPhoneSE。
屏幕的逻辑分辨率影响着屏幕上内容的数量,下图列举对比了目前三种宽度逻辑分辨率的iPhone显示同一内容时的实际情况,可以很明显地看出:
非全面屏4寸的第一代iPhoneSE仍然支持iOS14、全面屏5.4寸iPhone再次引入320pt宽度,在屏幕日趋变大的今天,设计师和开发者仍然需要为320pt这样较窄宽度的iPhone进行app设计、适配和开发。
超旗舰6.1寸的iPhone12Pro和6.7寸的iPhone12ProMax,相比于上一代屏幕尺寸都有一定程度的小幅增大。
根据之前iPhone屏幕逻辑分辨率的进化规律,我认为Apple对于逻辑分辨率的改变是比较谨慎的,因为新的逻辑分辨率对设计师和开发者就意味着新的设计、适配和开发工作,iPhone的屏幕尺寸就会更加碎片化,所以如果iPhone12Pro的尺寸真的是6.1寸和6.7寸,猜测屏幕尺寸的整体变大可能是由于屏幕边框变窄导致,iPhone12Pro系列的屏幕逻辑分辨率和渲染分辨率应该与上一代保持一致,PPI稍有降低。
目前iPhone的最大尺寸是6.5寸,这个尺寸的手机对于用户日常使用来说已经基本到达极限,如果按照之前的屏幕进化规律通过「横向不变,纵向变长」或者「等比放大」的方法继续变大已经没有必要,但不可否认的是,更大的显示屏幕更有利于内容的显示和多任务的操作,对于手机来说,体积尽量小,但屏幕尽量大的折叠屏手机可能会成为未来的发展方向。
隔壁Android阵营已经有多家厂商发布了折叠屏手机,比如三星GalaxyFold、华为MateX,折叠屏也很可能成为iPhone未来发展的一个方向,iPhone的屏幕很有可能出现第三个进化方法——横向放大,纵向不变。
畅想一下,在折叠屏iPhone上,你可以让app按照以前接近两倍的显示面积来显示;也可以让一个app全屏显示,另一个app以小窗口的形式悬浮在另一个app之上,类似iPadOS上的SlideOver;更可以让两个app并排显示,类似iPadOS上的SplitView。
一方面,app在设计内容布局时使用了AutoLayout、SizeClass、SafeArea这些武器,app的布局适应性更高;另一方面更多的iPadapp已经可以以任何尺寸自适应布局灵活显示,固定尺寸大小的app设计思想正在被弱化,同时app多任务、多窗口的功能已在iPadOS中进化得逐步完善。基于这两方面,到折叠屏iPhone推出时,iOS和iPadOS上的app适配的阵痛期就会更短。
总的来看,iPhone屏幕逐渐变大,甚至翻倍,尺寸接近iPad,iPad部分功能下放到iPhone上,iPhone与iPad的边界会变得逐渐模糊;同时,iPad的app通过MacCatalyst技术向Mac平台转移,Mac逐步放弃Intel芯片,逐渐采用AppleSilicon,iPad和Mac的边界也同样在变得模糊。或许在未来的某一天,iPhone、iPad、Mac的app生态会逐渐融合,合为一体。
从第一代iPhone到iPhone12,每一次屏幕尺寸的变化不仅仅是硬件上物理参数的改变,背后还有着缜密的app设计逻辑牵制着硬件参数的变化:
为了让app能在各种屏幕尺寸的iPhone上都能完美显示,下面的武器必不可少,它们隐藏在app背后,默默发挥着作用:
屏幕尺寸的不断进化也带来了iPhone上功能和交互的变化:
对于即将到来的5.4寸iPhone12,基于iOS14Beta版本中发现的线索,可以猜想:
在iPhone屏幕尺寸发展走到极限的今天,未来的iPhone可能会朝着折叠屏的方向发展,出现第三种变化方式——横向放大,纵向不变,而在这之前已有了许多铺垫:
纵观iPhone的屏幕进化历程可以看出iPhone的屏幕进化不仅仅是硬件上物理参数的改变,还伴随着软件上设计和开发逻辑的不断完善,前期硬件和软件的进化或许早已为以后的软硬件埋下了种子,这种软硬一体,硬件和软件相互影响、相互牵制的设计思想可能正是解释很多人会问到的「为什么总感觉iPhone比Android好用一点,但又说不出具体哪里好?」这种问题的一个答案。
「罗马不是一日建成的」,智能手机的生态走到今天,各家手机厂商的产品已是大差不差,但可能就是在那些微不足道的地方的细细耕耘、日积月累默默地抓住了用户的心。