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

作為人類(lèi)，我們習(xí)慣于看到世界在我們周?chē)苿?dòng)，如果任何軟件具有連貫的動(dòng)畫(huà)，它就會(huì)感覺(jué)活潑自然。那么，假如你想開(kāi)始學(xué)習(xí)動(dòng)效設(shè)計(jì)，不如先從這9個(gè)步驟開(kāi)始。

1.開(kāi)始觀(guān)察

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

2.動(dòng)效不僅僅是一層涂料

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

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

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

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

4.Motion UX的類(lèi)型

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

5.通過(guò)動(dòng)效提供空間信息

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

6.開(kāi)始理解諸如持續(xù)時(shí)間，時(shí)序曲線(xiàn)，動(dòng)畫(huà)路徑，初始和最終值之類(lèi)的東西

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

7.永遠(yuǎn)不要讓人們?cè)诹鞒讨虚g等待

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

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

8. 使用工具

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

我建議先使用筆和紙開(kāi)始您的想法。完成此操作后，繼續(xù)使用任何數(shù)字軟件。對(duì)于本文中的動(dòng)畫(huà)，我在A(yíng)nimatic App上繪制了手繪幀。動(dòng)畫(huà)有助于使事情簡(jiǎn)單而集中。

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

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

文章來(lái)源公眾號(hào)：learn-3