我們在進行交互設計的時候，大部分時間是基于界面和功能邏輯的考慮，也适當的進行了交互效果的考慮，那麼

我們如何把交互的效果直觀的表現出來呢，除了用axure做出交互的動态效果，ps繪制GIF圖，代碼設計動效外，

還可使用一個非常容易上手的工具，那就是Adobe 的AE，AE是一款強大的後期軟件，同時也可以用來制作不少

直觀的動效預覽效果。

常見的動效有：縮放，漸變，透明度變化，旋轉，左右滑進，左右滑出，跳動，顔色變化等。

1.首先安裝完AE後打開，界面默認居中是預覽，左邊是素材窗口，下方是時間軸和圖層。

然後拖動指針到01s再調節位置後面的坐标參數，我這裡是做Y軸的變化，所以就隻調節Y軸坐标的數值就可以。

這樣從0到1s的位置動畫就做好了。非常簡單吧。除了位移外，縮放旋轉這些也是同樣的道理。

3.現在我們來試一下封面圖的制作，我們新建一個項目組，在素材區點擊右鍵新建合成，調節時長其他默認即可。

用上面的矩形畫兩個大小為560*210（寬高合适也行，不一定要這個）的矩形，填充一些不同的顔色，拖動到畫布

外面對齊，利用位置關鍵幀來調節，沿着Y/X軸坐标參數，從畫布外向中間移動就可以了，具體的參數自己把握。

4.利用不同的變化效果去調節關鍵幀，就能做到縮放旋轉漸變等效果了。另外素材拖入圖層是默認占全部時長的

可以通過時間軸拖動來調節素材長短來決定顯示的時間。點擊素材後鼠标放到左右會出現拖動的鼠标指針，這時

就能拖動來調節了，在英文輸入狀态下，IO和[]可以快速對齊拖動的指針，銜接不同的素材。

5.效果做好後可以預覽一下，沒問題就可以合成了，合成快捷鍵OSX （shift command M),WIN(Ctrl M）

因為我們要導出GIF圖，所以就渲染為圖片的序列幀，然後倒入PS儲存為WEB格式就可以了。

渲染的參數設置為JPEG序列或者png序列都可以，考慮到大小所以選擇JPEG格式。

6.确定後點擊渲染，渲染後的圖片用ps打開，勾選圖像序列，然後點文件-導出-存儲為WEB，格式選擇GIF

再做其他一些參數調節，盡量控制圖像質量和文件大小的平衡，一個動态效果的預覽就做好了，基本上熟

悉的話，很快就能搞定一些簡單或者中等難度的效果了。

7.因為動效涉及到物理學，所以我們可以觀察一些基本事物的運動特征，可以通過運動曲線來調節

動效，才能在交互設計中起到一些錦上添花的效果，同時UI和交互或者産品不一定要非常專業的來

制作動效，學習一些簡單的小技能，在工作起到一定的作用就算是可以了，畢竟還有專業的動效設

計師在嘛。

8.最後放張做了2個小時的效果圖，拙劣之處還望大神們不吝賜教。

1、需要本套教程素材和各種牛B插件的同學可以咨詢客服微信 2808734777

2、免費提供Ae Pr Ed Ps Ai Fl Dw Cad Cdr Id 會聲會影 word ppt excel 3Dmax Maya 500G教學視頻和軟件，加微信 2808734777獲取

3、想系統學習影視後期設計制作各種軟件技巧的同學請加微信 2808734777

4、關注微信公衆号 yshqsjzz（長按複制） 獲取所有的軟件和更多的學習資訊