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屏下兼容很好，不然它也做不了響應式設計)

　　四、右側面板

　　是主要參數的設置區域，主要8個面板，文稿、場景、度量、元素、排印、操作、物理量和身份：

　　具體參數就大家自己去試試看，很容易上手，我只來談談幾個特點：

　　1、文稿：

　　黃色框部分，主要是在手機上預覽時可以直接生成主屏幕web應用，禁止用戶縮放，你的產品看起來更像是Native的。

　　2、文稿

　　有部分上面講過就忽略了，主要是時間線的管理，你可以通過新建時間線來管理不同元件的動畫，那么這個地方就是增加刪除的地方。(后期復雜動畫時非常有用)

　　還有場景加載卸載的選項，這個和Axure或者Flash的功能很像(在操作面板中也會有這樣的功能)，點擊增加，出現下拉菜單就可看到，除了動效以外，整個邏輯時間線的操作這邊都有，非常方便。

　　3、度量

　　它有3D旋轉，所以可以做出各種空間動效。

　　轉換原點其實就是中心點的位置

　　當然除非要很精確，否則，你選中元件，按住鍵盤上的command鍵，鼠標懸浮在元件上你就可以看到中心點，然后拖動它就可以改變位置(中心點是干嘛的?你先自己補補圖形課)

　　4、元素

　　這里就不多說了，很多常見的設置，當然其中的顏色樣式的設置還很牛的，比如模糊。

　　5、排印

　　有意思的是你可以通過添加更多字體，去直接下載google提供的字體，當然這些都是英文的，而且你得先有個國外的VPN。

　　6、操作

　　重點是“拖移動時”，這個也是手機上滑動效果的操作，具體可以好好嘗試看。

　　7、物理量

　　最神奇的功能，你先選擇一個元件，然后點擊下拉就會看到靜態和動態，如果你要一個物體動起來，那就是動態，如果你要一個物體在一個斜面上滑下去，那你要一個動態的物體和一個靜態的斜面。注意，默認頁面是沒有物理環境的，你需要賦予這些元件物理特點，他們才會動起來，密度、阻力啥的我也還沒搞懂，但你沒錯改變參數就可以知道效果，大家最關心的肯定是是彈跳力，那個就是“退還”，不知道是怎么翻譯的，你要彈跳越好數字越大，當然1是最適合的，太大就會馬上不見。。。

　　下圖中的黃框，更是叼炸天的，可以利用手機的重力感應去控制，勾選之后，手機預覽妥妥的!

　　五、時間軸

　　屏幕下方是這個軟件重要的部分，和AE一樣的時間軸，不同的是，它把對象和屬性用上下兩個部分分開，而不是像AE一樣默認是用展開的方式。

　　之所以這么做，我想是因為它的屬性非常多，點擊屬性右側的向下剪頭就可以發現：

　　當然它這里比較麻煩的是，選擇了任意一個之后，并不是在這里進行編輯，而只是像AE里面一樣打個點而已，還需要找到右側對應的面板具體參數設置的地方去修改。

　　可能就是因為“這么麻煩”，所以它有個“錄像”的功能，我認為這個非常屌!

　　你只要選中一個元件，然后點擊這個錄像功能，選擇一個時間點(連打點都不用，只要選擇好時間就行)，然后隨意改變這個元件變成你想要的樣子位置甚至顏色什么的，它自動就生成了動畫。

　　做動效的都知道曲線，你有了運動，如果沒有速率曲線，那簡直就是作死。Hype3的這個完整的曲線庫，實在太貼心，不僅有很多種樣子(并且每個都有曲線的演示，看它右側的小方塊)，還可以自定義編輯曲線，無!需!代!碼!

　　好了，這個軟件的介紹差不多到這里，我想作為一個設計師特別希望自己能夠真正獨立“精益”一把，不需要依賴開發，能夠把你的設計原型100%還原成產品，哪怕只是一個細微的動效。

　　我非常看好這個軟件，配上Sketch簡直可以說無敵(當然還有一些bug希望在后續版本中能夠改善)，最后，這個軟件是付費的，專業版要人民幣600多，暫時沒看到破解的方法(如果真的想要，還是找得到的)，不過作為有節操的設計師，在用完試用期之后，我想我會付費去繼續使用的。