TKP 服務學習影片 — 修改記錄（初版 v5 → 修訂版 v8）

兩個版本並列：左為初版（v5）、右為修訂版（v8）。兩者皆為 1920×1080、片長 131.3 秒；字幕與配音以交叉相關法實測 0.00 秒偏差。修訂版按同學 2026-09-12 的意見逐條調整。

1 · 版本對照（影片）

初版preview_sl_v5.mp4

問題：玻璃吊橋標題左偏約 250px；四張照片偏高、下方大片留白；大合照與部分照片只露頭／被文字框遮眼；美好瞬間有標籤壓臉與轉場鬼影；尾聲白框離上方近、離下方遠。

下載初版 MP4（68 MB）

修訂版preview_sl_v8.mp4

已修正：標題真正居中且在上方不遮臉；照片組貼底、無多餘留白；照片改為偏向人臉／主體裁切；文字框數秒後自動淡出；刪去美好瞬間標籤並縮短轉場；尾聲白框上遠下近；新增課堂「濾水實驗」照片。

下載修訂版 MP4（71 MB）

2 · 逐條意見 → 修改（含證據與前後對照）

A · 「標題要移位，連續好幾張照片都把眼睛擋住了，跟嫌疑人打碼一樣」

學生原話：「標題要移位連續好幾張照片都把眼睛擋住了跟嫌疑人打碼一樣不好看」

問題：玻璃吊橋的標題同時套用了 left:50%+translateX(-50%) 與 left:0;right:0;margin:auto 兩套置中，形成「雙重置中」——實際被整體左移約 250px，且與照片區距離不足，令人感覺標題壓在照片上。

修改：移除重複置中，只保留一套 left:0;right:0;margin:auto;width:fit-content；標題上移至 top:54px；照片組下移至貼底。實測 DOM：標題中心 x=960（畫面正中），標題底 285px、照片頂 480px，完全分離不疊放。

student annotation — 同學標註：紅框圈出照片橫排、箭頭向下要求整組下移；標題框旁手寫 “FIcp”（fix）

B · 「四張照片不能放在中間偏上，下面留白太大，整體往下移動」

學生原話：「四張照片現在左右和相互的關係沒問題但是不能放在中間偏上的位置下面留白太大了整體往下移動給大標題留位置」

問題：四張照片原本位於畫面中上部（top:250px），下方留下大片空白。

修改：照片組改為貼底對齊（bottom:170px、每格高 430px）。實測：照片底邊 910px、字幕欄頂 930px → 下方只剩約 20px，留白消除。

C · 「大合照的時候，所有人都只露個頭」

學生原話：「然後大合照的時候所有人都只露個頭貌似也不太合適」

問題：照片框不高（170px）且用置中裁切，合照被切到只剩頭部。

修改：照片框加高到 380px，並新增偏向人臉／主體的裁切（object-position:center 38%）——人像由「只露頭」變成可見身體；尾聲背景改用全身可見的大合照 DSCF0914。

D · 「有些人頭被文字 box 遮住了 → 讓 box 生成一段時間之後慢慢變透明」

學生原話：「有些時候人頭被文字 box 遮住了這種情況可以讓 box 生成一段時間之後慢慢變透明避免一直遮著頭」

問題：白色文字框在整段鏡頭一直壓在背景人物頭上。

修改：所有文字框顯示約 4.5 秒後，用 3 秒慢慢淡至半透明；尾聲大框淡得更徹底（至 約 10%），頭部不再被遮住。「護源三禁」說明框因需閱讀性保持不透明。

實測淡出曲線（尾聲標題框）：1.0 → 0.86 → 0.10（約 6 秒後）。

E · 尾聲白框「離上方近、離下方遠」→ 上下關係顛倒

同學標註原文（照片上手寫）：「这里也一样白色框太靠上了他不是跟上面的目录需要建立视觉引导他需要和底下的照片建立所以需要距上方远距下方近」

問題：尾聲標題框偏上，與上方目錄近、與應有視覺關聯的下方照片遠。

修改：標題框下移到 top:190px；照片組上緣 500px。實測：框底 487.6px 與照片僅距約 12px（遠上、近下，關係正確）。

F · 美好瞬間：「♪」標籤壓在人臉上 + 轉場「鬼影」

修改：刪除「♪ 美好瞬間」標籤（欄目名在最上方目錄已有，不必重複）；轉場交叉淡入由 0.7s 縮短至 0.35s，大幅減少兩張照片重疊壓在人臉上的「鬼影」。另外，照片裁切改為偏向主體（center 40%）。

G · 新增：課堂「濾水實驗」照片（呼應 Lucia 的台詞）

老師補充：「also the last scene Lucia refers to the science class we should present some photos from the class」

修改：尾聲三張照片改為課堂與合照：濾水實驗（DSCF0907）、老師講解（DSCF0908）、大合照（DSCF0913）。

3 · 同學引用的設計原則（我們照此修正）

4 · 版本歷史

版本	內容
v5（初版）	1080p 起點。標題雙重置中 bug、照片偏高、只露頭、文字框不透明、美好瞬間標籤壓臉、無課堂照片。
v6	照片下移、加入課堂照片、標題初步調整。
v7	標題真正居中、刪除美好瞬間標籤、文字框開始淡出。
v8（修訂版・最新）	尾聲標題淡至近乎透明、轉場縮短、照片裁切偏向人臉／主體、貼底對齊。字幕與配音 0.00s 偏差。

技術摘要：播放器為 HTML（SCENES manifest，Ken-Burns、字幕與配音同步）；錄製以 Playwright 在 1920×1080 無頭 Chrome 擷取，再以 ffmpeg 混音（逐句配音 + 背景音樂）並編碼（x264 CRF17, preset slow）。字幕同步以 trim 去掉 Play 之前的錄製前導，使影片 t=0 等於按下播放的瞬間，16 句全部 0.00s 偏差。