炫酷，炫酷，炫酷…小明在站酷網(wǎng)看到大神的最新動效作品后接連驚呼了三聲，然后他滿懷激情的打開AE，新建了工程。然后他愣住了…我該做什么，我該怎么做，我做完后如何使用？然后，他默默的關(guān)閉了AE…

這個場景肯定發(fā)生了千百萬次。我該做什么，我該怎么做，我做完后如何使用？這是初學(xué)者進(jìn)入任何行業(yè)都必須面對的問題。對于動效設(shè)計這個建立在扎實視覺基礎(chǔ)上的行業(yè)更是如此。

趁著開年的空閑時間，我來給大家說說動效設(shè)計如何應(yīng)用在UI實戰(zhàn)中，拋磚引磚…注意文章中每一個問句哦…

 

1、你該做什么

    （1）扎實的學(xué)習(xí)視覺設(shè)計

      動效設(shè)計是建立在視覺基礎(chǔ)上的一門學(xué)科。沒有好的視覺素材任憑你動效再炫酷也無濟于事。在動效設(shè)計中流傳著這樣的一句話：視覺對了，隨便動一動就有了60分。

 

    （2）深入學(xué)習(xí)一個你喜歡的動效軟件

      工欲善其事，必先利其器。沒有一款順手的動效軟件你是沒法將你的想法變成現(xiàn)實的。對于初學(xué)者，你需要系統(tǒng)的學(xué)好一個動效軟件?？紤]到設(shè)計軟件之間的兼容性問題，還是推薦大家學(xué)習(xí)AE。雖然上手較慢，可一旦掌握，你便可以和之前已經(jīng)掌握的PS,AI無縫對接了。

 

    （3）了解各個平臺實現(xiàn)動效的條件

      PC端瀏覽器與移動端瀏覽器的差別在哪里？各個瀏覽器直接的差異又在哪里？各個瀏覽器的各個版本對動效的支持情況如何？iOS與安卓中動效實現(xiàn)的方式是什么？這些都是你需要了解的知識。你可以不必精通，但必須要熟悉。

2、你該怎么做

    （1）充分吃透每個需求的前因后果

      這個需求是誰提出來的？這個需求的目的是什么？需求提出者希望達(dá)到什么樣的效果？他有沒有心目中的案例？適度的交流可以讓你充分吃透需求的因果，能大大節(jié)省整個需求的設(shè)計時間。想想你加班三天三夜做出來的動效，需求方瞟一眼后說這不是我們想要的效果…如果你想避免這種情況，那就充分吃透每個需求的前因后果吧。

 

    （2）根據(jù)實際需求設(shè)計合適的動效

      尺寸做多大？做幾個尺寸？這個動效會用在哪個平臺或者哪幾個平臺？如果只用在PC端，是否需要支持Retina屏幕？如果同時應(yīng)用在PC與移動端，兩個平臺各需要怎么實現(xiàn)？搞清楚這些以后，那么打開軟件開始設(shè)計吧!

3、你該怎么用

    （1）直接輸出可用文件

      GIF是動效設(shè)計師的好伙伴，只要文件容量不過大（上限一般500K）和尺寸不過小（下限一般16px），它可以完美地適用于所有平臺。

當(dāng)文件量過大或者尺寸過小的時候，你還可以選擇輸出PNG序列達(dá)到降低文件容量和降噪的目的。

 

    （2）輸出動效的限制條件

      顯然GIF與PNG序列不能萬能的，當(dāng)無法使用這兩者的時候是不是動效軟件就失去了作用了呢？當(dāng)然不是！其實動效設(shè)計軟件最主要的作用在于向開發(fā)人員提供動效的限制條件。限制條件多如牛毛，但可以把所有的限制條件歸為兩類：時間和間距。記住這一點，所有動效的本質(zhì)屬性只有兩個，那就是時間和間距。時間代表動效的發(fā)生時間，間距代表動效的韻律。將這兩個元素有效的傳達(dá)給開發(fā)人員，你就成功了。