在 Sketch 中加上 Prototype（原型互動） 是將設計轉化為可點擊、可體驗的介面模型的重要步驟。這可以幫助你在向團隊、客戶或使用者展示前先模擬使用流程，驗證 UX 流程與視覺結構是否合理。
🧰 Prototype 是什麼？
簡單來說，就是讓使用者能點擊你的設計稿，跳轉畫面或互動，模擬實際操作流程。
🔧 在 Sketch 加上 Prototype 的基本流程
✅ 適用版本：
Sketch 自 69 版起內建 Prototype 功能。無需外掛（但也可搭配 InVision 或 Framer 進階互動）。
📌 基本步驟：建立互動連結
1️⃣ 選取一個 可點擊元件
- 按鈕、圖片、文字等（通常是 CTA 或 menu）
2️⃣ 加上互動點（Prototype Hotspot）
- 在右側的 Prototype 面板 中：
- 點擊 ➕ 加上一個 Link
- 選擇要連到的畫面（Artboard）
- 選擇轉場動畫（如 Instant、Slide in、Push）
3️⃣ 設定首頁（Start Point）
- 在你想開始預覽的畫面上，右鍵選擇：
Set as Start Point
4️⃣ 使用「Preview」功能模擬
- 點擊右上角播放鍵 ▶️
- 開啟預覽視窗進行點擊測試
🛠 Prototype 設定選項解說
| 選項 | 說明 |
|---|---|
| Destination | 點擊後要跳到的 Artboard（頁面） |
| Animation | 畫面轉場效果（Slide / Push / Dissolve） |
| Maintain scroll position | 跨頁時保留滾動位置 |
✨ 進階使用方式
🔄 畫面之間的互動流程（User Flow）
你可以：
- 建立多個 Artboards，例如 Login → Home → Profile
- 把所有 CTA 加上對應的 Link
- 在畫布上拉線連結元件與頁面，即可形成 Flow Map
🎥 Prototype 展示
- 點選
Window > Preview可進行點擊模擬 - 匯出互動原型給他人檢視：
- 上傳到 Sketch Cloud
- 或匯出為 InVision / Framer / ProtoPie（進階）
🔗 可與 Prototype 結合的外掛（擴充互動）
| 外掛 / 平台 | 功能 |
|---|---|
| InVision Craft | 上傳至 InVision 並設定 Hotspots |
| ProtoPie Plugin | 匯出 Sketch 元件到 ProtoPie 互動工具 |
| Framer Plugin | 將 Sketch 畫面匯入 Framer 做高互動原型 |
💡 實作練習建議
你可以先從簡單的 3 頁原型開始：
📱 App 原型練習（範例）
1. 登入頁（含登入按鈕）
2. 首頁（點擊卡片）
3. 詳細頁（含返回箭頭）
- 每個頁面設計好後：
登入按鈕→ 跳轉到首頁卡片點擊→ 跳轉到詳細頁返回箭頭→ 返回首頁
📤 輸出你的 Prototype
| 輸出方式 | 建議使用場合 |
|---|---|
| Sketch Cloud | 分享給團隊即時檢視 |
| 匯出為影片（用螢幕錄影） | 用於作品集展示、簡報場合 |
| PDF Flow Map | 作為開發交接的文件 |
| 匯出至 Framer | 進階動畫 / 滑動手勢展示 |
✅ 小結：Sketch Prototype 的價值
| 好處 | 說明 |
|---|---|
| 不需寫程式即可點擊互動原型 | 適合 UX 早期驗證、Pitch 提案 |
| 幫助開發理解畫面跳轉邏輯 | 減少溝通成本 |
| 展示用戶流程、視覺邏輯與動畫過渡 | 提升整體專案專業感 |