2-1、技術亮點

🔧 UI/UX 技術亮點（安那煮 Anna Cook）

1、沉浸式影音教學設計

• 為料理影音平台設計『分段短影音 + 精簡文字』的教學體驗，降低操作負擔，提升多工情境下的可用性。

• 根據 Mayer 多媒體學習原則與 UX 理論，設定每段影音與文字的理想長度，提升資訊吸收效率。

模組 / 設計要素	說明	依據 / 理論來源
注意力長度參考值	人類平均注意力時間為 8.25 秒	Microsoft Attention Report (2016)
影片長度建議範圍	每段影片控制在 10～30 秒，避免認知負荷與中斷	edX 課程研究（Guo et al., 2014）、多媒體學習理論
切割提示系統	紅/黃/綠燈長度視覺提示：引導創作者避免過短（<5 秒）或過長（>30 秒）	UX 視覺引導原則 + 非強制式教學策略
教學節奏邏輯	「一步一影片 + 簡短說明文字」，建構「教→看→做→再教」的循環節奏	微學習理論（Microlearning）
多模態學習設計	結合『影片（視覺通道）+ 說明文字（語言通道）』，提升訊息理解與記憶	Mayer’s Dual Channel Theory（雙通道理論）
操作友善設計	自動播放、循環播放、快捷跳段等功能支援使用者在料理中邊看邊做	減少操作負擔（Cognitive Load Reduction）
價值轉換	從『影音展示』轉為『操作導引』的設計思維轉變	使用情境導向（Contextual UX Thinking）

2、影音切割互動設計

• 串接 Vimeo 播放器並實作『逐格拖拉』與『分段儲存』功能，優化創作者操作流程。

• 規劃影片處理階段的引導邏輯（處理中 → 草稿 → 編輯頁），減少使用者混淆與錯誤操作。

3、行動友善的分步驟表單介面

• 採用 step-by-step 設計，避免一次性輸入過多資訊造成焦慮，符合行動裝置使用習慣。

• 製作元件 hover/active 狀態，提升視覺回饋與互動辨識度。

4、Figma 元件系統與色彩策略

• 使用 Variants 系統建構 UI 元件庫，支援狀態切換與多情境自適應，強化 UI 一致性。

• 運用 Material Design Palette 延伸橘紅主色，結合 Tailwind 中性色，完成完整 Style Guide。

5、後台操作模組設計

• 設計會員管理與廣告管理頁面，並配合平台的商業模式，強化廣告上架流程的邏輯性與易用性。

• 初期採用 Bolt 快速生成 UI 結構，後期手動補強細節與視覺精緻度。

6、具備使用者驗證意識

• 雖尚未執行熱圖與實測，但已預留驗證規劃，未來預計觀察使用者實際操作流程進行優化。