B站播放页改版体验报告

B站在今年6月推出了新版的播放页设计，在网页布局和信息架构上有着比较大的改动。因为没有成为内测用户，所以最近才体验到，花了几天时间感受了一下。个人认为从用户体验和交互设计角度改变的挺多的，由此分享下个人观点。

Abstract-测试环境

网络状态：100M宽带-wifi连接（海外）

测试平台：Laptop-acer商务本

屏幕尺寸：外接显示器-Dell23.6寸1920x1080

浏览器：Google chrome

版本纲要

1、优化播放器整体设计

2、弹幕设置与播放器设置整体设计

3、选集功能（分P）改版

4、“相关视频”模块改版

亮点1：整体设计风格更加趋向综合视频网站

以同一个视频为例，可以很明显的看到，新版播放页播放器占比提高了很多，同时去除了顶部banner。同时收起弹幕列表，把底部视频推荐和右侧边视频推荐列表整合。将UP主信息从播放器右上角移动到左下角，这些改动使得用户在打开每个视频页面时，不用下拉页面就能看到整个播放器并进行操作。而用户在旧版视频页面需要下拉页面一定距离才能点击到播放器底部的按钮。

新版视频页面

旧版视频页面

从以上一些非常大幅度的改动可以看出B站这次设计改版的目的，那就是：提升看视频的体验，并强化视频播放这个核心功能。甚至我们可以发现，新版的页面布局已经和YouTube基本一样了。可以看出，B站有很明显的想要向综合视频网站巨头YouTube的设计学习的倾向。从交互设计的用户要素来将，B站从当初单纯的二次元视频网站发家，到现在成为国内一大山头，美妆、直播、游戏等模块已经为B站带来更多的多元化用户，其二次元社区的属性在逐渐模糊，所以向YouTube这样的综合视频巨头学习是一个忘了初心但是箭在弦上不得不发的选择。从交互设计的行为&目的要素来说，B站想要用户更多的更爽快的看视频，那么必须要做出强调重点，削弱分支的设计。这一次，B站选择了去掉顶部banner以及弱化弹幕功能，从用户体验上来讲让用户更加简单快速的获取视频，把用户的注意力集中在视频上，毫无疑问是正确的思路。

但是我们可以注意到，新番的视频页面是没有进行这样的改版的，自从版权时代到来之后，B站在新番这个栏目上的思路就很明确，在这个栏目上维持浓厚的二次元氛围，所以这次播放页改版不涉及新番，也是很好理解的。

二、弱化了弹幕模块

结合新版和旧版弹幕模块的设计变动，我大胆的推断：根据B站的用户研究，他们新增用户群体中“老二次元”越来越少，弹幕对更多的用户来说只是小菜，而非主食，需要削弱其重要性。当初B站包括A站成立初期，都是学习了日本的Niconico，其弹幕功能为区别于当时的优酷、土豆等视频网站的核心，同时，弹幕文化也培养了一代二次元爱好者的文化环境。但是对于B站近几年加入的非核心二次元用户来说，弹幕就是看个热闹，不会像核心二次元用户一样玩转高级弹幕，或者是出于观念原因屏幕特定弹幕。

新版弹幕模块

旧版弹幕模块

自从B站引入侧边栏推荐视频模块之后，弹幕列表的地位就逐渐在下降。一开始弹幕列表和推荐视频出于同等层级，只是推荐视频优先显示，我们可以看到在旧版中，弹幕列表和屏蔽设定能和推荐视频处于同一个Tab标签栏中。而在新版中，弹幕列表被拆分出来，并且被折叠，在视觉上不再享有和推荐视频同等的优先级，而屏蔽设定和高级弹幕甚至被放置到弹幕列表上的一个菜单按钮中。

交互设计可以向用户表达页面中元素的层级和重要性关系，这次改版B站毫无疑问大幅削弱了弹幕的重要地位，观看视频时弹幕并没有变化，只是查看弹幕列表，对弹幕进行设置这些功能被压缩到右上角极小的空间内。或许未来当弹幕不再被用户们所喜爱的时候，B站可能会退出默认不显示弹幕的设计。

三、播放器功能按钮整合

这部分功能相比播放器，推荐视频和弹幕列表的修改，并不容易发现，因为这个设置在默认页面上本来就是隐藏的，需要点击才会弹出。但是，B站这次的修改幅度还是非常大的，结合实例可以更好的理解。

新版按钮栏

旧版按钮栏

从布局上来讲，旧版的按钮栏是放置播放器外的，而新版的按钮栏，其播放按钮、音量按钮、全屏按钮等常规操作是整合在播放器底部的，这种设计和YouTube很像，一来是从结构上来说更加整体化，二来这种用户无操作后就隐藏的设计有引导用户更加沉浸的观看视频的作用。同时，旧版的网页全拼按钮需要把鼠标悬浮在全屏按钮上才会浮动出现，而新版直接放在了按钮栏中，同时宽屏模式、网页全屏、桌面全屏按钮并排放在了一起，符合UI设计相关功能亲密性的原则。

弹幕栏其实改变也颇大，过去“XX人正在看，XXX条弹幕”这块信息是放在播放器右上方弹幕列表上面的，而新版为了给推荐视频列表更大的空间，这块信息就被整合到播放器下方，弹幕发送框左边。从用户扫描网页“从上到下，从左到右”的习惯来讲，放在这里确实更加易扫。同时这条信息与视频播放&弹幕发送的关联性较强，整合在一起从信息结构上来说也确实比较合理。

播放器设置&弹幕设置的按钮弹出窗口进行了位置、信息架构的重构，总的来说我是非常满意的。第一，播放器设置从播放器右上方的弹幕列表上方的按钮改变到了播放器中按钮栏，同时把文字按钮改成了图标按钮，信息传达更加清晰，用户获取更加容易。第二，设置菜单里面的信息机构整合的更加合理，把以前信息展示程度不高的下拉选单，改为了并排的选项标签，视频播放速度改成了横向的拖动条，非常符合我们对调整速度的认知模式。第三，弹幕菜单里的设置更加简单，对于那些希望快速屏蔽部分弹幕从而不影响观看视频的用户而言，只需要点击选择需要屏幕的弹幕类型，更有“防档字幕”这个人性化选项，把产品能为用户带来什么很好的传达给了用户。同时横向拖动条更加清晰的体现了从左到右选项值增大的逻辑，在操作上非常易懂。

新版播放器设置

新版弹幕设置

旧版弹幕设置

四、选集功能大变动

选集功能在页面布局和操作方式上的改变很大，首先新旧两版设计之间的变化非常明显。

新版选集

旧版选集

首先，选集功能的位置从播放器正上方移动到了屏幕右侧弹幕列表和推荐视频中间，从横排标签按钮改变为竖排滚动表单，当前选集的强调性方面，甚至还是旧版更胜一筹。同时新版选集我认为还有一个毛病，就是当集数特别多时，其大量内容的折叠展开功能被视频选集功能模块较小的问题所局限，我此处选择的视频是“【百家讲坛等】中国历代帝王合集【高清版】（771集全）”，视频选集此处的展示方式如下。

771个分集的视频选集

此时过于复杂的筛选列表就感觉不如旧版展开后全部罗列来的直观。但是考虑到新版设计一切为了观看视频的沉浸式体验，旧版占用播放器屏幕控件的设计毫无疑问不如新版。因为有选集的视频在B站众多视频海中比例很少，多大几百集的视频更是少之又少。同时，选集是个比较低频但是操作量较大的功能，有次需求的用户也可以用较少的学习成本快速掌握，所以牺牲其在屏幕上的空间换取核心用户体验是合理的选择。

五、UP主信息调整

其实之前B站退出为UP主充电功能之后我就认为这个设计太“直播产品”了，尤其是月榜单，B站可能是想强化创作者与粉丝之间的关系，试图创造新的收入模式，同时让公司和创作者收益，但是可能这个想法被证实效果不佳，因为在新的播放页中，他被砍了。

旧版UP主信息

旧版充电榜

新版的UP主信息展示模块从视频播放器的右上方移动到了正下方，毫无疑问，这是为了提升核心用户体验的一整套设计中的一环，这个改动非常合理没有什么问题。而且可以观察发现，设计风格和YouTube很接近。从信息架构角度来说，我认为新版的设计给了UP主填写的视频信息更多展示空间，旧版视频信息在播放器下方而UP主信息在播放器右上方，新版则将两者整合。从浏览体验上来将更加舒服，同时页面空间也被更合理的利用了，UP主与视频信息这两个关系密切的信息模块的整合也符合界面设计亲密性的要求。

新版UP主信息

总结

B站这次改版的目的很明确，加强观看视频体验，从而满足更多类型的用户，而不仅仅是二次元爱好者。从这个目的而言，推荐视频列表、播放器以及其他小的改动都是牢牢切题的，非常合理。比如我们可以看到，旧版的推荐视频在播放器下面和播放器右侧有两块，这会造成一些用户的困惑：到底哪个才是真正相关的推荐视频呢？新版砍掉了播放器下方的“看过视频的还喜欢”这个模块，只保留了右侧的推荐视频，可以看出B站改动决心很足。

希望B站坚持自己的设计规划，为用户提供体验更加的产品。