ESPN 把混亂賽程變成追蹤器

我拆 ESPN 的 2026 NBA 季後賽頁面，整理成可直接複製的 bracket tracker 模板。

我看 ESPN 的季後賽頁面很多年了，老實說它一直有個毛病：資訊塞得很滿，重點卻常常藏在裡面。比分、日期、轉播、對戰、新聞全都擠在一起，我只是想確認「誰還活著」或「下一場什麼時候打」，結果還是得掃三次。這種頁面不是不能用，是你每次打開都像在跟它討債。

這次我盯的是 ESPN 的 2026 NBA playoffs 頁面：2026 NBA playoffs: Schedule, scores, news and highlights。我後來才想通，ESPN 不是在做漂亮文章，它是在做一個直播中的真相來源。你如果把它當故事看，會嫌它亂；你如果把它當工作流看，很多設計就說得通了。

它真正賣的不是文章，是狀態

“Here’s what we know about the Eastern and Western Conference playoff brackets.”

翻譯一下就是：先把目前局勢講清楚，其他再說。ESPN 的頁面順序很明確，先是 bracket 狀態，再是系列賽結果，最後才是接下來的賽程。這個順序很務實，我要看的本來就不是長篇前言，而是現在誰領先、誰被淘汰、下一場在哪裡。

我以前做過內部戰況頁，最常犯的錯就是把敘述放太前面。結果大家進來看半天還不知道現在是什麼狀態，最後還是跑去問 Slack。ESPN 這頁雖然擠，但它至少沒有把 state 藏起來。

實操寫法很簡單：任何 live page，都先放狀態物件。你做 bracket，就先顯示誰晉級；你做 incident page，就先顯示事故等級；你做部署頁，就先顯示目前在哪個 stage。重點不是排版好看，是讓人一眼知道現在發生什麼。

• 先顯示目前贏家和輸家。
• 把已完成和進行中的 round 分開。
• 下一場或下一步要不要做，必須不用捲動就看得到。

單場比分不夠，系列戰才是重點

“All four rounds of the playoffs are best-of-seven, and teams are not reseeded after each round.”

也就是說，一場比賽只是更新，不是結論。ESPN 會把 series record 一起放上去，像 2-0、1-1、4-0、4-3，這才是我真正需要的上下文。沒有這個，我只看到一個孤零零的比分，根本不知道這隊是穩住了、正在反撲，還是快被收掉了。

我踩過這個坑很多次。你如果只追最新事件，很快就會忘記前面發生什麼。看球是這樣，做工程也一樣。只看最新 build 成功不成功，沒看到前後歷史，最後你根本不知道問題是新冒出來的，還是早就埋著。

實操寫法：每個 event stream 都要有狀態摘要。比分不是只有「現在分數」，還要有「系列賽進度」；CI 不是只有「成功/失敗」，還要有「最近五次趨勢」； onboarding 不是只有最後一步，而是整個完成度。

• 一個事件是更新。
• 一串事件才是脈絡。
• 能拿來行動的，是狀態摘要，不是原始流水帳。

主客場規則不是細節，是資料模型的一部分

“The team with the better regular-season record in each series will have home-court advantage for that series.”

翻譯一下就是：誰有優勢、誰先拿到主場，ESPN 直接寫進 bracket 的結構裡。這不是 trivia，這是賽程規則。連 2-2-1-1-1 的安排都在告訴你，哪幾場在誰家、壓力怎麼轉移。

我很在意這種做法，因為很多工具把所有欄位平鋪成表格，然後叫自己有資訊架構。其實不是。只要優先順序、責任歸屬、地點影響結果，就應該直接反映在版面結構裡，不要丟到註解或 tooltip 裡裝沒事。

實操寫法：把規則做進顯示方式。排序、分組、標籤，這些都是資料模型的一部分，不是美術。你做專案看板，就把 owner、deadline、blocker 放在同一層，別讓使用者自己拼圖。

• 責任人要跟任務同列。
• 截止時間要跟狀態同列。
• 有阻塞的項目要比沒阻塞的更顯眼。

把 live 和歷史放在同一頁，才不會斷片

“Conference semifinals,” “first round,” and “play-in tournament” all sit together on the same page.

也就是說，ESPN 沒有逼我在不同頁面之間跳來跳去找資料。這點我很買單。因為一場季後賽不是只有現在，還包含它怎麼走到現在。你如果把 live 和 history 切太開，使用者很快就會失去上下文。

我做過把即時和歷史拆太乾淨的產品，結果很快就出現一種症狀：人知道現在發生什麼，但不知道為什麼會變成這樣。這在 bracket 特別致命，在產品儀表板也一樣。只顯示當前值，沒有前幾次變化，大家只會覺得你給了一張照片，不是工具。

實操寫法：保留 current state，但不要刪掉 path。你可以把進行中、已完成、前一輪結果放在同一個區塊，讓人既能看現在，也能看過程。這對內容系統、營運面板、任務追蹤都很有用。

我自己的判斷是這樣：

• 先看現在。
• 再看怎麼走到這裡。
• 最後才看補充說明。

新聞連結是附屬層，不是主菜

“Sam Presti bet on fit over flash to turn the Thunder into champions” and “Victor Wembanyama is shattering the NBA's age curve.”

翻譯一下就是：ESPN 把賽事頁當錨點，旁邊的文章只是幫你補背景，不是來搶版面的。這個分層我很認同。比分是事實，新聞是解釋；兩者可以放一起，但不能混成一坨。

我最怕那種把分析、通知、評論全丟在同一串 feed 的產品。看起來很熱鬧，實際上很吵。ESPN 這頁至少知道什麼是 canonical data，什麼是 editorial layer。你先拿到真相，再去看故事，順序不能反。

實操寫法：內容分三層。第一層是狀態與下一步，第二層是結果與歷史，第三層才是評論、延伸閱讀、傷兵消息。這樣做，操作資訊不會被敘事蓋掉。

• Layer 1：current state + next action。
• Layer 2：recent results + completed history。
• Layer 3：analysis + related reading。

真正會被收藏的是賽程，不是 bracket 本體

“Game 3: May 23 at Cleveland (8:00 p.m. ET, ABC)”

也就是說，最能讓人立刻行動的其實是下一場什麼時候打、在哪裡打、誰轉播。bracket 很重要，但賽程才是人會回來看的東西。因為大家不是每秒都想看整張圖，他們只想知道下一個時間點。

我一直覺得很多頁面把摘要做得很像摘要，卻忘了摘要真正的用途是幫人安排下一步。對球迷來說是下一場；對工程團隊來說是下一次 release；對營運來說是下一個 deadline。你如果沒有把 next action 放大，頁面就只是在陳列資訊。

實操寫法：把未來導向放在最前面。下一場、下一版、下一個會議、下一個 checkpoint，一律用最清楚的格式寫出來。如果有時區、頻道、地點，也直接放旁邊，不要讓人自己猜。

我的排序原則很土但好用：

• Current state first.
• Next action second.
• Historical context third.

可抄的模板

## Live bracket tracker template

### Current state
- Round: [conference finals | semifinals | first round | play-in]
- Active series:
  - [Team A] vs. [Team B] — [A leads 2-1 | tied 1-1 | B wins 4-0]
  - [Team C] vs. [Team D] — [status]
- Next game: [Game number], [date], [time], [venue], [network]

### Bracket view
#### Eastern Conference
1. [Seed] [Team] vs. [Seed] [Team]
2. [Seed] [Team] vs. [Seed] [Team]
3. [Seed] [Team] vs. [Seed] [Team]
4. [Seed] [Team] vs. [Seed] [Team]

#### Western Conference
1. [Seed] [Team] vs. [Seed] [Team]
2. [Seed] [Team] vs. [Seed] [Team]
3. [Seed] [Team] vs. [Seed] [Team]
4. [Seed] [Team] vs. [Seed] [Team]

### Series detail format
- [Team A] vs. [Team B] — [series record]
  - Game 1: [result]
  - Game 2: [result]
  - Game 3: [date, location, network]
  - Game 4: [date, location, network]
  - Game 5 (if necessary): [date, location, network]
  - Game 6 (if necessary): [date, location, network]
  - Game 7 (if necessary): [date, location, network]

### Rules block
- Best-of-seven series
- No reseeding after each round
- Better regular-season record gets home-court advantage
- 2-2-1-1-1 format

### Context links
- Latest analysis: [link]
- Injury report: [link]
- Game recap: [link]
- Full bracket: [link]

### Copy-paste note
Use this structure for any live event page where people need:
1. The current state
2. The next action
3. The path that led here
4. A clean way to jump into deeper analysis

這份模板是我把 ESPN 頁面裡真正有用的結構拆出來後整理的，不是照抄版面，而是照抄資訊順序。你要做 live event page、內部戰況頁、運營追蹤器，都可以直接套。

原始來源是 ESPN 的 2026 NBA playoffs hub，另外 ESPN 的 NBA 主頁 也能看到它的內容分層方式。這篇的拆解和模板是我自己的整理，衍生自頁面結構，不是引用未公開資料。