用 Hype 3 做动画? 不, 咱们来玩玩响应式交互原型制作

Demo 地址:

http://www.mysdes.com/demo/Zisfm/Zisfm.html

建议先打开,放着加载一会儿,页面较大,3M 多。
可触发区域:顶栏 logo,顶栏播放按钮,顶栏电台标题,顶栏 Category 菜单。共三个页面,都有响应。

 

前言:

最近 Hype 3 开始有点火起来的势头,不愧 MAS 首页推荐应用,关于 Hype 3,大家看上去都在谈论它的Html 5 动画制作的便利性,感叹再也不用挨 AE 的虐,看起来大家没有看到 Hype 3 另一个强大技能——响应式网页原型制作。

说起网页的原型制作,多数人首先想到的肯定会是 Axure 了,毕竟它几乎是每家公司在招聘产品经理的 JD 中必提的一个工具,那既然这篇博文是讲原型制作,同时又牵扯到动画,那就对比 Axure 和 AE 来讲吧。我承认 Axure 是个好软件,但还是忍不住想喷一下,版本号都7.0开头了,用起来依然卡成狗,精度太低,对移动端的原型设计支持不友好,似乎大家都感受到了 Axure 的恶意,近几年纷纷冒出各种原型工具,桌面端的,移动端的,本地的,在线的,傻瓜式的,需要一定代码基础的……(这里收集了各类原型工具 http://next.36kr.com/posts/collections/1 )

当然,没有完美的工具,Hype 3 也不完美,如果你用来做网页交互原型,那你会因一个 Hover 状态需要用动画的形式才能实现而怀念 Axure 的简单设置或动态面板(Hype 只可对按钮进行状态设置,文字或矩形不可设置);你会因缩放快捷键 Cmd+</> 和系统默认偏好设置的热键冲突而骂娘(不可自定义热键哦);不能更改中心点,好吧,其实 Hype 根本就没有中心点这个东西。喷也喷了,话说回来,Hype 在定位上,更偏向于一款 H5 动画制作软件,而非原型工具,如果要谈制作响应式布局原型,那是神器。

 

场景:

场景可以理解为某个页面,比如 demo 里做了首页,详情,分类三个页面,那对应三个场景,页面之间的切换需要通过“场景跳转”来实现,这里是和 Axure 一个很大的区别,Axure 会分三个页面来串联起来,而 Hype 在导出后,三个场景其实是在一个页面里的,这样导致的问题是,如果你放在外网,如本 demo,会导致所有文件同时加载,如果想避免一次性全部加载,可以,在右侧资源库里一个个编辑素材,取消勾选“预加载”。

布局:

布局是一个相当重要的功能,可以让你非常快捷方便的创建响应式页面,你根本不用理解什么栅格系统,你要做的只需要创建一张“基准布局”的原型,然后根据这张基准布局来在各个断点给元素重新布局,对于“基准布局”的创建,可以是中间宽度的,也可以是最大宽度的,我个人比较喜欢从最大宽度创建,然后往里缩。

 

时间轴:

时间轴窗口就没什么需要解释的了,做动画嘛,需要注意的是,Hype 提供录制功能,只要你开启了录制功能,然后拨动时间轴到某个时刻,再然后就可以对元素做变形或位移,完成后关闭录制,一段动画就完成了,非常简单,所有涉及到的参数都会自动 K 好帧,而不是 AE 里一对一的 K 帧。可以控制的属性非常多,为了界面的简洁性,Hype 需要你自定义某些属性,你需要的打上勾就可以调参了,不会像 AE 里展开一大段,其实你需要的只是位移关键帧(随意的举例,当然,可以快捷键 P,但并不是所有属性都有快捷键)。

默认会是主时间轴,同时可以建立多条时间轴,有点 AE 里的预合成的感觉,但还是有很大不同,在制作原型(非动画)的时候可以用来制作一些可供触发的事件,如 demo 里两个事件,一个是顶栏里左上角的播放和暂停,一个是 hover 顶栏搜索框。这里放在 Axure 里会用到动态面板,比如播放和暂停,搜索框的展开和折叠,Axure 会用动态面板的两个状态来做切换,Hype 里做的比较人性化一点是,你只需要制作一遍动画,第二个动作只需要在触发时勾选“倒序播放”就可以轻松搞定。

这里也会遇到一个比较麻烦的问题,Hype 里没有类似 Axure 里动态面板的显示和隐藏切换功能,那么问题来了,拿 demo 里播放暂停举例,点击播放后,播放按钮缩小并将不透明度置0,同时暂停按钮放大,不透明度到100%,由于图层顺序上,播放按钮在暂停按钮上层,虽然播放按钮看上去隐藏了,实际上只是不透明度的更改,它依然存在,这时候你会发现你根本无法点中暂停按钮,我是怎么解决的?既然是播放按钮挡住了暂停按钮导致的,那么我在播放按钮隐藏后向左位移了一下,这样就可以点中暂停按钮啦,机智 ಠ◡ಠ

 

检查器:

检查器窗口主要用来做参数控制,这里需要重点注意有主要有三个地方(至少是本 demo 制作过程中需要注意的)

第一个,场景。这里会默认勾选“应用至匹配的布局,在勾选的状态下,会影响到其他断点范围的布局,例如,在 A 场景的1024px-1440px布局里,高度是1350px,如果这时候你在勾选的状态下调整高度,会导致768px-1024px布局里高度跟着改变,如果768px-1024px布局里出现了换行,要使其保持不同高度就需要取消勾选。另外,缩放选项里,高度最好也取消勾选(缩放100%那个)

第二个,度量。这里的“可调布局”相当相当相当重要,它决定元素在页面内的固定方式,是否可缩放,是水平还是垂直缩放,居左居中居右等,几乎每个元素都需要做单独调整。

第三个,操作。操作里的默认鼠标样式为“自动”,这里有个小技巧就是,例如顶栏搜索动效,悬浮触发展开,点击空白处折叠,在首页上我是以点击视频来触发折叠,视频可点击,鼠标样式会是小手,那这时候需要修改鼠标样式为箭头了。

 

资源:

就是素材管理窗口,Hype 虽然会将你插入的图片放置在该项目的库内,但还会监测某张外部图片的变化,外部更新后会提示你是否需要更新文件。

有个小细节,Hype 可以将素材按文件大小排序,方便让你轻易找到有可优化空间的图片。Hype 会对一些大尺寸图片自行压缩,默认是勾选压缩的,如果比较在意清晰度可以取消,需要注意的是,一些尺寸较大的文件,如果不是显示在首页,可以取消勾选“预加载”用以加快网页载入时间。同时,Hype 会自动生成@2x,@1x 文件,也很大程度上提升了低清屏上的网页加载速度。

 

Hype Reflect:

Hype 的 iOS 客户端,相当于 Sketch 的 Mirror(良心在不像 Mirror 还要另外收费),用来实时预览效果,需要注意的是如果你的 Mac 上装有梯子软件或防火墙软件(如 ShadowSocks 和 Little Snitch),务必注意不要开启梯子的全局模式,否则本地和客户端都不可预览,防火墙什么的也不要把 Hype 屏蔽了。

 

对比Axure 与 After Effects:

对于响应式原型的制作,如果你不纠结细节,主要为了做几个宽度的界面布局演示(对原型来说远远足以),那 Hype 简直是神器,尝试过用 Axure 制作响应式页面,有较大的复杂度,算是高阶操作了(我只是尝试高阶操作)。如果不算响应式页面制作,在交互实现的便利性上,Axure 还是有很多可以秒 Hype 的(毕竟做了十多年呢),尤其是丰富的逻辑操作,可以省很多事。Hype 嘛,呵呵,基本没什么逻辑操作。

有个小功能做的比较好。在导出 Html 文件的时候,会提示各个浏览器及对应版本会面临的兼容性问题,非常强大和有意义的一个功能,能一定程度上避免前端少踩坑。

动画制作上,基本动效是可以覆盖到的,肯定不能拿一个 10M 的软件和一个 1G 多的 AE 来比了,只能说 Hype 能做成这样已经很不错了。Hype 有一个 AE 跪舔不到的功能便是一些动效代码可以直接拿来主义,复制就能用。

总结:

可以大概的了解到 Hype 3 在功能设计上并不复杂,也比较容易上手。在做原型和动效的时候,基本能覆盖常用操作,复杂度稍高一点的会有点麻烦,得绕。比如,由于没有中心点的概念,顶栏播放暂停的动画实现的时候只能通过录制的方式,缩放时,按住 Opt 键,可以勉强达到,为什么说勉强达到,因为在这样缩放时,中心点会有偏移,就像 PS 里勾选了对齐像素选项。那么如果关键帧之间时长稍微长一点的情况下,“颤动”就会比较明显了。

一些操作上也有很多不便,例如最基本的场景缩放,快捷键没法用,也不能通过键盘加滚轮的方式,只能选择百分比来缩放,很麻烦。在对齐操作上,要是有一个对齐场景的选项,那会极高的提高效率,目前只能通过“吸附”加目测,或者在几十个元素中选中另一个在场景中间的参考元素与之对齐。

本来这个 Demo 的顶栏是悬浮固定的,查了很多资料,目前来说要想实现的话只能通过自定义插入代码的方式实现,自身没有提供。如果文件名有中文,在本地查看是没有问题,上传至服务器之后会无法读取到路径,可能与服务器有关吧。一些翻译上也有点问题,如按钮状态中的 Normal 被翻译成“法线”,这什么鬼,还有关键帧属性里的“原点(上)”,“原点(左)”,看不懂吧,就是 Y 与 X 轴位置啦。

 

血的教训:

一定一定一定一定要注意当前编辑的响应式布局范围,否则你在一个768px 至1024px 的范围内编辑的东西,预览的时候页面处于1440宽度,你发现效果无法实现,你疯狂的去找原因,查资料,最后却发现问题在这里真的很让人抓狂。

 

 

本次更新时间 2015.04.26 03:51, 持续更新中 . . . . . .