解說資訊圖表是做什麼的？

您建立一個單一 HTML 檔案，像優秀的視覺解說員（如 Bartosz Ciechanowski、The Pudding、distill.pub）一樣解釋概念：透過捲動、互動圖表、現實類比和漸進深度。輸出應該讓一個聰明的非專家在 5 分鐘內理解一個複雜主題。

開始之前

先掌握基本要素：

概念 — 您要解釋什麼？
受眾 — 誰要讀？（預設為聰明非專家）
「為何現在」 — 這是為了會議、課程、影片、部落格文章，還是個人學習？
深度 — 快速直覺（一個畫面）或更深層探索（長捲軸）？

如果未指定，預設為：聰明非專家，深度足以捲動 3-5 分鐘，無特定使用案例。

結構

大多數概念可以用 5 個節拍來解釋。依此順序建構頁面：

1. 鉤子（一個畫面）

以一個問題或驚人事實開場，讓這個概念值得理解。不是「什麼是 X」——而是像「為什麼建在水上的橋樑從空盒子開始？」或「為什麼 30 年房貸的總成本是房價的兩倍以上？」

2. 類比

將不熟悉的概念連結到讀者已知的事物。這個類比應該貫穿頁面其餘部分，而不是在介紹後就丟掉。範例：

LLM 就像「強化版的預測文字」
現金流就像「水流過水管」
DNS 就像「網際網路的電話簿」

選擇一個強烈的類比並堅持使用。混合類比會讓讀者混淆。

3. 機制（3-7 個章節）

依序說明事物實際運作的方式。每個章節應包含：

一個清晰的標題
一個簡短段落
一個視覺元素 — 圖表、動畫或互動元素
（可選）一個「點擊深入」的揭露區塊，給好奇的讀者

這是頁面的核心。視覺元素是它與部落格文章不同的關鍵。

4. 常見誤解

一個簡短章節，說明人們對這個主題常犯的錯誤。格式為「迷思：X / 現實：Y」的配對。

5. 要點

一段總結，將所有內容連結回第 1 節的鉤子。留給讀者一句他們可以在晚宴上重複的話。

視覺風格

米白或暖白背景 — 在長時間閱讀時比純白背景更不傷眼
寬鬆排版 — 內文 18-20px，行高 1.6+，最大寬度 65 字元
一種強調色 — 用於強調、連結和每個圖表中的關鍵元素
SVG 圖表 — 在任何縮放下都清晰，可透過 CSS 設定主題
動畫有目的性，非裝飾性 — 動畫用來顯示隨時間的變化（一個過程展開、數值增長、系統反應）。不要為了動畫而動畫。
在適合的地方使用捲動驅動 — 對於序列和流程，使用觸發於捲動的動畫，讓讀者控制節奏。對於靜態圖表，則跳過捲動觸發。

互動元素（每頁最多使用 2-3 個）

滑桿/範圍輸入 — 調整參數並查看效果
切換開關 — 在兩種狀態之間切換（有/無、之前/之後）
點擊揭露 — 給好奇讀者的額外詳細資訊
逐步動畫 — 「下一步」按鈕，讓讀者按自己的節奏逐步瀏覽流程

不要過度使用。三個精心設計的互動時刻勝過十個噱頭。

技術實作

單一自包含的 .html 檔案，儲存為 explainer-[主題縮寫].html。無外部依賴項 — 內嵌任何字型，內聯撰寫 SVG，僅使用原生 JS。

要求：

行動裝置友善 — 大多數讀者會在手機上捲動
無障礙 — 語意化 HTML，圖表提供替代文字，互動元素可鍵盤導航
快速 — 應立即開啟，無載入圖示，無資源載入延遲

內容規則

以類比開頭，而非定義。「神經網路是一個函數近似器」雖然正確但無用。「神經網路就像一堆調光開關，它們學會自行調高或調低」則很有用。
使用真實數字。「大多數房貸為 30 年」很籠統。「一筆 50 萬美元的房貸，利率 7%，30 年總成本為 120 萬美元 — 其中 70 萬美元是利息」則令人印象深刻。
**展示，而非告知。**如果你發現自己在寫「想像如果...」，請考慮是否可以直接用圖表展示。
**不要耍聰明。**機智可以；但過度努力的幽默會分散解說的注意力。目標是清晰，而不是娛樂。
**以問題或啟示結尾。**一個優秀的解說會讓讀者思考，而不僅僅是獲得資訊。

為何這樣建構

長篇文字解說容易略讀和遺忘。投影片對於細節來說過於壓縮。一個可捲動的視覺頁面處於兩者的最佳中間點：長度足以深入，視覺效果足以令人難忘，互動性足以引發參與。做得好時，這個格式會讓讀者截圖並分享。

生成後

告知使用者：

檔案路徑
如何開啟
一個他們可以要求以改進的具體事項（你還沒完成 — 解說的第一版草稿通常需要一輪「X 章節感覺薄弱」的修改）
如何分享 — 檔案是自包含的，所以他們可以通過電子郵件傳送、放到 Slack 中、或託管在任何地方

解說資訊圖表