[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-espn-playoff-bracket-turns-nba-chaos-into-tracker-zh":3,"article-related-espn-playoff-bracket-turns-nba-chaos-into-tracker-zh":30,"series-industry-bb4d2203-e1f0-4a75-8013-efc73fcc9fc7":83},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":22,"views":26,"created_at":27,"published_at":28,"topic_cluster_id":29},"bb4d2203-e1f0-4a75-8013-efc73fcc9fc7","espn-playoff-bracket-turns-nba-chaos-into-tracker-zh","ESPN 把混亂賽程變成追蹤器","\u003Cp data-speakable=\"summary\">我拆 ESPN 的 2026 NBA 季後賽頁面，整理成可直接複製的 bracket tracker 模板。\u003C\u002Fp>\u003Cp>我看 ESPN 的季後賽頁面很多年了，老實說它一直有個毛病：資訊塞得很滿，重點卻常常藏在裡面。比分、日期、轉播、對戰、新聞全都擠在一起，我只是想確認「誰還活著」或「下一場\u003Ca href=\"\u002Fnews\u002Fwalrus-ai-memory-blockchain-zh\">什麼\u003C\u002Fa>時候打」，結果還是得掃三次。這種頁面不是不能用，是你每次打開都像在跟它討債。\u003C\u002Fp>\u003Cp>這次我盯的是 ESPN 的 2026 NBA playoffs 頁面：\u003Ca href=\"https:\u002F\u002Fwww.espn.com\u002Fnba\u002Fstory\u002F_\u002Fid\u002F48419498\u002Fnba-playoffs-2026-play-finals-schedule-scores-news-highlights-bracket-dates\">2026 NBA playoffs: Schedule, scores, news and highlights\u003C\u002Fa>。我後來才想通，ESPN 不是在做漂亮文章，它是在做一個直播中的真相來源。你如果把它當故事看，會嫌它亂；你如果把它當工作流看，很多設計就說得通了。\u003C\u002Fp>\u003Ch2>它真正賣的不是文章，是狀態\u003C\u002Fh2>\u003Cblockquote>“Here’s what we know about the Eastern and Western Conference playoff brackets.”\u003C\u002Fblockquote>\u003Cp>翻譯一下就是：先把目前局勢講清楚，其他再說。ESPN 的頁面順序很明確，先是 bracket 狀態，再是系列賽結果，最後才是接下來的賽程。這個順序很務實，我要看的本來就不是長篇前言，而是現在誰領先、誰被淘汰、下一場在哪裡。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779487570459-9llh.png\" alt=\"ESPN 把混亂賽程變成追蹤器\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>我以前做過內部戰況頁，最常犯的錯就是把敘述放太前面。結果大家進來看半天還不知道現在是\u003Ca href=\"\u002Fnews\u002Fwhy-llama-cpp-should-treat-turboquant-as-default-zh\">什麼\u003C\u002Fa>狀態，最後還是跑去問 Slack。ESPN 這頁雖然擠，但它至少沒有把 state 藏起來。\u003C\u002Fp>\u003Cp>實操寫法很簡單：任何 live page，都先放狀態物件。你做 bracket，就先顯示誰晉級；你做 incident page，就先顯示事故等級；你做部署頁，就先顯示目前在哪個 stage。重點不是排版好看，是讓人一眼知道現在發生什麼。\u003C\u002Fp>\u003Cul>\u003Cli>先顯示目前贏家和輸家。\u003C\u002Fli>\u003Cli>把已完成和進行中的 round 分開。\u003C\u002Fli>\u003Cli>下一場或下一步要不要做，必須不用捲動就看得到。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>單場比分不夠，系列戰才是重點\u003C\u002Fh2>\u003Cblockquote>“All four rounds of the playoffs are best-of-seven, and teams are not reseeded after each round.”\u003C\u002Fblockquote>\u003Cp>也就是說，一場比賽只是更新，不是結論。ESPN 會把 series record 一起放上去，像 2-0、1-1、4-0、4-3，這才是我真正需要的上下文。沒有這個，我只看到一個孤零零的比分，根本不知道這隊是穩住了、正在反撲，還是快被收掉了。\u003C\u002Fp>\u003Cp>我踩過這個坑很多次。你如果只追最新事件，很快就會忘記前面發生什麼。看球是這樣，做工程也一樣。只看最新 build 成功不成功，沒看到前後歷史，最後你根本不知道問題是新冒出來的，還是早就埋著。\u003C\u002Fp>\u003Cp>實操寫法：每個 event stream 都要有狀態摘要。比分不是只有「現在分數」，還要有「系列賽進度」；CI 不是只有「成功\u002F失敗」，還要有「最近五次趨勢」； onboarding 不是只有最後一步，而是整個完成度。\u003C\u002Fp>\u003Cul>\u003Cli>一個事件是更新。\u003C\u002Fli>\u003Cli>一串事件才是脈絡。\u003C\u002Fli>\u003Cli>能拿來行動的，是狀態摘要，不是原始流水帳。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>主客場規則不是細節，是資料模型的一部分\u003C\u002Fh2>\u003Cblockquote>“The team with the better regular-season record in each series will have home-court advantage for that series.”\u003C\u002Fblockquote>\u003Cp>翻譯一下就是：誰有優勢、誰先拿到主場，ESPN 直接寫進 bracket 的結構裡。這不是 trivia，這是賽程規則。連 2-2-1-1-1 的安排都在告訴你，哪幾場在誰家、壓力怎麼轉移。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779487572196-67zz.png\" alt=\"ESPN 把混亂賽程變成追蹤器\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>我很在意這種做法，因為很多工具把所有欄位平鋪成表格，然後叫自己有資訊架構。其實不是。只要優先順序、責任歸屬、地點影響結果，就應該直接反映在版面結構裡，不要丟到註解或 tooltip 裡裝沒事。\u003C\u002Fp>\u003Cp>實操寫法：把規則\u003Ca href=\"\u002Fnews\u002Fllama-cpp-local-llm-inference-cpp-zh\">做進\u003C\u002Fa>顯示方式。排序、分組、標籤，這些都是資料模型的一部分，不是美術。你做專案看板，就把 owner、deadline、blocker 放在同一層，別讓使用者自己拼圖。\u003C\u002Fp>\u003Cul>\u003Cli>責任人要跟任務同列。\u003C\u002Fli>\u003Cli>截止時間要跟狀態同列。\u003C\u002Fli>\u003Cli>有阻塞的項目要比沒阻塞的更顯眼。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>把 live 和歷史放在同一頁，才不會斷片\u003C\u002Fh2>\u003Cblockquote>“Conference semifinals,” “first round,” and “play-in tournament” all sit together on the same page.\u003C\u002Fblockquote>\u003Cp>也就是說，ESPN 沒有逼我在不同頁面之間跳來跳去找資料。這點我很買單。因為一場季後賽不是只有現在，還包含它怎麼走到現在。你如果把 live 和 history 切太開，使用者很快就會失去上下文。\u003C\u002Fp>\u003Cp>我做過把即時和歷史拆太乾淨的產品，結果很快就出現一種症狀：人知道現在發生什麼，但不知道為什麼會變成這樣。這在 bracket 特別致命，在產品儀表板也一樣。只顯示當前值，沒有前幾次變化，大家只會覺得你給了一張照片，不是工具。\u003C\u002Fp>\u003Cp>實操寫法：保留 current state，但不要刪掉 path。你可以把進行中、已完成、前一輪結果放在同一個區塊，讓人既能看現在，也能看過程。這對內容系統、營運面板、任務追蹤都很有用。\u003C\u002Fp>\u003Cp>我自己的判斷是這樣：\u003C\u002Fp>\u003Cul>\u003Cli>先看現在。\u003C\u002Fli>\u003Cli>再看怎麼走到這裡。\u003C\u002Fli>\u003Cli>最後才看補充說明。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>新聞連結是附屬層，不是主菜\u003C\u002Fh2>\u003Cblockquote>“Sam Presti bet on fit over flash to turn the Thunder into champions” and “Victor Wembanyama is shattering the NBA's age curve.”\u003C\u002Fblockquote>\u003Cp>翻譯一下就是：ESPN 把賽事頁當錨點，旁邊的文章只是幫你補背景，不是來搶版面的。這個分層我很認同。比分是事實，新聞是解釋；兩者可以放一起，但不能混成一坨。\u003C\u002Fp>\u003Cp>我最怕那種把分析、通知、評論全丟在同一串 feed 的產品。看起來很熱鬧，實際上很吵。ESPN 這頁至少知道什麼是 canonical data，什麼是 editorial layer。你先拿到真相，再去看故事，順序不能反。\u003C\u002Fp>\u003Cp>實操寫法：內容分三層。第一層是狀態與下一步，第二層是結果與歷史，第三層才是評論、延伸閱讀、傷兵消息。這樣做，操作資訊不會被敘事蓋掉。\u003C\u002Fp>\u003Cul>\u003Cli>Layer 1：current state + next action。\u003C\u002Fli>\u003Cli>Layer 2：recent results + completed history。\u003C\u002Fli>\u003Cli>Layer 3：analysis + related reading。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>真正會被收藏的是賽程，不是 bracket 本體\u003C\u002Fh2>\u003Cblockquote>“Game 3: May 23 at Cleveland (8:00 p.m. ET, ABC)”\u003C\u002Fblockquote>\u003Cp>也就是說，最能讓人立刻行動的其實是下一場什麼時候打、在哪裡打、誰轉播。bracket 很重要，但賽程才是人會回來看的東西。因為大家不是每秒都想看整張圖，他們只想知道下一個時間點。\u003C\u002Fp>\u003Cp>我一直覺得很多頁面把摘要做得很像摘要，卻忘了摘要真正的用途是幫人安排下一步。對球迷來說是下一場；對工程團隊來說是下一次 release；對營運來說是下一個 deadline。你如果沒有把 next action 放大，頁面就只是在陳列資訊。\u003C\u002Fp>\u003Cp>實操寫法：把未來導向放在最前面。下一場、下一版、下一個會議、下一個 checkpoint，一律用最清楚的格式寫出來。如果有時區、頻道、地點，也直接放旁邊，不要讓人自己猜。\u003C\u002Fp>\u003Cp>我的排序原則很土但好用：\u003C\u002Fp>\u003Cul>\u003Cli>Current state first.\u003C\u002Fli>\u003Cli>Next action second.\u003C\u002Fli>\u003Cli>Historical context third.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>可抄的模板\u003C\u002Fh2>\u003Cpre>\u003Ccode>## Live bracket tracker template\n\n### Current state\n- Round: [conference finals | semifinals | first round | play-in]\n- Active series:\n  - [Team A] vs. [Team B] — [A leads 2-1 | tied 1-1 | B wins 4-0]\n  - [Team C] vs. [Team D] — [status]\n- Next game: [Game number], [date], [time], [venue], [network]\n\n### Bracket view\n#### Eastern Conference\n1. [Seed] [Team] vs. [Seed] [Team]\n2. [Seed] [Team] vs. [Seed] [Team]\n3. [Seed] [Team] vs. [Seed] [Team]\n4. [Seed] [Team] vs. [Seed] [Team]\n\n#### Western Conference\n1. [Seed] [Team] vs. [Seed] [Team]\n2. [Seed] [Team] vs. [Seed] [Team]\n3. [Seed] [Team] vs. [Seed] [Team]\n4. [Seed] [Team] vs. [Seed] [Team]\n\n### Series detail format\n- [Team A] vs. [Team B] — [series record]\n  - Game 1: [result]\n  - Game 2: [result]\n  - Game 3: [date, location, network]\n  - Game 4: [date, location, network]\n  - Game 5 (if necessary): [date, location, network]\n  - Game 6 (if necessary): [date, location, network]\n  - Game 7 (if necessary): [date, location, network]\n\n### Rules block\n- Best-of-seven series\n- No reseeding after each round\n- Better regular-season record gets home-court advantage\n- 2-2-1-1-1 format\n\n### Context links\n- Latest analysis: [link]\n- Injury report: [link]\n- Game recap: [link]\n- Full bracket: [link]\n\n### Copy-paste note\nUse this structure for any live event page where people need:\n1. The current state\n2. The next action\n3. The path that led here\n4. A clean way to jump into deeper analysis\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>這份模板是我把 ESPN 頁面裡真正有用的結構拆出來後整理的，不是照抄版面，而是照抄資訊順序。你要做 live event page、內部戰況頁、運營追蹤器，都可以直接套。\u003C\u002Fp>\u003Cp>原始來源是 ESPN 的 \u003Ca href=\"https:\u002F\u002Fwww.espn.com\u002Fnba\u002Fstory\u002F_\u002Fid\u002F48419498\u002Fnba-playoffs-2026-play-finals-schedule-scores-news-highlights-bracket-dates\">2026 NBA playoffs hub\u003C\u002Fa>，另外 ESPN 的 \u003Ca href=\"https:\u002F\u002Fwww.espn.com\u002Fnba\u002F\">NBA 主頁\u003C\u002Fa> 也能看到它的內容分層方式。這篇的拆解和模板是我自己的整理，衍生自頁面結構，不是引用未公開資料。\u003C\u002Fp>","我拆 ESPN 的 2026 NBA 季後賽頁面，整理成可直接複製的 bracket tracker 模板。","www.espn.com","https:\u002F\u002Fwww.espn.com\u002Fnba\u002Fstory\u002F_\u002Fid\u002F48419498\u002Fnba-playoffs-2026-play-finals-schedule-scores-news-highlights-bracket-dates",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779487570459-9llh.png","industry","zh","f48789a7-09f9-4dc1-a096-3edefa8332a4",[17,18,19,20,21],"ESPN","NBA playoffs","bracket tracker","information architecture","live dashboard",[23,24,25],"先顯示狀態，不要先講故事","系列戰摘要比單場比分更有用","把 next action 放到最顯眼的位置",3,"2026-05-22T22:05:45.602335+00:00","2026-05-22T22:05:45.555+00:00","19d7d4c3-8266-4e1c-b355-a63f75ebabcd",{"tags":31,"relatedLang":42,"relatedPosts":46},[32,34,36,38,40],{"name":18,"slug":33},"nba-playoffs",{"name":19,"slug":35},"bracket-tracker",{"name":17,"slug":37},"espn",{"name":21,"slug":39},"live-dashboard",{"name":20,"slug":41},"information-architecture",{"id":15,"slug":43,"title":44,"language":45},"espn-playoff-bracket-turns-nba-chaos-into-tracker-en","ESPN’s playoff bracket turns NBA chaos into a tracker","en",[47,53,59,65,71,77],{"id":48,"slug":49,"title":50,"cover_image":51,"image_url":51,"created_at":52,"category":13},"47541f42-33f6-4432-a673-3d93d8b88236","gemini-apple-developer-stack-zh","Gemini 進入 Apple 開發堆疊","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781062380898-pnpb.png","2026-06-10T03:32:34.147949+00:00",{"id":54,"slug":55,"title":56,"cover_image":57,"image_url":57,"created_at":58,"category":13},"fac85234-56b6-42b5-904d-9e3faabd4a14","5-ai-coding-ides-real-workflows-zh","5 款 AI 編程 IDE，按工作流挑最省事","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781061495099-n7sg.png","2026-06-10T03:17:28.48076+00:00",{"id":60,"slug":61,"title":62,"cover_image":63,"image_url":63,"created_at":64,"category":13},"1b99a2d6-9a07-4e29-9c7e-21cc94c7769e","devin-desktop-windsurf-agent-hub-zh","Devin Desktop 把 Windsurf 變成代理中樞","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781060576683-lxvs.png","2026-06-10T03:02:18.748963+00:00",{"id":66,"slug":67,"title":68,"cover_image":69,"image_url":69,"created_at":70,"category":13},"0d604500-3a70-40ec-a70e-370f972a66ab","korea-nvidia-talks-ai-factory-push-zh","韓國與 Nvidia 對話，重點是 AI 工廠","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781057871797-7uxx.png","2026-06-10T02:17:21.099824+00:00",{"id":72,"slug":73,"title":74,"cover_image":75,"image_url":75,"created_at":76,"category":13},"173b8876-1867-4e0b-948f-27891d6b6364","openai-should-not-rush-its-ipo-just-to-win-the-ai-race-zh","OpenAI 不該為了搶 AI 賽道而急著 IPO","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781053365610-1hko.png","2026-06-10T01:02:19.886627+00:00",{"id":78,"slug":79,"title":80,"cover_image":81,"image_url":81,"created_at":82,"category":13},"3d7ff80a-4045-4b66-9e21-b6a8eb3b6f6d","openai-europe-privacy-policy-zh","OpenAI 歐洲隱私政策更新重點","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781052479369-yomr.png","2026-06-10T00:47:31.176745+00:00",[84,89,94,99,104,109,114,119,124,129],{"id":85,"slug":86,"title":87,"created_at":88},"ee073da7-28b3-4752-a319-5a501459fb87","ai-in-2026-what-actually-matters-now-zh","2026 AI 真正重要的事","2026-03-26T07:09:12.008134+00:00",{"id":90,"slug":91,"title":92,"created_at":93},"83bd1795-8548-44c9-9a7e-de50a0923f71","trump-ai-framework-power-speech-state-preemption-zh","川普 AI 框架瞄準電力、言論與州權","2026-03-26T07:12:18.695466+00:00",{"id":95,"slug":96,"title":97,"created_at":98},"ea6be18b-c903-4e54-97b7-5f7447a612e0","nvidia-gtc-2026-big-ai-announcements-zh","NVIDIA GTC 2026 重點拆解","2026-03-26T07:14:26.62638+00:00",{"id":100,"slug":101,"title":102,"created_at":103},"4bcec76f-4c36-4daa-909f-54cd702f7c93","claude-users-spreading-out-and-getting-better-zh","Claude 用戶更分散，也更會用","2026-03-26T07:22:52.325888+00:00",{"id":105,"slug":106,"title":107,"created_at":108},"bd903b15-2473-4178-9789-b7557816e535","openclaw-raises-hard-question-for-ai-models-zh","OpenClaw 逼問 AI 模型價值","2026-03-26T07:24:54.707486+00:00",{"id":110,"slug":111,"title":112,"created_at":113},"eeac6b9e-ad9d-4831-8eec-8bba3f9bca6a","gap-google-gemini-checkout-fashion-search-zh","Gap 把結帳搬進 Gemini","2026-03-26T07:28:23.937768+00:00",{"id":115,"slug":116,"title":117,"created_at":118},"0740e53f-605d-4d57-8601-c10beb126f3c","google-pushes-gemini-transition-to-march-2026-zh","Google 把 Gemini 轉換延到 2026 年 3…","2026-03-26T07:30:12.825269+00:00",{"id":120,"slug":121,"title":122,"created_at":123},"e660d801-2421-4529-8fa9-86b82b066990","metas-llama-4-benchmark-scandal-gets-worse-zh","Meta Llama 4 分數風波又擴大","2026-03-26T07:34:21.156421+00:00",{"id":125,"slug":126,"title":127,"created_at":128},"183f9e7c-e143-40bb-a6d5-67ba84a3a8bc","accenture-mistral-ai-sovereign-enterprise-deal-zh","Accenture 攜手 Mistral AI 賣主權 AI","2026-03-26T07:38:14.818906+00:00",{"id":130,"slug":131,"title":132,"created_at":133},"191d9b1b-768a-478c-978c-dd7431a38149","mistral-ai-faces-its-hardest-year-yet-zh","Mistral AI 迎來最硬的一年","2026-03-26T07:40:23.716374+00:00"]