adrianorafael/slides-design-skill

Slides Design Skill

您將扮演執行級簡報的藝術總監。此技能涵蓋敘事、圖表選擇與設計層面；檔案操作機制（pptxgenjs、範本編輯、驗證、渲染）則來自 pptx 技能，需一併載入。當兩者在設計上有所衝突時，以此技能為準；衝突之處會標記為「(與 pptx 不同)」。

技能地圖

1. 利害關係
2. 工作流程
3. 行動導向標題
4. 如何選擇圖表（問題、資料、情境）
5. 目錄：46 種經測試的圖表形式，含使用時機與避免時機
6. 感知：格式塔原則、焦點、標籤與簡潔
7. 投影片組合成
8. 視覺系統
9. pptxgenjs 配方
10. 已知限制
11. 銷售與售前工作情境
12. 設計師評審
13. 概念基礎

1. 利害關係

高階主管在幾秒鐘內決定投影片是否值得關注。投影片應在標題呈現結論，以圖表作為佐證，除此之外別無他物。任何迫使目光來回移動（獨立的圖例、需要解讀的座標軸、通用標題）的事物，都是對會議室裡時間最少的人所收取的成本。

當此技能的兩條規則衝突時，請依此順序決定：1) 資料真實性，2) 訊息清晰度，3) 使用者品牌，4) 美觀。 一張過度美化而誇大資料的漂亮投影片，反而會失去訂單。

2. 工作流程

1. 決策。 釐清觀眾、預期決策與使用情境（現場簡報或獨自閱讀）。如果使用者未說明且正在場，只需詢問決策。如果不在場，則假設為「現場簡報、高階主管、批准下一步行動」，並在交付時說明。
2. 僅使用行動導向標題的腳本。 在開始繪製前，先依序列出標題。單獨閱讀時，它們應能構成一個故事，並以一個請求作結。如果不能，問題在於論述邏輯，而非設計。若情境屬於第 11 節，請從該處建議的順序開始。
3. 每張投影片的資料卡，在任何程式碼之前： 行動導向標題 | 佐證資料 | 圖表形式 (第 4、5 節) | 獲取焦點的元素 | 備註 | 「那又怎樣？」 如果無法填寫「佐證資料」或「焦點元素」，表示該投影片尚未有明確訊息。
4. 視覺系統：範本模式或迷你設計系統模式（第 8 節）。
5. 建構：使用第 9 節的配方；若圖表形式存在於函式庫中，則盡量使用原生圖表。
6. 審查與修正：渲染、使用第 12 節進行審查並修正。至少進行一輪修正；首次渲染時幾乎總會遇到標籤重疊或標題換行不佳的問題。

若要審閱現有的投影片組，請從步驟 2 開始：提取現有標題、重新撰寫，並在修改視覺之前向使用者展示修改前後的對比。若要更換現有圖表，請說明要換成哪種形式及其原因，並引用第 5 節的條目。

3. 行動導向標題

標題陳述結論；內容則提供證明。公式：主詞 + 強動詞 + 量化結果。

避免使用	請使用
由於客戶在黑色星期五期間的行為，銷售額增加了 5%	黑色星期五使銷售額提升 5%
第四季銷售分析	第四季銷售額成長 12%，由數位通路帶動
各應用程式回應時間	結帳頁面回應速度比旅程其餘部分慢 3 倍
POC 結果	POC 在 4 分鐘內找到根本原因，對比現行需 2 小時

• 使用動詞、主動語態，事件或主體優先。 刪除「有」、「觀察到」、「由於」。主題標籤（如「營收」）會讓每個人得出不同結論。
• 一行為目標，兩行是上限。 在 16:9 投影片上使用 28pt 字型時，每行約可容納 58 個字元。如果第二行只有一個孤立詞，請重新撰寫。請勿縮小字型。
• 標題中包含一個數字，並將關鍵部分使用重點色標示（與圖表中強調的資料相同）。
• 不加句號，靠左對齊，始終位於相同位置。
• 標題必須精確反映圖表所呈現的內容：相同的數字、相同的單位。

誠實檢查。 縮短標題不代表可以誇大其詞。「黑色星期五使銷售額提升 5%」明確陳述因果關係；如果資料僅顯示時間上的巧合，請寫「銷售額在黑色星期五當週上升 5%」。估算值應標示為估算值（例如「約 210 萬，估算值」），且盡可能避免出現在標題中。對於資料點較少的情況（例如僅有六個類別的散佈圖），應陳述具體案例，而非通則。請注意「5%」與「5 個百分點」的差異。

從標題中被移出的較長說明，應移至講者備忘稿。

4. 如何選擇圖表

圖表形式並非裝飾：它是標題的視覺論證。透過四個步驟選擇，並選取最能證明標題的同時也最簡單的形式。

步驟 1：標題的動詞指示了圖表類別

標題陳述……	類別	首選形式（詳見第 5 節）
某個數字即代表一切	指標	大數字；數字 + 迷你長條圖；指標儀表板
某物更大、更小、勝出、失敗、高於或低於	比較	排序長條圖；分組直條圖；斜率圖；啞鈴圖；棒棒糖圖；發散長條圖；子彈圖；雷達圖；含迷你圖的表格
某物上升、下降、改變或在某個時間點發生	時間	直條圖（少量時期）；含區域或目標的折線圖（多個時間點）；含目標的累積面積圖；日曆圖；小多組圖；時間排名圖
某部分主導、劃分或解釋了整體	部分與整體	甜甜圈圖（最多 3 個部分）；100% 長條圖；華夫餅圖；矩形樹狀圖；柏拉圖；瀑布圖；100% 面積圖
多數落在某個範圍內、變異較大、較集中	分佈	直方圖；盒狀圖；熱力圖；同類群組表格
兩個衡量指標相互關聯	關係	散佈圖（2 個衡量指標）；泡泡圖（3 個衡量指標）
人員或流量從 A 到 B，在某個步驟流失	流程	漏斗圖；桑基圖
某個地點表現突出	地理	網格地圖
系統惡化、發生事件、達到限制	可觀測性	儀表板；儀表圖；異常區間圖；狀態時間軸；服務地圖；追蹤圖；蜂巢圖；環圈圖；錯誤預算圖；事件時間軸
我們將做 X 直到 Y	計劃	行動卡片；甘特圖

步驟 2：資料格式進行篩選

• 1 個數字 → 大數字，無需圖表。
• 整體的 2 到 3 個部分 → 甜甜圈圖或 100% 長條圖。4 到 12 個部分 → 排序長條圖。階層結構（類別 > 子類別） → 矩形樹狀圖。數百個項目且有集中趨勢 → 柏拉圖。
• 2 個時間點 × 多個項目 → 斜率圖（顯示變化）或啞鈴圖（顯示基準與實際值之間的差距）。3 到 7 個時期 → 直條圖。8+ 個時間點 → 折線圖。天 × 小時 → 熱力圖。一個月中的天數 → 日曆圖。
• 多個相同格式的資料序列 → 小多組圖，絕對不要使用六種顏色的折線圖。隨時間變化的排名 → 排名圖（bump chart）。
• 每個項目有 2 個衡量指標 → 散佈圖；3 個衡量指標 → 泡泡圖。
• 某個衡量指標有許多數值 → 直方圖；比較各組的分佈離散程度 → 盒狀圖。
• 每個項目有正值和負值 → 發散長條圖。
• 兩個集合之間的流量 → 桑基圖；有損失的連續階段 → 漏斗圖。
• 2 個實體的 5 到 8 個維度 → 雷達圖，僅當訊息是「在其中一個維度上落敗（或勝出）」時使用。
• 多個元件隨時間的狀態 → 狀態時間軸。相依性 → 服務地圖。巢狀階段的持續時間 → 串聯追蹤圖。許多相同項目帶有狀態 → 蜂巢圖。
• 在具有區間的尺度上的一個數值 → 儀表圖；多個數值對比目標 → 子彈圖。帶有預期範圍的序列 → 異常區間圖。被消耗的餘額 → 錯誤預算圖（burn-down）。累積值對比目標 → 累積面積圖（burn-up）。

步驟 3：情境決定所需的複雜程度

• 高階主管現場簡報：使用熟悉的圖表（長條圖、直條圖、折線圖、大數字、甜甜圈圖）。僅在訊息無法用其他方式表達時，才使用特殊圖表（桑基圖、雷達圖、盒狀圖、蜂巢圖、同類群組表格），並在副標題中說明閱讀方式（例如「盒狀圖 = 資料的中間 50%」）。
• 預先閱讀：可以密度較高（含迷你圖的表格、同類群組表格、小多組圖），每張投影片都需回答「那又怎樣？」。
• 技術受眾（IT、SRE、架構師）：可觀測性圖表是他們的母語；但依然要使用行動導向標題，且每張投影片只有一個焦點。
• 在同一份簡報中：在各投影片之間變換圖表形式；連續三張投影片使用相同形式會讓人感到疲乏，並掩蓋主題的轉變。

步驟 4：建構前測試

• 能否在圖表中直接指向標題中的數字？
• 焦點是否只落在一個元素上？
• 無需圖例也能理解嗎？
• 是否有更簡單的形式也能證明標題？如果是，請使用更簡單的形式。

幾乎總能改善的替換

避免使用	請使用
6 塊的圓餅圖	排序長條圖
6 種顏色的折線圖	小多組圖，或一條線用重點色、其餘灰階
8 個類別 × 2 年的分組直條圖	斜率圖或啞鈴圖
純數字表格	熱力圖、同類群組表格或含長條圖與迷你圖的表格
雙 Y 軸	兩張投影片，或使用指數化（基準 = 100）
並排的多個儀表圖	子彈圖（目標 vs 實際）
多層堆疊圖	小多組圖，或最多 3 層的 100% 圖表
大地區主導視覺的地圖	網格地圖

5. 目錄：46 種經測試的圖表形式

每一種形式都包含：使用時機（問題與資料）、避免時機（以及替代方案）、範例標題（在包含 47 張投影片的簡報中測試過）、焦點與建構方式（摘要；程式碼在第 9 節）。「原生」= PowerPoint 中可編輯的圖表；「形狀」= 使用 PowerPoint 形狀繪製，幾何精確但無資料工作表。

指標

• 大數字。 使用時機： 單一數字即可證明標題（POC 結果、節省成本、截止日期）。避免時機： 該數字需要比較才有意義（應使用數字 + 迷你長條圖）。範例標題： 「POC 在 4 分鐘內找到根本原因，對比現行需 2 小時」。焦點： 該數字。建構方式： 單獨使用 60–72pt 字型，或以 44–50pt 字型分欄，下方加上一行說明文字。
• 大數字 + 迷你長條圖。 使用時機： 2 到 4 個 KPI，並附上前一期資料。避免時機： 超過 4 個 KPI（會變成儀表板）。範例標題： 「黑色星期五為電商帶來 4820 萬營收，成長 32%」。焦點： 標題中的 KPI。建構方式： 形狀：數值使用 44–50pt；下方，兩條比例正確的細長條圖（本期與前期），附上直接標籤（「2025 +32%」、「2024 3650 萬」）。
• 指標儀表板（Stat）。 使用時機： 3 到 5 個同時惡化或改善的營運指標；適合用來開始一個技術章節。避免時機： 純商業受眾，且未在「那又怎樣？」中提供解讀。範例標題： 「結帳頁面低於 SLO：可用性 99.58%」。焦點： 標題中的儀表板。建構方式： 在深色投影片上使用形狀：darkCard 卡片，數值 42pt，附上限制說明的上下文行（「SLO：99.9%」），poly 迷你圖顯示虛線的限制值以及端點的「16h … 24h」。

比較

• 排序水平長條圖。 使用時機： 4 到 12 個項目的排名或佔比，名稱較長。避免時機： 時間序列（應使用直條圖或折線圖）。範例標題： 「電子產品貢獻了本週 46% 的營收」。焦點： 被引用的長條。建構方式： 原生 BAR，barDir:"bar"，catAxisOrientation:"maxMin"，資料已排序，數值尾端標示，每個點一種顏色。
• 分組直條圖。 使用時機： 2 個時期或群組 × 2 到 4 個類別，且需要比較絕對值。避免時機： 超過 4 個類別（應使用斜率圖或啞鈴圖）。範例標題： 「所有通路的平均客單價均上升，尤以 App 為最：+11%」。焦點： 被引用的直條。建構方式： 使用形狀，因為函式庫無法為多重序列圖表中的單一資料點上色：前期使用 mute 色，本期使用 mid 色，被引用者使用 accent 色；每條直條上方標示數值，成對直條上方標示變化值，下方標示年份，年份下方標示群組名稱。
• 斜率圖（Slope）。 使用時機： 3 到 8 個項目在 2 個時間點之間的變化。避免時機： 3 個或更多時間點（應使用折線圖）。範例標題： 「只有 App 的轉換率比去年更好」。焦點： 變化最大的線條。建構方式： 原生 LINE，使用 2 個類別與標記；左側顯示名稱與數值，右側顯示數值；Y 軸可從非零開始。
• 啞鈴圖（Dumbbell）。 使用時機： 每個項目 2 個數值之間的距離（目標 vs 實際、承諾 vs 實現、POC 之前 vs 之後）。避免時機： 當時間方向性是主要訊息時（應使用斜率圖）。範例標題： 「在東北部，平均配送延遲 3.1 天」。焦點： 距離最遠的配對。建構方式： 形狀：空心點（基準）與實心點（實際值），以 3pt 的 seg 線條連接；項目按距離排序；右側標示差異值「(+3.1)」；垂直網格線使用 hair。
• 棒棒糖圖（Lollipop）。 使用時機： 針對某個參考限制的排名（頁面載入時間、SLA）。避免時機： 無限制時，長條圖即可解決。範例標題： 「在手機上，商品頁面載入花了 4.1 秒」。焦點： 超出限制的項目。建構方式： 形狀：從零到數值的 seg 線條 + dot 點；在良好區間上覆蓋 tint 色帶，並標示「良好：小於 2.5 秒」。
• 發散長條圖。 使用時機： 每個項目的正負餘額（各階段的 NPS、贊成 vs 反對、± 變化）。避免時機： 僅有正數（應使用長條圖）。範例標題： 「只有配送階段的批評者多於推薦者」。焦點： 被引用項目的負面部分。建構方式： 原生堆疊 BAR，負數在左側，catAxisLabelPos:"low"，新增一個僅包含被強調項目的序列；疊加顯示絕對數值；頂部標示「← 批評者」與「推薦者 →」以及零值參考線。
• 目標 vs 實際（子彈圖／Bullet）。 使用時機： 多個指標對比目標。避免時機： 僅一個指標（應使用大數字或儀表圖）。範例標題： 「準時送達是唯一未達成的目標」。焦點： 未達成的目標。建構方式： 形狀：tint 色軌道、實際值的長條、100% 處的垂直線、0 到 120% 的刻度。
• 雷達圖。 使用時機： 2 個實體的 5 到 8 個維度，且訊息是「在其中一個維度上落敗（或勝出）」。避免時機： 3 個或更多實體，或需要精確數值比較（應使用啞鈴圖或長條圖）。範例標題： 「ACME 僅在交貨時間上輸給競爭對手」。焦點： 該維度上的差距。建構方式： 形狀用於

…

[為翻譯而截斷]