读者提问:

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

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

△ B 站礼物面板

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

△ 网易 Look 直播礼物面板

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

更多交互细节分析:

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

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

点赞 12
收藏 22
继续阅读相关文章

发表评论 已发布 3

还可以输入 800 个字
 
 
载入中....
3 收藏