教你用HYPE3做APP原型的基础过场（附神器）

这篇是最简单的过场设定、最偷吃步骤、不需要技术，只要会写简报 PTT 或是 Keynote 就做的出来，所以连 Planner 和 PM 也保证上手无问题。

动态效果、转场动画对UI的戏份越来越重…其实一直都很重只是大多用在游戏上，功能型 App 运用这种技巧最近越吃越凶，且制作真正能装在手机、拿在手上操作的拟真 Prototype 对不会写 Code 的设计师来说有难度。我找到好用的方式可以解决这个问题：Hype3＋Frameless。

Hype3

官网：http:///hype/

App Store：https://itunes.apple.com

场景设定

示范： iPhone 内建的音乐 App

1.打开 Hype3 ，官网下载的试用版可以用很久，还有简中接口，先抓下来玩看看，喜欢再买。（这套定价也很便宜！）

2. 既然是 iPhone 的 Prototype，来改一下场景尺寸。我用的是 640x1136px，画质比较细。

3. 因为画面是长型的，所以我把时间轴和图层从下方挪到右边去。

汇入图档

4. 手机截图，直接扔进 Hype3 里。

（表示做自己的东西实可以直接拿 Mockup 的 jpg 或 png 图直接上！）

设定动作范围

5. 来做「动作触发的范围」，在图上先拉个矩形。

6. 右边选单设定无填色、无笔划。

7. 下方 Tab Bar 第 2 颗的位置就有一块透明的区域，也就是「动作触发的范围」。