Prototype

📚 學習內容：

• 認識 Prototype 原型設計的基本用途與流程
• 製作多個畫面（Frame）與元件（Component）
• 建立互動連結與動畫效果
• 使用 Smart Animate 增加動畫過渡
• 模擬點擊與拖曳行為
• 分享與預覽原型

🧠 核心概念講解：

🧩 Prototype 是什麼？

Prototype 是用來模擬使用者操作介面的流程，例如點選按鈕後跳頁、展開資訊、切換狀態等。可以用來：

• 使用者流程測試
• 設計提案展示
• 團隊溝通與開發驗證

🛠️ 操作教學與範例

✨ 範例一：基本畫面切換

1. 建立兩個 Frame：📱首頁 和 🔐登入頁
2. 插入一個按鈕：「👉 前往登入」
3. 切換至 Prototype 模式 🔁（畫面右上）
4. 拖曳藍色箭頭 ➡️ 指向登入頁
5. 設定：
   • Trigger：On Click 🖱️
   • Action：Navigate to
   • Transition：Instant 或 Smart Animate 🎞️

▶️ 預覽：按右上「Present」或「▶」按鈕即可

🌀 範例二：Smart Animate 動畫

1. 建立「卡片」的兩個狀態（縮圖 vs 展開）
2. 命名對應圖層（相同名稱才能動畫過渡）
3. 建立互動連結，Action 設為 Smart Animate
4. 設定動畫參數：
   • Duration：300ms
   • Easing：Ease In and Out 🎚️

👈 範例三：拖曳互動（Drag）

1. 插入水平清單（Auto Layout）
2. 點選圖片 → 設定 Trigger 為 On Drag
3. 建立連結至「右邊畫面」來模擬滑動

💬 範例四：彈跳視窗（Overlay）

1. 建立主畫面 + 彈跳框 Frame
2. 建立連結：
   • Action：Open overlay
   • Position：Centered
   • 選擇 Close when clicking outside ✖️
3. 可加背景模糊效果提升視覺層次

📝 練習題與任務

✅ 練習 1：三頁流程原型

畫面包含：

• 🏠 首頁（含「開始」按鈕）
• 📝 表單頁（含輸入欄與送出按鈕）
• 🎉 感謝頁（提交成功訊息）

互動要求：

• 所有切換使用 On Click ＋ Smart Animate 過渡
• 表單頁可按送出導向感謝頁

🧪 練習 2：拖曳式選單設計

設計一個可左右滑動的選單列，項目需自動排列，滑動互動使用 On Drag。

🧠 進階挑戰：模擬登入流程

包含：

• 🔐 登入畫面（帳密欄位）
• ✅ 成功登入 → 轉導至主畫面
• ❌ 錯誤登入 → 顯示錯誤提示（使用 Overlay）

🧩 加分項目：

• 使用 Component 製作共用按鈕
• 用 Smart Animate 模擬錯誤顯示的動畫效果