不懂竖屏，你的舞台被切掉了2/3

竖屏突然驾到。很少人意识到，以横屏为前提的传统设计思维会遇到大挑战。

↘ 不懂竖屏，猛虎变病猫

从PC屏到手机屏，大多数人只留意屏幕大小的简单变化，把手机屏内容当作PC端内容的缩小版来看待。由于惯性，大多数人还按照过往的思维和方法在找创意、构图、摄影、设计。

比如，我们喜欢用横方形的图片，占满整个PC屏幕，最具视觉冲击力。

不仅是PC，其实在包括舞台、广告牌、大屏幕PPT等所有的类横屏上，我们都非常习惯于横方形构图。因为横方形构图也和“眼帘形状”相匹配，人眼天生会觉得舒适。

但有没有想过，横方形图片进入了竖方形手机屏，竟然只能占手机屏幕的三分之一！由于只用了三分之一的屏幕面积来展示同一个主体，视觉冲击力、场景带入感、情感诉求等都大打折扣。猛虎变成了病猫。

大家熟知的猛虎尚且如此。你的商品详情图会比猛虎更吸引眼球、更容易理解、更有视觉震撼吗？

那么，在手机屏幕上应该如何构图，才能够恢复猛虎的原貌？

↘ 竖方形——适配竖屏的正确构图形状

用竖方形的图片进入竖屏。这时老虎把整个屏幕占满，霸气和威慑力通过屏幕自然传递了过来。猛虎回来了。

↘ 屏幕被切掉了2/3的魔术揭秘：不同基准的等比缩放

为什么在PC上满屏的图片，到了手机上只能占据1/3屏幕呢？

PC屏上的16∶9横方形满屏图片，在9∶16手机屏上变成了一个更小的16∶9横方形图片。这中间做的是以手机屏的屏宽为基准的等比缩放。简单推导一下：

手机屏上的图片高度=图片宽度×9/16

=手机屏宽×9/16

=（手机屏高×9/16）×9/16

=手机屏高×0.316

手机屏上的图片面积=手机屏宽×图片高度

=手机屏宽×（手机屏高×0.316）

=手机屏面积×0.316

手机上的这个横方形小图片，只占了手机屏的（9/16）2=0.316（约1/3）大小！其他2/3屏幕处于黑屏空白状态，白白浪费了。

在9∶16竖方形的手机屏上，如果想重新让图片刚好占满整个手机屏幕获得最大化的视觉冲击效果，必须用同样的9∶16竖方形图片。

当然，我们也可以反向做一个尝试：让9∶16竖方形手机屏的满屏图片，进入16∶9横方形PC屏幕看看。此时，图片做了以PC屏的屏高为基准进行等比缩放，也只能占据约1/3的屏幕面积，同样有2/3的屏幕面积被浪费了。

这就是不同基准的等比缩放魔术。在不同形状的屏幕，以不同的基准做等比缩放，会得出天壤之别的结果。屏幕形状改变了，构图形状也应该随之改变，否则就会浪费屏幕空间、降低图片视觉冲击力、减少内容的传递信息量。

↘ 启动竖屏思维开关

检查一下，你的手机端图片设计用的是竖方形还是横方形图片？

当前在手机屏上的竖方形图片很少。大部分是本来适配于PC屏设计的横方形图片。

表面原因是设计师在PC横屏前工作，不由自主地受到了PC屏幕形状的影响。更深层的原因，是长期的传统平面设计思维根深蒂固。策划师、摄影师、设计师潜意识里的绝大多数美术作品，都是习惯性横方形构图。

用心看懂本节的五张图，在手机屏上你就比其他设计师多出了两倍展示舞台。

到此，也恭喜你启动了竖屏思维的开关。