設(shè)計(jì)動(dòng)效并不是一件復(fù)雜的事情，你只要在關(guān)鍵餓地方稍作調(diào)整，就可以提高動(dòng)效的效果。本文從7個(gè)案例分析，幫助大家設(shè)計(jì)出色的動(dòng)效。

這篇文章希望通過7個(gè)GIF范例，給出一些做動(dòng)效的實(shí)用建議。其實(shí)動(dòng)效設(shè)計(jì)并不復(fù)雜，只需在關(guān)鍵之處稍微的調(diào)整，就能大大的提高動(dòng)效效果。

通過這些例子，能夠發(fā)現(xiàn)狀態(tài)之間的連續(xù)性，不同狀態(tài)的相同元素之間的關(guān)聯(lián)性，并且將用戶的注意力引向他們應(yīng)該注意和采取行動(dòng)的事物的重要性。

為了創(chuàng)建這些動(dòng)畫，我遵循了Material Motion、IBM’s Animation Principles、The UX in Motion Manifesto

所有的交互都是使用早期版本的InVision Studio制作。你可以在這里下載源文件。

一、滑動(dòng)切換頁面

左側(cè)的內(nèi)容漸變切換；右邊的內(nèi)容與橫杠滑動(dòng)

1. 一個(gè)好的動(dòng)效：“淡入淡出的過渡”切換從一個(gè)頁面進(jìn)入另一個(gè)頁面。
2. 一個(gè)出色的動(dòng)效：在內(nèi)容與狀態(tài)之間切換時(shí)，保持狀態(tài)連續(xù)性。

當(dāng)你設(shè)計(jì)交互式選項(xiàng)卡或彈出式菜單時(shí)，可以嘗試將界面元素的位置與打開它的操作相關(guān)聯(lián)。通過這種方式，您不僅可以制作內(nèi)容的可見性，還可以制作位置動(dòng)畫。添加一個(gè)滑動(dòng)手勢，將你從一個(gè)頁面帶到另一個(gè)頁面。

二、關(guān)聯(lián)卡片之間的相同元素

左側(cè)的頁面向上滑動(dòng)展開一個(gè)新的頁面；右側(cè)的卡擴(kuò)展并填充屏幕

1. ?一個(gè)好的動(dòng)畫：使用向左或向上滑動(dòng)的過渡來展開新頁面；
2. 一個(gè)出色的動(dòng)畫：將不同狀態(tài)的相同元素關(guān)聯(lián)起來。

在不同狀態(tài)之間切換進(jìn)行動(dòng)效制作時(shí)，請(qǐng)查看它們之間是否有共同元素并將它們連接起來。使用InVision Studio時(shí)，在創(chuàng)建運(yùn)動(dòng)轉(zhuǎn)換，在兩個(gè)屏幕之間重復(fù)的元素會(huì)自動(dòng)關(guān)聯(lián)，這功能使原型動(dòng)效變得簡單。

三、內(nèi)容中使用瀑布流效果

左邊的卡片通過滑動(dòng)和淡入出現(xiàn)；右邊卡片雖動(dòng)效相同，但每張卡片都有一個(gè)短暫的延遲

1. 一個(gè)好的動(dòng)畫：控制所有元素的位置和不透明度變化進(jìn)入頁面；
2. 一個(gè)出色的動(dòng)畫：錯(cuò)開每個(gè)組和不同元素的出現(xiàn)的時(shí)間。

要完成瀑布效果，應(yīng)該在保持相同的緩動(dòng)和速度前提下，嘗試對(duì)每個(gè)內(nèi)容或一組內(nèi)容應(yīng)用延時(shí)設(shè)置，保持一致性。盡管如此，不要為每個(gè)小元素設(shè)置延時(shí)，恰當(dāng)?shù)姆纸M能夠保持動(dòng)效的快速和高效。谷歌建議每個(gè)元素出現(xiàn)間隔不超過20毫秒。

四、元素間的作用力

左側(cè)的頁面在頂部浮出；右側(cè)的卡片會(huì)隨著它的增大推出內(nèi)容

1. 一個(gè)好的動(dòng)效：控制元素本身變化，在上下文中移動(dòng)并顯示元素。
2. 一個(gè)出色的動(dòng)效：當(dāng)他們改變時(shí)，會(huì)關(guān)注元素對(duì)周圍環(huán)境的影響。

控制元素本身變化，即讓周圍的元素的相互吸引或排斥。如果想了解更多，可以去Materisl Design的Awaremotion 。

五、讓菜單從觸發(fā)點(diǎn)出來

1. 一個(gè)好的動(dòng)效：菜單顯示應(yīng)從觸發(fā)它們的按鈕的方向出現(xiàn)；
2. ?一個(gè)出色動(dòng)效：菜單從創(chuàng)建它們的動(dòng)作中浮現(xiàn)出來，從觸發(fā)點(diǎn)展開而來。

六、利用按鈕展示狀態(tài)

左邊的按鈕顯示文本展示狀態(tài)；右側(cè)的按鈕使用按鈕框顯示不同的狀態(tài)

1. 一個(gè)好的動(dòng)效：提示應(yīng)該顯示按鈕附近；
2. 一個(gè)出色的動(dòng)效：使用按鈕本身來展示不同的狀態(tài)變化。

嘗試使用按鈕來展示狀態(tài)的可視變化。例如：您可以用加載動(dòng)畫替換CTA，或者您可以將動(dòng)畫添加到顯示進(jìn)度的背景，都可以分散用戶的注意力。

七、微動(dòng)效吸引注意力

左邊的例子使用顏色和位置來使元素脫穎而出；右邊的使用微動(dòng)效來吸引用戶的注意力

1. 一個(gè)好的設(shè)計(jì)：用顏色，大小和位置突出顯示用戶需要注意或采取行動(dòng)的重要?jiǎng)幼鳎?/li>
2. 一個(gè)出色的設(shè)計(jì)：使用動(dòng)效來吸引用戶關(guān)注重要的動(dòng)作，而不會(huì)造成干擾。

當(dāng)用戶需要采取一些重要的行動(dòng)時(shí)，請(qǐng)嘗試通過動(dòng)效來吸引他們的注意力。從微動(dòng)效開始，根據(jù)動(dòng)作的重要程度（大小，顏色和速度的變化），確保只能用于關(guān)鍵性操作。使用此效果的次數(shù)越多，影響越小……并且您的用戶也會(huì)更厭煩。

總結(jié)

我希望以上的這些范例能夠給你的動(dòng)效設(shè)計(jì)提供幫助，有了 InVision Studio 這類新型動(dòng)效原型工具的幫助下，創(chuàng)意交互這一領(lǐng)域會(huì)很快火起來，千萬不要忘記了對(duì)動(dòng)效的關(guān)注。

我們?cè)谧鲈O(shè)計(jì)時(shí)，不要忘記用動(dòng)效來解釋狀態(tài)變化、適當(dāng)吸引用戶注意、闡釋元素關(guān)聯(lián)，以及為產(chǎn)品增加一點(diǎn)樂趣和個(gè)性。

以上的這些設(shè)計(jì)原則，足以將我們的動(dòng)效從快速有效地優(yōu)秀升級(jí)到出色。讓我們愉快地進(jìn)行動(dòng)效創(chuàng)作吧！

作者：VisualCC

原文鏈接：https://www.jianshu.com/p/d70e605218ed

本文由 @VisualCC 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自 Pexels ，基于 CC0 協(xié)議