跳至主要內容

觀點 · Essay

從亮起的兩顆圓點,到手裡的那三個賽點:T1 打 KC 的設計語言

五局三勝的計分橫幅上兩顆實心圓點亮在同一側,本文從賽點的量詞文法、格點式計分、紅黑對藍白的品牌色票到熱搜詞條的混排節奏,讀一場電競 BO5 對決被排成版面的設計語言。

設計觀察 ·
從亮起的兩顆圓點,到手裡的那三個賽點:T1 打 KC 的設計語言

世界大賽淘汰賽的轉播畫面上緣,有一條不到畫面高度十分之一的橫幅。左側掛著 T1 的紅黑盾形標誌,右側是 KC 的藍,隊名以粗體無襯線的字母縮寫排在徽章旁邊。兩個隊徽之間,五顆小圓點等距排開,其中兩顆已經實心,亮在同一側。比賽還在往第三局走,微博的熱搜先把這個進行中的狀態收攏成一行字:T1打KC拿到三個賽點。十一個字元,一種尚未定局的比分,就這樣被排成了可以點閱、可以轉發的版面。

這行詞條值得先讀它的構詞。T1 與 KC 各佔兩個字符,一組韓國俱樂部的縮寫,對上一組法國俱樂部的縮寫,中間用一個「打」字接起來。漢字的方塊寬度與拉丁字母的窄身混排在一起,四個字母夾著七個方塊字,視覺重量卻大致對稱:兩個隊名等長,動詞落在正中央,像一根短暫的轉軸。

一行詞條的計數文法

「拿到三個賽點」是這行詞條裡最有設計感的一段。五局三勝的賽制裡,一方取得兩局領先之後,剩下的每一局都具備終結系列賽的資格,三個還沒開打的局,換算下來就是三個賽點。詞條的動詞選了「拿到」,把一個純粹的計分狀態講成一個完成動作,主詞是 T1,受詞是三個賽點,句型乾淨得像一筆成交紀錄。

量詞落在「個」。賽點本身沒有實體,轉播畫面上沒有任何一格寫著賽點兩個字,它是賽制規則的算術副產品。但「個」這個量詞把它鑄成硬幣的形狀,一枚一枚可以拿在手裡,也可以一枚一枚被對手討回去。抽象的領先狀態,經過一次量詞的選擇,變成可清點的庫存。

這套計數語言借自桌球和排球。先逼出徵分門檻的一方,接下來的每一分球都可能結束比賽,那些可能性加總起來,解說臺把它們統稱為賽點。電競的 BO5 沿用了這套口語,只是計數的單位從一顆球放大為一局約半小時的比賽。懸念的顆粒變粗,單一狀態承載的分量就變重,這是賽制設計裡最古老的一種算計。

統計圖卡呈現 BO5 賽制中 T1 於 2 比 0 領先後,剩餘三局皆具備終結系列賽資格的換算關係
三個還沒開打的局,換算成三個賽點。

五顆圓點的格點文法

傳統體育的比分是開放數字。桌球打到 11 比 7,籃球打到 102 比 98,分數沒有上限,版面用兩組不斷跳動的數字承載它。BO5 的計分橫幅換了一種文法:五顆圓點,實心代表已經拿下,空心代表尚未到來,滿三格即定局。數字被替換成格點,比賽的終點從一個未知的位置,變成畫面上看得見的第五格。

格點的好處在於殘量可以直接目視。二比零的此刻,一側亮著兩格,另一側全空,五格裡有三格屬於還沒發生的未來。觀眾不需要換算,掃一眼就知道懸念還剩多長。同一套文法,我們先前在BLG 零封 DK 的轉播版面裡讀過:五局制圓點的留白,以及晉級樹上等著被填入的最後一格。橫掃與拉鋸的兩種情境,讓同一排圓點呈現出完全不同的傾斜感。

計分橫幅之外,轉播畫面用一整排橫向欄位把戰況折算成可比較的數值,經濟差與防禦塔數是最常見的兩欄。每個欄位都在做同一件事:把幾十分鐘的戰局,壓縮成任何時刻切入都能讀懂的快照。賽點詞條能夠成立,靠的正是這套已經把比賽欄位化的視覺基礎設施。

清單圖卡列舉電競 BO5 轉播畫面上的五顆計分圓點、隊徽隊名、經濟差對照欄、防禦塔擊殺統計與晉級樹空格等欄位
把一場系列賽折算成快照所需的欄位。

紅黑與藍白的預設色票

這場對決的色票在開賽前就已經寫好。T1 的識別是紅與黑,KC 的識別是藍,兩個俱樂部的品牌色放在一起,正好湊成介面設計裡最保險的對比組合。紅與藍在色相環上近乎對角,明度拉得開,放在深色底的轉播橫幅上,兩側隊徽與計分圓點不需要複雜的協調就能維持可讀性。

競技本身的染色慣例也站在這組配色這邊。召喚峽谷分成紅方與藍方,小地圖的邊框、擊殺通知、回放標記都沿著紅藍兩側展開。當隊徽色與賽側色恰好相容,轉播的視覺系統幾乎沒有額外的協調成本。韓國俱樂部對法國俱樂部的跨區對決,國籍與賽區的敘事,在畫面上先被簡化成兩塊色票的對峙。

KC 的藍在歐洲賽區是有名的識別,這家以應援聲量著稱的法國俱樂部,把主場的藍帶到了世界賽的舞臺。T1 的紅黑則長年出現在世界大賽的深色舞臺燈光裡,高飽和的紅在各種直播訊號下幾乎不失真。兩種色票的耐用度,都是被多年的轉播畫面反覆驗證過的。

圖卡以 T1 的紅黑識別與 KC 的藍色識別兩組品牌色票,呈現這場對決在轉播畫面上預先成立的配色對比

看不見的狀態欄

賽點在版面上沒有專屬位置,它卻決定整個畫面的重心。二比零之後,解說的句子變短了。鏡頭在選手臉上停留得更久,重播的挑選也圍著同一個問題打轉:這一局會不會結束。所有的欄位照舊運作,傾斜卻已經發生。賽點像一個程式從未渲染的狀態欄,懸在計分橫幅上方,每個觀看的人都自行把它補上了。

局與局之間的設計也在為這種狀態服務。Ban/Pick 介面、局間休息、下一局的倒數,BO5 把一場比賽切成五個有門檻的段落,每一段自帶完整的起落。賽制的觀感向來是介面問題,我們在瑞士輪賽制的介面爭議裡看過反向的例子:當程式把對戰組合的決定權推給抽籤動畫,公平感就從數學領域移轉到版面領域。BO5 用格點與門檻把懸念視覺化,賽點則把懸念的全部重量,壓在即將到來的那一格。

品牌層面的效應也發生在同一套文法裡。T1 的縮寫本身自帶世界賽的漫長履歷, KC 的縮寫則乘著歐洲近年少見的突破氣勢,一行熱搜把兩個字母組合的分量差,連同「三個賽點」的懸念,一起壓進十一個字元。詞條是流動的,狀態是即時的,兩者疊合之後,一場還在進行的比賽就有了可以被截圖儲存的靜態形式。

滿格之後

系列賽總會走到某一側滿三格的時刻。計分橫幅定局,晉級樹上的空格被填入隊徽,熱搜換上新的詞條,十一個字元的位置讓給下一個狀態。三個賽點若在第三局兌現,剩下的兩格永遠保持空心,版面以不對稱的姿態定格;若被逐枚討回,格點的填色會一路拉鋸到第五格,兩側的實心數在同一條橫幅上反覆易位。

計分文法本身不參與勝負。它的工作是把一場進行中的比賽,折算成任何時刻切入都能讀懂的快照,讓十一個字元的詞條有東西可以壓縮。下一次再看到那條橫幅,可以先別急著讀戰況,數一數實心與空心圓點的比例,懸念的長度,就寫在那五個小圓的間距裡。