Hype这个关键词在百度上搜索都不一定知道它到底是什么，但自从我用上之后，就爱上它了，就像当年喜欢上Sketch一样 >>>

　　它适合哪些人?

　　用AE、Flash等动画视频工具做App动效视频(或GIF)演示的;

　　用FrameJS、Origami、Form等工具写代码生成App可互动性动效演示的;

　　用Axure、Justinmind搭建网站或者APP演示的，特别是在响应式页面方面;

　　想用HTML5实现各种可互动动画、动效甚至游戏的设计师，却苦于不会代码的;

　　甚至想直接做适合无线传播的互动页面(比如各种酷炫的活动页面)的;

　　它的好处：

　　无需代码，像AE一样使用时间轴就做可互动的动画

　　PC、手机、pad端都可以直接访问(以web的形式)，也可以导出视频或者GIF

　　3.0版还有物理特性和弹性曲线，可以发挥更强大的动画效果

　　对中国人来讲，它原生支持中文这一点也非常棒!

　　还有很多自己去发现…

　　先看看它官网的视频(因为官网上的需要翻墙才能看youtube，所以我把它转到国内的视频网站，并且加了一点点中文字幕)

　　Hype3专业版中文介绍：http://v.qq.com

　　你可以去看看它的官网，或者直接去下载个试用版。

　　Hype在国内甚至国外的资源现在都还很少，先来个入门教程，主要是我用的一些小技巧，深度的教程还需要一些日子之后放出来。

　　一、整体界面

　　它的界面有些许AE的味道，当然为了符合Mac的气质，它的整体布局也是和Keynote十分接近，加上中文的原因，所以整体上手非常简单。

　　二、顶部菜单

　　最左边的有两个按钮，默认布局是不展开的，点击展开之后，就是让你做响应式页面的，非常简单。场景这个是和AE最不一样的地方，因为做个完整的产品需要很多页面，所以这个场景切换非常重要。

　　点击添加可以快速增加响应式布局，不得不说，这个软件的上手难度只有一颗星，算是秒杀Axure和Justinmind(后者我没怎么用，并不非常了解)

　　顶部菜单栏的第二部分就是添加元素，当然Hype3在自己的图形绘画上还很少，只有三个形状，而且不能对曲线编辑，这个还是比较麻烦的部分，而且现在它还不直接支持Sketch或者PS，只能从别的软件中导出图片之后手动加进来才行。Tips：Hype3支持SVG格式的矢量图形，所以在Sketch中选择导出SVG格式会把所有图形输出成矢量，大大减少整体的容量体积。

　　添加元素边上还有个“符号”，因为Symbol的翻译问题，其实应该理解为元件，这里更指代为“可重复使用的元件”，这个类似Axure中的Master母版，用于大型动画元素的管理上还是很有用的。

　　其中它还有个“新建持久符号”，这个在弹出说明里也很容易理解，和Keynote中把“背景”应用到所有场景道理一样，只是它这里可以是任意一个元件。

　　中间成组什么我就不啰嗦了，关键部分来了，做好之后肯定要预览，而这也是这个产品特点之处。它不仅支持直接一键在浏览器中预览，而且还支持手机上直接预览，就这点就秒杀了只能在电脑上用鼠标模拟的Origami。当然这个你需要在手机上先装个App，名字叫Hype Reflect，这个App界面有点落后，但能用就不错了。

　　三、画布区域

　　默认是600px x 400px的大小(当然它天生支持Retina屏，所以在Retina下它自动是两倍尺寸)

　　你可以在场景面板里修改这个尺寸，它预设好了非常多移动终端的尺寸，包括“比大更大”的6和6plus(你仔细就会发现，它用的是缩小一倍的分辨率，但不用担心，因为Retina屏下兼容很好，不然它也做不了响应式设计)