wwe热搜hype3特log

来源：蜘蛛抓取(WebSpider) 时间：2019-05-14 10:49 标签： hype3

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

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

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

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

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

4. 手機截图，直接扔进 hype33 里

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

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

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

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

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

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

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

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

11. 点着个 BTN、播放中的页面是由右往左推进

12. 所以记得把过场動效改成「推动」（由右往左）。

13. 秒数我习惯设 0.3s依个人感觉不同，请自己试看看

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

15. 点了「完成」后，页面会由上往下

（当很多页面都有一样的回前页、Tab 的Link要处理时，可以先做完一页剩下 Copy、Past 就恏。）

选 HTML5、活页夹档名命名好。

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

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

这是个连「状态栏」都没有，真正全屏幕的浏览器免费！

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

我要回帖

更多关于 hype3 的文章

 

随机推荐