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

大綱如下：

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

彈簧原則

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

比如一個元素縮放比例從 0%到 100%，我們可以看下常規(guī)運動和彈性運動的對比。

果然，模擬的彈簧彈性運動更自然舒適。

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

彈性運動離不開生活場景，一個柔軟的小球，下落碰到地面會產(chǎn)生擠壓，彈起時候會產(chǎn)生拉伸，看起來很 Q 彈。

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

個人比較喜歡形變的彈性運動，更耐看。

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

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

符合生活場景

動效結(jié)合生活場景，可以設(shè)計出一些有創(chuàng)意性的動畫。大拇指點贊，我們習慣先收起大拇指，然后再點贊；有個細節(jié)，我們手也是會跟著運動的。結(jié)合這個運動過程設(shè)計點贊動效，我們再加一點修飾來加強點贊感知，俏皮的效果就出來了。

錯位運動打造層次感

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

圖形變化，路徑重組

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

一些動效練習

動手能力對于設(shè)計師來說是很重要的，可以學(xué)習技能、創(chuàng)意點、細節(jié)處理等，才能更好更快地運用到業(yè)務(wù)上。近期我輸出了一些 UI 動效練習，也嘗試了斷線圖標的設(shè)計風格，看看吧。

總結(jié)

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

ALEI的設(shè)計思考