手机YY-视觉细节优化

当初刚进YY的时候,产品提了一个想法“为啥同样是视频app”芒果的视频客户端就是要相对好看一些呢,我们能不能也提升一下我们的视觉设计。当初接到这个比较模糊的想法,我也对比了一下两个客户端的界面效果,发现确实是有很大差距的,虽说我们的直播视频和他们的异步视频资源是不一样的东西,但是我们是不是也能优化一下我们的效果呢?

带着这个疑问,开始行动了

图片6

因为这次是做视频截屏优化,暂时不能动头部和顶部的公共部分,就只能动视频截屏这个区域了

图片7

我在想是不是可以分析下到底是我们视频截屏不好看,还是布局不好看呢,想到一个想法是看看同样的截图放到不同的布局上会产生怎么样的效果呢,于是就来做了这样要给实验

图片8

这是芒果TV客户端的视频布局区域

图片9

把手Y的视频封面放到芒果TV客户端的布局上的 效果,这里可以看出来:芒果的视频截屏确实要美观一些

图片10

这是芒果TV的是视频截屏图放到手机YY的布局上,发现刚才在芒果TV客户端上还挺好的看的图到这里就不好看看了。发现其实我们的布局也是有问题的,下面我们来整体看一遍

图片11

所以发现了这两个问题后,就要开始想着怎么优化视频截屏的效果(这里其实还有一个办法就是用主播自己上传的效果图,但是因为考虑到这个效果图和真实直播间差异太大,会让用户在使用过程中比较失望,所以这里还是继续保留了真实直播间的效果),同时也要优化我们的布局了。

后来我发现因为我们一直采用的是4:3的视频源,但是很多主播却启用了高清摄像头,高清的视频摄像头产生的截屏放到4:3的框架里面就会出现很多黑条,其实这也是影响视频截屏质量的一个因素,下图就是不同摄像头拍摄出来的视频画面在4:3框架下呈现出来的效果。

图片12

图片14

因为如果切掉黑边的话,那些原本4:3的视频就需要切掉一些头部,后来发现如果我们只是上下切掉30px;不太会影响效果,同时是因为整个截屏还是隔几分钟重新产生,通过对很多直播间观察最后发现按16:10这个方案是最佳的。所有最后选择了这个比例

图片15

 

allline

2 thoughts on “手机YY-视觉细节优化”

    1. 文章里面忘记说明了,当我们把视频截屏尺寸调整为16:10之后,既能满足原来是4:3开播的主播,同时也能去掉80%的黑条现象,所以算是比较好的方案

发表评论

电子邮件地址不会被公开。