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

 

会选 Hype3 的原因在《Note：Prototype 制作软件》有提过，就不多说，直接从范例开始吧。

 

（好像得搭梯子才可以访问，木有梯子同学可参见：《Sketch神助攻！无代码做动效神器Hype3入门教程》）

 

Hype3

 

官网：http://tumult.com/hype/

 

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

 

场景设定

 

示范： iPhone 内建的音乐 App

 

HYPE3 APP原型 拟真Prototype

 

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

 

HYPE3 APP原型 拟真Prototype

 

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

 

HYPE3 APP原型 拟真Prototype

 

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

 

汇入图档

 

HYPE3 APP原型 拟真Prototype

 

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

 

HYPE3 APP原型 拟真Prototype

 

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

 

设定动作范围

 

HYPE3 APP原型 拟真Prototype

 

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

 

HYPE3 APP原型 拟真Prototype

 

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

 

HYPE3 APP原型 拟真Prototype

 

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

 

HYPE3 APP原型 拟真Prototype