135-1060-0256
教你用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
 
返回