關(guān)于動(dòng)效節(jié)奏的問(wèn)題，有什么好的方法可以提供？這算一個(gè)常見(jiàn)疑問(wèn)，我總結(jié)收到的問(wèn)題反饋，基本都是「動(dòng)畫節(jié)奏應(yīng)該怎么做呀」「做完的動(dòng)效一卡一卡的感覺(jué)不流暢怎么整」，索性借著今天的契機(jī)，我整理了這樣一篇主題文章，分享我對(duì)于動(dòng)效節(jié)奏的一點(diǎn)經(jīng)驗(yàn)與思考，僅代表個(gè)人觀點(diǎn)，歡迎交流探討～
在當(dāng)今數(shù)字時(shí)代，動(dòng)效設(shè)計(jì)已然成為了產(chǎn)品和服務(wù)中不可或缺的一部分。
無(wú)論是手機(jī)APP、網(wǎng)頁(yè)界面還是智能設(shè)備，動(dòng)效設(shè)計(jì)或是引導(dǎo)用戶操作的微小提示，或是增強(qiáng)用戶體驗(yàn)的交互反饋，又或是塑造品牌形象的視覺(jué)元素，它們都以其獨(dú)特的方式，為用戶帶來(lái)更加直觀、生動(dòng)的互動(dòng)體驗(yàn)，因此流暢的觀感體驗(yàn)很重要。
提到流暢度，那動(dòng)效節(jié)奏的重要性不言而喻。
動(dòng)效節(jié)奏，簡(jiǎn)單來(lái)說(shuō)是動(dòng)態(tài)呈現(xiàn)中各個(gè)元素動(dòng)作的速度和時(shí)長(zhǎng)安排，它決定了動(dòng)效的快慢、強(qiáng)弱、起伏和變化，從而影響著用戶的感知和情緒。
一個(gè)優(yōu)秀的動(dòng)效設(shè)計(jì)，不僅要考慮單個(gè)元素的動(dòng)效表現(xiàn)，更要考慮整個(gè)界面的動(dòng)效節(jié)奏，使界面動(dòng)效更加自然、流暢，也更加符合用戶的心理預(yù)期，從而提升用戶體驗(yàn)。
所以，想入門動(dòng)效領(lǐng)域并深耕，我認(rèn)為深入理解動(dòng)效節(jié)奏是尤為重要的，學(xué)會(huì)如何運(yùn)用動(dòng)效節(jié)奏來(lái)提升用戶體驗(yàn)，讓用戶在享受科技帶來(lái)便捷的同時(shí)，也能感受到藝術(shù)的魅力。
一、動(dòng)效設(shè)計(jì)基礎(chǔ)認(rèn)知
1. 動(dòng)效設(shè)計(jì)在用戶體驗(yàn)中的價(jià)值
動(dòng)效可以增強(qiáng)界面的可理解性，例如下圖中廣告推送，有一個(gè)手機(jī)圖標(biāo)的旋轉(zhuǎn)動(dòng)態(tài)示例，
以及多多視頻模塊中的上滑操作指引等，幫助用戶更好地理解界面功能和操作方式，從而更有效地去使用應(yīng)用。
動(dòng)效可以提升界面的可用性，例如上傳文件的操作，通過(guò)提供及時(shí)的反饋和指引，降低用戶的學(xué)習(xí)成本和操作難度。
動(dòng)效還可以增加界面的吸引力，例如購(gòu)物軟件中模擬實(shí)際鞋盒開(kāi)箱的形式，展現(xiàn)鞋品，通過(guò)生動(dòng)有趣的動(dòng)效表現(xiàn)，提升用戶的使用欲望和滿意度。
2. 簡(jiǎn)述動(dòng)效設(shè)計(jì)的基本原理與最佳實(shí)踐
提到動(dòng)效設(shè)計(jì)，了解其背后的基本概念和原則，才是賦予動(dòng)效靈魂和意義的關(guān)鍵。
這里要提到三個(gè)關(guān)鍵詞：
1）首先是時(shí)間
時(shí)間在動(dòng)效設(shè)計(jì)中扮演著至關(guān)重要的角色。它決定了動(dòng)畫的快慢、停頓和節(jié)奏，從而影響用戶的情感體驗(yàn)。
例如，一個(gè)緩慢漸入的動(dòng)畫可能傳達(dá)出優(yōu)雅、穩(wěn)重的感覺(jué)；
而一個(gè)迅速閃現(xiàn)的動(dòng)畫則可能帶來(lái)刺激、緊張的感受。
2）其次是空間
空間是指動(dòng)畫發(fā)生和存在的虛擬環(huán)境。在動(dòng)效設(shè)計(jì)中，空間的布局、層次和透視關(guān)系都至關(guān)重要。
它們不僅影響動(dòng)畫的可視性和可讀性，還影響用戶的認(rèn)知和行為。
例如，合理的空間布局可以使用戶更容易理解和操作界面元素，而不合理的布局則可能導(dǎo)致用戶的困惑和誤操作。
3）最后是構(gòu)圖
構(gòu)圖是指動(dòng)畫元素的排列組合和視覺(jué)平衡。
一個(gè)良好的構(gòu)圖可以突出重點(diǎn)、引導(dǎo)視線，并營(yíng)造出和諧、統(tǒng)一的視覺(jué)效果。
相反，一個(gè)糟糕的構(gòu)圖可能會(huì)分散用戶的注意力，甚至引發(fā)視覺(jué)疲勞。
動(dòng)效設(shè)計(jì)的目標(biāo)不僅僅是實(shí)現(xiàn)技術(shù)上的可能性，更是為了創(chuàng)造出讓用戶愉悅、滿意且易于使用的體驗(yàn)，在美感和技術(shù)要求之間尋找平衡點(diǎn)，是我認(rèn)為需要不斷練習(xí)，積累總結(jié)經(jīng)驗(yàn)的。
二、關(guān)鍵要素：動(dòng)效節(jié)奏
在動(dòng)效設(shè)計(jì)中，能讓靜態(tài)元素動(dòng)起來(lái)形成生動(dòng)流暢的動(dòng)態(tài)效果，需要用到兩大元素：關(guān)鍵幀與動(dòng)效節(jié)奏。
1. 關(guān)鍵幀
關(guān)鍵幀代表了在特定時(shí)間點(diǎn)上某個(gè)參數(shù)的值。在動(dòng)效制作過(guò)程中，通過(guò)設(shè)置關(guān)鍵幀，可以控制對(duì)象在不同時(shí)間點(diǎn)的狀態(tài)，從而形成連續(xù)的動(dòng)作。
關(guān)鍵幀就像是動(dòng)效世界里的路標(biāo)，它標(biāo)記了在動(dòng)效呈現(xiàn)中某些重要時(shí)刻物體的樣子。比如說(shuō)，我想讓一個(gè)球跳起來(lái)，那我就得告訴電腦，在開(kāi)始的時(shí)候球在地上，然后在某個(gè)瞬間球在空中最高點(diǎn)，最后又回到地面；這些重要的時(shí)刻就是關(guān)鍵幀。
關(guān)鍵幀之間的變化可以是線性的，也可以是曲線的，后者可以創(chuàng)造出更為自然和復(fù)雜的動(dòng)態(tài)效果。
2. 常見(jiàn)的四種動(dòng)效節(jié)奏形式
線性或曲線變化，統(tǒng)稱動(dòng)效節(jié)奏，是指在一定時(shí)間內(nèi)，通過(guò)一系列有規(guī)律的動(dòng)效元素的組合和排列所產(chǎn)生的節(jié)奏感。
常見(jiàn)的四種動(dòng)效節(jié)奏形式有 勻速、緩入、緩出、緩動(dòng)。
1）勻速（Linear）
勻速運(yùn)動(dòng)指的是物體在動(dòng)畫過(guò)程中速度保持不變的運(yùn)動(dòng)方式。這種節(jié)奏簡(jiǎn)單直接，沒(méi)有加速或減速的過(guò)程。
上面的小球彈跳呈現(xiàn)的效果，就是勻速運(yùn)動(dòng)，有些機(jī)械，缺乏實(shí)際場(chǎng)景中的動(dòng)感。
在AE中，默認(rèn)的菱形關(guān)鍵幀之間就是勻速運(yùn)動(dòng)，例如生活中常見(jiàn)的時(shí)鐘，上圖中鐘表秒針旋轉(zhuǎn)是平穩(wěn)、機(jī)械的，這就是一個(gè)典型的勻速運(yùn)動(dòng)。
2）緩入（Ease In）
緩入是指物體在動(dòng)畫開(kāi)始時(shí)速度較慢，隨著時(shí)間的推移逐漸加速到最大速度的運(yùn)動(dòng)方式。
一般元素離開(kāi)畫面或者物體加速階段使用，例如上圖中摩托車駛出畫面的部分、進(jìn)度條加載緩慢到快速的節(jié)奏等，它可以增加動(dòng)畫的真實(shí)感和生動(dòng)性。
在AE中，以圓球?yàn)槔瑥目罩邢侣涞倪^(guò)程，就可以使用緩入的加速曲線；
調(diào)出圖表編輯器，調(diào)節(jié)曲線弧度如圖「速度圖表」所示，使曲線開(kāi)始時(shí)平緩，越靠近出點(diǎn)速度逐漸上升，完成加速運(yùn)動(dòng)，此時(shí)結(jié)尾有些生硬。
加一個(gè)小知識(shí)點(diǎn)：曲線調(diào)節(jié)有兩種形式，一種為速度圖表，一種為值圖表；
速度圖表顧名思義，看曲線的弧度，圖中球的開(kāi)始入點(diǎn)曲線弧度較緩，結(jié)尾出點(diǎn)曲線斜度較大，則代表加速度節(jié)奏變化；
值圖表分別代表X，Y軸曲線變化，如圖中球的Y軸位置發(fā)生變化，因此對(duì)應(yīng)綠色線條的曲度變化是球體的動(dòng)效節(jié)奏變化，下落過(guò)程中加速，則區(qū)別于前半段的直線，入點(diǎn)平滑，出點(diǎn)更陡峭。
3）緩出（Ease Out）
緩出與緩入相反，是指物體在動(dòng)畫結(jié)束時(shí)速度逐漸減慢直至停止的運(yùn)動(dòng)方式，如元素入畫、人物行走至停下等，它能給人一種平滑和自然的結(jié)束感，是先快后慢的減速運(yùn)動(dòng)。
同樣以圓球?yàn)槔蚵涞睾蠓磸椀倪^(guò)程，就可以使用緩出的減速曲線；
調(diào)出圖表編輯器，調(diào)節(jié)曲線弧度如圖「速度圖表」所示，使曲線結(jié)束時(shí)平緩，調(diào)節(jié)出點(diǎn)的手柄桿，完成減速運(yùn)動(dòng)。
4）緩動(dòng)（Ease In Ease Out）
緩動(dòng)是最接近真實(shí)世界物體運(yùn)動(dòng)規(guī)律的一種方式，適用于大多數(shù)動(dòng)態(tài)場(chǎng)景，尤其是那些需要表現(xiàn)自然、流暢動(dòng)作的畫面呈現(xiàn)。
緩動(dòng)曲線結(jié)合了緩入和緩出的特點(diǎn)，物體在動(dòng)畫開(kāi)始時(shí)速度緩慢上升，中間達(dá)到最高速度，最后在結(jié)束時(shí)速度逐漸降低。
示例繼續(xù)完善小球的曲線節(jié)奏，我想讓它看起來(lái)更順滑、更有彈跳感覺(jué)，通過(guò)球的大小比例（縮放）的變化，增加模糊變化的細(xì)節(jié)，這樣球跳起來(lái)的動(dòng)作就會(huì)像真實(shí)世界里那樣，既有起跳的沖勁，又有落地的緩沖，整個(gè)過(guò)程更加生動(dòng)有趣。
在AE中，緩動(dòng)曲線沒(méi)有具體的數(shù)值，多數(shù)時(shí)候需要結(jié)合不同場(chǎng)景表達(dá)，去嘗試不同的曲度形式，通過(guò)反復(fù)預(yù)覽檢驗(yàn)，找到自己滿意、適合畫面感呈現(xiàn)的形式。
3. 刻意練習(xí)-節(jié)奏感積累
日常積累動(dòng)效節(jié)奏，我會(huì)分析電影或MG動(dòng)畫中的經(jīng)典鏡頭，比如角色走路、跑步的動(dòng)作呈現(xiàn)，元素的出入場(chǎng)變化，以及自然界中的運(yùn)動(dòng)現(xiàn)象，如樹葉飄落等。
多做分鏡腳本的拆分練習(xí)，多臨摹實(shí)踐，就可以逐漸掌握常見(jiàn)的運(yùn)動(dòng)規(guī)律，自己在做設(shè)計(jì)內(nèi)容時(shí)，也可以更清晰知道怎樣的節(jié)奏更適合當(dāng)下場(chǎng)景呈現(xiàn)。
三、結(jié)論
總的來(lái)說(shuō)，創(chuàng)造流暢體驗(yàn)對(duì)于動(dòng)效設(shè)計(jì)來(lái)說(shuō)還是很重要的，而要實(shí)現(xiàn)這一目標(biāo)，掌握并靈活運(yùn)用好動(dòng)效節(jié)奏則是必不可少的手段之一。
萬(wàn)變不離其宗，多看、多思考、多練習(xí)，通過(guò)實(shí)踐去總結(jié)復(fù)盤規(guī)律、梳理SOP流程，整理出一套適合自己記憶、使用的方法論與行動(dòng)標(biāo)準(zhǔn)，提高自己對(duì)動(dòng)態(tài)的感知，以及節(jié)奏力的把控，也能有效提升工作效率。
「想不如做，知行合一」，想讓學(xué)到的知識(shí)和技巧，生長(zhǎng)到自身，唯一要做的就是立馬行動(dòng)！在做的過(guò)程中解決一個(gè)個(gè)卡點(diǎn)，迭代出更適合自己的方法。
作者：Shirley_雪
本文由 @Shirley_雪 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(www.zhengchang8.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
