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

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

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

横竖屏设计的差异

横竖屏对内容生产的影响

小结

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的宽屏设计,是因为这种宽幅的视觉比例有利于利用景深镜头打造画面的空间感,有利于通过前后景的融合营造更多想象空间,从而使故事内容更富有深意。

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

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

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

总结

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

php 横屏和竖屏,面试问题,视频横屏与竖屏的设计差异?我是这样回答的相关推荐

  1. 使用java调用ffmpeg命令将视频分屏并音视频同时播放(二分屏)

    实现想法 使用ffmpeg命令中的filter_complex(滤镜)参数来进行展示 引入javacv版本 <dependency><groupId>org.bytedeco& ...

  2. 横屏视频怎么变成竖屏全屏,怎么把竖屏的视频变成横屏

    横屏视频怎么变成竖屏全屏,怎么把竖屏的视频变成横屏呢? 我们制作短视频一般是竖屏的比例是9:16,而横屏的比例是16:9,这是各大平台推荐的最佳高宽比例.如果我们的视频不是这些比例,可以使用王者剪辑里 ...

  3. WebView 视频播放,全屏按钮显示不出来,全屏后不能播放视频

    最近项目的一个需求,需要在Webview 里面播放视频遇到了一些问题: 视频可以正常播放但是,视频底部的全屏按钮没了,只有一个音量按钮.修改后,点击全屏,视频不能播放. 接下来一 一解决: 问题1 : ...

  4. python全局键盘监听(pynput快捷键);利用pywin32快速截屏并生成视频

    python全局键盘监听(pynput快捷键):利用pywin32快速截屏并生成视频 第一次在CSDN写博客,有点小紧张(/ω\) 以下内容完全个人理解,有错误请指出~ 最近在用python做一个小工 ...

  5. 在html中分屏与锚点,【影视后期Pr课堂:为视频画面添加四分屏、九分屏】- 环球网校...

    [摘要]不管你是初学的小白,或是刚进入剪辑学习软件阶段,还是说你学软件好几年了都有用处.因为这份总结涉及到了Pr的各个方面.既可以帮你解决软件出现的问题,也可以帮你熟知软件的实际应用,以及了解Pr的插 ...

  6. 教你操作视频横屏改竖屏的方法

    小伙伴们平时在刷视频的时候肯定刷到过横屏视频也有刷到过竖屏视频,那想知道这些视频都是怎么剪辑的吗?小编今天教大家使用视频剪辑高手,将横屏视频快速剪辑成竖屏视频,一起来看看把. 首先要下载一个视频剪辑高 ...

  7. 有将视频横屏改为竖屏的方法吗?

    在遇到想要将横屏的视频画面改为竖屏的时候,大家都是用什么方法进行操作的呀?下面小编就来教大家一个可以简单操作的方法,有需要的小伙伴们可以看过来哦! 首先给大家看一下小编用这个方法操作出来的效果,可以看 ...

  8. python将横转为竖_如何将视频从横屏转为竖屏?

    大家好,我是不为五斗米折腰的六斗米,近期收到比较多的问题就是,怎么把横屏变竖屏,竖屏确实更符合抖音用户的习惯.跟大家分享我们常用的几种方式.以下用到的剪辑软件是pr. 先建一个竖屏工程: 打开pr-- ...

  9. 为什么我要放弃竖屏的短视频?自媒体时代,拍横屏视频能赚钱吗?

    为什么我要放弃竖屏的短视频?自媒体时代,拍横屏视频能赚钱吗? 很多博主都说过自媒体是给普通人最好的一次机会,大周也说过,但有多少人能真正把握住呢? 现在你看竖版的短视频多还是横版的中长视频多呢? 1. ...

  10. 分享方法剪辑视频,将竖屏视频转为横屏视频的同时虚化边框效果

    视频现在是信息的另一种表达方式,视频经过剪辑会有很多效果,今天小编在这里分享一个剪辑技巧,剪辑视频将竖屏转为横屏,并且虚化视频边框,剪辑出来的效果的非常好看的,有兴趣朋友可以接着往下看. 第一步,运行 ...

最新文章

  1. C语言中的字符串处理
  2. 前沿资讯|Spring Native 0.11.2、Spring Authorization Server 0.2.2 发布
  3. 微信支付退款回调处理 php
  4. python随机抽取人名_python实现艾宾浩斯背单词功能,实现自动提取单词、邮件发送,再也不用担心背单词啦...
  5. 安徽科技学院计算机二级,安徽科技大学2017年3月计算机二级考试报名时间
  6. Python的闭包的后期绑定问题
  7. 20160809下午14:00公司断网处理过程(网络架构VSS模式)
  8. ftp 530 This FTP serveris anonymous only,
  9. Linux下网站搭建(2)---Mysql安装和基本操作
  10. (超长)讨论关于允许物料负库存的利与弊...
  11. 【简报】帮助开发人员在线了解CSS Filter特性的工具 - CSS FilterLab
  12. Leetcode 1284 Minimum Number of Flips to Convert Binary Matrix to Zero Matrix
  13. 能够PING通同网段的节点, 但却PING不通其他网段的所有节点的最可能的原因是
  14. ShowWindow(SW_SHOWNORMAL)
  15. StreamInPut/Output
  16. Folly,一个被忽视的库
  17. [书目20150727]有效沟通-余世维
  18. Looksery Cup 2015 F. Yura and Developers(单调栈+二分+分治)(难*)
  19. Androguard交叉引用Crossreferences(XREFs)
  20. 让 Ubuntu 桌面自动更换壁纸

热门文章

  1. File和IO流应用,剪切文件夹
  2. 知识付费的痛点:如何让用户持续学习?
  3. 一峰说:SpringCloud的基础了解和使用
  4. Android反射系统截图Api
  5. win11电脑摄像头打不开,如下图
  6. linux系统宽带测速,Linux下3种常用的网络测速工具简介
  7. 小米路由器4a开发版固件_发现篇免拆刷小米路由器4a千兆版刷第三方固件的贴子!...
  8. 台式电脑主板插线步骤图_图解电脑主机电源线接法图解
  9. 上海商业车险进平台验收通过
  10. UDE2021开展首日回顾,“黑科技”含量超标了!