为什么直播间送礼面板的设计不一样？来看高手的交互分析！

读者提问：

最近领导要求对直播间送礼面板做改版，我去找了一些竞品做了分析，发现很多直播间开始支持横屏模式。在横屏模式下，有两种礼物面板的布局形式，第一种是以 B 站为例的送礼面板，由下弹出；第二种是以 Look 直播为例的右侧滑出。是什么原因导致这两种设计的差异呢？

△ B 站礼物面板

△ 网易 Look 直播礼物面板

大家都知道，B 站文化的核心之一就是弹幕，甚至延伸出了一种弹幕文化类似的说法，虽然我对弹幕不是很了解，但是从中可以看出，弹幕对于 B 站而言，或者说对于 B 站用户而言，是非常重要的。很多时候，它的重要性甚至与直播内容难分伯仲。类似于，一个很好看的视频，少了弹幕，总觉得少点滋味。而一个内容一般的视频，加上有趣的弹幕，也同样能吸引用户的注意。

不知道你是不是也这样，我自己不看弹幕，感受不深，其他 B 站的深度用户是这么跟我说的。大意是，没有弹幕的 B 站是没有灵魂的。

在 B 站，用户对于弹幕的依赖性很强，从这个角度看来，它的直播间礼物面板从下方弹出就比较容易理解了 —— 与弹幕信息互不干涉。

大概是，要设计一个送礼面板，不知道怎么布局，思考过后得出一个结论，一定不能挡住弹幕。那形式选择就很清楚了。

即使和竖屏模式礼物面板设计差异较大也不得不接受这种形式。算是一种「因地制宜」的良策吧？

另外，还可以通过一个细节来验证上面这个观点。

如果去对比 B 站直播间横屏和竖屏的弹幕差异，会发现在竖屏状态下，弹幕经常会撑满整个直播画面。其中送礼气泡与互动区都在画面下方，画面中只有弹幕。

这时候再横过来，会发现弹幕数量即使在很多的情况下，也会离画面底部一段距离。包括送礼气泡也会显示在画面中，但它与底部也会有一段距离。

这时候打开礼物面板，就能发现这个距离的尺寸，正好就是礼物面板的高度。

所以从这点也能看出，是特意分隔开弹幕与面板，为的就是不能让面板挡住弹幕，同样也不能让弹幕影响送礼。

而互动区直接被去掉了，在画面中没有保留。因为互动区的互动信息会以弹幕的形式显示在画面中，至于系统消息，如「谁进入直播间」的提示，在 B 站中的优先级，没有弹幕高，所以在左下角提示，即使送礼面板将其盖住也没什么影响。

这就是 B 站在直播间如此设计送礼面板的原因。

而类似于 Look 直播的横屏模式，礼物面板则是从右侧滑出。

同样的道理，Look 这一类的秀场直播，无论是用户发言还是系统信息，在横屏模式下，都处于左下角的互动区里，因为它没有弹幕，所以侧滑礼物面板是更好的选择。

但是有一些产品，比如快手，会同时留有左下角的互动区与弹幕，那就要衡量自身产品的弹幕优先级，如果优先级不高，优先显示左下角的整合互动区，反而是一种省力的方式。这时礼物面板从右侧滑出，也不会影响整体的页面布局。

△ 快手礼物面板及弹幕消息

而像抖音的部分直播间，在横屏模式下，就只有弹幕，没有互动区。如果仔细观察甚至能发现，抖音的横屏模式下，所有信息都会以弹幕形式出现于屏幕上，包括互动消息，系统提示等，数量多的情况下甚至会填充整个屏幕。这时候点击送礼面板，竟然是右侧滑出。

这样的设计形式对比一下就知道 B 站的横屏模式设计的更为精致，区分了系统提示、弹幕消息、送礼面板等，分布非常明显。而抖音的各个模块相对就比较乱，送礼面板模块的出现又影响了页面内容的其他信息。就导致页面中的信息层级与布局都稍显混乱。

这两个案例有一个知识点，就是「信息优先级决定布局形式」。

什么叫做信息优先级？大致意思就是一个界面上的信息是根据从重要到次要的规则排序的。

比如在直播间，最重要的信息一定是直播内容，其他信息都是根据直播内容附带产生的，正是因为直播内容引发用户打赏欲望，于是点击送礼按钮，弹出送礼面板。

而面板的展示形式还需要根据页面中的其他内容平衡布局，比如弹幕优先级，或互动区优先级等等，它们之间要有序排列，不能互相干扰。比如 B 站与 Look 直播这两类产品的设计差异。

而抖音横屏模式的送礼面板如此设计，将整个页面内容的信息都打乱了，并不可取。

这叫内容聚焦点的缺失，各位要尤其注意。

另外，从内容聚焦点再引出一个知识点，是关于视觉体验的，也就是 UI 在设计类似页面的过程中，需要注意的体验性。

大家能看到上面这张图，B 站的送礼面板高度，是小于半个屏幕的，包括透明度也是，依稀能穿透到直播画面中，虽然有切割感，但还能接受。

而 Look 的磨砂玻璃似的设计，使得画面切割感很严重，导致送礼过程中，超过一半的直播画面被遮挡了。我相信这个过程可能是会影响用户送礼欲望的。比如产生送礼想法，但是精彩时刻，想到点击送礼会遮挡画面，那等会送好了，于是就忘了，或是算了。

像上面的例子中，快手的界面虽然也采用右侧滑出的设计，但是它的送礼面板宽度设计的比较小，正是考虑了上面提到的这个原因。

所以各位在设计直播间类横屏模式的送礼面板时，尤其需要注意文中提到的这几点。

今天这篇文章，通过信息优先级与界面元素的分析，给大家讲解了直播间送礼面板的设计思路。文章内容当然还能扩展，但一篇文章，讲 1-2 个知识点也足够了。

更多交互细节分析：

欢迎关注作者的微信公众号：「呆呆U理」