動效設計中的節奏魔力

0 評論 1901 瀏覽 11 收藏 15 分鐘

關于動效節奏的問題,有什么好的方法可以提供?這算一個常見疑問,我總結收到的問題反饋,基本都是「動畫節奏應該怎么做呀」「做完的動效一卡一卡的感覺不流暢怎么整」,索性借著今天的契機,我整理了這樣一篇主題文章,分享我對于動效節奏的一點經驗與思考,僅代表個人觀點,歡迎交流探討~

在當今數字時代,動效設計已然成為了產品和服務中不可或缺的一部分。

無論是手機APP、網頁界面還是智能設備,動效設計或是引導用戶操作的微小提示,或是增強用戶體驗的交互反饋,又或是塑造品牌形象的視覺元素,它們都以其獨特的方式,為用戶帶來更加直觀、生動的互動體驗,因此流暢的觀感體驗很重要。

動效設計中的節奏魔力

提到流暢度,那動效節奏的重要性不言而喻。

動效節奏,簡單來說是動態呈現中各個元素動作的速度和時長安排,它決定了動效的快慢、強弱、起伏和變化,從而影響著用戶的感知和情緒。

一個優秀的動效設計,不僅要考慮單個元素的動效表現,更要考慮整個界面的動效節奏,使界面動效更加自然、流暢,也更加符合用戶的心理預期,從而提升用戶體驗。

動效設計中的節奏魔力

所以,想入門動效領域并深耕,我認為深入理解動效節奏是尤為重要的,學會如何運用動效節奏來提升用戶體驗,讓用戶在享受科技帶來便捷的同時,也能感受到藝術的魅力。

一、動效設計基礎認知

1. 動效設計在用戶體驗中的價值

動效可以增強界面的可理解性,例如下圖中廣告推送,有一個手機圖標的旋轉動態示例,

動效設計中的節奏魔力

以及多多視頻模塊中的上滑操作指引等,幫助用戶更好地理解界面功能和操作方式,從而更有效地去使用應用。

動效設計中的節奏魔力

動效可以提升界面的可用性,例如上傳文件的操作,通過提供及時的反饋和指引,降低用戶的學習成本和操作難度。

動效設計中的節奏魔力

動效還可以增加界面的吸引力,例如購物軟件中模擬實際鞋盒開箱的形式,展現鞋品,通過生動有趣的動效表現,提升用戶的使用欲望和滿意度。

動效設計中的節奏魔力

2. 簡述動效設計的基本原理與最佳實踐

提到動效設計,了解其背后的基本概念和原則,才是賦予動效靈魂和意義的關鍵。

這里要提到三個關鍵詞:

1)首先是時間

時間在動效設計中扮演著至關重要的角色。它決定了動畫的快慢、停頓和節奏,從而影響用戶的情感體驗。

動效設計中的節奏魔力

例如,一個緩慢漸入的動畫可能傳達出優雅、穩重的感覺;

動效設計中的節奏魔力

而一個迅速閃現的動畫則可能帶來刺激、緊張的感受。

2)其次是空間

空間是指動畫發生和存在的虛擬環境。在動效設計中,空間的布局、層次和透視關系都至關重要。

它們不僅影響動畫的可視性和可讀性,還影響用戶的認知和行為。

動效設計中的節奏魔力

例如,合理的空間布局可以使用戶更容易理解和操作界面元素,而不合理的布局則可能導致用戶的困惑和誤操作。

3)最后是構圖

構圖是指動畫元素的排列組合和視覺平衡。

一個良好的構圖可以突出重點、引導視線,并營造出和諧、統一的視覺效果。

相反,一個糟糕的構圖可能會分散用戶的注意力,甚至引發視覺疲勞。

動效設計的目標不僅僅是實現技術上的可能性,更是為了創造出讓用戶愉悅、滿意且易于使用的體驗,在美感和技術要求之間尋找平衡點,是我認為需要不斷練習,積累總結經驗的。

二、關鍵要素:動效節奏

在動效設計中,能讓靜態元素動起來形成生動流暢的動態效果,需要用到兩大元素:關鍵幀與動效節奏。

1. 關鍵幀

關鍵幀代表了在特定時間點上某個參數的值。在動效制作過程中,通過設置關鍵幀,可以控制對象在不同時間點的狀態,從而形成連續的動作。

動效設計中的節奏魔力

關鍵幀就像是動效世界里的路標,它標記了在動效呈現中某些重要時刻物體的樣子。比如說,我想讓一個球跳起來,那我就得告訴電腦,在開始的時候球在地上,然后在某個瞬間球在空中最高點,最后又回到地面;這些重要的時刻就是關鍵幀。

關鍵幀之間的變化可以是線性的,也可以是曲線的,后者可以創造出更為自然和復雜的動態效果。

2. 常見的四種動效節奏形式

線性或曲線變化,統稱動效節奏,是指在一定時間內,通過一系列有規律的動效元素的組合和排列所產生的節奏感。

常見的四種動效節奏形式有 勻速、緩入、緩出、緩動。

動效設計中的節奏魔力

1)勻速(Linear)

勻速運動指的是物體在動畫過程中速度保持不變的運動方式。這種節奏簡單直接,沒有加速或減速的過程。

動效設計中的節奏魔力

上面的小球彈跳呈現的效果,就是勻速運動,有些機械,缺乏實際場景中的動感。

在AE中,默認的菱形關鍵幀之間就是勻速運動,例如生活中常見的時鐘,上圖中鐘表秒針旋轉是平穩、機械的,這就是一個典型的勻速運動。

2)緩入(Ease In)

緩入是指物體在動畫開始時速度較慢,隨著時間的推移逐漸加速到最大速度的運動方式。

動效設計中的節奏魔力

一般元素離開畫面或者物體加速階段使用,例如上圖中摩托車駛出畫面的部分、進度條加載緩慢到快速的節奏等,它可以增加動畫的真實感和生動性。

在AE中,以圓球為例,從空中下落的過程,就可以使用緩入的加速曲線;

動效設計中的節奏魔力

調出圖表編輯器,調節曲線弧度如圖「速度圖表」所示,使曲線開始時平緩,越靠近出點速度逐漸上升,完成加速運動,此時結尾有些生硬。

加一個小知識點:曲線調節有兩種形式,一種為速度圖表,一種為值圖表;

速度圖表顧名思義,看曲線的弧度,圖中球的開始入點曲線弧度較緩,結尾出點曲線斜度較大,則代表加速度節奏變化;

值圖表分別代表X,Y軸曲線變化,如圖中球的Y軸位置發生變化,因此對應綠色線條的曲度變化是球體的動效節奏變化,下落過程中加速,則區別于前半段的直線,入點平滑,出點更陡峭。

3)緩出(Ease Out)

動效設計中的節奏魔力

緩出與緩入相反,是指物體在動畫結束時速度逐漸減慢直至停止的運動方式,如元素入畫、人物行走至停下等,它能給人一種平滑和自然的結束感,是先快后慢的減速運動。

動效設計中的節奏魔力

同樣以圓球為例,球落地后反彈的過程,就可以使用緩出的減速曲線;
調出圖表編輯器,調節曲線弧度如圖「速度圖表」所示,使曲線結束時平緩,調節出點的手柄桿,完成減速運動。

4)緩動(Ease In Ease Out)

緩動是最接近真實世界物體運動規律的一種方式,適用于大多數動態場景,尤其是那些需要表現自然、流暢動作的畫面呈現。

緩動曲線結合了緩入和緩出的特點,物體在動畫開始時速度緩慢上升,中間達到最高速度,最后在結束時速度逐漸降低。

動效設計中的節奏魔力

示例繼續完善小球的曲線節奏,我想讓它看起來更順滑、更有彈跳感覺,通過球的大小比例(縮放)的變化,增加模糊變化的細節,這樣球跳起來的動作就會像真實世界里那樣,既有起跳的沖勁,又有落地的緩沖,整個過程更加生動有趣。

動效設計中的節奏魔力

在AE中,緩動曲線沒有具體的數值,多數時候需要結合不同場景表達,去嘗試不同的曲度形式,通過反復預覽檢驗,找到自己滿意、適合畫面感呈現的形式。

3. 刻意練習-節奏感積累

日常積累動效節奏,我會分析電影或MG動畫中的經典鏡頭,比如角色走路、跑步的動作呈現,元素的出入場變化,以及自然界中的運動現象,如樹葉飄落等。

動效設計中的節奏魔力

多做分鏡腳本的拆分練習,多臨摹實踐,就可以逐漸掌握常見的運動規律,自己在做設計內容時,也可以更清晰知道怎樣的節奏更適合當下場景呈現。

三、結論

總的來說,創造流暢體驗對于動效設計來說還是很重要的,而要實現這一目標,掌握并靈活運用好動效節奏則是必不可少的手段之一。

萬變不離其宗,多看、多思考、多練習,通過實踐去總結復盤規律、梳理SOP流程,整理出一套適合自己記憶、使用的方法論與行動標準,提高自己對動態的感知,以及節奏力的把控,也能有效提升工作效率。

「想不如做,知行合一」,想讓學到的知識和技巧,生長到自身,唯一要做的就是立馬行動!在做的過程中解決一個個卡點,迭代出更適合自己的方法。

作者:Shirley_雪

微信公眾號:雪莉設計成長圖

本文由 @Shirley_雪 原創發布于人人都是產品經理。未經作者許可,禁止轉載

題圖來自 Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!