投影片的視覺品質有兩個層次：不干擾與協助理解。第一層靠約束（一套網格、一組型級、四個顏色），第二層靠選對表達形式（該用圖的地方不要用表）。多數人的投影片卡在第一層以下，於是花大量時間在第二層做不出效果——一張精心設計的圖表放在字級混亂、留白不一致的版面裡，仍然難以閱讀。
一、先固定約束，再談設計
一份 deck 應該在動手前確定四件事，之後每一頁都不再重新決定：
| 約束 | 建議 | 理由 |
|---|---|---|
| 一套網格 | 單一內容邊距，全 deck 不變（1920×1080 用 100–160 px） | 邊距不一致會讓翻頁產生輕微跳動，累積成疲勞 |
| 一組型級 | 五級：hero 140–200 / 章節 80–120 / 頁標 56–80 / 內文 32–44 / 標籤 22–28 | 級距明確才能靠大小表達層級，而不用靠顏色或粗體 |
| 四個顏色 | 背景、主文字、強調、次要（muted） | 顏色少，強調才有效；第五個顏色會稀釋前四個 |
| 一種美學 | 極簡／編輯風／復古／粗獷，選一種，不混 | 混用會讓聽眾持續花費一點注意力在「這是什麼風格」 |
這四條正好就是 open-slide 的 /slide-authoring 內建規則（一個背景、一個主文字、一個強調、一個次要；一個 display 字體 ＋ 一個內文字體；全 deck 一套網格；一種美學不混）。它們寫在 agent 讀得到的地方，所以生成出來的頁面天然一致——這是 slides-as-code 相對圖形工具的實質優勢之一，見 11。
多份 deck 要看起來像同一家的，就把這些約束抽成 theme：open-slide 的 theme 是 themes/<id>.md（給 agent 讀的配方：色票、字體、版面、固定元件、動態）＋ themes/<id>.demo.tsx（可執行的預覽 slide）成對存在。
二、版面：三種夠用的骨架
進階簡報不需要二十種版面，需要三種用到熟：
- 主張頁——整頁只有一句話，垂直置中偏上，兩側大量留白。用於 big idea、章節主張、S.T.A.R. moment。
- 左右分割——左邊一句結論，右邊一個視覺。比例 40/60 或 35/65，不要 50/50（等分會讓視線不知從哪開始）。
- 全出血視覺——圖佔滿整個 canvas，文字疊在圖上低干擾的區域。用於情緒承載與章節轉場。
固定使用這三種，deck 的節奏會自然成形：主張 → 分割 → 分割 → 全出血（章節斷點）→ 主張。
三、字體與可讀性的實際限制
- 一個 display ＋ 一個內文字體，其餘用字重差異表達。中文場合尤其要注意：中英混排時英文字體與中文字體的視覺大小（字面率）常差 10–15%，需要微調英文字級或行高，否則同一行看起來不齊。
- 行長：內文一行不超過約 45–60 個西文字元（中文約 25–35 字）。1920 px 寬的 canvas 若讓文字橫貫全寬，一行會超過 100 字元，眼睛換行會失去位置。
- 行高：標題 1.2，內文 1.5–1.7。標題行高過大會讓兩行標題看起來像兩個獨立元素。
- 不要用斜體強調中文。中文沒有真正的斜體，多數環境是機械傾斜，可讀性明顯下降。用字重或顏色。
四、顏色與投影環境
投影機的實際對比度與色域遠低於你的螢幕，且會議室通常不會全暗。三條實務規則：
- 深色底在明亮會議室風險高。 深底淺字在螢幕上優雅，在被環境光洗白的投影幕上會變成灰底淺灰字。若場地不確定，淺底深字是較安全的選擇；若已確認場地可調暗，深底效果較好。
- 不要靠純飽和色表達差異。 投影機常把飽和紅、飽和藍壓得很近。用明度差表達差異，顏色只作輔助——這同時解決色覺障礙的可讀性。
- 強調色只用在一個地方。 一頁裡出現三處強調色，等於沒有強調。
五、資料視覺化：把圖表當成論點來設計
投影片上的圖表與報告裡的圖表是兩種東西。報告的圖表要能被探索，簡報的圖表要在 5 秒內傳達一個結論。
改造規則：
- 標題寫結論，不寫變數名。 「北區營收（2024–2026）」→「北區在改版後三個月翻倍，其他區持平」。
- 只留一處高亮。 其他序列一律降到 muted 灰。要比較的是誰，就只有誰有顏色。
- 刪掉圖表垃圾。 格線降到幾乎看不見或全刪、去掉外框、去掉圖例（標籤直接放在線的末端——這是 spatial contiguity 原則）、軸只留必要刻度。
- 不要用 3D、不要用雙 Y 軸。 3D 扭曲面積判讀；雙 Y 軸讓任何兩條線都能被排出想要的關係。
- 表格超過 5 列 × 4 欄就不要放在正文。 改成圖，或搬進附錄並在正文只放結論。
在 open-slide 裡圖表是普通的 React 元件，但有一條硬約束值得注意：workspace 的 agent 規則明確禁止新增相依套件（只用 React 與標準 Web API）。這代表不會有 chart library，圖表要嘛手寫 SVG，要嘛用 CSS。實務上這反而是好事——簡報用的圖表通常只是幾條 path 與幾個標籤，手寫 SVG 在 1920×1080 的固定座標系裡非常直觀（座標寫下去就是最終座標），而且沒有任何函式庫的預設樣式要對抗。若確實需要複雜圖表，做法是在其他工具產圖後匯出成資產放進 slides/<id>/assets/。
六、圖片與 logo
- 照片要嘛全出血，要嘛不要放。 半大不小、加了圓角陰影的圖片是最常見的視覺噪音來源。
- 不要在每頁放公司 logo。 它每頁都出現、每頁都不傳遞訊息，是 Coherence 原則的典型違反。放封面與封底即可。
- 品牌 logo 用向量。 open-slide 內建 svgl 目錄（1500+ 品牌 logo）可直接搜尋插入，避免從網頁抓來的低解析度 PNG 在 1920 寬的畫布上糊掉。
- 佔位圖要明確。 open-slide 提供
ImagePlaceholder，是一個「代表這裡需要一張真實圖片」的具型元件，比隨便找一張暫用圖好——後者常常一路留到正式簡報。
七、動畫：三種正當用途，其餘都是噪音
（與 05 呼應，此處補實作。）
open-slide 的預設是沒有轉場——除非 deck 匯出 transition 或某個 Page 自帶覆寫，頁面直接切換。要加時，SlideTransition 分 exit / enter，各自可設 duration、delay、easing 與 keyframes；進入的那一頁決定用哪組（Agenda.transition ?? module.transition），反向導航則用「你要回去的那一頁」的設定。轉場期間 wrapper 會暴露 --osd-dir（1／-1）與 data-osd-dir（forward／backward），讓同一組 keyframes 能在反向時鏡像。prefers-reduced-motion: reduce 自動被遵守。
實用參數：內容頁的轉場控制在 150–250 ms，章節頁可以到 400–600 ms（讓斷點在感官上「重」一點）。超過 600 ms 的轉場，在連續翻頁時會讓講者被迫等待。
跨頁維持同一個物件用 MorphElement（需在 transition.morph 開啟）。它的正當用途只有一個：同一個東西從 A 位置移到 B 位置，例如一張圖從全出血縮成角落的縮圖，或一個數字從標題移進表格。用在不同的東西之間，就變成花招。
八、逐步揭露的設計原則
Steps / Step 的使用有一條容易被忽略的規則：先設計「全部揭露完的最終狀態」，再決定哪些部分值得先藏起來。原因是 open-slide 的頁面會同時被掛在縮圖列、總覽格、匯出與 presenter view 上，而反向進入或跳轉進入時 Step 一律呈現完整狀態——如果最終狀態本身不是一個完整的構圖，這些地方就會看起來壞掉。
其他規則：Step 必須是 Steps 的直接子元素（巢狀或無父層的 Step 會直接完整顯示）；非 Step 的子元素立即顯示；多組 Steps 依文件順序串接；預設淡入 180 ms，reduced motion 下退化成瞬間顯示。
不要每頁都包 Steps。標題頁、引言頁、單張圖表頁、全出血影像頁，整頁一次呈現通常更好。
延伸
來源
- open-slide 型級／空間／視覺方向規則：/docs/skills/slide-authoring；theme 檔案結構：/docs/core-feature/themes
- 轉場與 morph：/docs/primitive/transition、/docs/primitive/morph-element；逐步揭露：/docs/primitive/step
- 資產與 svgl、
ImagePlaceholder：/docs/core-feature/assets-manager、/docs/reference/image-placeholder