很多直播間開(kāi)始支持橫屏模式。在橫屏模式下，有兩種禮物面板的布局形式，第一種是以 B 站為例的送禮面板，由下彈出；第二種是以 Look 直播為例的右側(cè)滑出。是什么原因?qū)е逻@兩種設(shè)計(jì)的差異呢？
△ B 站禮物面板
△ 網(wǎng)易 Look 直播禮物面板
大家都知道，B 站文化的核心之一就是彈幕，甚至延伸出了一種彈幕文化類(lèi)似的說(shuō)法，雖然我對(duì)彈幕不是很了解，但是從中可以看出，彈幕對(duì)于 B 站而言，或者說(shuō)對(duì)于 B 站用戶而言，是非常重要的。很多時(shí)候，它的重要性甚至與直播內(nèi)容難分伯仲。類(lèi)似于，一個(gè)很好看的視頻，少了彈幕，總覺(jué)得少點(diǎn)滋味。而一個(gè)內(nèi)容一般的視頻，加上有趣的彈幕，也同樣能吸引用戶的注意。
不知道你是不是也這樣，我自己不看彈幕，感受不深，其他 B 站的深度用戶是這么跟我說(shuō)的。大意是，沒(méi)有彈幕的 B 站是沒(méi)有靈魂的。
在 B 站，用戶對(duì)于彈幕的依賴性很強(qiáng)，從這個(gè)角度看來(lái)，它的直播間禮物面板從下方彈出就比較容易理解了 —— 與彈幕信息互不干涉。
大概是，要設(shè)計(jì)一個(gè)送禮面板，不知道怎么布局，思考過(guò)后得出一個(gè)結(jié)論，一定不能擋住彈幕。那形式選擇就很清楚了。
即使和豎屏模式禮物面板設(shè)計(jì)差異較大也不得不接受這種形式。算是一種「因地制宜」的良策吧？
另外，還可以通過(guò)一個(gè)細(xì)節(jié)來(lái)驗(yàn)證上面這個(gè)觀點(diǎn)。
如果去對(duì)比 B 站直播間橫屏和豎屏的彈幕差異，會(huì)發(fā)現(xiàn)在豎屏狀態(tài)下，彈幕經(jīng)常會(huì)撐滿整個(gè)直播畫(huà)面。其中送禮氣泡與互動(dòng)區(qū)都在畫(huà)面下方，畫(huà)面中只有彈幕。
這時(shí)候再橫過(guò)來(lái)，會(huì)發(fā)現(xiàn)彈幕數(shù)量即使在很多的情況下，也會(huì)離畫(huà)面底部一段距離。包括送禮氣泡也會(huì)顯示在畫(huà)面中，但它與底部也會(huì)有一段距離。
這時(shí)候打開(kāi)禮物面板，就能發(fā)現(xiàn)這個(gè)距離的尺寸，正好就是禮物面板的高度。
所以從這點(diǎn)也能看出，是特意分隔開(kāi)彈幕與面板，為的就是不能讓面板擋住彈幕，同樣也不能讓彈幕影響送禮。
而互動(dòng)區(qū)直接被去掉了，在畫(huà)面中沒(méi)有保留。因?yàn)榛?dòng)區(qū)的互動(dòng)信息會(huì)以彈幕的形式顯示在畫(huà)面中，至于系統(tǒng)消息，如「誰(shuí)進(jìn)入直播間」的提示，在 B 站中的優(yōu)先級(jí)，沒(méi)有彈幕高，所以在左下角提示，即使送禮面板將其蓋住也沒(méi)什么影響。
這就是 B 站在直播間如此設(shè)計(jì)送禮面板的原因。
而類(lèi)似于 Look 直播的橫屏模式，禮物面板則是從右側(cè)滑出。
同樣的道理，Look 這一類(lèi)的秀場(chǎng)直播，無(wú)論是用戶發(fā)言還是系統(tǒng)信息，在橫屏模式下，都處于左下角的互動(dòng)區(qū)里，因?yàn)樗鼪](méi)有彈幕，所以側(cè)滑禮物面板是更好的選擇。
但是有一些產(chǎn)品，比如快手，會(huì)同時(shí)留有左下角的互動(dòng)區(qū)與彈幕，那就要衡量自身產(chǎn)品的彈幕優(yōu)先級(jí)，如果優(yōu)先級(jí)不高，優(yōu)先顯示左下角的整合互動(dòng)區(qū)，反而是一種省力的方式。這時(shí)禮物面板從右側(cè)滑出，也不會(huì)影響整體的頁(yè)面布局。
△ 快手禮物面板及彈幕消息
而像抖音的部分直播間，在橫屏模式下，就只有彈幕，沒(méi)有互動(dòng)區(qū)。如果仔細(xì)觀察甚至能發(fā)現(xiàn)，抖音的橫屏模式下，所有信息都會(huì)以彈幕形式出現(xiàn)于屏幕上，包括互動(dòng)消息，系統(tǒng)提示等，數(shù)量多的情況下甚至?xí)畛湔麄(gè)屏幕。這時(shí)候點(diǎn)擊送禮面板，竟然是右側(cè)滑出。
這樣的設(shè)計(jì)形式對(duì)比一下就知道 B 站的橫屏模式設(shè)計(jì)的更為精致，區(qū)分了系統(tǒng)提示、彈幕消息、送禮面板等，分布非常明顯。而抖音的各個(gè)模塊相對(duì)就比較亂，送禮面板模塊的出現(xiàn)又影響了頁(yè)面內(nèi)容的其他信息。就導(dǎo)致頁(yè)面中的信息層級(jí)與布局都稍顯混亂。
這兩個(gè)案例有一個(gè)知識(shí)點(diǎn)，就是「信息優(yōu)先級(jí)決定布局形式」。
什么叫做信息優(yōu)先級(jí)？大致意思就是一個(gè)界面上的信息是根據(jù)從重要到次要的規(guī)則排序的。
比如在直播間，最重要的信息一定是直播內(nèi)容，其他信息都是根據(jù)直播內(nèi)容附帶產(chǎn)生的，正是因?yàn)橹辈?nèi)容引發(fā)用戶打賞欲望，于是點(diǎn)擊送禮按鈕，彈出送禮面板。
而面板的展示形式還需要根據(jù)頁(yè)面中的其他內(nèi)容平衡布局，比如彈幕優(yōu)先級(jí)，或互動(dòng)區(qū)優(yōu)先級(jí)等等，它們之間要有序排列，不能互相干擾。比如 B 站與 Look 直播這兩類(lèi)產(chǎn)品的設(shè)計(jì)差異。
而抖音橫屏模式的送禮面板如此設(shè)計(jì)，將整個(gè)頁(yè)面內(nèi)容的信息都打亂了，并不可取。
這叫內(nèi)容聚焦點(diǎn)的缺失，各位要尤其注意。
另外，從內(nèi)容聚焦點(diǎn)再引出一個(gè)知識(shí)點(diǎn)，是關(guān)于視覺(jué)體驗(yàn)的，也就是 UI 在設(shè)計(jì)類(lèi)似頁(yè)面的過(guò)程中，需要注意的體驗(yàn)性。
大家能看到上面這張圖，B 站的送禮面板高度，是小于半個(gè)屏幕的，包括透明度也是，依稀能穿透到直播畫(huà)面中，雖然有切割感，但還能接受。
而 Look 的磨砂玻璃似的設(shè)計(jì)，使得畫(huà)面切割感很?chē)?yán)重，導(dǎo)致送禮過(guò)程中，超過(guò)一半的直播畫(huà)面被遮擋了。我相信這個(gè)過(guò)程可能是會(huì)影響用戶送禮欲望的。比如產(chǎn)生送禮想法，但是精彩時(shí)刻，想到點(diǎn)擊送禮會(huì)遮擋畫(huà)面，那等會(huì)送好了，于是就忘了，或是算了。
像上面的例子中，快手的界面雖然也采用右側(cè)滑出的設(shè)計(jì)，但是它的送禮面板寬度設(shè)計(jì)的比較小，正是考慮了上面提到的這個(gè)原因。
所以各位在設(shè)計(jì)直播間類(lèi)橫屏模式的送禮面板時(shí)，尤其需要注意文中提到的這幾點(diǎn)。
今天這篇文章，通過(guò)信息優(yōu)先級(jí)與界面元素的分析，給大家講解了直播間送禮面板的設(shè)計(jì)思路。文章內(nèi)容當(dāng)然還能擴(kuò)展，但一篇文章，講 1-2 個(gè)知識(shí)點(diǎn)也足夠了。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。