Aspect Ratio 标准为什么是16:9?

发表于2019-07-23
评论0 5.3k浏览

Unity UI System 笔记(二)  Aspect Ratio 标准为什么是16:9?


 

设备分辨率适配(Multiple Resolutions),离不开的一个概念:Aspect Ratio


 

https://en.wikipedia.org/wiki/Display_aspect_ratio


 

Aspect Ratio:显示设备的高度和宽度的比例,所谓的纵横比,长边与短边的比值。


 

它表示为由冒号(x:y)分隔的两个数字,常见的有4:3,5:4,16:9,16:10等等


 

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


 

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


 

4:3标准的历史非常久远,16:9标准是目前的主流。


 

我们看的IMAX是19:10,这不在我们的讨论范围之内。


 

在做游戏之前,我们都要做的一件事儿-确定分辨率。


 

更专业的说法叫确定纵横比。


 

这里的分辨率指的是“设计分辨率”,比如说,很多游戏会采用1334*750(iPhone  6s),其根本的原因是1334x750分辨率的Aspect Ratio是16:9(1.77)


 

目前市面上的移动设备中,16:9的设备占据了九成以上,其它不同的,也均接近于16:9,国内4:3的设备,占有率只有0.x%(数据参考百度流量研究院2019年5月)


 

有部分设备是16:10的,但都接近于16:9


 

iOS设备中,除了iPad(2048x1536,1024x768)是采用4:3以外,其它的几乎均是16:9


 

(经典的iPhone 4(960x640) Aspect Ratio=1.5,但市场占有率只有0.02%)


 

iPad的适配通常都是要单独处理的,因为分辨率Density大,放大的效果并不好,通常需要一些单独的适配处理方案,比如提供一套高清的图片,或是采取最小的缩放比,保证清晰度,但黑边的地方可以使用一张全屏的虚化图处理等等,这里会在后面说到。


 

设计分辨率是UX设计资源时的标准,也是我们在做Canvas Scaler时的Reference Resolution。


 

4:3标准我们应用了很多年,它接近于一个矩形,宽比高多了33%(还记得CRT显示器吗),后来出现了16:9,又叫widescreen,宽屏,宽比高多了78%,更接近于人类的视野范围。


 

640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1


 

(上图-淡蓝色是4:3,淡绿色是16:9,明显的区别,16:9显示的更宽更长。)


 

这里不会过多的讨论Aspect Ratio的历史,比如4:3的由来,16:9标准的演化,有兴趣可以去wikipedia上查看。


 

不同的Aspect Ratio 会带来什么问题?


 

比如我现在的图片或是视频是按照4:3的标准制作的,我的手机或是TV是16:9的,那么我要将它们显示在我的设备上,就需要进行适配,技术上就是缩放处理。


 

不同的Aspect Ratio 是无法完美的匹配到所有设备上的。这也是为何我们会看到在观看某些视频的时候,屏幕的左右或是上下会出现“黑边”的现象。


 

适配会有很多的策略,比如4:3的图片,呈现在16:9的设备上,或是16:9的图片,呈现在4:3的设备上:


 

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


 

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


 

图片来自于参考文献里,有些糙,但不影响表达。


 

可以看到左右上和下上的两个“黑边”,这个”黑边“,有两个更加专业的术语。


 

左右的黑边,叫“pillar boxes" ,像两个柱子。

上下的黑边,叫“Letter boxes",像一个邮筒。


 

屏幕可以是横向,也可以是纵向,原理都是相同的。


 

我们可以看到,虽然有黑边,但图像显示的比例是正常的,没有失真。


 

这种处理的方式是如何计算的呢?


 

取最小的缩放比。


 

计算的方式如下:

使用目标设备的宽度/设计分辨率宽,计算出宽度比。

使用目标设备的高度/设计分辨率高,计算出高度比。


 

取宽高比值最小的那一个。


 

取最小的比值,设计分辨率的宽和高分别乘以相同的系数(ScaleFactor),确保了图片不会失真,另外,最小比值,可以保证一边完全的填充到目标设备,但另一边,则会因为最小比值的原因,而无法填充,导致黑边的产生,即(Pillar Boxes or Letter Boxes)


 

电影或是观看视频,这是很常见的现象,观众习以为常,或者说在不同的设备上播放视频,这是最佳的处理方式。


 

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


 


 

在游戏中,也同样适用,但通常我们会做更多的处理,去“填补”黑边,以获得更好的视觉效果。


 

在uGUI中,他对应的UI Scale Mode:


 

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


 

算法取最小比值:


 

scaleFactor = Mathf.Min(screenSize.x / m_ReferenceResolution.x, screenSize.y / m_ReferenceResolution.y)


 

既然我可以选择取最小缩放值,是不是也可以取最大的缩放比值?


 

取最大的缩放比值,好处是仍然不会失真,因为乘上的比例是相同的,而且不会产生黑边,因为取的最大的缩放比值,横向和纵向都可以被填充,但问题是,会有一边超出屏幕,比如高度的乘1.3就可以完美的填充,但他是最小的比值,最大的比值是1.7,那么高度乘1.7,上下就会超出屏幕,从而造成显示信息的缺失。如下图:


 

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


 

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


 

上面是原图,下面是取最大缩放比的效果,比例没有失真,但上下的有部分象素超出了屏幕。


 

这种效果叫Cropped


 

这在电影或是视频中是无法被忍受的,会隐藏掉一些信息,但在游戏中是可以接受的,比如全屏的背景图,通常不包含什么重要的信息,边边角角部分象素是可以超出设备的屏幕显示之外。


 

uGUI中,UI Scale Mode对应的是:


 

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


 

算法是取最大宽高比值:


 

scaleFactor = Mathf.Max(screenSize.x / m_ReferenceResolution.x, screenSize.y / m_ReferenceResolution.y);


 

既然我可以取最小,最大两种不同的缩放比,那么能不能宽和高分别乘上各自的缩放比(即不同的缩放比)呢?


 

原理上是可以的,但现实是不可忍受的。原因很简单,宽和高乘上不同的缩放比,会让图像失真。


 

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


 

术语叫Stretched or Squeezed,拉伸或挤压。


 

我记得这种缩放策略在我早先接触cocos2d-x引擎的时候,里面就有,完全是鸡肋的参数。


 

在uGUI的Canvas Scaler中,还可以看到另外一种适配模式:


 

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


 

Match Width Or Height


 

下面的Match 你可以拖动Slider来选择缩放比,这样做的目的是什么?


 

如果你的设备同时支持横向和纵向显示,虽然这种游戏现在好像不太多见了,这种适配处理通常面临的问题要更加的复杂,同时支持横向和纵向,那么我在屏幕旋转的时候,可能会有动态处理的必要,比如纵向和横向显示时,不同分辨率,采用不同的缩放比会得到更合适的缩放效果,在Unity form里,看到一个贴子,是通过设置 Match = 0.5f 来处理iPhone流海屏的适配。


 

算法是通过线性插值进行计算:


 

float logWidth = Mathf.Log(screenSize.x / m_ReferenceResolution.x, kLogBase);

                    float logHeight = Mathf.Log(screenSize.y / m_ReferenceResolution.y, kLogBase);

                    float logWeightedAverage = Mathf.Lerp(logWidth, logHeight, m_MatchWidthOrHeight);

                    scaleFactor = Mathf.Pow(kLogBase, logWeightedAverage);


 

设计游戏时,使用16:9的纵横比是目前最佳的标准,我查了相关的资料,通过数据可以更加直观的了解目前国内移动设备的Asepct Ratio标准。


 

https://mtj.baidu.com/data/mobile/device/

来自百度的流量研究院


 

我这里只关注分辨率部分的统计


 

Android Aspect Ratio:


 

(Aspect Ratio的计算由长边/短边)


 

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


 

(不统计1%以下占比率)


 

Aspect Ratio的范围在1.64~1.89之间,均接近1.78(即16:9)


 

16:9(1.78)设备的占有率达到70%!


 

iOS Aspect Ratio:


 

(不统计0.1%以下占比率)


 

KxoTKTqjPFmAOgMq4lqc.gif


 

iOS的数据存在一点问题,分辨率横纵是分开统计的,但不影响结果。


 

16:9设备的占有率在9成以上,其中4:3(1.33),只是2048x1536,1024x768两种iPad设备.


 

对于2048x1536(iPad),通常适配的时候,需要特殊的处理,不过准备一套高清资源这种处理方式会有比较大的成本。所以常见的处理策略是取最小缩放比,类似画面居中,然后背景是一张全屏的虚化图来“填补“黑边(上面有提到)

 


 

结论:


 

16:9标准是现在移动端设备的标准纵横比,占有率达90%以上,其它的Aspect Ratio也均接近于16:9.


 

在游戏中,对于全屏的背景图,我们采用最大缩放比(Shrink),不留黑边,超出屏幕之外的象素是很少的(因为Aspect Ratio 均非常接近16:9),是可以接受的,只是需要注意的是,我们在资源制作的时候,尽量不要将重要的信息,太靠近图像的边角。


 

龙德广场-言几又书店-Mitty 2019.7.21


 

参考文献:

https://material.io/tools/devices/

http://screensiz.es

https://stackoverflow.com/questions/7199492/what-are-the-aspect-ratios-for-all-android-phone-and-tablet-devices

https://www.tru-vumonitors.com/images/4_3_vs_16_9_Aspect_Ratio.pdf

https://chetdavis.typepad.com/chet-davis/2009/11/pillarboxing-letterboxing-and-postage-stamp-effects-.html

http://iosres.com

https://www.rtings.com/tv/learn/what-is-the-aspect-ratio-4-3-16-9-21-9

 

 

感谢您的阅读, 如文中有误,欢迎指正,共同提高


 

欢迎关注我的技术分享的微信公众号,Paddtoning帕丁顿熊,期待和您的交流

 

iOIWBCwZkEenjYhorLAF.jpg
  • 允许他人重新传播作品,但他人重新传播时必须在所使用作品的正文开头的显著位置,注明用户的姓名、来源及其采用的知识共享协议,并与该作品在磨坊上的原发地址建立链接
  • 可对作品重新编排、修改、节选或者以作品为基础进行创作和发布
  • 可将作品进行商业性使用

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引