從7個案例分析：如何設計出色的動效

3 評論 9036 瀏覽 41 收藏 8 分鐘

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

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

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

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

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

一、滑動切換頁面

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

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

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

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

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

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

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

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

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

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

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

四、元素間的作用力

左側的頁面在頂部浮出；右側的卡片會隨著它的增大推出內容

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

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

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

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

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

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

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

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

七、微動效吸引注意力

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

  1. 一個好的設計：用顏色，大小和位置突出顯示用戶需要注意或采取行動的重要動作；
  2. 一個出色的設計：使用動效來吸引用戶關注重要的動作，而不會造成干擾。

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

總結

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

我們在做設計時，不要忘記用動效來解釋狀態(tài)變化、適當吸引用戶注意、闡釋元素關聯(lián)，以及為產(chǎn)品增加一點樂趣和個性。

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

 

作者：VisualCC

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

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

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

更多精彩內容，請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
紙皮小火車
人人都是產(chǎn)品經(jīng)理內容運營團隊
630篇作品 9321175總閱讀量
11-101258 瀏覽
“最低價”，一個永遠追不到的“美麗姑娘”？
02-083568 瀏覽
以七色米&管家婆為例，談談進存銷入門知識學
03-222856 瀏覽
抖音25萬粉絲，帶貨30單
04-188122 瀏覽
銀行電子錢包解析
02-162118 瀏覽
ChatGPT熱度再升級，“文生圖”會成為新趨勢嗎？
評論
評論請登錄

  1. 作者是錘粉？

    來自北京 回復

  2. 收藏啦，不孬。

    來自天津 回復