原型解說影片 (Prototype Reel)
像真品一樣製作原型，再用影片說故事。
靜態模型只能展示畫面的樣子。它無法呈現產品的使用感受：什麼先載入、你的拇指放在哪裡、出錯時會發生什麼。這個技能建立的行為原型就像正在開發的真實產品，將其展示給他人以收集回饋，然後逐幀驅動同一個原型來渲染解說影片。不需要螢幕錄製，因此設計變更只會觸發重新渲染，而非重新錄製。
這裡的規則來自真實的審查回合。每一條都始於審查者的筆記，然後成為預設規則，讓同一條筆記無需重複提出。
使用時機（與不使用時機）
- 製作原型：當構想取決於行為時：時機、載入、過渡、手勢、邊界情況或多步驟流程。也適用於審查者不斷對圖片做出反應，而非體驗本身。
- 製作影片：當觀眾無法點擊時：循環播放的投影片、網站圖塊、非同步更新、個案研究。影片是讓原型大規模分享的方式。
- 跳過它：僅涉及版面或視覺問題，靜態畫面即可回答；以及對於非常早期的構想，線框圖成本更低。一旦方向確定，再開始製作原型。
工作流程
請依序執行。不要跳過步驟直接進行渲染。
- 載入脈絡。 取得真實設計稿（設計檔案、螢幕截圖、設計 Token）、流程與目標。詢問觀眾在觀看或點擊後應理解什麼。閱讀
references/fidelity.md。 - 先列出狀態與行為。 在編寫程式碼之前，寫下每個螢幕、狀態與過渡：載入中、空白、錯誤、成功、返回、提示訊息、邊界情況。每個一行。與相關人員確認此清單。
- 建立即時 HTML。 從
kit/shell.html開始。將螢幕重建為真實的 DOM 與真實的點擊目標，絕不使用帶有熱點的截圖。閱讀references/behavior.md。 - 親自點擊測試。 使用無頭瀏覽器，在桌面與行動裝置上執行每一條路徑。為每個狀態截圖。確保零主控台錯誤。在分享前修復所有問題。
- 分享以收集回饋。 發布一個包含說明文字與點擊提示的連結（
references/sharing.md）。按照references/feedback-log.md格式記錄每一條筆記：筆記內容、它所轉變成的規則。 - 撰寫鏡頭清單。 每個節拍一行：
時間 | 畫面內容 | 動作 | 鏡頭類型 | 故事重點。將每個節拍命名為一個鏡頭（建立鏡頭、插入鏡頭、動作剪輯、匹配剪輯、回報鏡頭；參見references/pacing.md，電影語法）。每個節拍只有一個想法。在開始製作影片前取得同意。 - 預覽，然後渲染。 在暫停的時鐘上驅動原型並捕捉幀。先發送低解析度預覽（15fps，一半大小）。僅在時間安排獲得批准後，再以全品質渲染。閱讀
references/pacing.md與references/motion-tokens.md。 - QA，然後交付。 執行
references/qa.md中的每一項檢查，並在交付訊息中說明你已檢查過哪些項目。一次修復僅針對被標記的項目。
非協商條款
- 使用即時 DOM，而非帶有熱點的圖片。圖片僅用於照片、標誌與媒體。
- 文字使用設計的 Token（字體家族、大小、行高、字距），絕不手動設定數值。確認字體已安裝在渲染環境中。
- 提示訊息與疊加層位於內容之上。它們絕不推動頁面移動。
- 每段作品使用統一的緩動家族。進入時使用緩出（ease-out），UI 中絕不使用緩入（ease-in），絕不從 0 縮放。UI 上不使用彈跳（bounce），除非是回報時刻（參見
motion-tokens.md，「播放」是為了回報）。 - 進入新畫面後，在有任何動畫之前先停留：輕量畫面約 0.9 秒，預設 1.4 秒，文字密集畫面約 2.4 秒。
- 將點擊動作與其上下文一起構圖：推近到行或群組，而非僅按鈕本身。
- 電影語言絕不覆蓋 UI 的行為。每個元素在其自身圖層上進行動畫。
- 僅在點擊時顯示點擊標記。滾動時不顯示手指。
- 幻燈片循環保持在 20 秒或更短，除非故事需要更長且相關人員同意。解說片段僅循環播放教學的時刻。
- 在任何完整渲染之前，先進行低解析度預覽。
- 未通過 QA 檢查，不得交付。
- 當審查者提出筆記時，將其轉化為規則並記錄下來。
檔案
references/behavior.md：讓原型像真實產品一樣運作references/fidelity.md：精確匹配原始設計稿references/sharing.md：設定原型以收集回饋references/pacing.md：解說影片的呈現節奏references/motion-tokens.md：緩動、持續時間與動畫模式references/qa.md：每次交付都必須通過的檢查references/feedback-log.md：筆記如何轉化為規則，附真實範例kit/shell.html：中立的原型外殼（工具列、桌面/行動裝置、裝置框架、說明文字、點擊提示）kit/proto.css,kit/proto.js：過渡、工作表、提示訊息、骨架屏、游標