编辑导读：视频竖屏和横屏是一个很常见的交互操作，那你有想过这两种设计有什么区别吗？当面试时候被问到这个问题，你会怎么回答？本文作者从自身工作实践出发，对这个问题进行了了梳理分析，并分享了他的几点看法，希望对大家有所帮助。

最近在群里看到一位同学提问，在面试的时候被问到视频横屏与竖屏的设计差异，讨论还挺火热。正好我之前做过一个从竖屏到横屏转型的短视频App项目，有一些设计思考，我把它分享出来，跟大家一起探讨学习。

视频竖屏和横屏是一个很常见的交互操作，那大家有没有想过：为什么会有横竖屏的设计以及背后会有怎样的逻辑呢？我想从以下几点来分析：

1. 横竖屏设计的源头
2. 横竖屏设计的差异
3. 横竖屏对内容生产的影响
4. 小结

01 横屏竖屏设计的源头

横竖屏切换策略最早应用于QWERTY侧滑全键盘按键设计的手机上（早期塞班S60与Windows Mobile等智能操作平台），用户在使用键盘输入时须把手机转90度来使用，因而屏幕内容也要随之切换。

从这里可以看出，早期的横竖屏设计是为了适应硬件的变化。但如今随着硬件的升级，外置键盘的设计早已不成为主流，现在的横竖屏选择更多的是为了服务于内容。

02 横竖屏设计的差异

先给大家来一张我做的思维导图，横屏与竖屏的差异对比，

1. 横屏的优势

1）横屏具有更强的沉浸感

大家平时用的电脑，电视，基本上都是横屏的设计，为啥会设计成横屏也是有原因的，因为人眼在生理上的视野范围跟平时见到的横屏设计的比例是比较相符的。所以，横屏相较于竖屏来说，能有更好的沉浸感体验，这就是为什么一些长视频应用，比如腾讯视频，优酷之类的，一般会设计成横屏的原因。

如果在这个视野范围内都是屏幕，那么就会给我们一种身临其境的感觉。这就是为什么角色扮演类游戏需要做横屏设计，电影的荧幕是21:9的原因。

2）横屏阅读效率更高

水平方向阅读更符合人体生理，眼球横向来回扫视比较方便,所用时间也较短。如果是竖屏的，可能会需要低头才能扫视完整块屏幕。从所用时间和角度来看，横屏的阅读效率相对较高。

3）横屏更偏向于看内容

由于具有很强的沉浸感，也就意味着需要观看者接受更高密度的信息量，使得横屏下更适合深度看内容，更适合PGC内容形态。当时我们想要做的是知识型短视频内容，横屏状态可以让用户有更高的专注度。

4）横屏短视频体验新奇

想要获得比较好的传播，亮点很重要。目前市面上大多数短视频应用都是基于竖屏来做的，横屏短视频设计相对较少，做成横屏会比较有特点，能让人产生记忆点。

5）保护视力

横屏下的内容其实跟书本宽度比较接近，阅读屏幕内容时眼珠子会横向扫动，而在竖屏下眼球基本上不动。所以，还能起到一定的保护视力作用。

2. 竖屏的优势

1）竖屏更偏看人及互动

因为竖屏的构图关系，竖屏视频相较于横屏视频画面中容纳的人数更少，所以它更容易给人带来一对一的交流感，具有很强的互动性。在你来我往的互动过程中所带来的信息密度一般相对较低，内容属性更偏娱乐化，浅知识，所以可以看到在很多的直播设计中，都是采用的竖屏设计。

2）便于碎片化场景

竖屏下单手持握更加方便，同时因为没有太强的沉浸感，目光容易发散，所以更适合碎片化场景。

3）竖屏能使得拍摄重点更为突出

由于尺寸和人眼视野的问题，竖屏会让画面重点更为聚焦。

这里稍微介绍下理论依据：人眼视度即指人的肉眼可视角度的度数。人类通常是124度，当集中注意力时约为五分之一，即25度。人两眼重合视域为124度，单眼舒适视域为60度。所以在小角度视野下，画面的重点会更加突出。

03 横竖屏对内容生产的影响

大家平时看的电影和电视一般都是16:9的宽屏设计，是因为这种宽幅的视觉比例有利于利用景深镜头打造画面的空间感，有利于通过前后景的融合营造更多想象空间，从而使故事内容更富有深意。

而要理解这种深意，观众往往需要投入很多精力，也就更加获得更好的沉浸感。

如今短视频时代，人们的耐心变得非常稀缺，更希望看到的内容简单直接，这就要求短视频制作要尽量前置主体，使传达的信息更加明确、直接。

相比擅长沉浸感更强，需要更多思考的横屏内容，竖屏视频内容更能迎合这一要求，它能更多聚焦在主体人物本身，从而更适合以人为主体的直播等内容。

总结

横屏和竖屏是我们日常见到的最普遍的一种交互形式了，因为见惯了，所以我们很多时候对这些设计会觉得理所当然，却忽视了背后的设计逻辑。

为什么短视频会以竖屏居多，为什么长视频大多数都是横屏展现，为什么电视和电影的设计比例是宽屏而非竖屏等等。很多优秀的设计背后都是有原因的，没有无缘无故的成功。

多一点思考，再小的点也有大的学问。

以上内容，就是彩云关于横竖屏设计问题的思考，不一定都对，大家参考看看，有不同见解，欢迎沟通讨论。

#专栏作家#

彩云sky，公众号：彩云译设计

本文原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议