動效意味著充滿生命和興奮，為靜態(tài)事物增添了生命。然而，在軟件方面，動效不僅是為了獲得樂趣，而且是為了解決問題。

作為人類，我們習(xí)慣于看到世界在我們周圍移動，如果任何軟件具有連貫的動畫，它就會感覺活潑自然。那么，假如你想開始學(xué)習(xí)動效設(shè)計，不如先從這9個步驟開始。

1.開始觀察

培養(yǎng)動感。如果您看不到事物在移動，則將無法使用它們。在您使用自己喜歡的應(yīng)用程序時，開始觀察事物在屏幕上的移動情況。再看一遍，找到為什么喜歡它，然后嘗試查找細(xì)節(jié)。觀察所有變化—形狀，大小，位置，顏色。不管是微小還是巨大，都應(yīng)嘗試找出運(yùn)動在整個合成中所起的作用。

2.動效不僅僅是一層涂料

動效揭示了更深層的含義。作為創(chuàng)作者，您必須從一開始就自覺地考慮動效。如果您處于設(shè)計階段，請對原型進(jìn)行動畫處理以增加時間維度。如果您處于開發(fā)階段，請將代碼分成模塊化組件，以輕松地在UI中移動內(nèi)容。

認(rèn)真思考創(chuàng)作的動畫個性將賦予它角色，并幫助您對嘗試構(gòu)建的作品有更深入的了解。

3.思考在產(chǎn)品的哪里引入運(yùn)動？

可以將運(yùn)動引入產(chǎn)品的一些簡單地方，可能是屏幕正在變化/當(dāng)用戶與元素互動或用戶必須等待的時候。

4.Motion UX的類型

您可以將產(chǎn)品中的運(yùn)動分類為“ 過渡”（內(nèi)容更改/用戶移動到另一個屏幕），“ 微交互”（例如Twitter的“贊”按鈕），圖形動畫（例如，踏板車在Zomato的“訂購”應(yīng)用程序的啟動屏幕上跳轉(zhuǎn)）。

5.通過動效提供空間信息

如果UI元素是從屏幕右側(cè)輸入的，則用戶將在心理上組織該元素的位置在右側(cè)。例如，如果在屏幕的左上方放置了一個菜單按鈕，則該菜單必須從左側(cè)進(jìn)行動畫處理。要檢查您的動畫是否正確傳達(dá)信息，請向人們展示并聽他們說些什么。這是避免任何可能混淆的最簡單方法。

6.開始理解諸如持續(xù)時間，時序曲線，動畫路徑，初始和最終值之類的東西

從技術(shù)上講，這些參數(shù)構(gòu)成了動畫片段。與他們一起玩耍并掌握這些控件。一旦控制了這些，就可以制作優(yōu)秀的動效。

7.永遠(yuǎn)不要讓人們在流程中間等待

切勿在流程中間放慢節(jié)奏，讓他們等待動畫完成。如果他們真的必須等待，那就用有意義的動畫讓他們高興。始終要記住使用動效來解決問題，這是動畫加載程序存在的原因。

使動畫保持微妙并與產(chǎn)品的故事情節(jié)保持一致，以創(chuàng)造令人愉悅的體驗。

8. 使用工具

Lottie，Adobe Animate CC，After Effects，Sketch2AE，F(xiàn)ramer，Origami，Animatic App，UIDynamics（iOS）是用于動效設(shè)計的一些工具。查找它們。

我建議先使用筆和紙開始您的想法。完成此操作后，繼續(xù)使用任何數(shù)字軟件。對于本文中的動畫，我在Animatic App上繪制了手繪幀。動畫有助于使事情簡單而集中。

9.捕獲并保存您發(fā)現(xiàn)有趣的事物

保存您發(fā)現(xiàn)有趣的東西。一遍又一遍地看著它們，放慢它們，了解元素如何運(yùn)動。通過復(fù)制學(xué)習(xí)。我的Mac充滿了有趣的GIF動畫。您還可以將GIF保存在盤球上。

文章來源公眾號：learn-3