設計動效并不是一件複雜的事情，你隻要在關鍵餓地方稍作調整，就可以提高動效的效果。本文從7個案例分析，幫助大家設計出色的動效。

這篇文章希望通過7個GIF範例，給出一些做動效的實用建議。其實動效設計并不複雜，隻需在關鍵之處稍微的調整，就能大大的提高動效效果。

通過這些例子，能夠發現狀态之間的連續性，不同狀态的相同元素之間的關聯性，并且将用戶的注意力引向他們應該注意和采取行動的事物的重要性。

為了創建這些動畫，我遵循了Material Motion、IBM’s Animation Principles、The UX in Motion Manifesto

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

一、滑動切換頁面

左側的内容漸變切換；右邊的内容與橫杠滑動

1. 一個好的動效：“淡入淡出的過渡”切換從一個頁面進入另一個頁面。

2. 一個出色的動效：在内容與狀态之間切換時，保持狀态連續性。

當你設計交互式選項卡或彈出式菜單時，可以嘗試将界面元素的位置與打開它的操作相關聯。通過這種方式，您不僅可以制作内容的可見性，還可以制作位置動畫。添加一個滑動手勢，将你從一個頁面帶到另一個頁面。

二、關聯卡片之間的相同元素

左側的頁面向上滑動展開一個新的頁面；右側的卡擴展并填充屏幕

1. 一個好的動畫：使用向左或向上滑動的過渡來展開新頁面；

2. 一個出色的動畫：将不同狀态的相同元素關聯起來。

在不同狀态之間切換進行動效制作時，請查看它們之間是否有共同元素并将它們連接起來。使用InVision Studio時，在創建運動轉換，在兩個屏幕之間重複的元素會自動關聯，這功能使原型動效變得簡單。

三、内容中使用瀑布流效果

左邊的卡片通過滑動和淡入出現；右邊卡片雖動效相同，但每張卡片都有一個短暫的延遲

1. 一個好的動畫：控制所有元素的位置和不透明度變化進入頁面；

2. 一個出色的動畫：錯開每個組和不同元素的出現的時間。

要完成瀑布效果，應該在保持相同的緩動和速度前提下，嘗試對每個内容或一組内容應用延時設置，保持一緻性。盡管如此，不要為每個小元素設置延時，恰當的分組能夠保持動效的快速和高效。谷歌建議每個元素出現間隔不超過20毫秒。

四、元素間的作用力

左側的頁面在頂部浮出；右側的卡片會随着它的增大推出内容

1. 一個好的動效：控制元素本身變化，在上下文中移動并顯示元素。

2. 一個出色的動效：當他們改變時，會關注元素對周圍環境的影響。

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

五、讓菜單從觸發點出來

1. 一個好的動效：菜單顯示應從觸發它們的按鈕的方向出現；

2. 一個出色動效：菜單從創建它們的動作中浮現出來，從觸發點展開而來。

六、利用按鈕展示狀态

左邊的按鈕顯示文本展示狀态；右側的按鈕使用按鈕框顯示不同的狀态

1. 一個好的動效：提示應該顯示按鈕附近；

2. 一個出色的動效：使用按鈕本身來展示不同的狀态變化。

嘗試使用按鈕來展示狀态的可視變化。例如：您可以用加載動畫替換CTA，或者您可以将動畫添加到顯示進度的背景，都可以分散用戶的注意力。

七、微動效吸引注意力

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

1. 一個好的設計：用顔色，大小和位置突出顯示用戶需要注意或采取行動的重要動作；

2. 一個出色的設計：使用動效來吸引用戶關注重要的動作，而不會造成幹擾。

當用戶需要采取一些重要的行動時，請嘗試通過動效來吸引他們的注意力。從微動效開始，根據動作的重要程度（大小，顔色和速度的變化），确保隻能用于關鍵性操作。使用此效果的次數越多，影響越小……并且您的用戶也會更厭煩。

總結

我希望以上的這些範例能夠給你的動效設計提供幫助，有了 InVision Studio 這類新型動效原型工具的幫助下，創意交互這一領域會很快火起來，千萬不要忘記了對動效的關注。

我們在做設計時，不要忘記用動效來解釋狀态變化、适當吸引用戶注意、闡釋元素關聯，以及為産品增加一點樂趣和個性。

以上的這些設計原則，足以将我們的動效從快速有效地優秀升級到出色。讓我們愉快地進行動效創作吧！

本文由 @VisualCC 授權發布于人人都是産品經理

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!