【起点学院】产品经理实练营：全国五地同时启动！北京、上海、广州、深圳、成都、杭州等你来参与！
【推荐看点】：这是一篇简单易懂的实战教程，只要你会写简报PPT或Keynote，就能轻松上手！即使是对于没有技术背景的Planner和PM来说，也没有任何难度。随着动态效果和转场动画在UI设计中的戏份越来越重，功能型App也开始运用这种技巧。对于不会编写代码的设计师来说，制作能够在手机中操作的真实原型是一项挑战。但我有一种好方法可以解决这一问题：使用Hype3和Frameless工具。
为什么选择Hype3？在之前的文章《Note：Prototype 制作软件》中已经详细阐述过，这里不再赘述。让我们直接开始实战示范。
示范场景：iPhone内置的音乐App
步骤一：打开Hype3，其下载的试用版可以使用较长时间，并且提供简体中文界面。你可以尝试使用，如果喜欢再购买。它的定价非常实惠。
步骤二：因为要模拟iPhone的原型，所以需要调整场景尺寸。推荐使用640x1136px的分辨率，这样画质会更加细腻。
步骤三：由于画面是长型的，我将时间轴和图层从下方移动到右侧。
导入图片
设定动作范围
步骤五：接下来，我们为特定的动作设定触发范围，先在图上拉一个矩形。
步骤六至八：在右侧选单设定无填色、无笔划，然后在下方的Tab Bar第二个位置设定一个透明的动作触发区域。你可以设定动作，虽然手机上不会有光标，但你可以将可触发的区域光标换成手指，这样你可以在浏览器预览时快速确认自己的链接是否正确。记得将所有场景和图层重命名为有意义的名称，这样当页面和组件增多时就不容易出错。
过场方式
导出HTML文件
