无代码动效神器!教你用Hype3做APP原型的基础过场(附神器) - 优设网 - UISDC

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

2015/05/01 61317评论区

hype-3-app-prototype-process-1

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

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

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

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

Hype3

官网:http://tumult.com/hype/

App Store:https://itunes.apple.com

场景设定

示范: iPhone 内建的音乐 App

20150425-1

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

20150425-2

2. 既然是 iPhone 的 Prototype,来改一下场景尺寸。我用的是 640x1136px,画质比较细。

20150425-3

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

汇入图档

20150425-4

4. 手机截图,直接扔进 Hype3 里。

20150425-5

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

设定动作范围

20150425-6

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

20150425-7

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

20150425-8

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

20150425-9

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

20150425-10

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

20150425-11

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

20150425-12

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

过场方式

20150425-13

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

20150425-14

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

20150425-15

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

20150425-16

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

20150425-17

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

20150425-18

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

汇出 HTML 档

20150425-19

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

20150425-20

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

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

原型专用浏览器 —— Frameless

官网:http://stakes.github.io/Frameless/
App Store:https://itunes.apple.com

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

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

祝顺利!

范例

上面做的范例请用手机开 http://goo.gl/0X0sWV,或是扫这个 QRcode。

20150425-22

最好的浏览方式请用 Frameless 开启。

(熟练了大约20分钟内绝对搞的定上述步骤。范例有些细节、瑕疵、落差就不调整了。比如由下往上推不该是真的推走,有些更精致的设定我留着下次经验分享。)

【优设四月最受欢迎的PS教程排行榜】

Top 1:效果超棒的极简风格海报!
《AI+PS新手教程!手把手教你打造简约现代的极简海报》

Top 2:给心爱的妹子画一个Q版头像!
《萌系PS教程!手把手教你打造Q版的个人头像》

Top 3:上帝说,要有光!
《PS高手教程!教你轻松打造效果美到爆的光照效果》

原文地址:blog.akanelee.me
作者:@Akane_Lee

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量94万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/hype-3-app-prototype-process

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里