面试问题,视频横屏与竖屏的设计差异?我是这样回答的
最近在群里看到一位同学提问,在面试的时候被问到视频横屏与竖屏的设计差异,讨论还挺火热。正好我之前做过一个从竖屏到横屏转型的短视频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的宽屏设计,是因为这种宽幅的视觉比例有利于利用景深镜头打造画面的空间感,有利于通过前后景的融合营造更多想象空间,从而使故事内容更富有深意。
而要理解这种深意,观众往往需要投入很多精力,也就更加获得更好的沉浸感。
如今短视频时代,人们的耐心变得非常稀缺,更希望看到的内容简单直接,这就要求短视频制作要尽量前置主体,使传达的信息更加明确、直接。
相比擅长沉浸感更强,需要更多思考的横屏内容,竖屏视频内容更能迎合这一要求,它能更多聚焦在主体人物本身,从而更适合以人为主体的直播等内容。
总结
横屏和竖屏是我们日常见到的最普遍的一种交互形式了,因为见惯了,所以我们很多时候对这些设计会觉得理所当然,却忽视了背后的设计逻辑。
为什么短视频会以竖屏居多,为什么长视频大多数都是横屏展现,为什么电视和电影的设计比例是宽屏而非竖屏等等。 很多优秀的设计背后都是有原因的,没有无缘无故的成功。
多一点思考,再小的点也有大的学问。
以上内容,就是彩云关于横竖屏设计问题的思考,不一定都对,大家参考看看,有不同见解,欢迎沟通讨论。
一般我们看到的H5基本上都是竖屏的,看惯了竖屏的H5,大家未免有些审美疲劳,横屏H5这种新奇玩法就容易脱颖而出,给目标用户留下深刻的印象,当然,除了技术的辅助,最重要还是内容与品牌、热点等因素的巧妙把品牌、产品、业务展示出来。今天我们使用的工具是epub360,废话不多说,我们先从几个动图来感受下横屏H5的效果。
百度搜索:epub360 了解更多
在横屏H5案例 “来了就是深圳人”中,“只做设计”李志用了一个很有创意的方式,这里分享给大家有关横屏H5和锚点触发的设置方法。
知识点:横屏、layer容器、锚点
三、功能设置
1.我们新建作品,在右面面板作品信息图标下自定义尺寸,宽为740,高为340;
2.我们切换到layer页面,更改layer页面尺寸为宽941,高为1289,接着上传图片,提示的背景图手动设置尺寸与layer尺寸一致,摆放好位置如图示;
3.再新建一个layer页面,高度为400,宽度不固定,根据自己的内容来
4.在layer里给想要出现的文字或者图片添加飞入等待触发动画,再添加锚点,设置触发基准点为视窗左边线,触发条件为向左滚动接触时,仅执行一次;
5.切换到页面,把提示layer插入到页面中去,拉伸到原尺寸大小(941,1289),并摆放好合适的位置
6.再添加内容layer到页面中去,高度为400,宽度为740,并摆放好合适的位置;
7.预览下效果试试,在向左滚动到我们预想的位置上,文字就出现。后面的操作是一样的,这里我们就不多赘述了。
若vivo V3Max不能横屏,可以从手机屏幕底端上滑调出手机快捷栏,然后在快捷栏中找到竖屏锁定开关图标,点击开关后图标变暗即成功解除锁定竖屏。
注:关闭竖屏锁定后,并不是所有的软件界面都支持横屏,这是因为部分软件并没有横屏设计(如:QQ、百度贴吧)。
具体操作步骤:
1、在屏幕底部上滑调出快捷栏
2、点击“竖屏锁定”图标变暗即可
1、苹果手机关闭自动横屏显示,屏幕旋转功能是为了在某些时候方便查看视频或者是大图片等等设计的。想要实现自动横屏显示首先得开启旋转屏幕的功能,然后再横屏拿着手机就可以显示。
2、在手机主屏幕界面,接由下向上滑动,然后再出来的控制中心界面上面直接点击直圆圈中心锁标志的按钮,就可以关闭或者是开启屏幕旋转功能。
下图是在苹果官网找的一张 iPhone6 Plus 在短信应用中的横屏截图,可以横屏分屏操作。
由于 iPhone6 屏幕的尺寸变大了,在显示上有二种模式,一种是标准模式,另一种是放大模式。只有在“标准模式”下,才支持横屏操作。
在我们激活苹果6手机时,有选择显示模式的选项,如果你想在后期更改放大模式的话,请先打开主屏上的“设置”应用,如图所示
在设置列表中找到“显示与亮度”选项,如图所示
接下来请点击“显示模式”一栏,如图所示
随后我们就可以选择以“标准或放大”模式来显示了,如图所示
如果要切换不同的显示模式,需要重新启动 iPhone 以后才能生效。
不管你是采用何种显示模式,如果不想让屏幕随着方向转变的话,请在控制中心里锁定“屏幕旋转”功能。
进入设置--显示与亮度--竖屏锁定--打开开关即可。
若指的是软件内自带的横屏设计想改为竖屏,需要咨询软件客服是否可以设置;更多疑惑可进入vivo官网--我的--在线客服--输入人工,咨询在线客服反馈。