一、播放器

1 短视频播放器界面设计原则总结

以小红书、抖音为代表

1.1 战略层：短视频应用大部分为UGC平台，会鼓励用户多关注/评论/点赞，提升平台用户活跃度。

1.2 范围层：一般有这些功能——播放器功能；视频信息详情；关注；分享、点赞、收藏、评论；退出。

1.3 结构层：此页面一般不会接续其他流程，因此一般操作都在页面进行，不会轻易跳转（除了点击头像到用户页面）。

1.4 框架层：

（1）一般都是竖屏。

（2）信息、图标、按钮不应影响主视频体验，应该靠近屏幕上下边缘，或单击隐藏。

（3）注意视频播放的状态。在刚开始的播放状态时，视频相关信息对用户来说比较重要，当用户想对视频进行操作，如拖进度条时，可以隐藏视频信息，突出进度条。

（4）由于视频短，一般默认单条循环播放。

（5）可以利用手势来进行快捷操作（小红书的双击点赞和上滑查看下一个视频；抖音单击为暂停，左滑进入用户页面）。

小红书单击视频后可以隐藏一部分信息，只留下进度条。抖音并没有这个交互。个人觉得小红书的这个细节很贴心，照顾到用户看视频不想被杂乱的信息干扰的体验。

左边为抖音，右边为小红书（单击后界面隐藏了信息）

1.5 表现层：

（1）简洁为主，一般是黑底白字，不能有太强烈的风格。

（2）强引导的按钮可以是应用的主题色。

2 长视频播放器界面设计原则总结

以b站移动端、跳跳、韩剧tv

2.1 战略层：b站主打用户互动，因此更强调弹幕、三连；跳跳和韩剧tv重心仍在视频播放本身。

2.2 范围层：b站播放器的功能更加完备，比短视频播放多了选集、截图按钮、锁屏、倍速、画质，以及更偏设置类的功能如后台播放、投屏、定时停止、播放方式、画面尺寸。倍速、缓存、锁屏和投屏解决了观看长视频的场景下的痛点。

考虑学舞的场景，对视频的功能点进行取舍。

b站的播放器

跳跳&

2.3 结构层&框架层：

（1）以传统横屏为主（个人观点：从摄影的角度来说，长视频大多角度较为客观，不像短视频一样，凸显自我以及主观性，因此多采取横屏），也因此，在进入全屏之前一般会有详情页面，比短视频播放页面涵盖更丰富的交互内容和更频繁的跳转。

（2）全屏时和短视频播放页面同理，交互操作按钮尽量靠边。

（3）长视频更注重观看体验，因此隐藏信息是必要的。

2.4 表现层：

同样是简洁为主，个人认为，b站的视觉界面更和谐。

（1）信息层级主次分明，用户一般最关注视频信息（也就是视频名称），这点b站和韩剧tv做得较好，而在跳跳中，上传者的名字比视频信息更瞩目。

（2）颜色和谐，没有突兀的强对比色。跳跳中对几个关键的按钮运用了深灰色，在视觉上略显突兀。

二、信息流

1 基于推荐算法的无线狂刷型

以b站/小红书/抖音为代表，典型的UGC平台，注重引导用户构建自己的信息流。

简单记录一下观察到的一些异同：

1.1 信息流中视频窗口的信息

b站的视频窗口显示标题、点击率、评论、时长，仅有关注了的up主发的视频才会显示up主的名称，而一般的视频仅显示分区/高点赞（我的理解：陌生up主的视频一般需要点进入观看后才会产生“看看up主其他视频”的需求）。

小红书的视频窗口仅显示标题、发布者、点赞（我的理解：小红书的视频窗口/视频封面占屏幕比较大，而且视频会自动播放一小段，内容较明确，用户不点击查看笔记详情也可能会发布者产生兴趣）。

b站& 小红书

1.2 推荐算法的优化

b站、小红书、抖音都可以选择屏蔽不感兴趣的视频来优化信息流。b站和小红书的选项会更细，估计对算法的优化效果会更到位；而抖音的最简洁，对用户来说可能更好选（希克定律）。

b站 & 小红书 & 抖音

2 固定不变精选型

以跳跳/韩剧tv、人人影视等影视观看播放器为代表，平台内容变动较小，但依旧会利用“相关推荐”等板块帮助用户找到更多同类感兴趣的内容。

跳跳相关推荐

关于视频播放累的app的梳理暂时到这里，下一篇会出关于剪辑类app的交互思考，稍后再见啦～。

以上分析基于b站 5.54.0版本 /小红书 6.36.0 版本/抖音 10.1.0 版本/跳跳 7.2.1版本/。如需转载请联系：[email protected]，也欢迎不同意见和探讨。

项目阶段总结（1）：视频播放类App交互梳理和设计原则