UGC视频类网站首页小调研
设计角度对此类视频网站首页的初步分析研究。
前言
UGC（User Generated Content），指用户产生内容。在自媒体火爆的当下，人人都可以在各种网络平台通过图文、视频等方式记录生活、展现自我，平台也会给予优质内容发布者一定的奖励，达到互利共赢。本文从设计角度对此类视频网站首页进行初步的分析研究。
页面布局
静态布局
概念：
静态布局又叫固定布局，顾名思义就是页面内容是固定的，宽度固定，内容模块固定，不会因屏幕尺寸或分辨率改变而改变。这种布局方式比较常见，设计和开发的成本低。缺点也很明显，在小屏幕上内容显示不完全，会出现横向滚动条，在较大的屏幕上左右会有大量空白，浏览体验较差。
案例：
好看视频
自适应布局
概念：
自适应布局是根据屏幕分辨率的不同展示不同的布局，就是设计多个静态布局来匹配不同的屏幕尺寸，这样可以在不同分辨率下都提供较好的浏览体验。相对来说更多的布局设计会相应增加设计和开发的工作量。
案例：
B站
响应式布局
概念：
响应式布局相当于流式布局和自适应布局的结合体，当前多数视频网站采用该布局方式，通过根据不同的屏幕尺寸设计不同的断点及页面布局方案，页面内模块会根据分辨率进行拉伸及收缩，体验顺滑，能够在各种分辨率下达到完美的展示效果。缺点就是需要适配更多的屏幕尺寸，较自适应布局设计和开发的工作量更大，但付出的更多给用户呈现的也是更加舒适的浏览体验。
案例：
YouTube
Viemo
抖音视频
西瓜视频
可见在重视用户体验的当下，响应式布局是视频类网站的主流，好的浏览体验更能够留住用户，从而为企业提升商业价值。
内容结构
看完上面的布局方式我不禁想问，网站想为用户提供更加丰富的视频内容，以此来吸引用户观看，那么到底一屏内放多少是合适的呢？
因为屏幕分辨率众多，这里以当前PC主流分辨率1920x1080为主要研究目标，当然作为设计师的小伙伴们4K、5K分辨率也普及了吧。
在当前分辨率下，视频内容展示列数
可见在1920x1080下，4-5列内容为主要展示方式，这也符合米勒定律7±2原则，内容越多反而会增加人的记忆负担，在信息碎片化的当下，合理的控制内容的数量，减少用户的选择，并通过算法为用户推荐更感兴趣的内容，才能提供更好的使用体验。
视频信息
看完了页面结构我们再看看视频信息的构成，用户最终目标还是某个视频内容，视频信息的呈现会影响用户的选择。
由此可见，预览图、时长、标题、作者头像和昵称、视频播放量为主要展示信息，为用户内容选择提供依据。
预览图
人们对于图像的感知要高于对文字的感知，在用户快速浏览的过程中，精彩的封面图往往能够引起人们的注意，在封面图上添加关键性引导文字更加能够激发观看欲望。
封面的尺寸主要采用16：9的比例，是影视内容的常见构图，但这其中抖音视频采用的是4：3的构图，个人分析抖音的主要内容来源于移动端，用户多习惯通过手机拍摄视频上传，纵向16：9的视频更符合移动端用户的观看体验，因此为兼顾横向与纵向视频展示而采用4：3的封面比例。
交互体验
除默认的视频信息外通过hover可以给用户展示更多的信息或操作，提升使用体验。
一般常规的是通过hover进行视频预览，稍后观看等操作。这里哔哩哔哩的体验更好一些，在hover时会显示进度条，用户可以通过鼠标左右移动定位预览位置，更快捷的了解视频内容，同时会有弹幕展示。
调研网站中除Viemo外均可进行hover预览视频，可能是因为Viemo上的内容多为高质量、高清晰度影片，更希望用户能够通过大窗口沉浸式的进行观影体验。
总结
页面布局以响应式为主，能够适配多种分辨率，给用户提供更好的浏览体验；
视频数量在1920x1080分辨率下展示4-5列比较合适；
除特殊需求外视频封面比例一般以16：9为主；
视频信息展示以预览图、时长、标题、作者头像和昵称、视频播放量为主，结合产品需求可进行额外信息的展示，但避免信息过多影响用户决策效率；
交互方面通过hover进行视频内容预览，可提升用户体验。
