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

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等等

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%，更接近于人类的视野范围。

（上图-淡蓝色是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的设备上：

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

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

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

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

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

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

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

取最小的缩放比。

计算的方式如下：

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

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

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

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

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

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

在uGUI中，他对应的UI Scale Mode：

算法取最小比值：

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

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

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

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

这种效果叫Cropped

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

uGUI中，UI Scale Mode对应的是：

算法是取最大宽高比值：

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

既然我可以取最小，最大两种不同的缩放比，那么能不能宽和高分别乘上各自的缩放比（即不同的缩放比）呢？

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

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

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

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

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的计算由长边/短边)

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

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

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

iOS Aspect Ratio:

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

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帕丁顿熊，期待和您的交流