動(dòng)效是設(shè)計(jì)師的一個(gè)主要發(fā)力點(diǎn)，界面里加入動(dòng)效，可以增加趣味性和引導(dǎo)性。從業(yè)務(wù)層面來(lái)看，設(shè)計(jì)師首先要積累這方面的技能經(jīng)驗(yàn)，到了實(shí)際項(xiàng)目中才有發(fā)揮的空間，較大程度地給業(yè)務(wù)賦能。所以，我結(jié)合常用的界面動(dòng)效場(chǎng)景，輸出了不少練習(xí)作品，對(duì)一些細(xì)節(jié)技巧有點(diǎn)感悟，和大家分享下。

大綱如下：

1. 彈簧原則
2. 有質(zhì)感的形變動(dòng)效
3. 有節(jié)奏感的緩動(dòng)曲線
4. 符合生活場(chǎng)景
5. 錯(cuò)位運(yùn)動(dòng)打造層次感
6. 圖形變化，路徑重組
7. 一些動(dòng)效練習(xí)

彈簧原則

我們生活中的彈簧，一邊固定，另一邊用手拉伸后放開(kāi)，它會(huì)經(jīng)歷多次來(lái)回彈動(dòng)后才靜止。這種運(yùn)動(dòng)過(guò)程可以延伸到我們的動(dòng)效設(shè)計(jì)中，彈動(dòng)次數(shù)不宜太多，容易造成反饋不及時(shí)的問(wèn)題。我一般設(shè)置三次彈動(dòng)，想了些口訣：上下上、大小大。

比如一個(gè)元素縮放比例從 0%到 100%，我們可以看下常規(guī)運(yùn)動(dòng)和彈性運(yùn)動(dòng)的對(duì)比。

果然，模擬的彈簧彈性運(yùn)動(dòng)更自然舒適。

有質(zhì)感的形變動(dòng)效

彈性運(yùn)動(dòng)離不開(kāi)生活場(chǎng)景，一個(gè)柔軟的小球，下落碰到地面會(huì)產(chǎn)生擠壓，彈起時(shí)候會(huì)產(chǎn)生拉伸，看起來(lái)很 Q 彈。

當(dāng)我看到這個(gè)運(yùn)動(dòng)時(shí)，動(dòng)效思維瞬間發(fā)散開(kāi)了。比如工具欄的圖標(biāo)，常規(guī)想法可能就是元素在中心點(diǎn)從小到大進(jìn)行彈性運(yùn)動(dòng)。不過(guò)，我們利用小球形變運(yùn)動(dòng)原理，可以做出一些差異化的設(shè)計(jì)，可以看下對(duì)比。

個(gè)人比較喜歡形變的彈性運(yùn)動(dòng)，更耐看。

有節(jié)奏感的緩動(dòng)曲線

循環(huán)的加載運(yùn)動(dòng)，使用普通緩動(dòng)曲線（逐漸加快逐漸變慢）會(huì)稍微有點(diǎn)呆板，這時(shí)候我們可以使用強(qiáng)調(diào)型的緩動(dòng)曲線（快速加快逐漸變慢），可以看下對(duì)比。

符合生活場(chǎng)景

動(dòng)效結(jié)合生活場(chǎng)景，可以設(shè)計(jì)出一些有創(chuàng)意性的動(dòng)畫。大拇指點(diǎn)贊，我們習(xí)慣先收起大拇指，然后再點(diǎn)贊；有個(gè)細(xì)節(jié)，我們手也是會(huì)跟著運(yùn)動(dòng)的。結(jié)合這個(gè)運(yùn)動(dòng)過(guò)程設(shè)計(jì)點(diǎn)贊動(dòng)效，我們?cè)偌右稽c(diǎn)修飾來(lái)加強(qiáng)點(diǎn)贊感知，俏皮的效果就出來(lái)了。

錯(cuò)位運(yùn)動(dòng)打造層次感

為了豐富動(dòng)畫效果和層次感，我常用的技巧就是元素錯(cuò)位運(yùn)動(dòng)，可以是方向的錯(cuò)位，也可以是時(shí)間上的錯(cuò)位。比如金山知識(shí)庫(kù)官網(wǎng)的頭圖動(dòng)效，就有運(yùn)用到方向錯(cuò)位原則，元素朝不同方向運(yùn)動(dòng)，營(yíng)造空間縱深感。

圖形變化，路徑重組

圖形變化動(dòng)效在界面中也是可以用到的，路徑重組就是我運(yùn)用的一個(gè)方法。難點(diǎn)在于元素的連貫性和流暢性，多練就好了，看下效果。

一些動(dòng)效練習(xí)

動(dòng)手能力對(duì)于設(shè)計(jì)師來(lái)說(shuō)是很重要的，可以學(xué)習(xí)技能、創(chuàng)意點(diǎn)、細(xì)節(jié)處理等，才能更好更快地運(yùn)用到業(yè)務(wù)上。近期我輸出了一些 UI 動(dòng)效練習(xí)，也嘗試了斷線圖標(biāo)的設(shè)計(jì)風(fēng)格，看看吧。

總結(jié)

以上就是我在動(dòng)效設(shè)計(jì)中常運(yùn)用到的小技巧和相關(guān)練習(xí)作品，在思維和技能上真的成長(zhǎng)了很多。不過(guò)，動(dòng)效方面還有很大的提升空間，繼續(xù)學(xué)習(xí)去了！

ALEI的設(shè)計(jì)思考