敘事型故事動畫
使用時機
使用於客戶案例、行銷活動、產品上市、市場進入策略、個案研究、教學說明或敘事性說明，應以自包含的動畫HTML體驗播放。僅產出HTML。除非使用者明確要求，否則不要建立PowerPoint、旁白文字檔、音訊檔或影片。
比照編輯風格的Story Studio體驗，而非製作一般幻燈片式的動畫。完整的Story Studio參考檔案與一個虛構的Routewise範例位於此技能的 demo/ 資料夾中（GitHub上）。
輸入
- 故事來源：使用者提供的簡報、事實，或指定的SharePoint來源。
- 可選：故事類型、目標觀眾、語言、行動呼籲、品牌方向與目標資料夾。
- 若使用者未提供來源，則建立一個明確虛構的範例。切勿將虛構的名稱、數字、結果或引言當作真實內容呈現。
步驟
- 蒐集故事。在撰寫前先讀取提供的SharePoint來源。僅使用來源事實或使用者陳述的細節。若無提供來源，則將完成的故事標註為虛構。
- 規劃6–9個場景的敘事弧線。僅使用Story Studio系統中適合故事類型的場景：標題、統計圖、長條圖、路線、網絡、時間軸、引言、結果與行動呼籲。
- 撰寫可供旁白使用的場景資料。每個
say欄位控制在45個單詞以內，使用短句與自然停頓。標題應簡潔，僅可使用<em>進行編輯強調。所有可見的數字必須來自來源。若需要數字但未提供，則使用[placeholder]。 - 建立一個完整、可脫機使用的HTML檔案。請勿使用CDN、外部字型、外部圖片、網路請求或
<script src>。 - 復刻Story Studio的設計與使用者體驗：
- 溫暖的編輯紙質調色盤、襯線顯示字型、等寬標籤、紅色強調色、細邊框、顆粒紋理、16:9的框架舞台、報頭、運行標籤、頁碼與場景計數；
- 若包含多個故事變體時，顯示場景選擇按鈕；
- 動畫擦拭轉場、交錯文字顯現、遮罩標題行、支援減弱動畫與響應式全螢幕舞台；
- 場景特定的動畫：數字計數、長條圖填滿、動態路線與地圖圖釘、合作夥伴網絡揭示、時間軸進度、引言逐字揭示、結果彩帶爆發；
- 與旁白進度同步的字幕、場景進度條/指示器、上一步、下一步、重新開始、字幕切換、旁白切換、語音選擇器、速度選擇器、全螢幕控制、鍵盤快捷鍵與狀態文字；
- 無障礙標籤、可見的控制項、響應式行為與
prefers-reduced-motion處理。
- 旁白預設為開啟。載入時，設定旁白為啟用狀態，並立即嘗試使用瀏覽器語音合成朗讀第一個場景。保持旁白在場景間啟用，並等待每個場景的語音結束後自動前進。
- 包含語音選擇器。使用
speechSynthesis.getVoices()填入觀眾瀏覽器/系統中已安裝的英文語音，並加上「Default」語音選項。監聽voiceschanged事件，以便讓較晚載入的語音出現。選擇語音必須以該語音重新開始當前場景的旁白。請勿自創共享語音庫或聲稱特定語音適用於所有觀眾。 - 誠實處理瀏覽器的自動播放限制。瀏覽器可能阻擋可聽語音，直到觀眾與頁面互動。若被阻擋，在舞台中顯示醒目訊息，例如「旁白已就緒——選擇播放以聆聽」，保留啟用的旁白狀態，並在第一次點擊、按鍵或觸控時開始語音。請勿聲稱音訊保證能自動播放。
- 在產生完整檔案後，請勿手動編輯另一個動畫引擎。驗證結果為一個完整的HTML文件，具備可運作的控制項且無外部依賴。
- 將此網站上所有HTML儀表板與動畫HTML故事儲存至 Reports 文件庫。除非使用者要求其他目的地，否則請勿上傳或發佈至其他地方。
輸出格式
簡短回覆，包含：
- 故事的場景弧線（一行）；
- 確切的HTML檔名與連結；
- 控制項：Space 播放/暫停，左右方向鍵切換場景，N 切換旁白，C 切換字幕，F 切換全螢幕；
- 備註：語音選擇器列出觀眾瀏覽器/裝置中已安裝的英文語音，並使用所選語音進行旁白；
- 明確聲明故事是否為虛構或包含佔位符；
- 備註：旁白在瀏覽器允許時自動開始，否則在首次互動時開始。
限制
- 當提供真實來源時，切勿捏造客戶名稱、數字、引言或結果。
- 將真實引言歸因於提供的來源。
- 保持完成的體驗自包含且可在瀏覽器中開啟。
- 使用觀眾瀏覽器的語音進行旁白。
- 若語音合成或語音不可用，在舞台中顯示清晰訊息，並保持視覺故事可用。
- 若無法讀取輸入來源，直接說明，且不要捏造來源事實。