读者问:
最领导要求对直播间送礼面做改版,我了一些竞做了分析,发现很多直播间开始支持横屏模式。在横屏模式,有两种礼物面的布形式,第一种是 B 为例的送礼面,由弹;第二种是 Look 直播为例的右侧滑。是么原因导致这两种设计的差异呢?
△ B 站礼面板
△ 网易 Look 直播礼面板
大都知道,B 的核心之一就是弹幕,甚至延伸了一种弹幕类似的说法,虽然我对弹幕是很了解,但是从中可看,弹幕对于 B 而言,或者说对于 B 户而言,是非重要的。很多时候,它的重要性甚至与直播容难分伯仲。类似于,一个很好看的视频,了弹幕,总觉得点滋味。而一个容一般的视频,上有趣的弹幕,同样吸引户的注意。
不道你是不是也样,我自己不看弹幕,感受不深,其他 B 站的深度用户是么跟我说的。大意是,没有弹幕的 B 站是没有灵魂的。
在 B 站,用户对于弹幕的依赖性,从这个角度来,它的直播间礼物面板从下方弹出就比较容易理解了 —— 弹幕息互不干涉。
大概是,要设计个送礼板,不知怎么布局,思考过后出个结论,定不能挡住弹幕。那形选择很楚了。
即使竖屏模式礼面板设差异较也不得不接受这种形式。算一种「因制宜」的良策吧?
另外,还可通过一个细节来验证上面这个观点。
果去对比 B 站直播间横屏和竖屏的弹幕差异,现在竖屏状态下,弹幕经常撑满整个直播画面。其中送礼气泡与互动区在画面下方,画面中只有弹幕。
时横来,现弹幕数量即使在很的情况下,也离画面底部一段距离。包括送礼气泡也显示在画面中,但它与底部也有一段距离。
这候开礼物面板,就能发现这个距离的尺寸,正好就是礼物面板的高度。
所以从这点也能出,是隔开弹幕面板,为的就是不能让面板挡住弹幕,同也不能让弹幕响送礼。
而互动区接被去掉了,在画没有保留。为互动区互动信息会以弹幕形显示在画,至于系统消息,如「谁进入播」提示,在 B 站优先级,没有弹幕高,所以在左下提示,即使送礼板将其盖住也没什么影响。
这就 B 站直播间如此设送礼面板的原因。
而类似于 Look 直播的横屏模式,礼物面则是从右侧滑。
同样的道,Look 这一类的秀场直播,无论是户发言还是系统信息,在横屏模式,都处于左角的互区里,因为它没有弹幕,侧滑礼物面是更好的择。
但是有一产品,比快手,同时留有左下角的互动区与弹幕,就要衡量自身产品的弹幕优先级,果优先级不高,优先显示左下角的整合互动区,反而是一种省力的方式。时礼物面板从右滑出,也不影响整的页面局。
△ 快手礼物面板及弹幕消息
而像抖音的部直播间,在横屏模式下,就只有弹幕,没有互动。如果仔细观察甚至能发现,抖音的横屏模式下,所有息都会以弹幕形式出现于屏幕上,包括互动消息,系统提示等,数量多的情况下甚至会填充整个屏幕。这候点击送礼面板,竟然是右侧滑出。
这的计形式对比一下就知道 B 站的横屏模式计的更为致,了系统提示、弹幕消息、送礼面板等,布非常显。而抖音的各个模块相对就比较乱,送礼面板模块的出现响了页面内容的其息。就导致页面中的息层布局都稍显混乱。
这两个案例有个知识,是「信息优先级决定布局形」。
什么叫信息优先级?致意思就一界面的信息根据从重到次的规则排序的。
如在直播间,最重要的信息一定是直播容,他信息都是根据直播容附带产生的,正是因为直播容引发户打赏欲望,于是点击送礼按钮,弹送礼面。
而面板的展示形式还需要根据页面中的其他内容平衡局,比弹幕优先级,或互动区优先级等等,它们之间要有序排列,不能互相干扰。比 B 站与 Look 直播两类产品的设计差异。
而抖音横屏模式的送礼面板如此计,将整个页面内容的息都乱了,并不可取。
这叫内容聚焦缺失,各位要尤其注意。
另外,从内聚焦点再引出一知识点,关于视觉体验的,也就 UI 设类似页面的过程中,需注意的体验性。
家能看到面这张图,B 站的送礼面板高度,小于半屏幕的,包括透明度也,依稀能穿透到直播画面中,虽然切割感,但还能接受。
而 Look 的磨砂玻璃似的设计,使得画面切割感很严重,导致送礼过程中,超过一半的直播画面被遮挡了。我相信这个过程可是会影响户送礼欲望的。如产生送礼想法,但是精彩时刻,想到点击送礼会遮挡画面,那等会送好了,于是就忘了,或是算了。
像上面的例子中,快手的界面虽也采用右滑出的设计,但是它的送礼面板宽度设计的比小,正是考虑上面提到的个原因。
所以各位在计直播间类横屏模式的送礼面板,尤其需要注文中提的这点。
今天这篇文章,过信息优先级与界元素分析,大家讲解了播送礼板设计思路。文章内容然能扩展,篇文章,讲 1-2 个知识也足够了。
多交互细节分析:
微信为什么隐藏点赞和评论功能?来看高手的分析!
阅读文章
欢迎关注作者的微信公众:「呆呆U理」