6個讓動效更高級、更耐看的設(shè)計技巧,超多案例參考!
動效是設(shè)計師的一個主要發(fā)力點,界面里加入動效,可以增加趣味性和引導(dǎo)性。從業(yè)務(wù)層面來看,設(shè)計師首先要積累這方面的技能經(jīng)驗,到了實際項目中才有發(fā)揮的空間,較大程度地給業(yè)務(wù)賦能。所以,我結(jié)合常用的界面動效場景,輸出了不少練習作品,對一些細節(jié)技巧有點感悟,和大家分享下。
大綱如下:
- 彈簧原則
- 有質(zhì)感的形變動效
- 有節(jié)奏感的緩動曲線
- 符合生活場景
- 錯位運動打造層次感
- 圖形變化,路徑重組
- 一些動效練習
彈簧原則
我們生活中的彈簧,一邊固定,另一邊用手拉伸后放開,它會經(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è)計思考
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)