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