公司新闻

亚娱在线新闻

无代码动效神器!教你用HYPE3做APP原型的基础过场(附神器)

发表时间:2022-07-05 09:45:22 | 作者:亚娱下载 来源:亚娱官方app

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

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

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

  (好像得搭梯子才可以访问,木有梯子同学可参见:《Sketch神助攻!无代码做动效神器Hype3入门教程》)

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

  (表示做自己的东西实可以直接拿 Mockup 的 jpg 或 png 图直接上!)

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

  8. 设定动作,虽然手机上不会有光标,但我还是喜欢把可触发的区域光标换成手指,在 Browser 预览时可以快速确认自己Link设对了没有。

  9. 记得,所有场景、图层什么的,要重新命名成有意义的名字,当页数和组件一多时才不容易出错。

  10. 像 Keynote 一样,可以一次做了好几个组件,选起来好拷贝到其他场景贴上。

  (图层前后会影响操作和组件显示,如果有时候发现某个地方怎么点都没效果、或是看不到,检查下图层顺序。)

  14. 这个 Btn 点下去、会由下往上出现歌曲列表页。记得设定「推动」(由下往上)。

  (当很多页面都有一样的回前页、Tab 的Link要处理时,可以先做完一页,剩下 Copy、Past 就好。)

  会出现一个 HTML 档和一个文件夹。把这两个档传到服务器上,就可以用手机开网址测试了。

  如果想预览自己做的如何,工具栏上有个 Chrome 或 Safari 的 icon,按下去就是了。不过它不是实时的,每次修改存盘就要再点一次这 icon 重新产生预览,直接点 Browser 重新整理看到的会是修改前的样子。

  输入你的Prototype网址,就可以像真的 App 一样,用手机做测试了。

  听到很多言论说在中国程序员是吃青春饭的,那么产品经理呢,也吃青春饭吗?

  人人都是产品经理()是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立11年举办在线+期,线+场,产品经理大会、运营大会50+场,覆盖北上广深杭成都等20个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。