Hype 3 是一款強大的 HTML5 動畫與互動製作工具，非常適合用來快速建立 App 原型。官網提供試用版（tumult.com/hype/），介面支援繁體中文，定價親民，值得先下載體驗。

場景設定：以 iPhone 內建音樂 App 為例

首先建立新文件，將場景尺寸設為 640×1136 px（iPhone 5/5s/SE 解析度），畫質更細緻。因畫面較長，建議將時間軸與圖層面板移至右側，方便操作。

匯入設計稿圖片

直接將手機截圖或設計好的 Mockup 圖（JPG/PNG）拖入 Hype 3 場景中，即可作為原型基底。

設定互動熱區

1. 在畫面上繪製矩形，覆蓋需點擊的區域（如 Tab Bar 的第二個圖示）。
2. 在右側屬性面板將填色與描邊設為「無」，使其透明。
3. 為該矩形設定「滑鼠進入」光標為手指圖示，方便瀏覽器預覽時確認連結範圍。
4. 在動作面板選擇「跳轉至場景」，並設定轉場效果。

圖層命名與複用技巧

所有場景、圖層、元件務必重新命名為有意義的名稱（如「btn_music」、「scene_nowplaying」），避免頁面增多時混淆。同類元件可群組選取，複製貼上至其他場景，保持一致性；注意圖層順序影響點擊與顯示優先級。

轉場動效設定

iOS 原生轉場多為「推動」效果：

• 主導航由右往左推入（Push Left）
• 底部彈出選單由下往上推入（Push Up）
• 關閉彈出層由上往下推出（Push Down）

在場景切換動作中選擇對應的「推動」方向，持續時間建議 0.3 秒，可依手感微調。

匯出 HTML 並在真機測試

選擇 File > Export as HTML5 > Folder，命名後匯出。將產生的 HTML 檔與資源資料夾上傳至伺服器，即可用手機瀏覽器開啟測試。工具列上的 Chrome/Safari 圖示可快速預覽，但非即時更新，修改後需重新整理。

推薦：全螢幕原型瀏覽器 Frameless

Frameless 是免費的 iOS 專用瀏覽器，無狀態列、無工具列，真正全螢幕體驗，最適合測試 Web App 原型。輸入原型網址即可像真 App 一樣操作。

範例連結

掃描下方 QR Code 或用手機開啟 https://goo.gl/0X0sWV 即可體驗本文完成的音樂 App 原型（建議用 Frameless 開啟）。

熟練後約 20 分鐘即可完成上述流程。範例細節仍有優化空間（如底部彈出不應整頁推走），留待進階分享。