互動電影選擇介面如何設計焦點:讓順序、位置與回饋始終可見
圍繞互動電影的選擇疊層設計穩定焦點:規定進入位置、移動順序、遮擋處理、確認回饋和返回後的恢復點,讓鍵盤與遙控器使用者知道自己在哪裡。

開篇導讀
選擇介面的焦點必須回答三個問題:現在位於哪裡、下一步會到哪裡、確認後發生了什麼。可見焦點只是一部分;順序、遮擋和返回位置也要與鏡頭和分支狀態共同設計。
互動電影無障礙不能只在上線前檢查字幕。選擇介面、播放控制、分支狀態和媒介內容共同組成一次完整體驗;其中任何一環無法感知、操作或理解,觀眾都可能在故事中途失去繼續前進的方法。WCAG 2.2面向 Web 內容提出可感知、可操作、可理解和穩健四項原則。本文把相關原則轉成互動電影團隊可執行的製作方法,但不把單篇建議等同於合規認證;實際專案仍要結合交付平台、目標市場和殘障使用者測試確認要求。
先把目標寫成可驗收的體驗承諾
H02 的選擇在人物特寫上方出現,兩個按鈕隨字幕位置上下移動。鍵盤使用者打開暫停菜單再返回後,焦點回到頁面頂部;電視遙控器使用者按右鍵卻跳到播放器音量。兩者都能看見按鈕,卻無法預測操作路徑。
下文採用虛構短片《霧港來信》作為教學案例:觀眾在夜間碼頭追查一封被替換的信,並在倉庫、候船室和燈塔之間作出選擇。人物、路徑、測試結果和素材編號均為原創示例,不代表真實使用者案例、已完成測試或 DramaFork 自動提供的功能。
團隊先寫一句體驗承諾,再寫失敗條件。承諾要說清誰在什麼設備和情境下完成什麼動作,失敗條件則說明何時必須停止發布。例如“只用鍵盤也能完成所有選擇”比“支援鍵盤”更可驗收;“關閉動態後仍出現全屏搖移”則是明確失敗。進入選擇時把焦點放在第一項或上次明確停留項;順序跟隨視覺和語義順序;焦點環不能被字幕、彈窗或螢幕邊緣遮擋。確認後先給接收回饋,再關閉選單;取消後回到觸發選擇的控制。
用四欄表連接規則、實作和證據
| 欄位 | 本文要回答的問題 | 交付證據 |
|---|---|---|
| 觀眾任務 | 觀眾在這一節點必須感知、決定或控制什麼 | 一句可復述的任務與適用情境 |
| 交互規則 | 預設方式與替代方式是否得到同等結果 | 輸入、焦點、時間或呈現規則 |
| 分支影響 | 設定切換、回退或重進是否改變劇情狀態 | 入口、出口與保留狀態記錄 |
| 驗收方式 | 誰在何種設備上檢查,失敗退回哪裡 | 路徑編號、操作記錄與缺陷歸屬 |
H02 的兩個選擇固定為左後右順序,暫停菜單作為獨立焦點區。若在選擇期間暫停,恢復時回到原選項而非第一項;若該選項因劇情狀態失效,則移動到最近可用項並說明變化。
四欄必須引用同一個版本。只改介面稿、不改路徑記錄,會讓測試人員無法判斷舊問題是否已修復;只改程序、不更新體驗承諾,則會讓“可以操作”被誤當成“已經理解”。編輯、交互、開發和測試共同簽收的是一次可重復的體驗,而不是某張靜態截圖。
按五步把要求放進製作流程
第一步,列出主路徑、短路徑、回退路徑和無輸入路徑,標記每條路徑出現的選擇、播放控制與關鍵資訊。第二步,為每項任務寫預設方式和替代方式,替代方式必須到達相同劇情結果,不能只讓按鈕看起來不同。第三步,把規則綁定到穩定的場景編號、素材編號和狀態字段,避免改片名或文案後失去追蹤。
第四步,在精修畫面和混音之前做低成本檢查:鍵盤走一遍、放大文字走一遍、關閉動畫走一遍、暫停後再進入一次。第五步才進行跨設備和輔助技術測試,並保留實際步驟、預期結果、實際結果和證據位置。為每個疊層畫焦點進入、移動、離開圖,並記錄對應節點。用鍵盤、遙控器和螢幕放大狀態檢查焦點環;逐一打開字幕、設定和錯誤提示,確認它不被遮擋,也不會落入已經隱藏的控件。
《霧港來信》的驗收記錄不寫“看起來沒問題”,而寫成“從節點 H02 進入,啟用替代設定,完成左側選擇,系統寫入 clue_letter=true,並在 H03 首句確認該狀態”。這樣一條記錄同時覆蓋入口、動作、回饋和出口。若結果不同,團隊知道應查輸入層、介面層還是劇情狀態層。
常見失敗通常發生在系統邊界
最常見的缺陷是只在鼠標懸停時顯示樣式、焦點順序按 DOM 偶然排列、彈窗關閉後焦點消失。另一個問題是用顏色變化作為唯一標記。焦點至少需要清楚邊界或形狀變化,並與背景保持可辨認。
另一個常見問題是把輔助功能放進隱藏很深的設定頁。第一次遇到障礙的觀眾可能根本到不了那裡,因此開場、首次選擇和暫停菜單都應提供清楚入口。設定改變後要立即給出可感知回饋,並在下一節點繼續生效;如果重新加載就丟失,必須在發布前明確修復或公開限制。
自動化檢查可以發現缺少名稱、對比度數值或部分焦點問題,卻不能判斷選擇文案是否容易理解、口述影像是否洩露另一條路徑、暫停是否破壞敘事節奏。人工路徑測試和殘障使用者參與仍然不可替代。發現問題時按責任退回:內容問題給編劇或編輯,素材問題給聲音或後期,狀態問題給實作者,範圍衝突給負責人重新決策。
發布門檻要覆蓋完整流程
從播放器進入選擇、打開和關閉暫停菜單、切換字幕、返回選擇並確認,全程只有一個可見焦點;順序與畫面一致;焦點不被遮擋;確認與取消後的落點可預測。
最低發布包應包含:功能與適用範圍說明、路徑清單、設定預設值、五個語言版本的介面文字、測試設備與輸入方式、已知限制、缺陷負責人,以及一次從開場到結局的完整操作記錄。W3C 資料提供的是可引用的規範與解釋;本文的表格、節點命名和虛構案例是編輯方法,不是 W3C 規定的固定模板。
焦點規則會受播放器、瀏覽器和電視 WebView 影響。視覺稿只能說明意圖,必須在真實運行環境中檢查滾動、縮放、全屏和系統級焦點行為。
最後只做一項檢查:讓未參與製作的人依據記錄復現體驗。如果對方仍要詢問“該按什麼”“還剩多少時間”“這個提示表示什麼”或“恢復後從哪裡繼續”,交付尚未完成。把答案寫回規則與證據,再發布,能比上線後補救更早暴露分支系統中的障礙。
參考資料:W3C Understanding SC 2.4.7: Focus Visible;W3C Understanding SC 2.1.1: Keyboard。






