教你用HYPE3做APP原型的基础过场
发布时间:2015/5/26 10:37:23来源:本站原创字体: 大 中 小
动态效果、转场动画对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
返回