跳至主要內容

從疊影的六邊形到十分制評分:BLG 零封 TES 賽後數據的介面設計

從 B 站賽後影片裡疊影的六邊形雷達圖,到虎撲式十分制評分欄,拆解 BLG 零封 TES 背後的數據軸線、KDA 斜線排版與電競賽後的介面設計。

設計觀察 ·
從疊影的六邊形到十分制評分:BLG 零封 TES 賽後數據的介面設計

八月二十一日晚間,LPL 第三賽段的焦點戰落幕,BLG 以 2 比 0 零封 TES。隔天在 B 站輸入「BLG 戰勝 TES 賽後數據」,排在搜尋結果最前面的,是上傳者「苦練李香蘭」的一支兩分四十秒影片,播放量約二十三萬九千。畫面裡沒有選手與場館,甚至沒有一秒遊戲實機:大比分欄立著「BLG 2-0 TES」的字卡,十位選手的六邊形雷達圖輪番上場,最後收在一頁虎撲式的十分制評分,全片沒有一句旁白。

搜尋結果頁本身就是一個介面。同樣幾個關鍵字,綜合排序給出雷達圖影片,最新發布給出連夜剪好的採訪與語音切片,最多播放給出近四十萬次觀看的眾生相合輯。這場比賽的賽後敘事,在搜尋框裡就完成了分眾。

一場兩局、四十幾分鐘的比賽,被壓縮成幾張可以截圖、可以逐項爭論的圖卡。數據在這裡接近比賽的第二份官方輸出,拆解這些圖卡的軸線、配色與數字排版,等於拆解當代電競觀看方式裡最穩定的一層介面。

統計圖卡呈現 BLG 在 LPL 第三賽段以 2 比 0 零封 TES 的系列賽比分結果

六個軸線,一枚剪影

雷達圖是這類影片的核心畫面。常見的配置是六個軸線:輸出、承受、經濟、參團、視野與 KDA,每一項都換算成同位置的百分位,落在零到一百之間。百分位是關鍵的設計決策,原始數值無法跨位置比較,輔助的傷害永遠贏不了射手,換算之後,十個位置才共用同一把尺。

六是個講究的數字。軸線太少,形狀失去解析度;太多,輪廓退化成鋸齒。六邊形剛好圍出一個能當剪影辨認的封閉形狀,也能在 16:9 的畫面裡置中放穩。輸出型選手的多邊形在傷害軸上撐出尖角,輔助的形狀往視野與參團的方向傾斜,常看比賽的人掃一眼輪廓,就讀得出位置與風格。

疊影是第二個關鍵。對位雙方的兩枚多邊形以半透明色塊疊在同一副骨架上,交疊處混出第三種顏色,比較在轉眼之間完成。表格需要讀者自己對照行列,雷達圖直接把兩個答案疊好,這也是它被截圖轉發時幾乎不需要說明文字的原因。Bin 回歸後的這場比賽,他那枚撐得飽滿的形狀,與對面凹向圓心的那一枚,構成整支影片最有分量的畫面。

清單圖卡列出電競賽後雷達圖常見的六個數據軸線,包含輸出、承受、經濟、參團、視野與 KDA

這套圖形語言並非電競原生。足球遊戲的球員卡多年來就用六邊形能力圖,體育轉播的數據牆用的是同一副骨架。電競借來之後完成在地化:軸線換成《英雄聯盟》的統計口徑,母體以聯賽為界,於是同一枚形狀既描述選手,也悄悄描述了聯賽自己的審美標準。

斜線語法與十分制

比起雷達圖,KDA 是更老的排版發明。0/7/2 用兩條斜線分隔擊殺、陣亡與助攻,欄位順序全靠社羣記憶,像股票代號一樣省去所有標籤。JackeyLove 單局 0/7 的字串,賽後被各種切片標題直接徵用為敘事摘要,而且流傳的幾乎都是 0/7 而非完整的 0/7/2:陣亡數才是爭論的靶心,截掉助攻欄位是一種編輯行為,下標題的人等於替讀者劃了重點。

經濟差曲線是另一種敘事。橫軸是時間,縱軸是金錢差,零軸把圖面切成兩半,曲線穿越零軸的瞬間就是比賽的轉折。多支切片影片的標題寫著對位兩局合計落後一萬,這個數字在圖上只是一段遠離零軸的線段,讀圖的人都明白它的重量。

最後收在十分制。虎撲從籃球社羣起家,評分欄的慣例先在球員身上磨了多年,才被搬到電競選手身上:一整場表現換算成小數點後一位的數字,高分往暖色階靠,低分沉進冷色。評分欄下方照例接著留言區,短評按讚數堆疊,被讚最多的那幾句會再被截圖轉一輪,等於在數字之外長出另一層文字評分。數字沒有論證,它提供的是論證的入口。

對數字解析度與色彩慣例的計較,我們拆解全球長債拋售的視覺設計時遇過同一件事:小數點後幾位、紅與綠各代表什麼,都是介面與讀者長年建立的默契。電競數據圖的斜線語法與隊伍配色,靠的是同一種默契。

泉水裡的聲音,採訪間的背景板

同一晚湧現的還有語音切片。「Xun 泉水指揮官」這類影片,畫面是回放鏡頭,資訊全在音軌與字幕:說話者的名字以標籤壓在畫面下緣,字級統一,進出有序,雜音、笑場與搶話都被保留。標籤多以隊伍色標記,觀眾還沒聽清內容,先看懂了陣營。聲音介面的重點在材質的誠實,剪得越乾淨,可信度反而越低。

採訪是另一個介面。BLG 輔助 ON 賽後受訪時說,Bin 回歸後上中野輔聯動拉滿,這句話連同鎖定常規賽前二、季後賽勝者組第二輪的賽程一起被剪成切片。採訪間的背景板掛滿贊助商標,站位與機位固定,這套硬體的語法,我們在拆解WBG 敗局後的採訪介面設計時提過:勝方與敗方共用同一個場景,差別只在受訪者的那口氣。

引言圖卡呈現 BLG 輔助選手 ON 賽後受訪時表示 Bin 回歸後上中野輔聯動拉滿的說法

第二件球衣

在這批賽後內容裡,純數據影片是最安靜的品類。主播銳評提供立場,姿態在直播裡說小天送得多、奶油送得大;語音切片提供親密感。數據影片兩者都不給,它只交出形狀與數字,把下結論的力氣留給讀圖的人。

球衣用配色與號碼辨識選手,數據圖用形狀與分數辨識表現,它之於戰隊,功能上接近第二件球衣。品牌層面,BLG 拿到的是一套現成的敘事配件:大王回歸的標題配飽滿的多邊形,勝者組門票配 2 比 0 的字卡。賽程裡的輪空也值得多看一眼,季後賽樹狀圖上,輪空是用一格空白換來的休整,以留白作為獎勵,是賽制排版裡少見的手法。

對做設計的人來說,這些賽後圖卡是乾淨的教材。它們示範了把複雜系統壓成可分享形狀的方法,也誠實展示了壓縮的代價:六個軸線裝不下心態,十分制裝不下戰術。觀眾比誰都清楚這一點,他們照樣按下分享鍵。在一場 2 比 0 之後,爭論一枚六邊形的凹凸,本來就是觀看的一部分。