2022-6-20 純純
動(dòng)效的質(zhì)感主要由時(shí)間、速率、運(yùn)動(dòng)理念、運(yùn)動(dòng)方式等來(lái)表現(xiàn)。動(dòng)效設(shè)計(jì)不僅僅只是動(dòng)而已，作為設(shè)計(jì)師需要洞察更多的動(dòng)效細(xì)節(jié)。通過(guò)對(duì)動(dòng)效細(xì)節(jié)的把控去營(yíng)造自然真實(shí)的動(dòng)態(tài)體驗(yàn)，并根據(jù)產(chǎn)品品牌特性去建立其動(dòng)效理念。
速率影響著運(yùn)動(dòng)的質(zhì)感。讓我們做一下對(duì)比實(shí)驗(yàn)，在相同時(shí)間以及運(yùn)動(dòng)效果下，只改變運(yùn)動(dòng)元素的速率曲線并觀察它們的變化。兩元素為一組，一組速率曲線較陡峭而另一組則偏平緩。通過(guò)改變速率曲線，元素在下落運(yùn)動(dòng)中所呈現(xiàn)的物體質(zhì)量也有明顯差異。運(yùn)動(dòng)曲線較陡峭且速率對(duì)比較大則會(huì)導(dǎo)致元素的質(zhì)量更重沖擊感更強(qiáng)，反之較平緩的曲線元素運(yùn)動(dòng)則較為輕盈。
時(shí)間的變化感知是較為直觀的，我們可以通過(guò)調(diào)節(jié)運(yùn)動(dòng)時(shí)間的長(zhǎng)短來(lái)表現(xiàn)物體的運(yùn)動(dòng)性格。時(shí)間越少，運(yùn)動(dòng)越快速干脆且可感知的運(yùn)動(dòng)細(xì)節(jié)更少。時(shí)間越多，則反之。
不同的運(yùn)動(dòng)理念會(huì)給物體帶來(lái)不同的質(zhì)感表現(xiàn)。舉個(gè)例子一個(gè)活潑有活力的物體在運(yùn)動(dòng)的表現(xiàn)上會(huì)較為柔軟Q彈，就需要通過(guò)回彈擠壓來(lái)體現(xiàn)自身的質(zhì)感。而運(yùn)動(dòng)理念生硬的物體，則相反。運(yùn)動(dòng)理念與產(chǎn)品品牌調(diào)性有關(guān)，根據(jù)品牌特性我們可提取一些適合的運(yùn)動(dòng)理念或在自然理念中吸取靈感，將其應(yīng)用在自身的產(chǎn)品上可以更好的體現(xiàn)品牌價(jià)值。
運(yùn)動(dòng)方式依附于運(yùn)動(dòng)理念，是產(chǎn)品運(yùn)動(dòng)質(zhì)感的一種表達(dá)方式。例如運(yùn)動(dòng)路徑是曲線還是直線？空間的景深程度是如何的？可以明確感受到空間感嗎？整體方式是基于效率還是表現(xiàn)力？在這一塊，也需要設(shè)計(jì)師根據(jù)品牌調(diào)性及產(chǎn)品屬性去作考慮。
因?yàn)檫\(yùn)動(dòng)曲線的存在，動(dòng)效才會(huì)表現(xiàn)的如此自然。設(shè)計(jì)師可以通過(guò)曲線的方式進(jìn)行運(yùn)動(dòng)速率節(jié)奏的編排，從而實(shí)現(xiàn)設(shè)計(jì)師們想表達(dá)的動(dòng)效調(diào)性。在影響運(yùn)動(dòng)質(zhì)感表達(dá)的部分速率的編排占了比較大的比重，借此機(jī)會(huì)講述下運(yùn)動(dòng)曲線的基礎(chǔ)知識(shí)幫助大家更好的理解曲線。
打開(kāi)AE關(guān)鍵幀控制面板我們可以看到有兩種曲線的表達(dá)圖示；一種為速度曲線圖表一種則為數(shù)值（屬性）曲線圖表。
速度曲線記錄的是物體運(yùn)動(dòng)每一刻的速度變化。我們來(lái)分解下它的曲線圖表，x、y軸分別表示的是時(shí)間與速度。觀察下圖的曲線則可以得出物體起始速度為0呈靜止?fàn)顟B(tài)，后續(xù)慢慢開(kāi)始加速并且速度達(dá)到頂峰；最后物體運(yùn)動(dòng)至終點(diǎn)并停下。整體圖表展示較為直觀，經(jīng)過(guò)分析我們可以得知整段運(yùn)動(dòng)其實(shí)就是我們熟知的緩動(dòng)運(yùn)動(dòng)（起點(diǎn)和終點(diǎn)慢，運(yùn)動(dòng)過(guò)程快）
對(duì)于速度曲線的編輯，設(shè)計(jì)師可以通過(guò)曲線手柄來(lái)控制運(yùn)動(dòng)節(jié)點(diǎn)的加速度。讓我們雙擊節(jié)點(diǎn)查看關(guān)鍵幀速度圖表來(lái)分析下速度曲線的基本規(guī)律。此時(shí)速度圖表顯示傳入速度（incoming Velocity）為0，影響為33%。「?jìng)魅胨俣取刮覀兛梢岳斫鉃檫\(yùn)動(dòng)起點(diǎn)的速度，而「影響」這個(gè)數(shù)值則可以理解為加速度。傳入速度需要百分之多少的加速度即可達(dá)到最高速度，數(shù)值越大即代表加速的幅度越大曲線呈現(xiàn)的陡峭程度就越陡峭。
速度編排
當(dāng)設(shè)計(jì)師們想針對(duì)物體運(yùn)動(dòng)速度做一些特殊的編排處理，使用速度曲線會(huì)更直觀一些。例如：想要模擬小球彈跳過(guò)程中的滯空感，我們只需調(diào)節(jié)小球懸空時(shí)的速度大小及加速度即可。想要達(dá)到滯空的感覺(jué)，那運(yùn)動(dòng)中程球體的速度需要大于0讓球體持續(xù)運(yùn)動(dòng)，就能達(dá)到我們想要的效果了。
表達(dá)式應(yīng)用
我們經(jīng)常會(huì)在動(dòng)畫內(nèi)使用彈性表達(dá)式，許多設(shè)計(jì)師也遇到過(guò)表達(dá)式輸入后還是沒(méi)效果的情況。其實(shí)是因?yàn)楫?dāng)前關(guān)鍵幀的速度為0而導(dǎo)致的，除表達(dá)式所設(shè)置的彈性頻率、衰減度外；速度也決定著彈性的強(qiáng)度，我們只需根據(jù)速度調(diào)節(jié)自己想要的彈性效果即可。
數(shù)值（屬性）曲線記錄的是元素屬性隨著時(shí)間的變化過(guò)程。我們也來(lái)分解下它的曲線圖表，x、y軸分別表示的是數(shù)值（當(dāng)前運(yùn)動(dòng)變化的屬性）與時(shí)間。而該曲線代表著物體運(yùn)動(dòng)速率的分布情況，也就是速度等于=物體運(yùn)動(dòng)的距離（數(shù)值）/物體運(yùn)動(dòng)距離所花的時(shí)間（時(shí)間）。可能看著公式挺簡(jiǎn)單的（初中物理）但乍一看圖表還是比較抽象，我們可以一步步的將其拆解方便大家理解它的含義。
我們先確定元素位移時(shí)間以及距離，在不添加任何緩動(dòng)插值的情況下，賦予他們最基礎(chǔ)的線形運(yùn)動(dòng)。也就是從0～1秒它的速度是呈勻速的狀態(tài)。再將整條曲線分解成平均的幾個(gè)關(guān)鍵時(shí)間點(diǎn)，記錄元素在不同時(shí)間點(diǎn)所在的位置。
根據(jù)速度公式，我們?nèi)y(cè)試下速度的變化對(duì)曲線的影響是什么？關(guān)于速度的計(jì)算公式其實(shí)我們都知道的，速度等于單位物體的位移距離除于位移所花的時(shí)間，也可以理解為圖表中的速度就是線段的斜率。
接著讓我們將其速度提升一倍，從1秒的總時(shí)長(zhǎng)提到0.5秒的時(shí)間。根據(jù)圖示我們可以觀察到當(dāng)我們將時(shí)長(zhǎng)加快時(shí)，速率線段與我們的x時(shí)間軸的角度越來(lái)越大。同理我們嘗試下將運(yùn)動(dòng)屬性數(shù)值降低一倍，我們可以觀察到此時(shí)速率線段與我們的x時(shí)間軸的角度越來(lái)越小。我們通過(guò)上述的拆解分析，可以得到一些規(guī)律。在數(shù)值曲線下，時(shí)間以及運(yùn)動(dòng)屬性數(shù)值影響著物體運(yùn)動(dòng)速度。根據(jù)曲線陡峭程度影響著運(yùn)動(dòng)速率快慢的規(guī)律，我們可以總結(jié)一個(gè)觀察曲線的技巧。曲線越緩和（貼近時(shí)間軸x）速率越慢，曲線越陡峭（貼近數(shù)值軸Y）速率則越快。
在弄明白了數(shù)值曲線的基本規(guī)律后，我們將曲線做一些處理讓他更貼合于我們的現(xiàn)實(shí)自然運(yùn)動(dòng)。模擬現(xiàn)實(shí)物體運(yùn)動(dòng)的狀態(tài)，物體剛開(kāi)始慢慢起步再到加速的過(guò)程。如下（P1）圖所示數(shù)值曲線在前半部分速率較慢，到達(dá)時(shí)間中點(diǎn)后突然增速并到達(dá)終點(diǎn)。將曲線作一定的平滑過(guò)渡處理就是我們所熟知的緩入（P2）曲線啦。
對(duì)于不同的運(yùn)動(dòng)曲線模式（速度/數(shù)值），設(shè)計(jì)師們需充分了解其曲線模式的含義。我們可以根據(jù)設(shè)計(jì)場(chǎng)景去選擇適合的曲線模式，關(guān)于場(chǎng)景還有很多，我大概羅列了部分項(xiàng)目接觸到的特定場(chǎng)景出來(lái)。主要目的是想讓大家意識(shí)到熟練的掌握兩種運(yùn)動(dòng)曲線模式的重要性，別將自己的工作方式或習(xí)慣限定太死，靈活的變通很重要。
AE動(dòng)畫中部分無(wú)具體數(shù)值單位的動(dòng)畫幀，例如（蒙版路徑），設(shè)計(jì)師們只能通過(guò)速度曲線進(jìn)行調(diào)節(jié)。
使用彈性表達(dá)式需根據(jù)速度大小去調(diào)節(jié)彈性強(qiáng)度。
在UI交互動(dòng)效的設(shè)計(jì)場(chǎng)景，數(shù)值曲線適應(yīng)于落地開(kāi)發(fā)的貝塞爾曲線插值器。
數(shù)值曲線是C4D動(dòng)畫的默認(rèn)函數(shù)曲線模式，在C4D中無(wú)法調(diào)節(jié)速度曲線。
通過(guò)上述分析我們對(duì)運(yùn)動(dòng)曲線模式的了解更進(jìn)了一步，接下來(lái)讓我們結(jié)合案例探究下不同運(yùn)動(dòng)曲線類型的含義以及應(yīng)用方式。減少大家在動(dòng)效設(shè)計(jì)過(guò)程中的公式化硬思維，提升自身對(duì)于動(dòng)效的編排能力。
緩入運(yùn)動(dòng)即加速運(yùn)動(dòng)，物體運(yùn)動(dòng)的時(shí)候都需要一個(gè)加速過(guò)程，并不會(huì)馬上達(dá)到速度的最高峰。觀察自然世界，有許多類似的運(yùn)動(dòng)案例例如彈弓以及汽車發(fā)動(dòng)等。在交互動(dòng)效中緩入運(yùn)動(dòng)會(huì)運(yùn)用在元素離開(kāi)頁(yè)面的情況。
這里的離開(kāi)指的是元素永遠(yuǎn)離開(kāi)屏幕并且無(wú)法讓我們返回的操作例如，彈窗、通知等。元素將會(huì)一直加速至消失，且告知用戶該元素不會(huì)再出現(xiàn)在頁(yè)面某個(gè)角落了。
緩出運(yùn)動(dòng)與緩入運(yùn)動(dòng)相反，描述的是元素的減速運(yùn)動(dòng)。類似于我們生活中行駛中的汽車減速的案例。我們可以利用緩出運(yùn)動(dòng)表示界面外的元素進(jìn)入屏幕，即元素以高速度進(jìn)入屏幕慢慢減速至靜止的過(guò)程。
結(jié)合自然世界的運(yùn)動(dòng)規(guī)律來(lái)看，把頁(yè)面進(jìn)入的元素比作是行駛的汽車，用戶當(dāng)作是正在斑馬線上行駛的人，將馬路作為頁(yè)面空間。若汽車采用的是緩入運(yùn)動(dòng)（加速）的話，馬路上的行人則看到的是一輛不斷加速向他行駛過(guò)來(lái)的車輛。因?yàn)閾?dān)心車輛高速的逼近導(dǎo)致剎車不及時(shí)的情況，行人便會(huì)本能的作出躲閃的反應(yīng)。其實(shí)頁(yè)面也是一個(gè)道理，進(jìn)入的元素使用加速運(yùn)動(dòng)出現(xiàn)過(guò)沖的運(yùn)動(dòng)感知會(huì)讓用戶體驗(yàn)時(shí)產(chǎn)生不適。
緩動(dòng)運(yùn)動(dòng)即我們所接觸的常規(guī)運(yùn)動(dòng)類型，在運(yùn)動(dòng)開(kāi)始慢慢加速再到運(yùn)動(dòng)結(jié)束慢慢減速的過(guò)程。該運(yùn)動(dòng)符合自然世界大多數(shù)物體的運(yùn)動(dòng)邏輯，也是頁(yè)面中經(jīng)常使用的曲線類型。
閱覽Material design動(dòng)效模塊中關(guān)于緩動(dòng)曲線的描述，適當(dāng)?shù)脑黾忧€的不對(duì)稱感可以讓運(yùn)動(dòng)更加真實(shí)。我們可以根據(jù)頁(yè)面元素運(yùn)動(dòng)邏輯和產(chǎn)品品牌特性來(lái)設(shè)定緩動(dòng)曲線。緩動(dòng)曲線適用于大部分在頁(yè)面中運(yùn)動(dòng)的元素，當(dāng)元素在頁(yè)面消失且用戶可進(jìn)行返回等操作時(shí)也應(yīng)使用緩動(dòng)曲線。
在現(xiàn)實(shí)生活中，因?yàn)樽饔昧εc反作用力的存在。皮球觸碰到地面會(huì)不斷彈起，而用手推船，船就會(huì)離開(kāi)岸邊。這就是我們所說(shuō)的彈性運(yùn)動(dòng)。彈性曲線與其它曲線（常規(guī)緩動(dòng)）有些許差異，彈性曲線由兩個(gè)值影響著它；彈性阻尼以及振動(dòng)頻率。
彈性曲線相比常規(guī)運(yùn)動(dòng)曲線更貼合自然運(yùn)動(dòng)現(xiàn)象，在運(yùn)動(dòng)的衰減過(guò)程更為真實(shí)。早在ios7中，蘋果就已經(jīng)大范圍使用該類曲線。例如APP收起展開(kāi)、預(yù)覽窗口收起等。彈性運(yùn)動(dòng)并非需要表現(xiàn)出明顯的回彈感，就算運(yùn)動(dòng)無(wú)明顯的回彈感其效果相比常規(guī)曲線實(shí)現(xiàn)的運(yùn)動(dòng)啟動(dòng)速度更快，且會(huì)有更長(zhǎng)的一段衰減距離。讓用戶更加集中于物體運(yùn)動(dòng)的衰減過(guò)程（結(jié)尾）而并非加速過(guò)程，也使得ios的使用體驗(yàn)更符合自然規(guī)律以及交互反饋更為真實(shí)流暢。
與常規(guī)的緩動(dòng)曲線不同，設(shè)計(jì)師可在Framer、Protopie、flinto、principle等軟件根據(jù)自身需求來(lái)嘗試并輸出彈性運(yùn)動(dòng)相關(guān)數(shù)值提供于開(kāi)發(fā)。對(duì)于不同（ios/安卓）平臺(tái)關(guān)于彈性數(shù)值單位的轉(zhuǎn)化，設(shè)計(jì)師們可根據(jù)MartinRgb的Animator list網(wǎng)站去模擬各端彈性運(yùn)動(dòng)的數(shù)值來(lái)對(duì)接開(kāi)發(fā)。
Animator list：http://www.martinrgb.com/Animer_Web/#
彈性運(yùn)動(dòng)可賦予物體材質(zhì)，通過(guò)彈性運(yùn)動(dòng)我們可以表達(dá)產(chǎn)品的品牌調(diào)性。例如面向低齡人群的產(chǎn)品或是娛樂(lè)類型的產(chǎn)品可在產(chǎn)品內(nèi)大范圍的使用彈性運(yùn)動(dòng)去傳遞產(chǎn)品品牌的運(yùn)動(dòng)感知。除此之外，彈性也存在不少寓意。對(duì)于ios中使用的彈性運(yùn)動(dòng)，官方說(shuō)法是基于用戶行為的獎(jiǎng)勵(lì)反饋。如果用戶滑動(dòng)操作UI元素的話，就有回彈，顯得用戶滑的力度很強(qiáng)，是一種獎(jiǎng)勵(lì)性反饋使得用戶的體驗(yàn)過(guò)程更為真實(shí)自然。彈性也具備提醒的作用，吸引用戶對(duì)元素的注意力以及提示用戶該元素可進(jìn)行逆操作等。同時(shí)切忌在頁(yè)面中使用過(guò)多的彈性運(yùn)動(dòng)，設(shè)計(jì)師們?cè)谑褂们靶枰浞值目紤]當(dāng)下頁(yè)面使用場(chǎng)景、產(chǎn)品品牌調(diào)性等因素。
現(xiàn)在越來(lái)越多的公司開(kāi)始制定自己的設(shè)計(jì)語(yǔ)言/理念，像Material Design、IBM、IOS等。對(duì)于"動(dòng)效"目前市面上大多數(shù)產(chǎn)品有著自己的動(dòng)效規(guī)范，但并沒(méi)有上升到語(yǔ)言理念的層面。規(guī)范并不等同于語(yǔ)言，語(yǔ)言應(yīng)反應(yīng)其品牌特性和靈活性。為此最后分享下個(gè)人目前對(duì)于動(dòng)效語(yǔ)言的理解，以及關(guān)于動(dòng)效語(yǔ)言制定的技巧經(jīng)驗(yàn)。
作為互聯(lián)網(wǎng)設(shè)計(jì)師的我們都熟知視覺(jué)語(yǔ)言的概念，通常我們會(huì)根據(jù)產(chǎn)品所傳遞的品牌特質(zhì)去制定產(chǎn)品的視覺(jué)語(yǔ)言。動(dòng)態(tài)語(yǔ)言也是如此，通過(guò)提煉產(chǎn)品品牌氣質(zhì)去傳遞一種感受。我們的動(dòng)態(tài)體驗(yàn)是什么樣的感受？是高效簡(jiǎn)潔的還是活潑具有表現(xiàn)力的？為此我們可以找尋對(duì)應(yīng)的品牌核心理念或是運(yùn)動(dòng)現(xiàn)象，組合提煉出符合品牌調(diào)性的理念和感受。
動(dòng)態(tài)所傳遞的感受是感性與理性的結(jié)合，在感性層面我們根據(jù)產(chǎn)品的品牌形象提煉出相應(yīng)的情感感知。而在理性層面我們需要分析產(chǎn)品受眾用戶特征以及產(chǎn)品類型業(yè)務(wù)屬性等，針對(duì)其特征進(jìn)行產(chǎn)品體驗(yàn)感知的傳遞。根據(jù)提煉結(jié)果，我們可以得出初步的動(dòng)態(tài)感受。
以提煉的動(dòng)態(tài)感受為出發(fā)點(diǎn)，理性的層面給予了我們大致的產(chǎn)品體驗(yàn)感知，為我們的動(dòng)效理念建成提供了框架。對(duì)此我們將繼續(xù)從感性層面出發(fā)，找尋可傳遞品牌感受的運(yùn)動(dòng)現(xiàn)象并加以組合提煉；將運(yùn)動(dòng)特征以及動(dòng)態(tài)感受落點(diǎn)于實(shí)際的動(dòng)態(tài)理念。這個(gè)過(guò)程與品牌設(shè)計(jì)非常相似，動(dòng)效理念的孵化應(yīng)充分考慮情感層面品牌感受的傳遞。而并非只考慮理性層面的感知，忽略其品牌氣質(zhì)的塑造。
到這一步，動(dòng)效語(yǔ)言的雛形已形成。通過(guò)感性與理性兩個(gè)層面去呈現(xiàn)「感受」，明確產(chǎn)品需給予用戶什么樣的動(dòng)態(tài)感知。后續(xù)我們可以結(jié)合動(dòng)態(tài)理念去進(jìn)行動(dòng)效原則的總結(jié)，根據(jù)原則去輸出后續(xù)的動(dòng)效規(guī)范并進(jìn)行推動(dòng)落地。
建立動(dòng)效語(yǔ)言體系，而并非只是建立規(guī)范。動(dòng)效語(yǔ)言的價(jià)值除規(guī)范統(tǒng)一及體驗(yàn)優(yōu)化外，更重要的是傳遞產(chǎn)品品牌調(diào)性。以動(dòng)效為例，用戶使用產(chǎn)品所接觸的交互動(dòng)效、視效動(dòng)效等其表現(xiàn)的動(dòng)態(tài)感知都在潛移默化的影響著產(chǎn)品的使用體驗(yàn)以及品牌形象。在目前大家都在注重設(shè)計(jì)帶來(lái)的短期商業(yè)價(jià)值的環(huán)境下，設(shè)計(jì)師也應(yīng)重視下產(chǎn)品品牌、體驗(yàn)價(jià)值的建設(shè)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.820esy.cn